[2951] Set ConnectionLine color to palette.selected

Bug: #2951
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>

CHANGELOG.adoc

@@ -168,6 +168,7 @@ This change makes the editing context the single source of truth for the state o
 - https://github.com/eclipse-sirius/sirius-web/issues/2904[#2904] [sirius-web] Order candidates in Representations sections in the Onboard Area.
 - https://github.com/eclipse-sirius/sirius-web/issues/2903[#2903] [sirius-web] Order New Representation modal candidates.
 - https://github.com/eclipse-sirius/sirius-web/issues/2796[#2796] [sirius-web] Flow diagram description has been converted to the view DSL.
+- https://github.com/eclipse-sirius/sirius-web/issues/2951[#2951] [diagram] Set ConnectionLine color to theme.palette.selected.
 
 == v2023.12.0
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx

@@ -42,6 +42,7 @@ import { useDiagramDelete } from './delete/useDiagramDelete';
 import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit';
 import { useDrop } from './drop/useDrop';
 import { useDropNode } from './dropNode/useDropNode';
+import { ConnectionLine } from './edge/ConnectionLine';
 import { edgeTypes } from './edge/EdgeTypes';
 import { MultiLabelEdgeData } from './edge/MultiLabelEdge.types';
 import { useInitialFitToScreen } from './fit-to-screen/useInitialFitToScreen';
@@ -199,6 +200,7 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload }: DiagramRendere
       onConnect={onConnect}
       onConnectStart={onConnectStart}
       onConnectEnd={onConnectEnd}
+      connectionLineComponent={ConnectionLine}
       onEdgesChange={handleEdgesChange}
       onEdgeUpdate={reconnectEdge}
       onPaneClick={handlePaneClick}

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx

@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { useTheme } from '@material-ui/core/styles';
+import { Theme, useTheme } from '@material-ui/core/styles';
 import { useContext } from 'react';
 import {
   Connection,
@@ -33,6 +33,13 @@ import { ConnectorContext } from './ConnectorContext';
 import { ConnectorContextValue } from './ConnectorContext.types';
 import { NodeStyleProvider, UseConnectorValue } from './useConnector.types';
 
+const tempConnectionLineStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    stroke: theme.palette.selected,
+    strokeWidth: theme.spacing(0.2),
+  };
+};
+
 export const useConnector = (): UseConnectorValue => {
   const {
     connection,
@@ -140,6 +147,7 @@ export const useConnector = (): UseConnectorValue => {
         type: 'smoothstep',
         animated: true,
         updatable: false,
+        style: tempConnectionLineStyle(theme),
         zIndex: 2002,
       };
       reactFlowInstance.setEdges((oldEdges: Edge<EdgeData>[]) => [...oldEdges, edge]);

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/ConnectionLine.tsx

@@ -0,0 +1,44 @@
+/*******************************************************************************
+ * Copyright (c) 2024 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 { Theme, useTheme } from '@material-ui/core/styles';
+import React, { memo } from 'react';
+import { ConnectionLineComponentProps, getSmoothStepPath } from 'reactflow';
+
+const connectionLineStyle = (theme: Theme): React.CSSProperties => {
+  return {
+    stroke: theme.palette.selected,
+    strokeWidth: theme.spacing(0.2),
+  };
+};
+
+export const ConnectionLine = memo(
+  ({ fromX, fromY, toX, toY, fromPosition, toPosition }: ConnectionLineComponentProps) => {
+    const theme = useTheme();
+
+    const [edgePath] = getSmoothStepPath({
+      sourceX: fromX,
+      sourceY: fromY,
+      sourcePosition: fromPosition,
+      targetX: toX,
+      targetY: toY,
+      targetPosition: toPosition,
+    });
+
+    return (
+      <g>
+        <path fill="none" className="animated" d={edgePath} style={connectionLineStyle(theme)} />
+      </g>
+    );
+  }
+);