[2608] Only create the virtual handles in ConnectionHandles

Bug: #2608 Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
eclipse-sirius · Nov 21, 2023 · e810545 · e810545
1 parent 7d0ac8b
commit e810545
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 28 deletions.
diff --git a/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertHandles.ts b/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertHandles.ts
@@ -40,19 +40,5 @@ export const convertHandles = (gqlNode: GQLNode<GQLNodeStyle>, gqlEdges: GQLEdge
       targetHandlesCounter += 1;
     }
   });
-  connectionHandles.push({
-    id: `handle--source--${gqlNode.id}--${sourceHandlesCounter}`,
-    nodeId: gqlNode.id,
-    position: Position.Right,
-    type: 'source',
-  });
-
-  connectionHandles.push({
-    id: `handle--target--${gqlNode.id}--${targetHandlesCounter}`,
-    nodeId: gqlNode.id,
-    position: Position.Left,
-    type: 'target',
-  });
-
   return connectionHandles;
 };
diff --git a/.../frontend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionHandles.tsx b/.../frontend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionHandles.tsx
@@ -87,7 +87,7 @@ const handleStyle = (
 const edgesSelectedSelector = (state: ReactFlowState) =>
   Array.from(state.edges.values()).filter((edge) => edge.selected);
 
-export const ConnectionHandles = ({ connectionHandles }: ConnectionHandlesProps) => {
+export const ConnectionHandles = ({ nodeId, connectionHandles }: ConnectionHandlesProps) => {
   const theme = useTheme();
   const edgesSelected = useStore(edgesSelectedSelector);
   const handlesSelected: string[] = edgesSelected.flatMap((edge) => {
@@ -102,6 +102,34 @@ export const ConnectionHandles = ({ connectionHandles }: ConnectionHandlesProps)
     return !!handlesSelected.find((selectedHandle) => selectedHandle === connectionHandle.id);
   };
 
+  const rightSideVirtualHandleId = `handle--source--${nodeId}--${
+    connectionHandles.filter((connectionHandle) => connectionHandle.position === Position.Right).length + 1
+  }`;
+  const rightSideVirtualHandle = (
+    <Handle
+      id={rightSideVirtualHandleId}
+      key={rightSideVirtualHandleId}
+      type="source"
+      position={Position.Right}
+      isConnectable={false}
+      style={handleStyle(theme, Position.Right, false, true)}
+    />
+  );
+
+  const leftSideVirtualHandleId = `handle--target--${nodeId}--${
+    connectionHandles.filter((connectionHandle) => connectionHandle.position === Position.Left).length + 1
+  }`;
+  const leftSideVirtualHandle = (
+    <Handle
+      id={leftSideVirtualHandleId}
+      key={leftSideVirtualHandleId}
+      type="target"
+      position={Position.Left}
+      isConnectable={false}
+      style={handleStyle(theme, Position.Left, false, true)}
+    />
+  );
+
   return (
     <>
       {Object.values(Position).map((position) => {
@@ -110,25 +138,20 @@ export const ConnectionHandles = ({ connectionHandles }: ConnectionHandlesProps)
         );
         return (
           <div style={borderHandlesStyle(position)} key={position}>
-            {currentSideHandles.map((connectionHandle, index) => {
-              const isVirtualHandle =
-                (position === Position.Left || position === Position.Right) && index === currentSideHandles.length - 1;
+            {currentSideHandles.map((connectionHandle) => {
               return (
                 <Handle
                   id={connectionHandle.id ?? ''}
-                  style={handleStyle(
-                    theme,
-                    connectionHandle.position,
-                    isHandleSelected(connectionHandle),
-                    isVirtualHandle
-                  )}
+                  style={handleStyle(theme, connectionHandle.position, isHandleSelected(connectionHandle), false)}
                   type={connectionHandle.type}
                   position={connectionHandle.position}
                   key={connectionHandle.id}
                   isConnectable={true}
                 />
               );
             })}
+            {position === Position.Right ? rightSideVirtualHandle : null}
+            {position === Position.Left ? leftSideVirtualHandle : null}
           </div>
         );
       })}

diff --git a/...tend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionHandles.types.ts b/...tend/sirius-components-diagrams-reactflow/src/renderer/handles/ConnectionHandles.types.ts
@@ -14,6 +14,7 @@
 import { HandleProps } from 'reactflow';
 
 export interface ConnectionHandlesProps {
+  nodeId: string;
   connectionHandles: ConnectionHandle[];
 }
 

diff --git a/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx b/...es/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ImageNode.tsx
@@ -92,7 +92,7 @@ export const ImageNode = memo(({ data, id, selected }: NodeProps<ImageNodeData>)
       {selected ? <DiagramElementPalette diagramElementId={id} labelId={data.label ? data.label.id : null} /> : null}
       {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
       <ConnectionTargetHandle nodeId={id} />
-      <ConnectionHandles connectionHandles={data.connectionHandles} />
+      <ConnectionHandles nodeId={id} connectionHandles={data.connectionHandles} />
     </>
   );
 });
diff --git a/...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx b/...ges/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/ListNode.tsx
@@ -81,7 +81,7 @@ export const ListNode = memo(({ data, id, selected }: NodeProps<ListNodeData>) =
         {selected ? <DiagramElementPalette diagramElementId={id} labelId={data.label ? data.label.id : null} /> : null}
         {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
         <ConnectionTargetHandle nodeId={id} />
-        <ConnectionHandles connectionHandles={data.connectionHandles} />
+        <ConnectionHandles nodeId={id} connectionHandles={data.connectionHandles} />
       </div>
     </>
   );

diff --git a/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx b/...grams/frontend/sirius-components-diagrams-reactflow/src/renderer/node/RectangularNode.tsx
@@ -79,7 +79,7 @@ export const RectangularNode = memo(({ data, id, selected }: NodeProps<Rectangul
         {selected ? <DiagramElementPalette diagramElementId={id} labelId={data.label ? data.label.id : null} /> : null}
         {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
         <ConnectionTargetHandle nodeId={id} />
-        <ConnectionHandles connectionHandles={data.connectionHandles} />
+        <ConnectionHandles nodeId={id} connectionHandles={data.connectionHandles} />
       </div>
     </>
   );

diff --git a/packages/sirius-web/frontend/sirius-web-application/src/nodes/EllipseNode.tsx b/packages/sirius-web/frontend/sirius-web-application/src/nodes/EllipseNode.tsx
@@ -86,7 +86,7 @@ export const EllipseNode = memo(({ data, id, selected }: NodeProps<EllipseNodeDa
         {selected ? <DiagramElementPalette diagramElementId={id} labelId={data.label ? data.label.id : null} /> : null}
         {selected ? <ConnectionCreationHandles nodeId={id} /> : null}
         <ConnectionTargetHandle nodeId={id} />
-        <ConnectionHandles connectionHandles={data.connectionHandles} />
+        <ConnectionHandles nodeId={id} connectionHandles={data.connectionHandles} />
       </div>
     </>
   );