admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix edge x position (#12410)

Browse Source 
## 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"
/>
This commit is contained in:
martmull
2025-06-02 14:59:06 +02:00
committed by GitHub
parent 5914a89df2
commit f48145c01b
7 changed files with 33 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseHandle.ts Normal file
View File

@ -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 };

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

@ -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>

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

@ -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,
});

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

@ -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>
);
};

8
packages/twenty-front/src/modules/workflow/workflow-diagram/constants/CreateStepNodeWidth.ts Normal file
View File

@ -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;

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

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

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

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