diff --git a/src/renderer/components/Experiment/Workflows/CustomNode.tsx b/src/renderer/components/Experiment/Workflows/CustomNode.tsx index c6ea6114824db0717da1c2ca52b4bf782560a97b..f7c9d1b8764536646d2918fc7f202fd770659d86 100644 --- a/src/renderer/components/Experiment/Workflows/CustomNode.tsx +++ b/src/renderer/components/Experiment/Workflows/CustomNode.tsx @@ -1,5 +1,5 @@ import { Typography } from '@mui/joy'; -import { BuiltInNode, Handle } from '@xyflow/react'; +import { BuiltInNode, Handle, useReactFlow } from '@xyflow/react'; import { NodeProps, Position } from '@xyflow/system'; import { XIcon } from 'lucide-react'; @@ -15,11 +15,18 @@ function chipColorByType(jobType: string) { } export default function memo({ + id, data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom, }: NodeProps<BuiltInNode>) { + const { deleteElements } = useReactFlow(); + + const handleDelete = () => { + deleteElements({ nodes: [{ id }] }); + }; + return ( <div className="custom-node" style={{ width: '100%' }}> <div @@ -40,7 +47,7 @@ export default function memo({ borderRadius: '50%', }} onClick={() => { - alert('delete node: ' + data?.id); + handleDelete(); }} > <XIcon size="12px" /> diff --git a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx index 0d19f007a41090421bae513b61a32dc37c03f2bb..e6353b5806b0b5df22277e74df68c1a5ffc83498 100644 --- a/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx +++ b/src/renderer/components/Experiment/Workflows/WorkflowCanvas.tsx @@ -118,6 +118,11 @@ const Flow = ({ selectedWorkflow, setNewNodeModalOpen = (x) => {} }) => { zoomOnPinch={false} zoomOnDoubleClick={false} panOnScroll={false} + onDelete={({ nodes, edges }) => { + for (const node of nodes) { + alert('delete node: ' + node?.id); + } + }} style={{ backgroundColor: 'var(--joy-palette-background-level2)', }}