From 6e26f6262d4158a8ab40c3a06be4ac9595714554 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Thu, 27 Feb 2025 13:51:58 -0500
Subject: [PATCH] bubble up delete event
---
.../components/Experiment/Workflows/CustomNode.tsx | 11 +++++++++--
.../Experiment/Workflows/WorkflowCanvas.tsx | 5 +++++
2 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/src/renderer/components/Experiment/Workflows/CustomNode.tsx b/src/renderer/components/Experiment/Workflows/CustomNode.tsx
index c6ea6114..f7c9d1b8 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 0d19f007..e6353b58 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)',
}}
--
GitLab