lw-cdp-ui 1.1.65 → 1.1.67

package/dist/components/lwFlow/config/dagre.js

@@ -1,12 +1,14 @@
-import { DagreLayout } from '@antv/layout';
+import dagre from 'dagre';
 
 export default class Dagre {
   static pluginName = 'dagre';
   lf;
   option;
+
   render(lf) {
     this.lf = lf;
   }
+
   getBytesLength(word) {
     if (!word) {
       return 0;
@@ -14,7 +16,7 @@ export default class Dagre {
     let totalLength = 0;
     for (let i = 0; i < word.length; i++) {
       const c = word.charCodeAt(i);
-      if ((word.match(/[A-Z]/))) {
+      if (word.match(/[A-Z]/)) {
         totalLength += 1.5;
       } else if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
         totalLength += 1;
@@ -24,40 +26,27 @@ export default class Dagre {
     }
     return totalLength;
   }
-  /**
-   * option: {
-   *   rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL
-   *   align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
-   *   nodeSize: undefined, // 节点大小
-   *   nodesepFunc: undefined, // 节点水平间距(px)
-   *   ranksepFunc: undefined, // 每一层节点之间间距
-   *   nodesep: 40, // 节点水平间距(px) 注意：如果有grid，需要保证nodesep为grid的偶数倍
-   *   ranksep: 40, // 每一层节点之间间距 注意：如果有grid，需要保证ranksep为grid的偶数倍
-   *   controlPoints: false, // 是否保留布局连线的控制点
-   *   radial: false, // 是否基于 dagre 进行辐射布局
-   *   focusNode: null, // radial 为 true 时生效，关注的节点
-   * };
-   */
+
   layout(option = {}) {
     const { nodes, edges, gridSize } = this.lf.graphModel;
-    // 为了保证生成的节点在girdSize上，需要处理一下。
+
     let nodesep = 40;
     let ranksep = 40;
     if (gridSize > 20) {
       nodesep = gridSize * 2;
       ranksep = gridSize * 2;
     }
+
     this.option = {
       type: 'dagre',
       rankdir: 'LR',
-      // align: 'UL',
-      // align: 'UR',
       align: 'DR',
       nodesep,
       ranksep,
       begin: [120, 120],
       ...option,
     };
+
     const layoutInstance = new DagreLayout(this.option);
     const layoutData = layoutInstance.layout({
       nodes: nodes.map((node) => ({
@@ -74,22 +63,21 @@ export default class Dagre {
         model: edge,
       })),
     });
+
     const newGraphData = {
       nodes: [],
       edges: [],
     };
-    layoutData.nodes.forEach(node => {
-      // @ts-ignore: pass node data
+
+    layoutData?.nodes.forEach(node => {
       const { model } = node;
       const data = model.getData();
-      // @ts-ignore: pass node data
       data.x = node.x;
-      // @ts-ignore: pass node data
       data.y = node.y;
       newGraphData.nodes.push(data);
     });
-    layoutData.edges.forEach(edge => {
-      // @ts-ignore: pass edge data
+
+    layoutData?.edges.forEach(edge => {
       const { model } = edge;
       const data = model.getData();
       data.pointsList = this.calcPointsList(model, newGraphData.nodes);
@@ -114,8 +102,10 @@ export default class Dagre {
       }
       newGraphData.edges.push(data);
     });
+
     this.lf.render(newGraphData);
   }
+
   pointFilter(points) {
     const allPoints = points;
     let i = 1;
@@ -132,9 +122,8 @@ export default class Dagre {
     }
     return allPoints;
   }
+
   calcPointsList(model, nodes) {
-    // 在节点确认从左向右后，通过计算来保证节点连线清晰。
-    // TODO: 避障
     const pointsList = [];
     if (this.option.rankdir === 'LR' && model.modelType === 'polyline-edge') {
       const sourceNodeModel = this.lf.getNodeModelById(model.sourceNodeId);
@@ -160,7 +149,6 @@ export default class Dagre {
         });
         return this.pointFilter(pointsList);
       }
-      // 向回连线
       if (newSourceNodeData.x > newTargetNodeData.x) {
         if (newSourceNodeData.y >= newTargetNodeData.y) {
           pointsList.push({
@@ -202,4 +190,56 @@ export default class Dagre {
     }
     return undefined;
   }
-}
+}
+
+class DagreLayout {
+  constructor(options) {
+    this.options = {
+      rankdir: 'TB',
+      align: null,
+      nodesep: 50,
+      ranksep: 50,
+      controlPoints: false,
+      ...options,
+    };
+  }
+
+  layout(data) {
+    const { nodes, edges } = data;
+    if (!nodes || nodes.length === 0) return;
+
+    const g = new dagre.graphlib.Graph({ multigraph: true });
+    g.setGraph({});
+    g.setDefaultEdgeLabel(() => ({}));
+
+    g.graph().rankdir = this.options.rankdir;
+    g.graph().align = this.options.align;
+    g.graph().nodesep = this.options.nodesep;
+    g.graph().ranksep = this.options.ranksep;
+
+    nodes.forEach((node) => {
+      g.setNode(node.id, { width: node.width || 50, height: node.height || 50 });
+    });
+
+    edges.forEach((edge) => {
+      g.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(g);
+
+    nodes.forEach((node) => {
+      const coord = g.node(node.id);
+      node.x = coord.x;
+      node.y = coord.y;
+    });
+
+    if (this.options.controlPoints) {
+      edges.forEach((edge) => {
+        const edgeData = g.edge(edge.source, edge.target);
+        edge.controlPoints = edgeData.points;
+      });
+    }
+
+    return { nodes, edges };
+  }
+}

package/dist/components/lwFlow/index.vue

@@ -358,8 +358,8 @@ export default {
       })
 
       this.logicFlow.extension.dagre.layout({
-        nodesep: 20,
-        ranksep: 20,
+        nodesep: 60,
+        ranksep: 140,
       })
 
     },