Merge pull request #1605 from alibaba/xflow

Xflow
alibaba · Jan 6, 2025 · 7eab2c6 · 7eab2c6
2 parents db8b84d + 3a937c5
commit 7eab2c6
Show file tree

Hide file tree

Showing 27 changed files with 492 additions and 324 deletions.
diff --git a/docs/xflow/api.md b/docs/xflow/api.md
diff --git a/docs/xflow/demo/layout/LR/setting.tsx b/docs/xflow/demo/layout/LR/setting.tsx
@@ -212,7 +212,7 @@ export const nodes = [
     data: {
       list: [
         {
-          _conditionId: 'iawoyh5niyi6zjob',
+          _id: 'iawoyh5niyi6zjob',
         },
       ],
     },
@@ -259,8 +259,8 @@ export const edges = [
   {
     type: 'buttonedge',
     source: 'b6zsd6w5ah2b209t',
-    sourceHandle: 'condition_else',
+    sourceHandle: 'id_else',
     target: '4',
-    id: 'xy-edge__b6zsd6w5ah2b209tcondition_else-4',
+    id: 'xy-edge__b6zsd6w5ah2b209tid_else-4',
   },
 ];
diff --git a/docs/xflow/demo/layout/TB/setting.tsx b/docs/xflow/demo/layout/TB/setting.tsx
@@ -217,7 +217,7 @@ export const nodes = [
     data: {
       list: [
         {
-          _conditionId: 'iawoyh5niyi6zjob',
+          _id: 'iawoyh5niyi6zjob',
         },
       ],
     },
@@ -273,8 +273,8 @@ export const edges = [
   {
     type: 'buttonedge',
     source: 'b6zsd6w5ah2b209t',
-    sourceHandle: 'condition_else',
+    sourceHandle: 'id_else',
     target: '4',
-    id: 'xy-edge__b6zsd6w5ah2b209tcondition_else-4',
+    id: 'xy-edge__b6zsd6w5ah2b209tid_else-4',
   },
 ];
diff --git a/docs/xflow/demo/log/buildIn-log/index.tsx b/docs/xflow/demo/log/buildIn-log/index.tsx
@@ -46,11 +46,11 @@ export default () => {
         _status: 'warning',
         list: [
           {
-            _parallelId: 'parallel_30ds0x3evus7ogo2',
+            _id: 'id_30ds0x3evus7ogo2',
             value: '事件1',
           },
           {
-            _parallelId: 'parallel_m1l276eelcgn7s1p',
+            _id: 'id_m1l276eelcgn7s1p',
             value: '事件2',
           },
         ],
@@ -121,13 +121,13 @@ export default () => {
       id: 'ky0eedrd6t2hqq81',
       source: 'mcelcsg6pinydoy7',
       target: '4m9tee00n819nyyy',
-      sourceHandle: 'parallel_30ds0x3evus7ogo2',
+      sourceHandle: 'id_30ds0x3evus7ogo2',
     },
     {
       id: '7tm5a339lj94ugtn',
       source: 'mcelcsg6pinydoy7',
       target: 'j0kufl0o4fca4ee9',
-      sourceHandle: 'parallel_m1l276eelcgn7s1p',
+      sourceHandle: 'id_m1l276eelcgn7s1p',
     },
     {
       type: 'buttonedge',

diff --git a/docs/xflow/demo/log/custom-log/index.tsx b/docs/xflow/demo/log/custom-log/index.tsx
@@ -19,11 +19,11 @@ export default () => {
         _status: 'warning',
         list: [
           {
-            _parallelId: 'parallel_30ds0x3evus7ogo2',
+            _id: 'id_30ds0x3evus7ogo2',
             value: '事件1',
           },
           {
-            _parallelId: 'parallel_m1l276eelcgn7s1p',
+            _id: 'id_m1l276eelcgn7s1p',
             value: '事件2',
           },
         ],
@@ -81,13 +81,13 @@ export default () => {
       id: 'ky0eedrd6t2hqq81',
       source: 'mcelcsg6pinydoy7',
       target: '4m9tee00n819nyyy',
-      sourceHandle: 'parallel_30ds0x3evus7ogo2',
+      sourceHandle: 'id_30ds0x3evus7ogo2',
     },
     {
       id: '7tm5a339lj94ugtn',
       source: 'mcelcsg6pinydoy7',
       target: 'j0kufl0o4fca4ee9',
-      sourceHandle: 'parallel_m1l276eelcgn7s1p',
+      sourceHandle: 'id_m1l276eelcgn7s1p',
     },
     {
       type: 'buttonedge',

diff --git a/docs/xflow/demo/log/index.tsx b/docs/xflow/demo/log/index.tsx
@@ -46,11 +46,11 @@ export default () => {
         _status: 'warning',
         list: [
           {
-            _parallelId: 'parallel_30ds0x3evus7ogo2',
+            _id: 'id_30ds0x3evus7ogo2',
             value: '事件1',
           },
           {
-            _parallelId: 'parallel_m1l276eelcgn7s1p',
+            _id: 'id_m1l276eelcgn7s1p',
             value: '事件2',
           },
         ],
@@ -121,13 +121,13 @@ export default () => {
       id: 'ky0eedrd6t2hqq81',
       source: 'mcelcsg6pinydoy7',
       target: '4m9tee00n819nyyy',
-      sourceHandle: 'parallel_30ds0x3evus7ogo2',
+      sourceHandle: 'id_30ds0x3evus7ogo2',
     },
     {
       id: '7tm5a339lj94ugtn',
       source: 'mcelcsg6pinydoy7',
       target: 'j0kufl0o4fca4ee9',
-      sourceHandle: 'parallel_m1l276eelcgn7s1p',
+      sourceHandle: 'id_m1l276eelcgn7s1p',
     },
     {
       type: 'buttonedge',

diff --git a/docs/xflow/demo/nodeSetting/data.tsx b/docs/xflow/demo/nodeSetting/data.tsx
@@ -177,7 +177,7 @@ export const nodes = [
     data: {
       list: [
         {
-          _conditionId: 'iawoyh5niyi6zjob',
+          _id: 'iawoyh5niyi6zjob',
         },
       ],
     },
@@ -224,8 +224,8 @@ export const edges = [
   {
     type: 'buttonedge',
     source: 'b6zsd6w5ah2b209t',
-    sourceHandle: 'condition_else',
+    sourceHandle: 'id_else',
     target: '4',
-    id: 'xy-edge__b6zsd6w5ah2b209tcondition_else-4',
+    id: 'xy-edge__b6zsd6w5ah2b209tid_else-4',
   },
 ];
diff --git a/docs/xflow/demo/nodeSetting/index.tsx b/docs/xflow/demo/nodeSetting/index.tsx
@@ -21,7 +21,7 @@ export const Flow = () => {
         nodeSelector={{
           showSearch: true,
         }}
-        layout="TB"
+        // layout="TB"
         globalConfig={{
           nodePanel: {
             width: '400px',

diff --git a/docs/xflow/demo/parallelNode/custome/index.tsx b/docs/xflow/demo/parallelNode/custome/index.tsx
@@ -16,12 +16,14 @@ export default () => {
       data: {
         list: [
           {
-            _parallelId: 'parallel_30ds0x3evus7ogo2',
+            _id: 'id_30ds0x3evus7ogo2',
             value: '事件1',
+            title: "事件1"
           },
           {
-            _parallelId: 'parallel_m1l276eelcgn7s1p',
+            _id: 'id_m1l276eelcgn7s1p',
             value: '事件2',
+            title: "事件1"
           },
         ],
       },
@@ -71,13 +73,13 @@ export default () => {
       id: 'ky0eedrd6t2hqq81',
       source: 'mcelcsg6pinydoy7',
       target: '4m9tee00n819nyyy',
-      sourceHandle: 'parallel_30ds0x3evus7ogo2',
+      sourceHandle: 'id_30ds0x3evus7ogo2',
     },
     {
       id: '7tm5a339lj94ugtn',
       source: 'mcelcsg6pinydoy7',
       target: 'j0kufl0o4fca4ee9',
-      sourceHandle: 'parallel_m1l276eelcgn7s1p',
+      sourceHandle: 'id_m1l276eelcgn7s1p',
     },
     {
       type: 'buttonedge',

diff --git a/docs/xflow/demo/parallelNode/index.tsx b/docs/xflow/demo/parallelNode/index.tsx
@@ -10,12 +10,14 @@ export default () => {
       data: {
         list: [
           {
-            _parallelId: 'parallel_30ds0x3evus7ogo2',
+            _id: 'id_30ds0x3evus7ogo2',
             value: '事件1',
+            title:"标题1"
           },
           {
-            _parallelId: 'parallel_m1l276eelcgn7s1p',
+            _id: 'id_m1l276eelcgn7s1p',
             value: '事件2',
+            title: "标题2"
           },
         ],
       },
@@ -65,13 +67,13 @@ export default () => {
       id: 'ky0eedrd6t2hqq81',
       source: 'mcelcsg6pinydoy7',
       target: '4m9tee00n819nyyy',
-      sourceHandle: 'parallel_30ds0x3evus7ogo2',
+      sourceHandle: 'id_30ds0x3evus7ogo2',
     },
     {
       id: '7tm5a339lj94ugtn',
       source: 'mcelcsg6pinydoy7',
       target: 'j0kufl0o4fca4ee9',
-      sourceHandle: 'parallel_m1l276eelcgn7s1p',
+      sourceHandle: 'id_m1l276eelcgn7s1p',
     },
     {
       type: 'buttonedge',

diff --git a/docs/xflow/demo/switchNode/index.tsx b/docs/xflow/demo/switchNode/index.tsx
@@ -1,6 +1,5 @@
 import XFlow from '@xrenders/xflow';
 import settings from './setting';
-import React from 'react';
 
 export default () => {
   const nodes = [
@@ -22,16 +21,20 @@ export default () => {
       data: {
         list: [
           {
-            _conditionId: 'condition_1nmzbhnbtv1se6sd', // 对应的 sourceHandle: 'condition_1nmzbhnbtv1se6sd'的边
+            _id: 'id_1nmzbhnbtv1se6sd', // 对应的 sourceHandle: 'id_1nmzbhnbtv1se6sd'的边
             value: '条件1',
+            name: "这里是条件一",
+            title:"默认title"
           },
           {
             value: '条件2',
-            _conditionId: 'condition_enxhwfca1ebn55td', // 对应sourceHandle: 'condition_enxhwfca1ebn55td'的边
+            _id: 'id_enxhwfca1ebn55td', // 对应sourceHandle: 'id_enxhwfca1ebn55td'的边
+            name:"这里是条件一"
           },
           {
             value: '条件3',
-            _conditionId: 'condition_z1f7b93zwbx1xycu',// 对应sourceHandle: 'condition_z1f7b93zwbx1xycu'的边
+            _id: 'id_z1f7b93zwbx1xycu', // 对应sourceHandle: 'id_z1f7b93zwbx1xycu'的边
+            name:'这里是条件一'
           },
         ],
         desc: '',
@@ -95,27 +98,27 @@ export default () => {
     },
     {
       id: '5s6af77jbcqvzfod',
-      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      source: 'kshd2hp4vqm8ww19', // switch节点的边
       target: 'ql61j2tdli4xage0',
-      sourceHandle: 'condition_1nmzbhnbtv1se6sd', // 对应 _conditionId为'condition_1nmzbhnbtv1se6sd'的条件
+      sourceHandle: 'id_1nmzbhnbtv1se6sd', // 对应 _id为'id_1nmzbhnbtv1se6sd'的条件
     },
     {
       id: '6tw709qgc3mtazrv',
-      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      source: 'kshd2hp4vqm8ww19', // switch节点的边
       target: 'fab1j735q8iow6u3',
-      sourceHandle: 'condition_enxhwfca1ebn55td', // 对应 _conditionId为'condition_enxhwfca1ebn55td'的条件
+      sourceHandle: 'id_enxhwfca1ebn55td', // 对应 _id为'id_enxhwfca1ebn55td'的条件
     },
     {
       id: 'vzlvdo69ljcqegc8',
-      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      source: 'kshd2hp4vqm8ww19', // switch节点的边
       target: '9mc5i628mfrxdow0',
-      sourceHandle: 'condition_z1f7b93zwbx1xycu',// 对应 _conditionId为'condition_z1f7b93zwbx1xycu'的条件
+      sourceHandle: 'id_z1f7b93zwbx1xycu', // 对应 _id为'id_z1f7b93zwbx1xycu'的条件
     },
     {
       id: 'j8p8fnr5au9k25pb',
-      source: 'kshd2hp4vqm8ww19',// switch节点的边
+      source: 'kshd2hp4vqm8ww19', // switch节点的边
       target: 'anmv2kcadqxj4k63',
-      sourceHandle: 'condition_else',// condition_else 对应默认路径ELSE
+      sourceHandle: 'id_else', // id_else 对应默认路径ELSE
     },
     {
       id: '0qfpkc9vcjdb31qp',

diff --git a/docs/xflow/demo/switchNode/setting.tsx b/docs/xflow/demo/switchNode/setting.tsx
@@ -7,6 +7,11 @@ export default [
       type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
+    switchExtra: {   // 条件节点额外属性配置
+      // hideElse: true,
+      valueKey: 'value',
+      titleKey: 'name'
+    }
   },
   {
     title: '开始',

diff --git a/docs/xflow/nodeBuildIn.md b/docs/xflow/nodeBuildIn.md
@@ -11,14 +11,14 @@ group:
 ## 条件内置节点
 内置条件节点，可以直接设置type为`Switch`使用。
 
-条件节点的数据格式为`data:{list:[{value:"条件1",_conditionId:"condition_${随机数}"}]}`，`_conditionId`为边数据的`sourceHandle`，以便条件和边一一对应。
-有条件参数value(可以通过自定义条件节点配置面板更改配置参数)的放入list数组里面作为`IF或者ELIF`渲染，没有条件参数的，为默认执行路径`ELSE`,`ELSE`路径的固定`_conditionId`为`condition_else`,即边数据的`sourceHandle`必须为`condition_else`才能链接`ELSE`链接头，比如：
+条件节点的数据格式为`data:{list:[{value:"条件1",_id:"id_${随机数}"}]}`，`_id`为边数据的`sourceHandle`，以便条件和边一一对应。
+有条件参数value(可以通过自定义条件节点配置面板更改配置参数)的放入list数组里面作为`IF或者ELIF`渲染，没有条件参数的，为默认执行路径`ELSE`,`ELSE`路径的固定`_id`为`id_else`,即边数据的`sourceHandle`必须为`id_else`才能链接`ELSE`链接头，比如：
 ```js
  {
       id: 'j8p8fnr5au9k25pb',
       source: 'kshd2hp4vqm8ww19',
       target: 'anmv2kcadqxj4k63',
-      sourceHandle: 'condition_else', // else路径的边
+      sourceHandle: 'id_else', // else路径的边
  }
 ```
 
@@ -40,7 +40,7 @@ group:
 <code src="./demo/switchNode/customSwitchNode/index.tsx"></code>
 
 ## 并行节点
-  内置并行节点，可以直接设置type为`Parallel`使用，并行节点的数据格式为`data:{list:[{value:"条件1",_parallelId:"parallel_${随机数}"}]}`,`_parallelId`为边数据的`sourceHandle`，以便条件和边一一对应。
+  内置并行节点，可以直接设置type为`Parallel`使用，并行节点的数据格式为`data:{list:[{title:"事件一",value:"值1",_id:"id_${随机数}"}]}`,`_id`为边数据的`sourceHandle`，以便条件和边一一对应。
 
 
   并行节点的每个连接头只能连接一个节点，不能连接多个节点，如果要更换节点，可以通过删除已连接节点或者在连接线上新增节点的方式更换目标节点。

diff --git a/packages/x-flow/src/XFlow.tsx b/packages/x-flow/src/XFlow.tsx
@@ -321,7 +321,7 @@ const XFlow: FC<FlowProps> = memo(props => {
         onNodeClick={(event, node) => {
           onNodeClick && onNodeClick(event, node);
         }}
-
+        deleteKeyCode={globalConfig?.deleteKeyCode}
       >
         <CandidateNode />
         <Operator addNode={handleAddNode} xflowRef={workflowContainerRef} />