Fix edge x position (#12410)

## Before
<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/59014e1f-8cf1-4a38-8cf7-675104fc8f3d"
/>

## After
<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/93da4dbb-d0ed-417c-86f7-970a4e9858a4"
/>

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { Handle } from '@xyflow/react';
+import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx';
+import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx';
+import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
+
+export const StyledHandle = styled(Handle)`
+  height: ${NODE_HANDLE_HEIGHT_PX}px;
+  width: ${NODE_HANDLE_WIDTH_PX}px;
+  left: ${CREATE_STEP_NODE_WIDTH}px;
+  visibility: hidden;
+`;
+
+export { StyledHandle as WorkflowDiagramBaseHandle };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx

@@ -1,27 +1,20 @@
-import { StyledHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase';
-import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
-import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/NodeIconLeftMargin';
-import { NODE_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/NodeIconWidth';
 import styled from '@emotion/styled';
 import { Position } from '@xyflow/react';
 import { IconButton } from 'twenty-ui/input';
 import { IconPlus } from 'twenty-ui/display';
+import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle';
+import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
 
 const StyledContainer = styled.div`
+  left: ${CREATE_STEP_NODE_WIDTH / 2}px;
   padding-top: ${({ theme }) => theme.spacing(3)};
-  transform: translateX(-50%);
   position: relative;
-  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
-`;
-
-const StyledTargetHandle = styled(StyledHandle)`
-  visibility: hidden;
 `;
 
 export const WorkflowDiagramCreateStepNode = () => {
   return (
     <StyledContainer>
-      <StyledTargetHandle type="target" position={Position.Top} />
+      <WorkflowDiagramBaseHandle type="target" position={Position.Top} />
 
       <IconButton Icon={IconPlus} size="medium" ariaLabel="Add a step" />
     </StyledContainer>

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx

@@ -1,12 +1,11 @@
 import { useTheme } from '@emotion/react';
 import { BaseEdge, EdgeProps, getStraightPath } from '@xyflow/react';
+import { CREATE_STEP_NODE_WIDTH } from '@/workflow/workflow-diagram/constants/CreateStepNodeWidth';
 
 type WorkflowDiagramDefaultEdgeProps = EdgeProps;
 
 export const WorkflowDiagramDefaultEdge = ({
-  sourceX,
   sourceY,
-  targetX,
   targetY,
   markerStart,
   markerEnd,
@@ -14,9 +13,9 @@ export const WorkflowDiagramDefaultEdge = ({
   const theme = useTheme();
 
   const [edgePath] = getStraightPath({
-    sourceX,
+    sourceX: CREATE_STEP_NODE_WIDTH,
     sourceY,
-    targetX,
+    targetX: CREATE_STEP_NODE_WIDTH,
     targetY,
   });
 

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx

@@ -1,17 +1,14 @@
 import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
-import { NODE_HANDLE_HEIGHT_PX } from '@/workflow/workflow-diagram/constants/NodeHandleHeightPx';
-import { NODE_HANDLE_WIDTH_PX } from '@/workflow/workflow-diagram/constants/NodeHandleWidthPx';
-import { NODE_ICON_LEFT_MARGIN } from '@/workflow/workflow-diagram/constants/NodeIconLeftMargin';
-import { NODE_ICON_WIDTH } from '@/workflow/workflow-diagram/constants/NodeIconWidth';
 import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Handle, Position } from '@xyflow/react';
+import { Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { Label, OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
+import { WorkflowDiagramBaseHandle } from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle';
 
 const StyledStepNodeContainer = styled.div`
   display: flex;
@@ -164,21 +161,6 @@ const StyledStepNodeLabel = styled.div<{
   }
 `;
 
-export const StyledHandle = styled(Handle)`
-  height: ${NODE_HANDLE_HEIGHT_PX}px;
-  width: ${NODE_HANDLE_WIDTH_PX}px;
-`;
-
-const StyledSourceHandle = styled(StyledHandle)`
-  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
-  visibility: hidden;
-`;
-
-const StyledTargetHandle = styled(StyledSourceHandle)`
-  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
-  visibility: hidden;
-`;
-
 const StyledRightFloatingElementContainer = styled.div`
   display: flex;
   align-items: center;
@@ -205,7 +187,7 @@ export const WorkflowDiagramStepNodeBase = ({
   return (
     <StyledStepNodeContainer className="workflow-node-container">
       {nodeType !== 'trigger' ? (
-        <StyledTargetHandle type="target" position={Position.Top} />
+        <WorkflowDiagramBaseHandle type="target" position={Position.Top} />
       ) : null}
 
       <StyledStepNodeType variant="small" nodeVariant={variant}>
@@ -226,7 +208,7 @@ export const WorkflowDiagramStepNodeBase = ({
         ) : null}
       </StyledStepNodeInnerContainer>
 
-      <StyledSourceHandle type="source" position={Position.Bottom} />
+      <WorkflowDiagramBaseHandle type="source" position={Position.Bottom} />
     </StyledStepNodeContainer>
   );
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts

@@ -0,0 +1,8 @@
+import { NODE_BORDER_WIDTH } from '@/workflow/workflow-diagram/constants/NodeBorderWidth';
+
+const STEP_ICON_WIDTH = 24;
+
+const STEP_PADDING = 8;
+
+export const CREATE_STEP_NODE_WIDTH =
+  STEP_ICON_WIDTH + STEP_PADDING + NODE_BORDER_WIDTH;

packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts

@@ -1,4 +0,0 @@
-import { THEME_COMMON } from 'twenty-ui/theme';
-export const NODE_ICON_LEFT_MARGIN = Number(
-  THEME_COMMON.spacing(2).replace('px', ''),
-);

packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts

@@ -1,4 +0,0 @@
-import { THEME_COMMON } from 'twenty-ui/theme';
-export const NODE_ICON_WIDTH = Number(
-  THEME_COMMON.spacing(6).replace('px', ''),
-);