fix:并行节点更改：

1.data数据格式统一 2.value显示在下方，可自定义组件
alibaba · Jan 6, 2025 · 7c30cb2 · 7c30cb2
1 parent 1d36282
commit 7c30cb2
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 91 deletions.
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/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/nodeBuildIn.md b/docs/xflow/nodeBuildIn.md
@@ -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/components/NodeEditor/index.tsx b/packages/x-flow/src/components/NodeEditor/index.tsx
@@ -89,16 +89,16 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
           });
         } else if (node?.data?._nodeType === 'Parallel' && data?.list?.length) {
           data['list'] = data?.list?.map((item, index) => {
-            if (item?._parallelId) {
+            if (item?._id) {
               return item;
             } else {
-              if (node?.data?.list[index]?._parallelId) {
+              if (node?.data?.list[index]?._id) {
                 return {
                   ...item,
-                  _parallelId: node?.data?.list[index]?._parallelId,
+                  _id: node?.data?.list[index]?._id,
                 };
               } else {
-                return { ...item, _parallelId: `parallel_${uuid()}` };
+                return { ...item, _id: `id_${uuid()}` };
               }
             }
           });

diff --git a/packages/x-flow/src/components/NodesPopover/index.tsx b/packages/x-flow/src/components/NodesPopover/index.tsx
@@ -44,7 +44,7 @@ export default forwardRef((props: any, popoverRef) => {
     if (type === 'Switch') {
       addNode({ _nodeType: type, list: [{ '_conditionId':`${uuid()}`}] });
     } else if (type === 'Parallel') {
-      addNode({ _nodeType: type, list: [{ _parallelId: `parallel_${uuid()}` }, { _parallelId: `parallel_${uuid()}` }] });
+      addNode({ _nodeType: type, list: [{ _id: `id_${uuid()}` }, { _id: `id_${uuid()}` }] });
     } else {
       addNode({ _nodeType: type });
     }

diff --git a/packages/x-flow/src/nodes/node-parallel/ParallelBuildInNodeWidget.tsx b/packages/x-flow/src/nodes/node-parallel/ParallelBuildInNodeWidget.tsx
@@ -33,6 +33,78 @@ export default memo((props: any) => {
     shallow
   );
 
+  const renderTitle = (item, index) => (
+    <div className="item-header">
+      <div className="item-title">
+        {item?.title && (
+          <Paragraph
+            className="item-content-in"
+            ellipsis={{
+              rows: 1,
+              tooltip: {
+                title: item?.title,
+                color: '#ffff',
+                overlayInnerStyle: {
+                  color: '#354052',
+                  fontSize: '12px',
+                },
+                getPopupContainer: () =>
+                  document.getElementById('xflow-container'),
+              },
+            }}
+          >
+            {item?.title}
+          </Paragraph>
+        )}
+      </div>
+      <SourceHandle
+        position={position}
+        isConnectable={
+          (edges || [])?.filter(flow => flow?.sourceHandle === item?._id)
+            ?.length === 0
+        }
+        selected={selected}
+        isHovered={isHovered}
+        handleAddNode={data => {
+          handleAddNode(data, item?._id);
+        }}
+        id={item?._id}
+        className="item-handle"
+      />
+    </div>
+  );
+
+  const renderContent = (item, index) => (
+    <div className="item-content">
+      {CustomNodeWidget ? (
+        <CustomNodeWidget data={item} index={index} />
+      ) : (
+        <>
+          {item?.value && (
+            <Paragraph
+              className="item-content-in"
+              ellipsis={{
+                rows: 5,
+                tooltip: {
+                  title: item?.value,
+                  color: '#ffff',
+                  overlayInnerStyle: {
+                    color: '#354052',
+                    fontSize: '12px',
+                  },
+                  getPopupContainer: () =>
+                    document.getElementById('xflow-container'),
+                },
+              }}
+            >
+              {item?.value}
+            </Paragraph>
+          )}
+        </>
+      )}
+    </div>
+  );
+
   return (
     <Space
       direction={isSwitchBottom ? 'horizontal' : 'vertical'}
@@ -41,65 +113,28 @@ export default memo((props: any) => {
       })}
       size={5}
     >
-      {(
-        data?.list || [
-          { _parallelId: `parallel_${uuid()}` },
-          { _parallelId: `parallel_${uuid()}` },
-        ]
-      )?.map((item, index) => (
-        <div
-          className={classNames('node-parallel-widget-item', {
-            'node-parallel-bottom-item': isSwitchBottom,
-          })}
-          key={index}
-        >
-          <div className="item-header">
-            <div className="item-title">
-              {CustomNodeWidget ? (
-                <CustomNodeWidget data={item} index={index} />
-              ) : (
-                <>
-                  {item?.value && (
-                    <Paragraph
-                      className="item-content-in"
-                      ellipsis={{
-                        rows: 1,
-                        tooltip: {
-                          title: item?.value,
-                          color: '#ffff',
-                          overlayInnerStyle: {
-                            color: '#354052',
-                            fontSize: '12px',
-                          },
-                          getPopupContainer: () =>
-                            document.getElementById('xflow-container'),
-                        },
-                      }}
-                    >
-                      {item?.value}
-                    </Paragraph>
-                  )}
-                </>
-              )}
-            </div>
-            <SourceHandle
-              position={position}
-              isConnectable={
-                (edges || [])?.filter(
-                  flow => flow?.sourceHandle === item?._parallelId
-                )?.length === 0
-              }
-              selected={selected}
-              isHovered={isHovered}
-              handleAddNode={data => {
-                handleAddNode(data, item?._parallelId);
-              }}
-              id={item?._parallelId}
-              className="item-handle"
-            />
+      {(data?.list || [{ _id: `id_${uuid()}` }, { _id: `id_${uuid()}` }])?.map(
+        (item, index) => (
+          <div
+            className={classNames('node-parallel-widget-item', {
+              'node-parallel-bottom-item': isSwitchBottom,
+            })}
+            key={index}
+          >
+            {isSwitchBottom ? (
+              <>
+                {renderContent(item, index)}
+                {renderTitle(item, index)}
+              </>
+            ) : (
+              <>
+                {renderTitle(item, index)}
+                {renderContent(item, index)}
+              </>
+            )}
           </div>
-        </div>
-      ))}
+        )
+      )}
     </Space>
   );
 });
diff --git a/packages/x-flow/src/nodes/node-parallel/index.less b/packages/x-flow/src/nodes/node-parallel/index.less
@@ -35,7 +35,7 @@
     .item-title {
       text-align: right;
       font-weight: 600;
-      min-height: 30px;
+      min-height: 28px;
 
       .ant-typography {
         margin-bottom: 0;