[3533] Add a dedicated component to handle diagram subscription

Bug: #3533 Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Jun 11, 2024 · 7bcdd04 · 7bcdd04
1 parent c47ce4f
commit 7bcdd04
Show file tree

Hide file tree

Showing 16 changed files with 252 additions and 177 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -76,6 +76,8 @@
 - https://github.com/eclipse-sirius/sirius-web/issues/3595[#3595] [core] Avoid re-rendering the workbench when the selection does not really change
 - https://github.com/eclipse-sirius/sirius-web/issues/3601[#3601] [sirius-web] Extract test helper classes to sirius-web-tests
 - https://github.com/eclipse-sirius/sirius-web/issues/3597[#3597] [core] Improve the creation of `RepresentationEventProcessor`
+- https://github.com/eclipse-sirius/sirius-web/issues/3533[#3553] [diagram] Add a dedicated component to handle diagram subscription
+
 
 == v2024.5.0
 

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts
@@ -16,7 +16,6 @@ import { DiagramContextValue } from './DiagramContext.types';
 const value: DiagramContextValue = {
   editingContextId: '',
   diagramId: '',
-  refreshEventPayloadId: '',
   readOnly: false,
 };
 

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts
@@ -14,6 +14,5 @@
 export interface DiagramContextValue {
   editingContextId: string;
   diagramId: string;
-  refreshEventPayloadId: string;
   readOnly: boolean;
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
@@ -79,7 +79,7 @@ const GRID_STEP: number = 10;
 export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRendererProps) => {
   const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
   const { diagramDescription } = useDiagramDescription();
-  const { getEdges, onEdgesChange, getNodes, setEdges, setNodes } = useStore();
+  const { getEdges, onEdgesChange, getNodes, setEdges, setNodes, setRefreshEventPayloadId } = useStore();
   const nodes = getNodes();
   const edges = getEdges();
 
@@ -132,6 +132,7 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
 
       setNodes(convertedDiagram.nodes);
       setEdges(convertedDiagram.edges);
+      setRefreshEventPayloadId(diagramRefreshedEventPayload.id);
       fitToScreen();
     } else if (cause === 'refresh') {
       const previousDiagram: RawDiagram = {
@@ -145,6 +146,7 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
 
         setNodes(laidOutDiagram.nodes);
         setEdges(laidOutDiagram.edges);
+        setRefreshEventPayloadId(diagramRefreshedEventPayload.id);
         closeAllPalettes();
 
         synchronizeLayoutData(diagramRefreshedEventPayload.id, laidOutDiagram);
@@ -285,80 +287,85 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
   );
 
   return (
-    <ReactFlow
-      nodes={nodes}
-      nodeTypes={nodeTypes}
-      onNodesChange={handleNodesChange}
-      edges={edges}
-      edgeTypes={edgeTypes}
-      edgesUpdatable={!readOnly}
-      onKeyDown={onKeyDown}
-      onConnect={onConnect}
-      onConnectStart={onConnectStart}
-      onConnectEnd={onConnectEnd}
-      connectionLineComponent={ConnectionLine}
-      onEdgesChange={handleEdgesChange}
-      onEdgeUpdate={reconnectEdge}
-      onPaneClick={handlePaneClick}
-      onEdgeClick={handleDiagramElementCLick}
-      onNodeClick={handleDiagramElementCLick}
-      onMove={handleMove}
-      nodeDragThreshold={1}
-      onDrop={onDrop}
-      onDragOver={onDragOver}
-      onNodeDrag={handleNodeDrag}
-      onNodeDragStart={onNodeDragStart}
-      onNodeDragStop={onNodeDragStop}
-      onNodeMouseEnter={onNodeMouseEnter}
-      onNodeMouseLeave={onNodeMouseLeave}
-      onSelectionStart={handleSelectionStart}
-      onSelectionEnd={handleSelectionEnd}
-      maxZoom={40}
-      minZoom={0.1}
-      snapToGrid={snapToGrid}
-      snapGrid={useMemo(() => [GRID_STEP, GRID_STEP], [])}
-      connectionMode={ConnectionMode.Loose}
-      zoomOnDoubleClick={false}
-      connectionLineType={ConnectionLineType.SmoothStep}
-      ref={ref}>
-      {snapToGrid ? (
-        <>
-          <Background
-            id="small-grid"
-            style={{ backgroundColor }}
-            variant={BackgroundVariant.Lines}
-            gap={GRID_STEP}
-            color={smallGridColor}
-          />
-          <Background
-            id="large-grid"
-            variant={BackgroundVariant.Lines}
-            gap={10 * GRID_STEP}
-            offset={1}
-            color={largeGridColor}
-          />
-        </>
-      ) : (
-        <Background style={{ backgroundColor }} color={backgroundColor} />
-      )}
-      <DiagramPanel
+    <div
+      style={{ display: 'inline-block', position: 'relative' }}
+      data-representation-kind="diagram"
+      data-representation-label={diagramRefreshedEventPayload.diagram.metadata.label}>
+      <ReactFlow
+        nodes={nodes}
+        nodeTypes={nodeTypes}
+        onNodesChange={handleNodesChange}
+        edges={edges}
+        edgeTypes={edgeTypes}
+        edgesUpdatable={!readOnly}
+        onKeyDown={onKeyDown}
+        onConnect={onConnect}
+        onConnectStart={onConnectStart}
+        onConnectEnd={onConnectEnd}
+        connectionLineComponent={ConnectionLine}
+        onEdgesChange={handleEdgesChange}
+        onEdgeUpdate={reconnectEdge}
+        onPaneClick={handlePaneClick}
+        onEdgeClick={handleDiagramElementCLick}
+        onNodeClick={handleDiagramElementCLick}
+        onMove={handleMove}
+        nodeDragThreshold={1}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onNodeDrag={handleNodeDrag}
+        onNodeDragStart={onNodeDragStart}
+        onNodeDragStop={onNodeDragStop}
+        onNodeMouseEnter={onNodeMouseEnter}
+        onNodeMouseLeave={onNodeMouseLeave}
+        onSelectionStart={handleSelectionStart}
+        onSelectionEnd={handleSelectionEnd}
+        maxZoom={40}
+        minZoom={0.1}
         snapToGrid={snapToGrid}
-        onSnapToGrid={onSnapToGrid}
-        helperLines={helperLinesEnabled}
-        onHelperLines={setHelperLinesEnabled}
-        reactFlowWrapper={ref}
-      />
-      <GroupPalette
-        x={groupPalettePosition?.x}
-        y={groupPalettePosition?.y}
-        isOpened={isGroupPaletteOpened}
-        refElementId={groupPaletteRefElementId}
-        hidePalette={hideGroupPalette}
-      />
-      <DiagramPalette diagramElementId={diagramRefreshedEventPayload.diagram.id} />
-      {diagramDescription.debug ? <DebugPanel reactFlowWrapper={ref} /> : null}
-      <ConnectorContextualMenu />
-      {helperLinesEnabled ? <HelperLines horizontal={horizontalHelperLine} vertical={verticalHelperLine} /> : null}
-    </ReactFlow>
+        snapGrid={useMemo(() => [GRID_STEP, GRID_STEP], [])}
+        connectionMode={ConnectionMode.Loose}
+        zoomOnDoubleClick={false}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        ref={ref}>
+        {snapToGrid ? (
+          <>
+            <Background
+              id="small-grid"
+              style={{ backgroundColor }}
+              variant={BackgroundVariant.Lines}
+              gap={GRID_STEP}
+              color={smallGridColor}
+            />
+            <Background
+              id="large-grid"
+              variant={BackgroundVariant.Lines}
+              gap={10 * GRID_STEP}
+              offset={1}
+              color={largeGridColor}
+            />
+          </>
+        ) : (
+          <Background style={{ backgroundColor }} color={backgroundColor} />
+        )}
+        <DiagramPanel
+          snapToGrid={snapToGrid}
+          onSnapToGrid={onSnapToGrid}
+          helperLines={helperLinesEnabled}
+          onHelperLines={setHelperLinesEnabled}
+          reactFlowWrapper={ref}
+        />
+        <GroupPalette
+          x={groupPalettePosition?.x}
+          y={groupPalettePosition?.y}
+          isOpened={isGroupPaletteOpened}
+          refElementId={groupPaletteRefElementId}
+          hidePalette={hideGroupPalette}
+        />
+        <DiagramPalette diagramElementId={diagramRefreshedEventPayload.diagram.id} />
+        {diagramDescription.debug ? <DebugPanel reactFlowWrapper={ref} /> : null}
+        <ConnectorContextualMenu />
+        {helperLinesEnabled ? <HelperLines horizontal={horizontalHelperLine} vertical={verticalHelperLine} /> : null}
+      </ReactFlow>
+    </div>
   );
 });
