Baptiste Devessier
31f03764d6
- Increase the dimensions of the ReactFlow nodes. This allows to ditch scaling which made it hard to get the width of the nodes as they were visually scaled by 1.3. - Center the flow when the flow mounts and when the state of the right drawer opens. - Put the node type inside of the node so it doesn't overlap with the arrow - Make the edges non deletable We'll have to make a refactor so the viewport can be animated properly: https://github.com/twentyhq/twenty/issues/8387. https://github.com/user-attachments/assets/69494a32-5403-4898-be75-7fc38058e263 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { WorkflowDiagramCanvasBase } from '@/workflow/components/WorkflowDiagramCanvasBase';
|
|
import { WorkflowDiagramCanvasEditableEffect } from '@/workflow/components/WorkflowDiagramCanvasEditableEffect';
|
|
import { WorkflowDiagramCreateStepNode } from '@/workflow/components/WorkflowDiagramCreateStepNode';
|
|
import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagramEmptyTrigger';
|
|
import { WorkflowDiagramStepNodeEditable } from '@/workflow/components/WorkflowDiagramStepNodeEditable';
|
|
import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
|
|
import { WorkflowDiagram } from '@/workflow/types/WorkflowDiagram';
|
|
import { ReactFlowProvider } from '@xyflow/react';
|
|
|
|
export const WorkflowDiagramCanvasEditable = ({
|
|
diagram,
|
|
workflowWithCurrentVersion,
|
|
}: {
|
|
diagram: WorkflowDiagram;
|
|
workflowWithCurrentVersion: WorkflowWithCurrentVersion;
|
|
}) => {
|
|
return (
|
|
<ReactFlowProvider>
|
|
<WorkflowDiagramCanvasBase
|
|
key={workflowWithCurrentVersion.currentVersion.id}
|
|
diagram={diagram}
|
|
status={workflowWithCurrentVersion.currentVersion.status}
|
|
nodeTypes={{
|
|
default: WorkflowDiagramStepNodeEditable,
|
|
'create-step': WorkflowDiagramCreateStepNode,
|
|
'empty-trigger': WorkflowDiagramEmptyTrigger,
|
|
}}
|
|
>
|
|
<WorkflowDiagramCanvasEditableEffect />
|
|
</WorkflowDiagramCanvasBase>
|
|
</ReactFlowProvider>
|
|
);
|
|
};
|