feat: update node / edge (#38)

* feat: update node / edge * Add get Node/Edge * remove the replace Node/Edge * Update formatting * remove comment about fn not available
clarkmcc · Feb 22, 2024 · be934bb · be934bb
1 parent 33b3ea0
commit be934bb
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/lib/NodeGraphEditor.tsx b/lib/NodeGraphEditor.tsx
@@ -70,9 +70,14 @@ export type NodeGraphHandle = {
   serialize: SerializeFunc
   deserialize: DeserializeFunc
   addNode: (node: Node) => void
-  removeNode: (node: Node) => void,
-  addEdge: (edge: Edge) => void,
+  removeNode: (node: Node) => void
+  updateNode: (node: Partial<Node> & {id: string}) => void
+  updateNodeData: (nodeId: string, data: Record<string, any>) => void
+  getNode: (nodeId: string) => Node | undefined
+  addEdge: (edge: Edge) => void
   removeEdge: (edge: Edge) => void
+  updateEdge: (edge: Partial<Edge> & {id: string}) => void
+  getEdge: (edgeId: string) => Edge | undefined
 }
 
 const Flow = forwardRef<NodeGraphHandle, FlowProps>(
@@ -102,6 +107,11 @@ const Flow = forwardRef<NodeGraphHandle, FlowProps>(
     const removeNode = useGraphStore((store) => store.removeNode)
     const addEdge = useGraphStore((store) => store.addEdge)
     const removeEdge = useGraphStore((store) => store.removeEdge)
+    const updateNode = useGraphStore((store) => store.updateNode)
+    const updateEdge = useGraphStore((store) => store.updateEdge)
+    const updateNodeData = useGraphStore((store) => store.updateNodeData)
+    const getNode = useGraphStore((store) => store.getNode)
+    const getEdge = useGraphStore((store) => store.getEdge)
 
     useImperativeHandle(
       ref,
@@ -111,8 +121,13 @@ const Flow = forwardRef<NodeGraphHandle, FlowProps>(
         deserialize,
         addNode,
         removeNode,
+        getNode,
+        updateNode,
+        updateNodeData,
         addEdge,
         removeEdge,
+        updateEdge,
+        getEdge,
       }),
       [serialize],
     )

diff --git a/lib/store/store.ts b/lib/store/store.ts
@@ -44,14 +44,44 @@ export function createGraphStore({
         set({ nodes: [...get().nodes, addNodeInternals(config, node)] }),
       removeNode: (node: string | Node | Graph.Node) => {
         const id = typeof node === 'string' ? node : node.id
-        set({ nodes: nodes.filter((item) => item.id !== id) })
+        set({ nodes: get().nodes.filter((item) => item.id !== id) })
       },
+      updateNode: (node: Partial<Node | Graph.Node> & { id: string }) => {
+        set({
+          nodes: get().nodes.map((item) =>
+            item.id === node.id
+              ? { ...item, ...node, data: { ...item.data, ...node.data } }
+              : item,
+          ),
+        })
+      },
+      updateNodeData: (nodeId: string, data: Record<string, any>) => {
+        set({
+          nodes: get().nodes.map((item) =>
+            item.id === nodeId
+              ? { ...item, data: { ...item.data, ...data } }
+              : item,
+          ),
+        })
+      },
+      getNode: (nodeId: string) =>
+        get().nodes.find((item) => item.id === nodeId),
+
       addEdge: (edge: Edge | Graph.Edge) =>
         set({ edges: [...get().edges, edge] }),
       removeEdge: (edge: string | Edge | Graph.Edge) => {
         const id = typeof edge === 'string' ? edge : edge.id
-        set({ edges: edges.filter((item) => item.id !== id) })
+        set({ edges: get().edges.filter((item) => item.id !== id) })
+      },
+      updateEdge: (edge: Partial<Edge | Graph.Edge> & { id: string }) => {
+        set({
+          edges: get().edges.map((item) =>
+            item.id === edge.id ? { ...item, ...edge } : item,
+          ),
+        })
       },
+      getEdge: (edgeId: string) =>
+        get().edges.find((item) => item.id === edgeId),
     })),
     shallow,
   )

diff --git a/lib/types/store.ts b/lib/types/store.ts
@@ -19,8 +19,14 @@ export type GraphStoreActions = {
 
   addNode: (node: Node | Graph.Node) => void
   removeNode: (node: string | Node | Graph.Node) => void
+  updateNode: (node: Partial<Node | Graph.Node> & { id: string }) => void
+  updateNodeData: (nodeId: string, data: Record<string, any>) => void
+  getNode: (nodeId: string) => Graph.Node | undefined
+
   addEdge: (edge: Edge | Graph.Edge) => void
   removeEdge: (edge: string | Edge | Graph.Edge) => void
+  updateEdge: (edge: Partial<Edge | Graph.Edge> & { id: string }) => void
+  getEdge: (edgeId: string) => Graph.Edge | undefined
 
   serialize: SerializeFunc
   deserialize: DeserializeFunc