feat:粘贴到某一个出口

jile1997 · jile1997 · commit 65f99d4b1784 · 2024-12-31T16:42:03.000+08:00
diff --git a/packages/x-flow/src/components/CustomNode/index.tsx b/packages/x-flow/src/components/CustomNode/index.tsx
@@ -2,8 +2,10 @@ import { MoreOutlined } from '@ant-design/icons';
 import { Handle, Position, useReactFlow } from '@xyflow/react';
 import { Dropdown, message } from "antd";
 
+import { ItemType } from 'antd/es/menu/interface';
 import classNames from 'classnames';
-import React, { memo, useCallback, useContext, useState } from 'react';
+import { isFunction } from 'lodash';
+import React, { memo, useCallback, useContext, useMemo, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
@@ -14,8 +16,10 @@ import SourceHandle from './sourceHandle';
 export default memo((props: any) => {
   const { id, type, data, layout, isConnectable, selected, onClick, status } =
     props;
-  const { widgets, settingMap, globalConfig } = useContext(ConfigContext);
+  const { widgets, settingMap, globalConfig, onMenuItemClick } =
+    useContext(ConfigContext);
   const deletable = globalConfig?.edge?.deletable ?? true;
+
   const NodeWidget =
     widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
   const [isHovered, setIsHovered] = useState(false);
@@ -50,7 +54,7 @@ export default memo((props: any) => {
       type: 'custom',
       data: {
         ...data,
-        title: `${title}_${uuid4()}`
+        title: `${title}_${uuid4()}`,
       },
       position: { x, y },
     };
@@ -77,14 +81,92 @@ export default memo((props: any) => {
     message.success('复制成功');
   }, [copyNode]);
 
-  const handlePasteNode = useCallback(() => {
-    pasteNode(id)
-  }, [pasteNode]);
+  const handlePasteNode = useCallback(
+    (data?: { sourceHandle: string }) => {
+      pasteNode(id, data);
+    },
+    [pasteNode]
+  );
 
   const handleDeleteNode = useCallback(() => {
-    deleteNode(id)
+    deleteNode(id);
   }, [pasteNode]);
 
+  const itemClick = e => {
+    if (!e.key) {
+      return;
+    }
+    const sourceHandle = e.item.props?.sourcehandle;
+    if (isFunction(onMenuItemClick)) {
+      const data: Record<string, string> = {
+        key: e.key,
+        nodeId: id,
+      };
+      if (type === 'Switch' && e.key.startsWith('paste-') && sourceHandle) {
+        data['sourceHandle'] = sourceHandle;
+      }
+      onMenuItemClick(data);
+    } else {
+      if (e.key === 'copy') {
+        handleCopyNode();
+      } else if (e.key === 'paste') {
+        handlePasteNode();
+      } else if (e.key === 'delete') {
+        handleDeleteNode();
+      } else if (e.key.startsWith('paste-')) {
+        if (sourceHandle) {
+          handlePasteNode({
+            sourceHandle,
+          });
+        } else {
+          handlePasteNode();
+        }
+      }
+    }
+  };
+
+  const menuItem: ItemType[] = useMemo(() => {
+    if (type === 'Switch') {
+      let list = [];
+      if (Array.isArray(data.list)) {
+        const len = data.list.length;
+        list = data.list.map((r, i) => {
+          if (i === 0) {
+            return {
+              label: `粘贴到第${i + 1}个出口`,
+              key: 'paste-' + i,
+              index: i,
+              id: id,
+            };
+          } else {
+            return {
+              label: `粘贴到第${i + 1}个出口`,
+              key: 'paste-' + i,
+              id: id,
+              index: i,
+              sourcehandle: r._conditionId,
+            };
+          }
+        });
+      }
+      return [
+        ...list,
+        {
+          label: `粘贴到第${list.length + 1}个出口`,
+          key: 'paste-' + (list.length + 1),
+          id: id,
+          index: list.length + 1,
+          sourcehandle: 'condition_else',
+        },
+      ];
+    }
+    return [
+      {
+        label: '粘贴',
+        key: 'paste',
+      },
+    ];
+  }, [type]);
 
   // 节点状态处理
   const statusObj = transformNodeStatus(globalConfig?.nodeView?.status || []);
@@ -113,29 +195,24 @@ export default memo((props: any) => {
             items: [
               {
                 label: '复制',
-                key: ' copy',
-                onClick: handleCopyNode,
-              },
-              {
-                label: '粘贴',
-                key: 'paste',
-                onClick: handlePasteNode,
+                key: 'copy',
               },
+              ...menuItem,
               {
                 label: '删除',
                 key: 'delete',
                 danger: true,
-                onClick: handleDeleteNode,
               },
             ],
+            onClick: itemClick,
           }}
           trigger={['click', 'contextMenu']}
         >
           <div className="xflow-node-actions-container">
-          <MoreOutlined
-            style={{ transform: 'rotateZ(90deg)', fontSize: '20px' }}
-          ></MoreOutlined>
-        </div>
+            <MoreOutlined
+              style={{ transform: 'rotateZ(90deg)', fontSize: '20px' }}
+            ></MoreOutlined>
+          </div>
         </Dropdown>
       )}
       <NodeWidget
diff --git a/packages/x-flow/src/models/store.ts b/packages/x-flow/src/models/store.ts
@@ -1,3 +1,4 @@
+import { message } from 'antd';
 import { generateCopyNodes, transformNodes, uuid } from '../utils';
 import {
   addEdge,
@@ -43,7 +44,7 @@ export type FlowState = {
   addEdges: (edges: Edge[] | Edge) => void;
   deleteNode: (nodeId: string) => void;
   copyNode: (nodeId: string) => void;
-  pasteNode: (nodeId: string) => void;
+  pasteNode: (nodeId: string,data?:Record<string,string>) => void;
   setLayout: (layout: 'LR' | 'TB') => void;
   setIsAddingNode: (payload: boolean) => void;
   setCandidateNode: (candidateNode: any) => void;
@@ -129,18 +130,21 @@ const createStore = (initProps?: Partial<FlowProps>) => {
             copyNodes,
           });
         },
-        pasteNode: (nodeId) => {
+        pasteNode: (nodeId,data = {}) => {
           if (get().copyNodes.length > 0) {
             const newEdges = {
               id: uuid(),
               source: nodeId,
               target: get().copyNodes[0].id,
+              ...data
             };
             get().addNodes(get().copyNodes, false);
             get().addEdges(newEdges);
             set({
               copyNodes: [],
             });
+          }else{
+            message.warning('请先复制节点！')
           }
         },
         deleteNode: (nodeId) => {
diff --git a/packages/x-flow/src/types.ts b/packages/x-flow/src/types.ts
@@ -73,8 +73,8 @@ export interface TNodeView {
 export interface TEdge {
   // 边的配置
   hideEdgeAddBtn?: boolean; // 是否隐藏两个节点之间，连线上的增加节点按钮
-  hideEdgeDelBtn?:boolean; // 是否隐藏两个节点之间，连线上的删除节点按钮
-  deletable?:boolean // 是否允许删除线条 初始化的edges不受此项影响
+  hideEdgeDelBtn?: boolean; // 是否隐藏两个节点之间，连线上的删除节点按钮
+  deletable?: boolean; // 是否允许删除线条 初始化的edges不受此项影响
 }
 
 export interface FlowProps {
@@ -100,6 +100,12 @@ export interface FlowProps {
   };
   logPanel?: TLogPanel; // 日志面板配置
   onNodeClick?: NodeMouseHandler;
+  onMenuItemClick: (itemInfo: ItemInfo) => void;
+}
+interface ItemInfo {
+  key: 'copy' | 'paste' | 'delete' | string;
+  nodeId: string;
+  sourceHandle?: string;
 }
 
 export default FlowProps;
diff --git a/packages/x-flow/src/withProvider.tsx b/packages/x-flow/src/withProvider.tsx
@@ -29,7 +29,8 @@ export default function withProvider<T>(
       iconFontUrl,
       globalConfig,
       logPanel,
-      antdVersion,
+      onMenuItemClick,
+      antdVersion = 'V5',
       ...restProps
     } = props;
     const settingMap = useMemo(() => {
@@ -55,6 +56,7 @@ export default function withProvider<T>(
       globalConfig,
       logPanel,
       antdVersion,
+      onMenuItemClick,
       widgets: {
         ...defaultWidgets,
         ...widgets,
