Merge branch 'xflow' of https://github.com/alibaba/x-render into xflow

Author: 昔梦

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

@@ -1,13 +1,23 @@
 .xflow-node-container {
   border: 2px solid var(--nodeBorderColor,#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';
@@ -16,13 +19,16 @@ 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, deleteNode, 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,
+      deleteNode: state.deleteNode,
       onEdgesChange: state.onEdgesChange,
     }),
     shallow
@@ -43,7 +49,7 @@ export default memo((props: any) => {
       type: 'custom',
       data: {
         ...data,
-        title: `${title}_${uuid4()}`,
+        title: `${title}_${uuid4()}`
       },
       position: { x, y },
     };
@@ -64,6 +70,20 @@ export default memo((props: any) => {
     sourcePosition = Position.Bottom;
   }
 
+  const handleCopyNode = useCallback(() => {
+    copyNode(id);
+    message.success('复制成功');
+  }, [copyNode]);
+
+  const handlePasteNode = useCallback(() => {
+    pasteNode(id)
+  }, [pasteNode]);
+
+  const handleDeleteNode = useCallback(() => {
+    deleteNode(id)
+  }, [pasteNode]);
+
+
   // 节点状态处理
   const statusObj = transformNodeStatus(globalConfig?.nodeView?.status || []);
   const nodeBorderColor = statusObj[status]?.color;
@@ -85,6 +105,37 @@ export default memo((props: any) => {
           isConnectable={isConnectable}
         />
       )}
+      {selected && (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                label: '复制',
+                key: ' copy',
+                onClick: handleCopyNode,
+              },
+              {
+                label: '粘贴',
+                key: 'paste',
+                onClick: handlePasteNode,
+              },
+              {
+                label: '删除',
+                key: 'delete',
+                danger: true,
+                onClick: handleDeleteNode,
+              },
+            ],
+          }}
+          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,11 @@ 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;
+  deleteNode: (nodeId: string) => void;
+  copyNode: (nodeId: string) => void;
+  pasteNode: (nodeId: string) => void;
   setLayout: (layout: 'LR' | 'TB') => void;
   setIsAddingNode: (payload: boolean) => void;
   setCandidateNode: (candidateNode: any) => void;
@@ -57,6 +63,8 @@ const createStore = (initProps?: Partial<FlowProps>) => {
       (set, get) => ({
         ...DEFAULT_PROPS,
         ...initProps,
+        copyNodes: [],
+        copyEdges: [],
         isAddingNode: false,
         candidateNode: null,
         // nodeMenus: [],
@@ -113,6 +121,33 @@ 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: [],
+            });
+          }
+        },
+        deleteNode: (nodeId) => {
+          set({
+            nodes: get().nodes.filter((node) => node.id !== nodeId),
+          });
+        },
       }),
       {
         // 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,22 +1,12 @@
-import { version as antdVersion } from 'antd';
+// import { version as antdVersion } from 'antd';
 import { customAlphabet } from 'nanoid';
 import tinycolor from 'tinycolor2';
 export const uuid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 16);
 export const uuid4 = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 4);
 
-import {
-  has as _has,
-  cloneDeep,
-  get,
-  isMatch,
-  isUndefined,
-  merge,
-  mergeWith,
-  omitBy,
-  set,
-  some,
-} from 'lodash-es';
+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;
@@ -233,6 +223,8 @@ export function safeJsonStringify(obj: Object) {
   }
 }
 
+export * from './flow'
+
 // 内置节点状态
 export const NODE_STATUS = {
   success: {