fix:条件节点增加_conditionId+完善条件节点API

昔梦 · 昔梦 · commit 61363a07659b · 2024-12-24T14:42:50.000+08:00
diff --git a/docs/xflow/demo/switchNode/index.tsx b/docs/xflow/demo/switchNode/index.tsx
@@ -1,67 +1,148 @@
 import XFlow from '@xrenders/xflow';
 import settings from './setting';
+import React from 'react';
 
 export default () => {
   const nodes = [
     {
+      id: 'hwqfyj734kgwljvt',
       type: 'Start',
-      id: '1',
-      position: { x: -130, y: 290 },
+      position: {
+        x: -159.0597703862493,
+        y: 323.4293111587479,
+      },
     },
     {
+      id: 'kshd2hp4vqm8ww19',
       type: 'Switch',
-      id: '2',
-      position: { x: 171.25, y: 218.75 },
-      data: { list: [{ value: '条件1' }] },
+      position: {
+        x: 180.79626287562883,
+        y: 209.9170981759363,
+      },
+      data: {
+        list: [
+          {
+            _conditionId: 'condition_1nmzbhnbtv1se6sd', // 对应的 sourceHandle: 'condition_1nmzbhnbtv1se6sd'的边
+            value: '条件1',
+          },
+          {
+            value: '条件2',
+            _conditionId: 'condition_enxhwfca1ebn55td', // 对应sourceHandle: 'condition_enxhwfca1ebn55td'的边
+          },
+          {
+            value: '条件3',
+            _conditionId: 'condition_z1f7b93zwbx1xycu',// 对应sourceHandle: 'condition_z1f7b93zwbx1xycu'的边
+          },
+        ],
+        desc: '',
+      },
     },
     {
-      type: 'End',
-      id: '3',
-      position: { x: 915, y: 287.5 },
+      id: 'ql61j2tdli4xage0',
+      type: 'Prompt',
+      position: {
+        x: 578.75,
+        y: 176.25,
+      },
+    },
+    {
+      id: 'fab1j735q8iow6u3',
+      type: 'knowledge',
+      position: {
+        x: 577.5,
+        y: 318.75,
+      },
     },
     {
-      id: 'g29rz9ol4ugqz8m8',
+      id: '9mc5i628mfrxdow0',
       type: 'Prompt',
-      position: { x: 525, y: 210 },
+      position: {
+        x: 603.75,
+        y: 422.5,
+      },
     },
     {
-      id: 'swqutt73ihfa9lkb',
+      id: 'xgkajbbgs8cls8r1',
       type: 'knowledge',
-      position: { x: 522.5, y: 472.5 },
+      position: {
+        x: 932.5,
+        y: 556.25,
+      },
+    },
+    {
+      id: 'anmv2kcadqxj4k63',
+      type: 'Prompt',
+      position: {
+        x: 540,
+        y: 555,
+      },
+    },
+    {
+      id: '1obmsf5g1xfsypdj',
+      type: 'End',
+      position: {
+        x: 1359.5373712437117,
+        y: 359.3804592275014,
+      },
     },
   ];
 
   const edges = [
     {
-      source: '1',
-      target: '2',
-      id: 'xy-edge__1-2',
+      id: '0lnn4hks9wnz0lnq',
+      source: 'hwqfyj734kgwljvt',
+      target: 'kshd2hp4vqm8ww19',
     },
     {
-      source: '2',
-      sourceHandle: 'id_0',
-      target: 'g29rz9ol4ugqz8m8',
-      id: 'xy-edge__2id_0-g29rz9ol4ugqz8m8',
+      id: '5s6af77jbcqvzfod',
+      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      target: 'ql61j2tdli4xage0',
+      sourceHandle: 'condition_1nmzbhnbtv1se6sd', // 对应 _conditionId为'condition_1nmzbhnbtv1se6sd'的条件
     },
-    { id: 'w6vmrun9sos4t6ds', target: 'swqutt73ihfa9lkb' },
     {
-      source: '2',
-      sourceHandle: 'id_else',
-      target: 'swqutt73ihfa9lkb',
-      id: 'xy-edge__2id_else-swqutt73ihfa9lkb',
+      id: '6tw709qgc3mtazrv',
+      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      target: 'fab1j735q8iow6u3',
+      sourceHandle: 'condition_enxhwfca1ebn55td', // 对应 _conditionId为'condition_enxhwfca1ebn55td'的条件
     },
     {
-      source: 'g29rz9ol4ugqz8m8',
-      target: '3',
-      id: 'xy-edge__g29rz9ol4ugqz8m8-3',
+      id: 'vzlvdo69ljcqegc8',
+      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      target: '9mc5i628mfrxdow0',
+      sourceHandle: 'condition_z1f7b93zwbx1xycu',// 对应 _conditionId为'condition_z1f7b93zwbx1xycu'的条件
     },
     {
-      source: 'swqutt73ihfa9lkb',
-      target: '3',
-      id: 'xy-edge__swqutt73ihfa9lkb-3',
+      id: 'j8p8fnr5au9k25pb',
+      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      target: 'anmv2kcadqxj4k63',
+      sourceHandle: 'condition_else',// condition_else 对应默认路径ELSE
+    },
+    {
+      id: '0qfpkc9vcjdb31qp',
+      source: 'anmv2kcadqxj4k63',
+      target: 'xgkajbbgs8cls8r1',
+    },
+    {
+      id: '5h05o312rfbj4559',
+      source: 'ql61j2tdli4xage0',
+      target: '1obmsf5g1xfsypdj',
+    },
+    {
+      source: 'fab1j735q8iow6u3',
+      target: '1obmsf5g1xfsypdj',
+      id: 'xy-edge__fab1j735q8iow6u3-1obmsf5g1xfsypdj',
+    },
+    {
+      source: '9mc5i628mfrxdow0',
+      target: '1obmsf5g1xfsypdj',
+      id: 'xy-edge__9mc5i628mfrxdow0-1obmsf5g1xfsypdj',
+    },
+    {
+      source: 'xgkajbbgs8cls8r1',
+      target: '1obmsf5g1xfsypdj',
+      id: 'xy-edge__xgkajbbgs8cls8r1-1obmsf5g1xfsypdj',
     },
   ];
-
   return (
     <div style={{ height: '600px' }}>
       <XFlow
diff --git a/docs/xflow/demo/switchNode/setting.tsx b/docs/xflow/demo/switchNode/setting.tsx
@@ -11,7 +11,7 @@ export default [
   {
     title: '开始',
     type: 'Start',
-    hidden: true,
+    // hidden: true,
     targetHandleHidden: true,
     icon: {
       type: 'icon-start',
@@ -80,7 +80,7 @@ export default [
   {
     title: '结束',
     type: 'End',
-    hidden: true,
+    // hidden: true,
     sourceHandleHidden: true,
     icon: {
       type: 'icon-end',
diff --git a/docs/xflow/nodeBuildIn.md b/docs/xflow/nodeBuildIn.md
@@ -9,14 +9,34 @@ group:
 # 内置节点
 
 ## 条件内置节点
-内置条件节点，可以直接设置type为`Switch`使用，条件节点的数据格式为`list:[{value:"条件1"}]`
+内置条件节点，可以直接设置type为`Switch`使用。
+
+条件节点的数据格式为`data:{list:[{value:"条件1",_conditionId:"condition_${随机数}"}]}`，`_conditionId`为边数据的`sourceHandle`，以便条件和边一一对应。
+有条件参数value(可以通过自定义条件节点配置面板更改配置参数)的放入list数组里面作为`IF或者ELIF`渲染，没有条件参数的，为默认执行路径`ELSE`,`ELSE`路径的固定`_conditionId`为`condition_else`,即边数据的`sourceHandle`必须为`condition_else`才能链接`ELSE`链接头，比如：
+```js
+ {
+      id: 'j8p8fnr5au9k25pb',
+      source: 'kshd2hp4vqm8ww19',
+      target: 'anmv2kcadqxj4k63',
+      sourceHandle: 'condition_else', // else路径的边
+ }
+```
+
+条件节点的每个连接头只能连接一个节点，不能连接多个节点，如果要更换节点，可以通过删除已连接节点或者在连接线上新增节点的方式更换目标节点。
 
 <code src="./demo/switchNode/index.tsx"></code>
 
 
 ## 自定义条件节点
  可以通过`nodeWidget`自定义节点面板的渲染，也可以通过`settingSchema`和`settingWidget`自定义在弹窗中展示的业务配置组件。
+```js
+  const customWidget = ({ data, index }) => {
+  // data：为data.list循环数据中当前条件的item    
+  // index：为data.list循环数据中当前条件的index
+  return <p style={{ wordWrap: 'break-word' }}>{data?.value}-{index}</p>;
+};
 
+```
 <code src="./demo/switchNode/customSwitchNode/index.tsx"></code>
 
 ## 并行节点
diff --git a/packages/x-flow/src/components/CustomEdge/index.tsx b/packages/x-flow/src/components/CustomEdge/index.tsx
@@ -15,7 +15,7 @@ import './index.less';
 import { ConfigContext } from '../../models/context';
 
 export default memo((edge: any) => {
-  const { id, selected, sourceX, sourceY, targetX, targetY, source, target } =
+  const { id, selected, sourceX, sourceY, targetX, targetY, source, target, sourceHandleId } =
     edge;
 
   const reactflow = useReactFlow();
@@ -75,6 +75,7 @@ export default memo((edge: any) => {
             id: uuid(),
             source,
             target: targetId,
+            ...sourceHandleId && { sourceHandle: sourceHandleId }
           },
           {
             id: uuid(),
diff --git a/packages/x-flow/src/components/CustomNode/index.tsx b/packages/x-flow/src/components/CustomNode/index.tsx
@@ -28,7 +28,7 @@ export default memo((props: any) => {
   );
   const isSwitchNode = type === 'Switch' || type === 'Parallel'; // 判断是否为条件节点/并行节点
   // 增加节点并进行联系
-  const handleAddNode = (data: any) => {
+  const handleAddNode = (data: any, sourceHandle?:string) => {
     const { screenToFlowPosition } = reactflow;
     const { x, y } = screenToFlowPosition({
       x: mousePosition.pageX + 100,
@@ -46,6 +46,7 @@ export default memo((props: any) => {
       id: uuid(),
       source: id,
       target: targetId,
+      ...sourceHandle && { sourceHandle }
     };
     addNodes(newNodes);
     addEdges(newEdges);
diff --git a/packages/x-flow/src/components/CustomNode/sourceHandle.tsx b/packages/x-flow/src/components/CustomNode/sourceHandle.tsx
@@ -47,12 +47,12 @@ export default memo((props: any) => {
       }}
       {...rest}
     >
-      {(selected || isHovered || openNodeSelectPopover) && (
+      {(selected || isHovered || openNodeSelectPopover ) && (
         <>
           {switchTitle && (
             <div className="xflow-node-switch-title">{switchTitle}</div>
           )}
-          <div className="xflow-node-add-box">
+          {isConnectable && <div className="xflow-node-add-box">
             <NodeSelectPopover
               placement="right"
               addNode={handleAddNode}
@@ -76,7 +76,7 @@ export default memo((props: any) => {
                 <PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
               </Tooltip>
             </NodeSelectPopover>
-          </div>
+          </div>}
         </>
       )}
     </Handle>
diff --git a/packages/x-flow/src/components/NodeEditor/index.tsx b/packages/x-flow/src/components/NodeEditor/index.tsx
@@ -5,6 +5,7 @@ import React, { FC, useContext, useEffect, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
+import { uuid } from '../../utils';
 
 interface INodeEditorProps {
   data: any;
@@ -56,6 +57,19 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
       }
       if (node) {
         // 更新节点的 data
+        if (node?.data?._nodeType === 'Switch' && data?.list?.length) {
+         data['list']= data?.list?.map((item,index) => {
+            if (item?._conditionId) {
+              return item;
+            } else {
+              if (node?.data?.list[index]?._conditionId) {
+                return { ...item, _conditionId: node?.data?.list[index]?._conditionId };
+              } else {
+                return { ...item, _conditionId: `condition_${uuid()}` };
+              }
+            }
+          });
+        }
         node.data = { ...node.data, ...data };
       }
     });
@@ -65,7 +79,6 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
   const watch = {
     '#': (allValues: any) => {
       handleNodeValueChange({ ...allValues });
-      // onChange({ id, values: { ...allValues } });
     },
   };
 
diff --git a/packages/x-flow/src/components/NodesPopover/index.tsx b/packages/x-flow/src/components/NodesPopover/index.tsx
@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
-import { getAntdVersion } from '../../utils';
+import { getAntdVersion, uuid } from '../../utils';
 import NodesMenu from '../NodesMenu';
 import './index.less';
 
@@ -41,7 +41,11 @@ export default forwardRef((props: any, popoverRef) => {
   }, ref);
 
   const handCreateNode = useCallback<any>(({ type }) => {
-    addNode({ _nodeType: type });
+    if (type === 'Switch') {
+      addNode({ _nodeType: type, list: [{ '_conditionId':`condition_${uuid()}`}] });
+    } else {
+      addNode({ _nodeType: type });
+    }
     setOpen(false);
     onNodeSelectPopoverChange && onNodeSelectPopoverChange(false);
   }, []);
diff --git a/packages/x-flow/src/nodes/node-switch/SwitchBuildInNodeWidget.tsx b/packages/x-flow/src/nodes/node-switch/SwitchBuildInNodeWidget.tsx
