From 139c235b35b2f45709b953df9c95d88a3c13cc8c Mon Sep 17 00:00:00 2001
From: satoshi toyama <satoshi.toyama@route06.co.jp>
Date: Fri, 25 Oct 2024 17:39:15 +0900
Subject: [PATCH] remove nodes

---
 .../p/[agentId]/beta-proto/graph/v2/node.ts   | 19 ++++++++++++++++++-
 .../beta-proto/react-flow-adapter/graph.tsx   | 13 +++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/(playground)/p/[agentId]/beta-proto/graph/v2/node.ts b/app/(playground)/p/[agentId]/beta-proto/graph/v2/node.ts
index ec236cb7..b3cc518d 100644
--- a/app/(playground)/p/[agentId]/beta-proto/graph/v2/node.ts
+++ b/app/(playground)/p/[agentId]/beta-proto/graph/v2/node.ts
@@ -3,6 +3,7 @@ import type { GiselleNode, GiselleNodeId } from "../../giselle-node/types";
 const v2NodeActionTypes = {
 	updateNode: "v2.updateNode",
 	add: "v2.addNode",
+	set: "v2.setNodes",
 } as const;
 type V2NodeActionType =
 	(typeof v2NodeActionTypes)[keyof typeof v2NodeActionTypes];
@@ -42,7 +43,21 @@ export function addNode({ input }: { input: AddNodeInput }): AddNodeAction {
 	};
 }
 
-export type V2NodeAction = UpdateNodeAction | AddNodeAction;
+interface SetNodesAction {
+	type: Extract<V2NodeActionType, "v2.setNodes">;
+	input: SetNodeInput;
+}
+interface SetNodeInput {
+	nodes: GiselleNode[];
+}
+export function setNodes({ input }: { input: SetNodeInput }) {
+	return {
+		type: v2NodeActionTypes.set,
+		input,
+	};
+}
+
+export type V2NodeAction = UpdateNodeAction | AddNodeAction | SetNodesAction;
 
 export function v2NodeReducer(
 	nodes: GiselleNode[],
@@ -61,6 +76,8 @@ export function v2NodeReducer(
 			});
 		case v2NodeActionTypes.add:
 			return [...nodes, action.input.node];
+		case v2NodeActionTypes.set:
+			return action.input.nodes;
 	}
 	return nodes;
 }
diff --git a/app/(playground)/p/[agentId]/beta-proto/react-flow-adapter/graph.tsx b/app/(playground)/p/[agentId]/beta-proto/react-flow-adapter/graph.tsx
index ef905b40..7eae9f7d 100644
--- a/app/(playground)/p/[agentId]/beta-proto/react-flow-adapter/graph.tsx
+++ b/app/(playground)/p/[agentId]/beta-proto/react-flow-adapter/graph.tsx
@@ -26,6 +26,7 @@ import {
 import { useGraph } from "../graph/context";
 import type { Graph } from "../graph/types";
 import { removeConnector } from "../graph/v2/composition/remove-connector";
+import { setNodes } from "../graph/v2/node";
 import { setXyFlowEdges, setXyFlowNodes } from "../graph/v2/xy-flow";
 import {
 	type ReactFlowEdge,
@@ -89,11 +90,19 @@ export const useReactFlowNodeEventHandler = () => {
 						}),
 					);
 				} else if (change.type === "remove") {
-					console.log(`remove node ${change.id}`);
+					dispatch(
+						setNodes({
+							input: {
+								nodes: state.graph.nodes.filter(
+									(node) => node.id !== change.id,
+								),
+							},
+						}),
+					);
 				}
 			});
 		},
-		[dispatch, state.graph.xyFlow.nodes],
+		[dispatch, state.graph.xyFlow.nodes, state.graph.nodes],
 	);
 	return { handleNodesChange };
 };