Fix created step position (#13621)

This PR fixes create floating step position and insert step position in
workflow run when featureFlag IS_WORKFLOW_BRANCH_ENABLED is true

## Before


https://github.com/user-attachments/assets/eecef0f5-d2b1-468d-b3c1-0755db1f8278


https://github.com/user-attachments/assets/9995c7d4-c005-4d1f-8e3b-c624d05da32d




## After



https://github.com/user-attachments/assets/c6faa1d7-0b3f-473b-bdfe-67a2e08397d8


https://github.com/user-attachments/assets/c89fed0c-2bd5-42b6-956c-c62c297e0146

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

@@ -91,6 +91,7 @@ export const WorkflowDiagramDefaultEdgeEditable = ({
     startNodeCreation({
       parentStepId: source,
       nextStepId: target,
+      position: { x: labelX, y: labelY },
     });
   };
 

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

@@ -148,6 +148,17 @@ export const WorkflowDiagramFilterEdgeEditable = ({
     });
   };
 
+  const handleAddNodeButtonClick = () => {
+    closeDropdown(dropdownId);
+    setHovered(false);
+
+    startNodeCreation({
+      parentStepId: data.stepId,
+      nextStepId: target,
+      position: { x: labelX, y: labelY },
+    });
+  };
+
   return (
     <>
       <BaseEdge
@@ -250,15 +261,7 @@ export const WorkflowDiagramFilterEdgeEditable = ({
                     <MenuItem
                       text="Add Node"
                       LeftIcon={IconPlus}
-                      onClick={() => {
-                        closeDropdown(dropdownId);
-                        setHovered(false);
-
-                        startNodeCreation({
-                          parentStepId: data.stepId,
-                          nextStepId: target,
-                        });
-                      }}
+                      onClick={handleAddNodeButtonClick}
                     />
                   </DropdownMenuItemsContainer>
                 </DropdownContent>

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

@@ -58,6 +58,14 @@ export const WorkflowDiagramFilteringDisabledEdgeEditable = ({
     nextStepId: target,
   });
 
+  const handleAddNodeButtonClick = () => {
+    startNodeCreation({
+      parentStepId: source,
+      nextStepId: target,
+      position: { x: labelX, y: labelY },
+    });
+  };
+
   return (
     <>
       <BaseEdge
@@ -83,12 +91,7 @@ export const WorkflowDiagramFilteringDisabledEdgeEditable = ({
               iconButtons={[
                 {
                   Icon: IconPlus,
-                  onClick: () => {
-                    startNodeCreation({
-                      parentStepId: source,
-                      nextStepId: target,
-                    });
-                  },
+                  onClick: handleAddNodeButtonClick,
                 },
               ]}
             />

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

@@ -12,6 +12,7 @@ import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithC
 import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
 import { useCloseRightClickMenu } from '@/workflow/workflow-diagram/hooks/useCloseRightClickMenu';
 import { useTidyUpWorkflowVersion } from '@/workflow/workflow-version/hooks/useTidyUpWorkflowVersion';
+import { useWorkflowDiagramScreenToFlowPosition } from '@/workflow/workflow-diagram/hooks/useWorkflowDiagramScreenToFlowPosition';
 
 const StyledContainer = styled.div<{ x: number; y: number }>`
   background: ${({ theme }) => theme.background.primary};
@@ -31,6 +32,9 @@ export const WorkflowDiagramRightClickCommandMenu = () => {
   const { t } = useLingui();
   const rightClickCommandMenuRef = useRef<HTMLDivElement>(null);
 
+  const { workflowDiagramScreenToFlowPosition } =
+    useWorkflowDiagramScreenToFlowPosition();
+
   const { startNodeCreation } = useStartNodeCreation();
 
   const { closeRightClickMenu } = useCloseRightClickMenu();
@@ -57,10 +61,13 @@ export const WorkflowDiagramRightClickCommandMenu = () => {
   };
 
   const addNode = () => {
+    const position = workflowDiagramScreenToFlowPosition(
+      workflowDiagramRightClickMenuPosition,
+    );
     startNodeCreation({
       parentStepId: undefined,
       nextStepId: undefined,
-      position: workflowDiagramRightClickMenuPosition,
+      position,
     });
   };
 

packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useWorkflowDiagramScreenToFlowPosition.ts

@@ -0,0 +1,29 @@
+import { useReactFlow } from '@xyflow/react';
+import { isDefined } from 'twenty-shared/utils';
+import { THEME_COMMON } from 'twenty-ui/theme';
+
+export const useWorkflowDiagramScreenToFlowPosition = () => {
+  const { screenToFlowPosition } = useReactFlow();
+
+  const workflowDiagramScreenToFlowPosition = (position?: {
+    x: number;
+    y: number;
+  }) => {
+    if (!isDefined(position)) {
+      return;
+    }
+
+    const visibleRightDrawerWidth = Number(
+      THEME_COMMON.rightDrawerWidth.replace('px', ''),
+    );
+
+    const flowPosition = screenToFlowPosition(position);
+
+    return {
+      x: flowPosition.x + visibleRightDrawerWidth / 2,
+      y: flowPosition.y,
+    };
+  };
+
+  return { workflowDiagramScreenToFlowPosition };
+};