add EdgeType

Author: xlorne

admin-ui/src/components/Flow/flow/FlowChart.tsx

@@ -9,15 +9,17 @@ import Circulate from "@/components/Flow/nodes/Circulate";
 import '@logicflow/core/es/index.css';
 import '@logicflow/extension/lib/style/index.css';
 import "./FlowChart.scss";
+import {EdgeType} from "@/components/Flow/flow/types";
 
 interface FlowChartProps {
-    flowData: FlowData
+    flowData: FlowData;
+    edgeType?: EdgeType;
 }
 
 const FlowChart: React.FC<FlowChartProps> = (props) => {
 
     const flowData = props.flowData;
-
+    const edgeType = props.edgeType || 'polyline';
     const container = useRef<HTMLDivElement>(null);
     const lfRef = useRef<LogicFlow>(null);
 
@@ -40,14 +42,22 @@ const FlowChart: React.FC<FlowChartProps> = (props) => {
             },
             plugins: [Menu, DndPanel, MiniMap, Snapshot],
             grid: false,
-            edgeType: 'bezier',
+            edgeType: edgeType,
         });
 
         lfRef.current.setTheme({
             bezier: {
                 stroke: '#8f94e3',
                 strokeWidth: 1,
             },
+            polyline: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
+            line: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
         });
         lfRef.current.register(Start);
         lfRef.current.register(Node);

admin-ui/src/components/Flow/flow/types.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import {FormInstance} from "antd/es/form/hooks/useForm";
 import {FlowData} from "@/components/Flow/flow/data";
-import {clearTriggerEventClick} from "@/components/Flow/store/FlowSlice";
 
 // 自定义按钮类型
 export type CustomButtonType = 'SAVE' | 'START' | 'SUBMIT' | 'TRY_SUBMIT' | 'SPECIFY_SUBMIT' | 'REJECT' | 'TRANSFER' | 'RECALL' | 'POSTPONED' | 'URGE' | 'CUSTOM' | 'VIEW';
 
+// 流程图中线的类型
+export type EdgeType = 'line' | 'polyline' | 'bezier';
+
 // 表单视图属性
 export interface FlowFormViewProps {
     // 表单数据

admin-ui/src/components/Flow/index.tsx

@@ -14,19 +14,22 @@ import NodePanel from "@/components/Flow/layout/NodePanel";
 import {message} from "antd";
 import {copy} from "@/components/Flow/panel/shortcuts";
 import FlowUtils from "@/components/Flow/utils";
+import {EdgeType} from "@/components/Flow/flow/types";
 
 export interface FlowActionType {
     getData: () => any;
 }
 
 interface FlowProps {
     data?: LogicFlow.GraphConfigData;
-    actionRef?: React.Ref<any>
+    actionRef?: React.Ref<any>;
+    edgeType?: EdgeType;
 }
 
 const Flow: React.FC<FlowProps> = (props) => {
     const container = useRef<HTMLDivElement>(null);
     const lfRef = useRef<LogicFlow>(null);
+    const edgeType = props.edgeType || 'polyline';
     const [mapVisible, setMapVisible] = React.useState(false);
 
     if (props.actionRef) {
@@ -69,14 +72,22 @@ const Flow: React.FC<FlowProps> = (props) => {
                     }
                 ]
             },
-            edgeType: 'bezier',
+            edgeType: edgeType,
         });
 
         lfRef.current.setTheme({
             bezier: {
                 stroke: '#8f94e3',
                 strokeWidth: 1,
             },
+            polyline: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
+            line: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
         });
         lfRef.current.register(Start);
         lfRef.current.register(Node);