chore: 删除节点

Author: youngjuning

packages/x-flow/src/components/CustomNode/index.tsx

@@ -18,7 +18,7 @@ export default memo((props: any) => {
     widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
   const [isHovered, setIsHovered] = useState(false);
   const reactflow = useReactFlow();
-  const { addNodes, addEdges, copyNode, pasteNode, mousePosition } = useStore(
+  const { addNodes, addEdges, copyNode, pasteNode, deleteNode, mousePosition } = useStore(
     (state: any) => ({
       nodes: state.nodes,
       edges: state.edges,
@@ -27,6 +27,7 @@ export default memo((props: any) => {
       addEdges: state.addEdges,
       copyNode: state.copyNode,
       pasteNode: state.pasteNode,
+      deleteNode: state.deleteNode,
       onEdgesChange: state.onEdgesChange,
     }),
     shallow
@@ -77,6 +78,10 @@ export default memo((props: any) => {
     pasteNode(id)
   }, [pasteNode]);
 
+  const handleDeleteNode = useCallback(() => {
+    deleteNode(id)
+  }, [pasteNode]);
+
   return (
     <div
       className={classNames('xflow-node-container', {
@@ -107,6 +112,11 @@ export default memo((props: any) => {
                 key: 'paste',
                 onClick: handlePasteNode,
               },
+              {
+                label: '删除',
+                key: 'delete',
+                onClick: handleDeleteNode,
+              },
             ],
           }}
           trigger={['click', 'contextMenu']}

packages/x-flow/src/models/store.ts

@@ -41,6 +41,7 @@ export type FlowState = {
   setEdges: (edges: Edge[]) => void;
   addNodes: (nodes: FlowNode[]| FlowNode) => void;
   addEdges: (edges: Edge[] | Edge) => void;
+  deleteNode: (nodeId: string) => void;
   copyNode: (nodeId: string) => void;
   pasteNode: (nodeId: string) => void;
   setLayout: (layout: 'LR' | 'TB') => void;
@@ -142,6 +143,11 @@ const createStore = (initProps?: Partial<FlowProps>) => {
             });
           }
         },
+        deleteNode: (nodeId) => {
+          set({
+            nodes: get().nodes.filter((node) => node.id !== nodeId),
+          });
+        },
       }),
       {
         // nodes 和 edges 是引用类型，所以使用深比较