Fix selected & DiagramContext

Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Feb 3, 2025 · 4875861 · 4875861
1 parent f05e66d
commit 4875861
Show file tree

Hide file tree

Showing 21 changed files with 300 additions and 185 deletions.
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,8 +16,6 @@ import { DiagramContextValue } from './DiagramContext.types';
 const value: DiagramContextValue = {
   editingContextId: '',
   diagramId: '',
-  refreshEventPayloadId: '',
-  payload: null,
   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
@@ -11,12 +11,8 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { GQLDiagramEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
-
 export interface DiagramContextValue {
   editingContextId: string;
   diagramId: string;
-  refreshEventPayloadId: string;
-  payload: GQLDiagramEventPayload | null;
   readOnly: boolean;
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.ts
@@ -0,0 +1,21 @@
+/*******************************************************************************
+ * Copyright (c) 2025 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import React from 'react';
+import { DiagramPayloadContextValue } from './DiagramPayloadContext.types';
+
+const value: DiagramPayloadContextValue = {
+  refreshEventPayloadId: '',
+  payload: null,
+};
+
+export const DiagramPayloadContext = React.createContext<DiagramPayloadContextValue>(value);
diff --git a/.../diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.types.ts b/.../diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramPayloadContext.types.ts
@@ -0,0 +1,19 @@
+/*******************************************************************************
+ * Copyright (c) 2025 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { GQLDiagramEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
+
+export interface DiagramPayloadContextValue {
+  refreshEventPayloadId: string;
+  payload: GQLDiagramEventPayload | null;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ConvertEngine.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ConvertEngine.types.ts
@@ -10,15 +10,17 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node } from '@xyflow/react';
+import { InternalNode, Node } from '@xyflow/react';
+import { NodeLookup } from '@xyflow/system';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
 import { GQLNode, GQLNodeStyle } from '../graphql/subscription/nodeFragment.types';
+import { NodeData } from '../renderer/DiagramRenderer.types';
 import { GQLDiagramDescription } from '../representation/DiagramRepresentation.types';
-
 export interface IConvertEngine {
   convertNodes(
+    nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
     gqlDiagram: GQLDiagram,
     gqlNodesToConvert: GQLNode<GQLNodeStyle>[],
     parentNode: GQLNode<GQLNodeStyle> | null,
@@ -33,6 +35,7 @@ export interface INodeConverter {
 
   handle(
     convertEngine: IConvertEngine,
+    nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
     gqlDiagram: GQLDiagram,
     gqlNode: GQLNode<GQLNodeStyle>,
     gqlEdges: GQLEdge[],

diff --git a/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/IconLabelNodeConverter.ts b/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/IconLabelNodeConverter.ts
@@ -10,7 +10,8 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from '@xyflow/react';
+import { InternalNode, Node, XYPosition } from '@xyflow/react';
+import { NodeLookup } from '@xyflow/system';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -20,7 +21,7 @@ import {
   GQLNodeStyle,
   GQLViewModifier,
 } from '../graphql/subscription/nodeFragment.types';
-import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
+import { BorderNodePosition, NodeData } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
 import { defaultHeight, defaultWidth } from '../renderer/layout/layoutParams';
 import { IconLabelNodeData } from '../renderer/node/IconsLabelNode.types';
@@ -32,6 +33,7 @@ import { convertInsideLabel, convertOutsideLabels } from './convertLabel';
 const defaultPosition: XYPosition = { x: 0, y: 0 };
 
 const toIconLabelNode = (
+  nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
   gqlDiagram: GQLDiagram,
   gqlNode: GQLNode<GQLIconLabelNodeStyle>,
   gqlParentNode: GQLNode<GQLNodeStyle> | null,
@@ -95,6 +97,7 @@ const toIconLabelNode = (
     data,
     position: defaultPosition,
     hidden: state === GQLViewModifier.Hidden,
+    selected: !!nodeLookUp.get(id)?.selected,
   };
 
   if (gqlParentNode) {
@@ -130,6 +133,7 @@ export class IconLabelNodeConverter implements INodeConverter {
 
   handle(
     _convertEngine: IConvertEngine,
+    nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
     gqlDiagram: GQLDiagram,
     gqlNode: GQLNode<GQLIconLabelNodeStyle>,
     _gqlEdges: GQLEdge[],
@@ -141,7 +145,7 @@ export class IconLabelNodeConverter implements INodeConverter {
   ) {
     const nodeDescription = nodeDescriptions.find((description) => description.id === gqlNode.descriptionId);
     if (nodeDescription) {
-      nodes.push(toIconLabelNode(gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode));
+      nodes.push(toIconLabelNode(nodeLookUp, gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode));
     }
   }
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ImageNodeConverter.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ImageNodeConverter.ts
@@ -10,12 +10,13 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from '@xyflow/react';
+import { InternalNode, Node, XYPosition } from '@xyflow/react';
+import { NodeLookup } from '@xyflow/system';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
 import { GQLImageNodeStyle, GQLNode, GQLNodeStyle, GQLViewModifier } from '../graphql/subscription/nodeFragment.types';
-import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
+import { BorderNodePosition, NodeData } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
 import { defaultHeight, defaultWidth } from '../renderer/layout/layoutParams';
 import { FreeFormNodeData } from '../renderer/node/FreeFormNode.types';
@@ -28,6 +29,7 @@ import { convertInsideLabel, convertOutsideLabels } from './convertLabel';
 const defaultPosition: XYPosition = { x: 0, y: 0 };
 
 const toImageNode = (
+  nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
   gqlDiagram: GQLDiagram,
   gqlNode: GQLNode<GQLImageNodeStyle>,
   gqlParentNode: GQLNode<GQLNodeStyle> | null,
@@ -101,6 +103,7 @@ const toImageNode = (
     data,
     position: defaultPosition,
     hidden: state === GQLViewModifier.Hidden,
+    selected: !!nodeLookUp.get(id)?.selected,
   };
 
   if (gqlParentNode) {
@@ -136,6 +139,7 @@ export class ImageNodeConverter implements INodeConverter {
 
   handle(
     convertEngine: IConvertEngine,
+    nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
     gqlDiagram: GQLDiagram,
     gqlNode: GQLNode<GQLImageNodeStyle>,
     gqlEdges: GQLEdge[],
@@ -147,7 +151,7 @@ export class ImageNodeConverter implements INodeConverter {
   ) {
     const nodeDescription = nodeDescriptions.find((description) => description.id === gqlNode.descriptionId);
     if (nodeDescription) {
-      nodes.push(toImageNode(gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges));
+      nodes.push(toImageNode(nodeLookUp, gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges));
     }
 
     const borderNodeDescriptions: GQLNodeDescription[] = (nodeDescription?.borderNodeDescriptionIds ?? []).flatMap(
@@ -160,6 +164,7 @@ export class ImageNodeConverter implements INodeConverter {
     );
 
     convertEngine.convertNodes(
+      nodeLookUp,
       gqlDiagram,
       gqlNode.borderNodes ?? [],
       gqlNode,
@@ -168,6 +173,7 @@ export class ImageNodeConverter implements INodeConverter {
       borderNodeDescriptions
     );
     convertEngine.convertNodes(
+      nodeLookUp,
       gqlDiagram,
       gqlNode.childNodes ?? [],
       gqlNode,

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ListNodeConverter.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/converter/ListNodeConverter.ts
@@ -10,7 +10,8 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from '@xyflow/react';
+import { InternalNode, Node, XYPosition } from '@xyflow/react';
+import { NodeLookup } from '@xyflow/system';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -33,6 +34,7 @@ import { convertInsideLabel, convertOutsideLabels } from './convertLabel';
 const defaultPosition: XYPosition = { x: 0, y: 0 };
 
 const toListNode = (
+  nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
   gqlDiagram: GQLDiagram,
   gqlNode: GQLNode<GQLRectangularNodeStyle>,
   gqlParentNode: GQLNode<GQLNodeStyle> | null,
@@ -116,6 +118,7 @@ const toListNode = (
     data,
     position: defaultPosition,
     hidden: state === GQLViewModifier.Hidden,
+    selected: !!nodeLookUp.get(id)?.selected,
   };
 
   if (gqlParentNode) {
@@ -177,6 +180,7 @@ export class ListNodeConverter implements INodeConverter {
 
   handle(
     convertEngine: IConvertEngine,
+    nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
     gqlDiagram: GQLDiagram,
     gqlNode: GQLNode<GQLRectangularNodeStyle>,
     gqlEdges: GQLEdge[],
@@ -188,7 +192,7 @@ export class ListNodeConverter implements INodeConverter {
   ) {
     const nodeDescription = nodeDescriptions.find((description) => description.id === gqlNode.descriptionId);
     if (nodeDescription) {
-      nodes.push(toListNode(gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges));
+      nodes.push(toListNode(nodeLookUp, gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges));
     }
 
     const borderNodeDescriptions: GQLNodeDescription[] = (nodeDescription?.borderNodeDescriptionIds ?? []).flatMap(
@@ -201,6 +205,7 @@ export class ListNodeConverter implements INodeConverter {
     );
 
     convertEngine.convertNodes(
+      nodeLookUp,
       gqlDiagram,
       gqlNode.borderNodes ?? [],
       gqlNode,
@@ -209,6 +214,7 @@ export class ListNodeConverter implements INodeConverter {
       borderNodeDescriptions
     );
     convertEngine.convertNodes(
+      nodeLookUp,
       gqlDiagram,
       gqlNode.childNodes ?? [],
       gqlNode,

diff --git a/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/RectangleNodeConverter.ts b/...ages/diagrams/frontend/sirius-components-diagrams/src/converter/RectangleNodeConverter.ts
@@ -10,7 +10,8 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Node, XYPosition } from '@xyflow/react';
+import { InternalNode, Node, XYPosition } from '@xyflow/react';
+import { NodeLookup } from '@xyflow/system';
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
 import { GQLDiagram, GQLNodeLayoutData } from '../graphql/subscription/diagramFragment.types';
 import { GQLEdge } from '../graphql/subscription/edgeFragment.types';
@@ -20,7 +21,7 @@ import {
   GQLRectangularNodeStyle,
   GQLViewModifier,
 } from '../graphql/subscription/nodeFragment.types';
-import { BorderNodePosition } from '../renderer/DiagramRenderer.types';
+import { BorderNodePosition, NodeData } from '../renderer/DiagramRenderer.types';
 import { ConnectionHandle } from '../renderer/handles/ConnectionHandles.types';
 import { defaultHeight, defaultWidth } from '../renderer/layout/layoutParams';
 import { FreeFormNodeData } from '../renderer/node/FreeFormNode.types';
@@ -33,6 +34,7 @@ import { convertInsideLabel, convertOutsideLabels } from './convertLabel';
 const defaultPosition: XYPosition = { x: 0, y: 0 };
 
 const toRectangularNode = (
+  nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
   gqlDiagram: GQLDiagram,
   gqlNode: GQLNode<GQLRectangularNodeStyle>,
   gqlParentNode: GQLNode<GQLNodeStyle> | null,
@@ -108,6 +110,7 @@ const toRectangularNode = (
     data,
     position: defaultPosition,
     hidden: state === GQLViewModifier.Hidden,
+    selected: !!nodeLookUp.get(id)?.selected,
   };
 
   if (gqlParentNode) {
@@ -143,6 +146,7 @@ export class RectangleNodeConverter implements INodeConverter {
 
   handle(
     convertEngine: IConvertEngine,
+    nodeLookUp: NodeLookup<InternalNode<Node<NodeData>>>,
     gqlDiagram: GQLDiagram,
     gqlNode: GQLNode<GQLRectangularNodeStyle>,
     gqlEdges: GQLEdge[],
@@ -154,7 +158,9 @@ export class RectangleNodeConverter implements INodeConverter {
   ) {
     const nodeDescription = nodeDescriptions.find((description) => description.id === gqlNode.descriptionId);
     if (nodeDescription) {
-      nodes.push(toRectangularNode(gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges));
+      nodes.push(
+        toRectangularNode(nodeLookUp, gqlDiagram, gqlNode, parentNode, nodeDescription, isBorderNode, gqlEdges)
+      );
     }
 
     const borderNodeDescriptions: GQLNodeDescription[] = (nodeDescription?.borderNodeDescriptionIds ?? []).flatMap(
@@ -167,6 +173,7 @@ export class RectangleNodeConverter implements INodeConverter {
     );
 
     convertEngine.convertNodes(
+      nodeLookUp,
       gqlDiagram,
       gqlNode.borderNodes ?? [],
       gqlNode,
@@ -175,6 +182,7 @@ export class RectangleNodeConverter implements INodeConverter {
       borderNodeDescriptions
     );
     convertEngine.convertNodes(
+      nodeLookUp,
       gqlDiagram,
       gqlNode.childNodes ?? [],
       gqlNode,