From 901e9545221aa94374759e3390130cc929c6f810 Mon Sep 17 00:00:00 2001 From: Michael Charfadi Date: Thu, 18 Jan 2024 15:54:00 +0100 Subject: [PATCH] [2951] Set ConnectionLine color to palette.selected MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: https://github.com/eclipse-sirius/sirius-web/issues/2951 Signed-off-by: Michaël Charfadi --- CHANGELOG.adoc | 1 + .../src/renderer/DiagramRenderer.tsx | 2 + .../src/renderer/connector/useConnector.tsx | 10 ++++- .../src/renderer/edge/ConnectionLine.tsx | 44 +++++++++++++++++++ 4 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/ConnectionLine.tsx diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 8a6060a93f..0aad8095fe 100644 --- a/CHANGELOG.adoc +++ b/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 palette.primary (same as selected). == v2023.12.0 diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx index 815647c14f..e043164429 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx +++ b/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} diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx index 3d4287e8b0..62cb012961 100644 --- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/connector/useConnector.tsx +++ b/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[]) => [...oldEdges, edge]); diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/ConnectionLine.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/ConnectionLine.tsx new file mode 100644 index 0000000000..36835f8b69 --- /dev/null +++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/ConnectionLine.tsx @@ -0,0 +1,44 @@ +/******************************************************************************* + * Copyright (c) 2023 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 ( + + + + ); + } +);