feat:新增节点名称改为title+4位随机数

Author: 昔梦

packages/x-flow/src/XFlow.tsx

@@ -10,7 +10,7 @@ import { useEventListener, useMemoizedFn } from 'ahooks';
 import produce, { setAutoFreeze } from 'immer';
 import { debounce } from 'lodash';
 import type { FC } from 'react';
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import CandidateNode from './components/CandidateNode';
 import CustomEdge from './components/CustomEdge';
 import PanelContainer from './components/PanelContainer';
@@ -21,13 +21,14 @@ import { useStore, useStoreApi } from './hooks/useStore';
 
 import Operator from './operator';
 import FlowProps from './types';
-import { uuid } from './utils';
+import { uuid, uuid4 } from './utils';
 import autoLayoutNodes from './utils/autoLayoutNodes';
 
 import { shallow } from 'zustand/shallow';
 import NodeEditor from './components/NodeEditor';
 import './index.less';
 import { useTemporalStore } from './hooks/useTemporalStore';
+import { ConfigContext } from './models/context';
 
 const CustomNode = memo(CustomNodeComponent);
 const edgeTypes = { buttonedge: memo(CustomEdge) };
@@ -73,6 +74,8 @@ const XFlow: FC<FlowProps> = memo(() => {
   );
   const { record } = useTemporalStore();
   const [activeNode, setActiveNode] = useState<any>(null);
+  const { settingMap } = useContext(ConfigContext);
+
   useEffect(() => {
     zoomTo(0.8);
     setAutoFreeze(false);
@@ -81,6 +84,7 @@ const XFlow: FC<FlowProps> = memo(() => {
     };
   }, []);
 
+
   useEventListener('keydown', e => {
     if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
@@ -123,10 +127,14 @@ const XFlow: FC<FlowProps> = memo(() => {
 
   // 新增节点
   const handleAddNode = (data: any) => {
+    const title = settingMap[data?._nodeType]?.title || data?._nodeType;
     const newNode = {
       id: uuid(),
       type: 'custom',
-      data,
+      data: {
+        ...data,
+        title: `${title}_${uuid4()}`
+      },
       position: {
         x: 0,
         y: 0,

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

@@ -9,14 +9,23 @@ import produce from 'immer';
 import React, { memo, useContext, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
-import { uuid } from '../../utils';
+import { ConfigContext } from '../../models/context';
+import { uuid, uuid4 } from '../../utils';
 import NodeSelectPopover from '../NodesPopover';
 import './index.less';
-import { ConfigContext } from '../../models/context';
 
 export default memo((edge: any) => {
-  const { id, selected, sourceX, sourceY, targetX, targetY, source, target, sourceHandleId } =
-    edge;
+  const {
+    id,
+    selected,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    source,
+    target,
+    sourceHandleId,
+  } = edge;
 
   const reactflow = useReactFlow();
   const [isHovered, setIsHovered] = useState(false);
@@ -27,7 +36,7 @@ export default memo((edge: any) => {
     targetY,
   });
 
-  const { globalConfig } = useContext(ConfigContext);
+  const { globalConfig, settingMap } = useContext(ConfigContext);
   const hideEdgeAddBtn = globalConfig?.edge?.hideEdgeAddBtn ?? false;
 
   const {
@@ -49,7 +58,7 @@ export default memo((edge: any) => {
       onEdgesChange: state.onEdgesChange,
     }),
     shallow
-    );
+  );
 
   const handleAddNode = (data: any) => {
     const { screenToFlowPosition } = reactflow;
@@ -59,11 +68,16 @@ export default memo((edge: any) => {
     });
 
     const targetId = uuid();
+    const title = settingMap[data?._nodeType]?.title || data?._nodeType;
+
     const newNodes = produce(nodes, (draft: any) => {
       draft.push({
         id: targetId,
         type: 'custom',
-        data,
+        data: {
+          ...data,
+          title: `${title}_${uuid4()}`,
+        },
         position: { x, y },
       });
     });
@@ -75,7 +89,7 @@ export default memo((edge: any) => {
             id: uuid(),
             source,
             target: targetId,
-            ...sourceHandleId && { sourceHandle: sourceHandleId }
+            ...(sourceHandleId && { sourceHandle: sourceHandleId }),
           },
           {
             id: uuid(),
@@ -127,13 +141,16 @@ export default memo((edge: any) => {
                   >
                     <CloseOutlined style={{ color: '#fff', fontSize: 10 }} />
                   </div>
-                  {
-                    !hideEdgeAddBtn && <NodeSelectPopover placement="right" addNode={handleAddNode}>
+                  {!hideEdgeAddBtn && (
+                    <NodeSelectPopover
+                      placement="right"
+                      addNode={handleAddNode}
+                    >
                       <div className="line-icon-box">
                         <PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
                       </div>
                     </NodeSelectPopover>
-                  }
+                  )}
                 </div>
               </div>
             </EdgeLabelRenderer>

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

@@ -4,7 +4,7 @@ import React, { memo, useContext, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
-import { capitalize, uuid } from '../../utils';
+import { capitalize, uuid, uuid4 } from '../../utils';
 import './index.less';
 import SourceHandle from './sourceHandle';
 
@@ -28,18 +28,22 @@ export default memo((props: any) => {
   );
   const isSwitchNode = type === 'Switch' || type === 'Parallel'; // 判断是否为条件节点/并行节点
   // 增加节点并进行联系
-  const handleAddNode = (data: any, sourceHandle?:string) => {
+  const handleAddNode = (data: any, sourceHandle?: string) => {
     const { screenToFlowPosition } = reactflow;
     const { x, y } = screenToFlowPosition({
       x: mousePosition.pageX + 100,
       y: mousePosition.pageY + 100,
     });
     const targetId = uuid();
+    const title = settingMap[data?._nodeType]?.title || data?._nodeType;
 
     const newNodes = {
       id: targetId,
       type: 'custom',
-      data,
+      data: {
+        ...data,
+         title: `${title}_${uuid4()}`
+      },
       position: { x, y },
     };
     const newEdges = {

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

@@ -1,6 +1,7 @@
 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';