diff --git a/...s/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx b/...s/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx
@@ -11,23 +11,21 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { Node, useReactFlow } from 'reactflow';
-import { useContext } from 'react';
+import { useStore } from '../../representation/useStore';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { RawDiagram } from '../layout/layout.types';
-import { UseAdjustSizeValue } from './useAdjustSize.types';
 import { useLayout } from '../layout/useLayout';
 import { useSynchronizeLayoutData } from '../layout/useSynchronizeLayoutData';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
 import { useDiagramElementPalette } from '../palette/useDiagramElementPalette';
+import { UseAdjustSizeValue } from './useAdjustSize.types';
 
 export const useAdjustSize = (): UseAdjustSizeValue => {
   const { layout } = useLayout();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { hideDiagramElementPalette } = useDiagramElementPalette();
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<NodeData, EdgeData>();
+  const { refreshEventPayloadId } = useStore();
 
   const adjustSize = (nodeId: string): void => {
     const nodes: Node<NodeData, string>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
@@ -12,11 +12,9 @@
  *******************************************************************************/
 import { LayoutOptions } from 'elkjs/lib/elk-api';
 import ELK, { ElkLabel, ElkNode } from 'elkjs/lib/elk.bundled';
-import { useContext } from 'react';
 import { Edge, Node, useReactFlow, useViewport } from 'reactflow';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { useDiagramDescription } from '../../contexts/useDiagramDescription';
+import { useStore } from '../../representation/useStore';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { ListNodeData } from '../node/ListNode.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
@@ -117,11 +115,11 @@ const computeLabels = (
 
 export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivElement | null>): UseArrangeAllValue => {
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<NodeData, EdgeData>();
+  const { refreshEventPayloadId } = useStore();
   const viewport = useViewport();
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { diagramDescription } = useDiagramDescription();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const { resolveNodeOverlap } = useOverlap();
 
   const elk = new ELK();

diff --git a/...diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts b/...diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts
@@ -10,18 +10,17 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { useCallback, useContext } from 'react';
+import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import { useCallback } from 'react';
 import { Node, XYPosition, useReactFlow } from 'reactflow';
-import { UseDistributeElementsValue } from './useDistributeElements.types';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
+import { useStore } from '../../representation/useStore';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { useSynchronizeLayoutData } from './useSynchronizeLayoutData';
+import { useOverlap } from '../overlap/useOverlap';
 import { RawDiagram } from './layout.types';
+import { UseDistributeElementsValue } from './useDistributeElements.types';
 import { useLayout } from './useLayout';
-import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { useOverlap } from '../overlap/useOverlap';
+import { useSynchronizeLayoutData } from './useSynchronizeLayoutData';
 
 function getComparePositionFn(direction: 'horizontal' | 'vertical') {
   return (node1: Node, node2: Node) => {
@@ -37,10 +36,10 @@ function getComparePositionFn(direction: 'horizontal' | 'vertical') {
 const arrangeGapBetweenElements: number = 32;
 export const useDistributeElements = (): UseDistributeElementsValue => {
   const { getNodes, getEdges, setNodes } = useReactFlow<NodeData, EdgeData>();
+  const { refreshEventPayloadId } = useStore();
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { addMessages } = useMultiToast();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const { resolveNodeOverlap } = useOverlap();
 
   const processLayoutTool = (