Merge branch 'xflow' of https://github.com/alibaba/x-render into xflow

Author: youngjuning

docs/xflow/demo/layout/TB/index.tsx

@@ -1,63 +1,7 @@
 import XFlow from '@xrenders/xflow';
-import settings from './setting';
-import React from 'react';
+import { edges, nodes, settings } from './setting';
 
 export default () => {
-  const nodes = [
-    {
-      type: 'Start',
-      id: '1',
-      position: { x: 327.5, y: -14.5 },
-    },
-    {
-      type: 'Switch',
-      id: '2',
-      position: { x: 328.75, y: 108 },
-    },
-    {
-      type: 'Code',
-      id: '3',
-      position: { x: 638.75, y: 247.5 },
-    },
-    {
-      type: 'tool',
-      id: '4',
-      position: { x: 75.00000000000003, y: 261.25 },
-    },
-    {
-      type: 'End',
-      id: '5',
-      position: { x: 360, y: 501.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' }}>
       <XFlow

docs/xflow/demo/layout/TB/setting.tsx

@@ -1,4 +1,4 @@
-export default [
+export const settings = [
   {
     title: '开始',
     type: 'Start',
@@ -36,34 +36,34 @@ export default [
             options: [
               { label: '早', value: 'a' },
               { label: '中', value: 'b' },
-              { label: '晚', value: 'c' }
-            ]
-          }
+              { label: '晚', value: 'c' },
+            ],
+          },
         },
         textarea1: {
           title: '长文本',
           type: 'string',
-          widget: 'textArea'
+          widget: 'textArea',
         },
         date1: {
           title: '日期选择',
           type: 'string',
-          widget: 'datePicker'
+          widget: 'datePicker',
         },
         dateRange1: {
           title: '日期范围',
           type: 'range',
-          widget: 'dateRange'
+          widget: 'dateRange',
         },
         time1: {
           title: '时间选择',
           type: 'string',
-          widget: 'timePicker'
+          widget: 'timePicker',
         },
         timeRange1: {
           title: '时间范围',
           type: 'range',
-          widget: 'timeRange'
+          widget: 'timeRange',
         },
       },
     },
@@ -78,7 +78,7 @@ export default [
       bgColor: '#F79009',
     },
     settingSchema: {
-      type: "object",
+      type: 'object',
       properties: {
         input: {
           title: '变量一',
@@ -97,8 +97,8 @@ export default [
             ],
           },
         },
-      }
-    }
+      },
+    },
   },
   {
     title: 'LLM',
@@ -197,3 +197,84 @@ export default [
     ],
   },
 ];
+
+export const nodes = [
+  {
+    type: 'Start',
+    id: '1',
+    position: {
+      x: 346.25,
+      y: -75.54414939880371,
+    },
+  },
+  {
+    type: 'Switch',
+    id: 'b6zsd6w5ah2b209t',
+    position: {
+      x: 346.25,
+      y: 41.75,
+    },
+    data: {
+      list: [
+        {
+          _conditionId: 'iawoyh5niyi6zjob',
+        },
+      ],
+    },
+  },
+  {
+    type: 'Code',
+    id: '3',
+    position: {
+      x: 53,
+      y: 207.5,
+    },
+  },
+  {
+    type: 'tool',
+    id: '4',
+    position: {
+      x: 676,
+      y: 220,
+    },
+  },
+  {
+    type: 'End',
+    id: '5',
+    position: {
+      x: 388.7499999999998,
+      y: 497.5,
+    },
+  },
+];
+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',
+  },
+];

packages/x-flow/src/XFlow.tsx

@@ -76,7 +76,7 @@ const XFlow: FC<FlowProps> = memo(props => {
   );
   const { record } = useTemporalStore();
   const [activeNode, setActiveNode] = useState<any>(null);
-  const { settingMap } = useContext(ConfigContext);
+  const { settingMap,globalConfig } = useContext(ConfigContext);
   const [openPanel, setOpenPanel] = useState<boolean>(true);
   const [openLogPanel, setOpenLogPanel] = useState<boolean>(true);
   const { onNodeClick } = props;
@@ -254,6 +254,8 @@ const XFlow: FC<FlowProps> = memo(props => {
     );
   }, [activeNode?.id]);
 
+  const deletable = globalConfig?.edge?.deletable ?? true;
+
   return (
     <div id="xflow-container" ref={workflowContainerRef}>
       <ReactFlow
@@ -271,6 +273,7 @@ const XFlow: FC<FlowProps> = memo(props => {
           markerEnd: {
             type: MarkerType.ArrowClosed, // 箭头
           },
+          deletable:deletable //默认连线属性受此项控制
         }}
         onConnect={onConnect}
         onNodesChange={changes => {

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

@@ -38,6 +38,8 @@ export default memo((edge: any) => {
 
   const { globalConfig, settingMap } = useContext(ConfigContext);
   const hideEdgeAddBtn = globalConfig?.edge?.hideEdgeAddBtn ?? false;
+  const hideEdgeDelBtn = globalConfig?.edge?.hideEdgeDelBtn ?? false;
+  const deletable = globalConfig?.edge?.deletable ?? true;
 
   const {
     nodes,
@@ -89,11 +91,13 @@ export default memo((edge: any) => {
             id: uuid(),
             source,
             target: targetId,
+            deletable:deletable,
             ...(sourceHandleId && { sourceHandle: sourceHandleId }),
           },
           {
             id: uuid(),
             source: targetId,
+            deletable:deletable,
             target,
           },
         ]
@@ -135,12 +139,14 @@ export default memo((edge: any) => {
                 }}
               >
                 <div className="line-content">
-                  <div
-                    className="line-icon-box"
-                    onClick={() => onEdgesChange([{ id, type: 'remove' }])}
-                  >
-                    <CloseOutlined style={{ color: '#fff', fontSize: 10 }} />
-                  </div>
+                  {!hideEdgeDelBtn && (
+                    <div
+                      className="line-icon-box"
+                      onClick={() => onEdgesChange([{ id, type: 'remove' }])}
+                    >
+                      <CloseOutlined style={{ color: '#fff', fontSize: 10 }} />
+                    </div>
+                  )}
                   {!hideEdgeAddBtn && (
                     <NodeSelectPopover
                       placement="right"

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

@@ -15,6 +15,7 @@ export default memo((props: any) => {
   const { id, type, data, layout, isConnectable, selected, onClick, status } =
     props;
   const { widgets, settingMap, globalConfig } = useContext(ConfigContext);
+  const deletable = globalConfig?.edge?.deletable ?? true;
   const NodeWidget =
     widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
   const [isHovered, setIsHovered] = useState(false);
@@ -57,6 +58,7 @@ export default memo((props: any) => {
       id: uuid(),
       source: id,
       target: targetId,
+      deletable,
       ...(sourceHandle && { sourceHandle }),
     };
     addNodes(newNodes);

packages/x-flow/src/components/NodeContainer/index.less

@@ -21,6 +21,7 @@
     font-size: 12px;
     padding-top: 4px;
     margin-top: 10px;
+    max-width: 100%;
   }
 
   .icon-box {
@@ -69,3 +70,9 @@
     justify-content: center;
   }
 }
+
+
+.switch-node-code-bottom{
+  min-width: 240px;
+  width:min-content;
+}