fix:修复文档关于条件节点的错误展示以及layout失效的bug

alibaba · Dec 30, 2024 · c026c3e · c026c3e
1 parent eff366b
commit c026c3e
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 61 deletions.
diff --git a/docs/xflow/demo/layout/LR/index.tsx b/docs/xflow/demo/layout/LR/index.tsx
@@ -1,54 +1,8 @@
 import XFlow from '@xrenders/xflow';
-import settings from './setting';
+import { settings,nodes,edges } from './setting';
 import React from 'react';
 
 export default () => {
-  const nodes = [
-    {
-      type: 'Start',
-      id: '1',
-      position: { x: -35, y: 268 },
-    },
-    {
-      type: 'Switch',
-      id: '2',
-      position: { x: 277.5, y: 268 },
-    },
-    {
-      type: 'Code',
-      id: '3',
-      position: { x: 675, y: 123.75 },
-    },
-    {
-      type: 'tool',
-      id: '4',
-      position: { x: 686.25, y: 495 },
-    },
-    {
-      type: 'End',
-      id: '5',
-      position: { x: 1176.2499999999998, y: 281.25 },
-    },
-  ];
-  const edges = [
-    { source: '1', target: '2', id: 'e1-2' },
-    {
-      source: '2',
-      target: '3',
-      id: 'e2-3',
-    },
-    { source: '2', target: '4', id: 'e2-4' },
-    {
-      source: '3',
-      target: '5',
-      id: 'e3-5',
-    },
-    {
-      source: '4',
-      target: '5',
-      id: 'e4-5',
-    },
-  ];
 
   return (
     <div style={{ height: '600px' }}>

diff --git a/docs/xflow/demo/layout/LR/setting.tsx b/docs/xflow/demo/layout/LR/setting.tsx
@@ -1,4 +1,4 @@
-export default [
+export  const settings=[
   {
     title: '开始',
     type: 'Start',
@@ -197,3 +197,70 @@ export default [
     ],
   },
 ];
+
+
+export const nodes = [
+  {
+    type: 'Start',
+    id: '1',
+    position: { x: -35, y: 268 },
+  },
+  {
+    type: 'Switch',
+    id: 'b6zsd6w5ah2b209t',
+    position: { x: 277.5, y: 268 },
+    data: {
+      list: [
+        {
+          _conditionId: 'iawoyh5niyi6zjob',
+        },
+      ],
+    },
+  },
+  {
+    type: 'Code',
+    id: '3',
+    position: { x: 675, y: 123.75 },
+  },
+  {
+    type: 'tool',
+    id: '4',
+    position: { x: 686.25, y: 495 },
+  },
+  {
+    type: 'End',
+    id: '5',
+    position: { x: 1176.2499999999998, y: 281.25 },
+  },
+];
+export const edges = [
+  {
+    source: '3',
+    target: '5',
+    id: 'e3-5',
+  },
+  {
+    source: '4',
+    target: '5',
+    id: 'e4-5',
+  },
+  {
+    id: 'px7fsmha99pju315',
+    source: '1',
+    target: 'b6zsd6w5ah2b209t',
+  },
+  {
+    type: 'buttonedge',
+    source: 'b6zsd6w5ah2b209t',
+    sourceHandle: 'iawoyh5niyi6zjob',
+    target: '3',
+    id: 'xy-edge__b6zsd6w5ah2b209tiawoyh5niyi6zjob-3',
+  },
+  {
+    type: 'buttonedge',
+    source: 'b6zsd6w5ah2b209t',
+    sourceHandle: 'condition_else',
+    target: '4',
+    id: 'xy-edge__b6zsd6w5ah2b209tcondition_else-4',
+  },
+];
diff --git a/docs/xflow/demo/layout/TB/index.tsx b/docs/xflow/demo/layout/TB/index.tsx
@@ -66,7 +66,7 @@ export default () => {
         nodeSelector={{
           showSearch: true,
         }}
-        layout="LR"
+        layout="TB"
       />
     </div>
   );

diff --git a/docs/xflow/demo/nodeSetting/data.tsx b/docs/xflow/demo/nodeSetting/data.tsx
@@ -11,7 +11,7 @@ export const settings = [
     },
     nodePanel: {
       width: 600,
-      hideDesc:false,
+      hideDesc: false,
     },
     settingSchema: {
       // 自定义节点配置
@@ -172,8 +172,15 @@ export const nodes = [
   },
   {
     type: 'Switch',
-    id: '2',
+    id: 'b6zsd6w5ah2b209t',
     position: { x: 277.5, y: 268 },
+    data: {
+      list: [
+        {
+          _conditionId: 'iawoyh5niyi6zjob',
+        },
+      ],
+    },
   },
   {
     type: 'Code',
@@ -192,13 +199,6 @@ export const nodes = [
   },
 ];
 export const edges = [
-  { source: '1', target: '2', id: 'e1-2' },
-  {
-    source: '2',
-    target: '3',
-    id: 'e2-3',
-  },
-  { source: '2', target: '4', id: 'e2-4' },
   {
     source: '3',
     target: '5',
@@ -209,4 +209,23 @@ export const edges = [
     target: '5',
     id: 'e4-5',
   },
+  {
+    id: 'px7fsmha99pju315',
+    source: '1',
+    target: 'b6zsd6w5ah2b209t',
+  },
+  {
+    type: 'buttonedge',
+    source: 'b6zsd6w5ah2b209t',
+    sourceHandle: 'iawoyh5niyi6zjob',
+    target: '3',
+    id: 'xy-edge__b6zsd6w5ah2b209tiawoyh5niyi6zjob-3',
+  },
+  {
+    type: 'buttonedge',
+    source: 'b6zsd6w5ah2b209t',
+    sourceHandle: 'condition_else',
+    target: '4',
+    id: 'xy-edge__b6zsd6w5ah2b209tcondition_else-4',
+  },
 ];
diff --git a/packages/x-flow/src/components/FlowProvider/index.tsx b/packages/x-flow/src/components/FlowProvider/index.tsx
@@ -10,11 +10,13 @@ export const FlowProvider = memo<{
   initialNodes?: any[];
   initialEdges?: any[];
   children: ReactNode;
-}>(({ initialNodes: nodes = [], initialEdges: edges = [], children }) => {
+  layout?: 'LR' | 'TB';
+}>(({ initialNodes: nodes = [], initialEdges: edges = [], children, layout = 'LR' }) => {
   const [store] = useState(() =>
     createStore({
       nodes,
       edges,
+      layout
     })
   );
 
@@ -52,7 +54,7 @@ export const FlowProviderWrapper = ({
   nodes: any[];
   edges: any[];
   layout?: 'LR' | 'TB';
-}) => {
+  }) => {
   const isWrapped = useContext(StoreContext);
 
   if (isWrapped) {
@@ -64,7 +66,7 @@ export const FlowProviderWrapper = ({
   }
 
   return (
-    <FlowProvider initialNodes={transformNodes(nodes)} initialEdges={edges}>
+    <FlowProvider initialNodes={transformNodes(nodes)} initialEdges={edges} layout={layout}>
       {children}
     </FlowProvider>
   );