From 26aca9508b4f72d7a4e04da3489f46d52737d12b Mon Sep 17 00:00:00 2001 From: Baptiste Devessier Date: Wed, 22 Jan 2025 11:03:36 +0100 Subject: [PATCH] Align the workflow visualizer's nodes on the left (#9776) **This PR implements a new layout for the visualizer, but the dimensions of the nodes will change soon. I used hard-coded dimensions, like `40px`, but I'll update them when I work on fixing the nodes' design. I think we can merge this PR first and then fix the nodes' design.** https://github.com/user-attachments/assets/580fa812-ee8e-4452-b6ac-ca55ecb31759 --- .../components/WorkflowDiagramBaseStepNode.tsx | 2 ++ .../components/WorkflowDiagramCreateStepNode.tsx | 3 +++ .../workflow-diagram/utils/getOrganizedDiagram.ts | 13 +++++++++---- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx index 852aef9a2..e421d3ccd 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx @@ -76,9 +76,11 @@ const StyledSourceHandle = styled(Handle)` border: none; width: 4px; height: 4px; + left: ${({ theme }) => theme.spacing(10)}; `; export const StyledTargetHandle = styled(Handle)` + left: ${({ theme }) => theme.spacing(10)}; visibility: hidden; `; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx index ceaba1c9f..493b00d3b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx @@ -3,10 +3,13 @@ import { Handle, Position } from '@xyflow/react'; import { IconButton, IconPlus } from 'twenty-ui'; const StyledContainer = styled.div` + padding-left: ${({ theme }) => theme.spacing(6)}; padding-top: ${({ theme }) => theme.spacing(1)}; + position: relative; `; export const StyledTargetHandle = styled(Handle)` + left: ${({ theme }) => theme.spacing(10)}; visibility: hidden; `; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getOrganizedDiagram.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getOrganizedDiagram.ts index 81bb62133..1813bdaea 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getOrganizedDiagram.ts +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getOrganizedDiagram.ts @@ -7,11 +7,15 @@ export const getOrganizedDiagram = ( const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); graph.setGraph({ rankdir: 'TB' }); + const biggestNodeWidth = diagram.nodes.reduce( + (acc, node) => Math.max(acc, node.measured?.width ?? 0), + 0, + ); + diagram.edges.forEach((edge) => graph.setEdge(edge.source, edge.target)); diagram.nodes.forEach((node) => graph.setNode(node.id, { - ...node, - width: node.measured?.width ?? 0, + width: biggestNodeWidth, height: node.measured?.height ?? 0, }), ); @@ -21,10 +25,11 @@ export const getOrganizedDiagram = ( return { nodes: diagram.nodes.map((node) => { const position = graph.node(node.id); + // We are shifting the dagre node position (anchor=center center) to the top left // so it matches the React Flow node anchor point (top left). - const x = position.x - (node.measured?.width ?? 0) / 2; - const y = position.y - (node.measured?.height ?? 0) / 2; + const x = position.x - position.width / 2; + const y = position.y - position.height / 2; return { ...node, position: { x, y } }; }),