From f48145c01bb1d209c4e63f27ba3eff00585d83d2 Mon Sep 17 00:00:00 2001 From: martmull Date: Mon, 2 Jun 2025 14:59:06 +0200 Subject: [PATCH] Fix edge x position (#12410) ## Before image ## After image --- .../components/WorkflowDiagramBaseHandle.ts | 14 ++++++++++ .../WorkflowDiagramCreateStepNode.tsx | 15 +++-------- .../components/WorkflowDiagramDefaultEdge.tsx | 7 +++-- .../WorkflowDiagramStepNodeBase.tsx | 26 +++---------------- .../constants/CreateStepNodeWidth.ts | 8 ++++++ .../constants/NodeIconLeftMargin.ts | 4 --- .../constants/NodeIconWidth.ts | 4 --- 7 files changed, 33 insertions(+), 45 deletions(-) create mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts create mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts delete mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts delete mode 100644 packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts new file mode 100644 index 000000000..79c271c49 --- /dev/null +++ b/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 }; 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 3b253d4e2..50be5747c 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 @@ -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 ( - + diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx index 80e003bf9..075ce242b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramDefaultEdge.tsx +++ b/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, }); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx index c6a5769b4..f93a6ab1b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx +++ b/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 ( {nodeType !== 'trigger' ? ( - + ) : null} @@ -226,7 +208,7 @@ export const WorkflowDiagramStepNodeBase = ({ ) : null} - + ); }; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts new file mode 100644 index 000000000..11026a62a --- /dev/null +++ b/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; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts deleted file mode 100644 index ad4ccb3a3..000000000 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconLeftMargin.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { THEME_COMMON } from 'twenty-ui/theme'; -export const NODE_ICON_LEFT_MARGIN = Number( - THEME_COMMON.spacing(2).replace('px', ''), -); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts deleted file mode 100644 index 6e87e6379..000000000 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/constants/NodeIconWidth.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { THEME_COMMON } from 'twenty-ui/theme'; -export const NODE_ICON_WIDTH = Number( - THEME_COMMON.spacing(6).replace('px', ''), -);