chore: 复制粘贴节点

Author: youngjuning

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

@@ -1,13 +1,23 @@
 .xflow-node-container {
   border: 2px solid #fff;
   border-radius: 14px;
-
+  position: relative;
   .react-flow__edge-path,
   .react-flow__connection-path {
     stroke: #d0d5dc;
     stroke-width: 2px;
   }
-
+  .xflow-node-actions-container {
+    cursor: pointer;
+    position: absolute;
+    top: -4px;
+    background: #ffffff;
+    transform: translate(0, -100%);
+    right: 6px;
+    padding: 0 2px;
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);
+  }
   .react-flow__handle {
     width: 30px;
     height: 30px;

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

@@ -1,6 +1,9 @@
+import { MoreOutlined } from '@ant-design/icons';
 import { Handle, Position, useReactFlow } from '@xyflow/react';
+import { Dropdown, message } from "antd";
+
 import classNames from 'classnames';
-import React, { memo, useContext, useState } from 'react';
+import React, { memo, useCallback, useContext, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
@@ -15,13 +18,15 @@ export default memo((props: any) => {
     widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
   const [isHovered, setIsHovered] = useState(false);
   const reactflow = useReactFlow();
-  const { addNodes, addEdges, mousePosition } = useStore(
+  const { addNodes, addEdges, copyNode, pasteNode, mousePosition } = useStore(
     (state: any) => ({
       nodes: state.nodes,
       edges: state.edges,
       mousePosition: state.mousePosition,
       addNodes: state.addNodes,
       addEdges: state.addEdges,
+      copyNode: state.copyNode,
+      pasteNode: state.pasteNode,
       onEdgesChange: state.onEdgesChange,
     }),
     shallow
@@ -42,15 +47,15 @@ export default memo((props: any) => {
       type: 'custom',
       data: {
         ...data,
-         title: `${title}_${uuid4()}`
+        title: `${title}_${uuid4()}`,
       },
       position: { x, y },
     };
     const newEdges = {
       id: uuid(),
       source: id,
       target: targetId,
-      ...sourceHandle && { sourceHandle }
+      ...(sourceHandle && { sourceHandle }),
     };
     addNodes(newNodes);
     addEdges(newEdges);
@@ -62,6 +67,16 @@ export default memo((props: any) => {
     targetPosition = Position.Top;
     sourcePosition = Position.Bottom;
   }
+
+  const handleCopyNode = useCallback(() => {
+    copyNode(id);
+    message.success('复制成功');
+  }, [copyNode]);
+
+  const handlePasteNode = useCallback(() => {
+    pasteNode(id)
+  }, [pasteNode]);
+
   return (
     <div
       className={classNames('xflow-node-container', {
@@ -78,6 +93,31 @@ export default memo((props: any) => {
           isConnectable={isConnectable}
         />
       )}
+      {selected && (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                label: '复制',
+                key: ' copy',
+                onClick: handleCopyNode,
+              },
+              {
+                label: '粘贴',
+                key: 'paste',
+                onClick: handlePasteNode,
+              },
+            ],
+          }}
+          trigger={['click', 'contextMenu']}
+        >
+          <div className="xflow-node-actions-container">
+          <MoreOutlined
+            style={{ transform: 'rotateZ(90deg)', fontSize: '20px' }}
+          ></MoreOutlined>
+        </div>
+        </Dropdown>
+      )}
       <NodeWidget
         id={id}
         type={type}

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

@@ -1,3 +1,4 @@
+import { generateCopyNodes, uuid } from '../utils';
 import {
   addEdge,
   applyEdgeChanges,
@@ -27,6 +28,8 @@ export type FlowState = {
   layout?: 'LR' | 'TB';
   nodes?: FlowNode[];
   edges?: Edge[];
+  copyNodes: FlowNode[];
+  copyEdges: Edge[];
   panOnDrag?: boolean;
   isAddingNode?: boolean;
   candidateNode: any;
@@ -36,8 +39,10 @@ export type FlowState = {
   onConnect: OnConnect;
   setNodes: (nodes: FlowNode[]) => void;
   setEdges: (edges: Edge[]) => void;
-  addNodes: (nodes: FlowNode[]) => void;
-  addEdges: (edges: Edge[]) => void;
+  addNodes: (nodes: FlowNode[]| FlowNode) => void;
+  addEdges: (edges: Edge[] | Edge) => void;
+  copyNode: (nodeId: string) => void;
+  pasteNode: (nodeId: string) => void;
   setLayout: (layout: 'LR' | 'TB') => void;
   setIsAddingNode: (payload: boolean) => void;
   setCandidateNode: (candidateNode: any) => void;
@@ -57,6 +62,8 @@ const createStore = (initProps?: Partial<FlowProps>) => {
       (set, get) => ({
         ...DEFAULT_PROPS,
         ...initProps,
+        copyNodes: [],
+        copyEdges: [],
         isAddingNode: false,
         candidateNode: null,
         // nodeMenus: [],
@@ -113,6 +120,28 @@ const createStore = (initProps?: Partial<FlowProps>) => {
           }
           set({ layout });
         },
+        copyNode: (nodeId) => {
+          const copyNodes = generateCopyNodes(
+            get().nodes.find((node) => node.id === nodeId),
+          );
+          set({
+            copyNodes,
+          });
+        },
+        pasteNode: (nodeId) => {
+          if (get().copyNodes.length > 0) {
+            const newEdges = {
+              id: uuid(),
+              source: nodeId,
+              target: get().copyNodes[0].id,
+            };
+            get().addNodes(get().copyNodes);
+            get().addEdges(newEdges);
+            set({
+              copyNodes: [],
+            });
+          }
+        },
       }),
       {
         // nodes 和 edges 是引用类型，所以使用深比较

packages/x-flow/src/utils/flow.ts

@@ -0,0 +1,21 @@
+import { uuid } from './';
+
+/**
+ * 获取所有子节点
+ */
+export const generateCopyNodes = (parentNode: any) => {
+  // 1、定义 childNodeIds 数组，用于存储找到的所有节点的 id，默认把 rootNode 添加到数组中
+  const childNodes: any[] = [];
+  const rootNode = {
+    id: uuid(),
+    type: parentNode.type,
+    data: {
+      ...parentNode.data,
+    },
+    position: { x: 0, y: 0 },
+    sourceId: parentNode.id,
+  };
+  childNodes.push(rootNode);
+
+  return childNodes;
+};

packages/x-flow/src/utils/index.ts

@@ -1,10 +1,11 @@
-import { version as antdVersion } from 'antd';
+// import { version as antdVersion } from 'antd';
 import { customAlphabet } from 'nanoid';
 export const uuid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 16);
 export const uuid4 = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 4);
 
 import { isMatch, some, set, get, cloneDeep, has as _has, merge, mergeWith, isUndefined, omitBy } from 'lodash-es';
 
+const antdVersion = "5.22.6"
 export const _set = set;
 export const _get = get;
 export const _cloneDeep = cloneDeep;
@@ -215,3 +216,5 @@ export function safeJsonStringify(obj: Object) {
     return null;
   }
 }
+
+export * from './flow'