liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/common/layout.js

@@ -0,0 +1,308 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { DagreLayout } from '@antv/layout';
+import { NODE_WIDTH, RANK_SEP, NODE_SEP, ConditionTypeEnum } from "../constant";
+// import dagre from '@dagrejs/dagre';
+// import ELK from 'elkjs/lib/elk.bundled.js';
+// import cytoscape from 'cytoscape';
+// import cyDagre from 'cytoscape-dagre';
+// import cyElk from 'cytoscape-elk';
+// import cyKlay from 'cytoscape-klay';
+
+// cytoscape.use( cyDagre );
+// cytoscape.use( cyElk );
+// cytoscape.use( cyKlay );
+
+var rankdir = 'LR';
+var align = undefined;
+var nodeSize = NODE_WIDTH;
+var ranksep = RANK_SEP;
+var nodesep = NODE_SEP;
+var controlPoints = false;
+var begin = [40, 40];
+export var forceLayout = function forceLayout(flowGraph) {
+  var cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  antvDagreLayout(flowGraph, cfg);
+
+  // dagreLayout(flowGraph, cfg);
+};
+
+/**
+ * 使用AntV的图布局包实现布局
+ * @param flowGraph 图实例
+ * @param cfg 配置
+ */
+function antvDagreLayout(flowGraph) {
+  var cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var dagreLayout = new DagreLayout({
+    begin: begin,
+    type: 'dagre',
+    rankdir: rankdir,
+    align: align,
+    nodeSize: nodeSize,
+    ranksep: ranksep,
+    nodesep: nodesep,
+    controlPoints: controlPoints
+  });
+  dagreLayout.updateCfg(_objectSpread({}, cfg));
+  var _dagreLayout$layout = dagreLayout.layout({
+      // @ts-ignore
+      nodes: flowGraph.getNodes().map(function (node) {
+        node.setZIndex(1);
+        return node.toJSON();
+      }),
+      // @ts-ignore
+      edges: flowGraph.getEdges().map(function (edge) {
+        edge.setZIndex(0);
+        return edge.toJSON();
+      })
+    }),
+    newNodes = _dagreLayout$layout.nodes;
+  flowGraph.freeze();
+  newNodes === null || newNodes === void 0 || newNodes.forEach(function (node) {
+    var cell = flowGraph.getCellById(node.id);
+    if (cell) {
+      cell.position(node.x, node.y);
+    }
+  });
+  fineTuneLayer(flowGraph);
+
+  // fineTuneCatchNodes(flowGraph);
+
+  flowGraph.unfreeze();
+}
+
+/**
+ * 解决Dagre布局部分节点层次过低问题
+ * @param flowGraph 图实例
+ */
+function fineTuneLayer(flowGraph) {
+  var queue = flowGraph.getRootNodes();
+  var layer = 0;
+  // const visited: KeyValue<boolean> = {};
+  var _loop = function _loop() {
+    var cells = [];
+    queue.forEach(function (next) {
+      // if (next === null || visited[next.id]) {
+      //   return;
+      // }
+      // visited[next.id] = true;
+      var _next$position = next.position(),
+        y = _next$position.y;
+      next.position(begin[0] + layer * (ranksep + nodeSize + 40), y);
+      var neighbors = flowGraph.getNeighbors(next, {
+        outgoing: true
+      });
+      cells = cells.concat(neighbors);
+    });
+    layer++;
+    queue = cells;
+  };
+  while (queue.length) {
+    _loop();
+  }
+}
+
+/**
+ * 调整捕获异常节点/CATCH的布局
+ * @param flowGraph 图实例
+ */
+function fineTuneCatchNodes(flowGraph) {
+  var queue = flowGraph.getRootNodes();
+  var _loop2 = function _loop2() {
+    var cells = [];
+    queue.forEach(function (next) {
+      var _next$getData = next.getData(),
+        model = _next$getData.model;
+      var currentModel = model.proxy || model;
+      if (currentModel.type === ConditionTypeEnum.CATCH) {
+        if (next.shape === ConditionTypeEnum.CATCH) {
+          // CATCH start
+          beforeCatchStart(flowGraph, next);
+        } else {
+          // CATCH end
+          afterCatchEnd(flowGraph, next);
+        }
+      }
+      var neighbors = flowGraph.getNeighbors(next, {
+        outgoing: true
+      });
+      cells = cells.concat(neighbors);
+    });
+    queue = cells;
+  };
+  while (queue.length) {
+    _loop2();
+  }
+}
+function beforeCatchStart(flowGraph, catchStart) {
+  var catchRootNode = flowGraph.getNeighbors(catchStart, {
+    outgoing: true
+  })[0];
+  var deltaY = catchStart.position().y - catchRootNode.position().y;
+  if (!deltaY) return;
+  var queue = [catchStart];
+  var _loop3 = function _loop3() {
+    var cells = [];
+    queue.forEach(function (next) {
+      var _next$position2 = next.position(),
+        x = _next$position2.x,
+        y = _next$position2.y;
+      next.position(x, y - deltaY);
+      var neighbors = flowGraph.getNeighbors(next, {
+        incoming: true
+      });
+      cells = cells.concat(neighbors);
+    });
+    queue = cells;
+  };
+  while (queue.length) {
+    _loop3();
+  }
+}
+function afterCatchEnd(flowGraph, catchEnd) {
+  var catchRootNode = flowGraph.getNeighbors(catchEnd, {
+    incoming: true
+  })[0];
+  var deltaY = catchEnd.position().y - catchRootNode.position().y;
+  if (!deltaY) return;
+  var queue = [catchEnd];
+  var _loop4 = function _loop4() {
+    var cells = [];
+    queue.forEach(function (next) {
+      var _next$position3 = next.position(),
+        x = _next$position3.x,
+        y = _next$position3.y;
+      next.position(x, y - deltaY);
+      var neighbors = flowGraph.getNeighbors(next, {
+        outgoing: true
+      });
+      cells = cells.concat(neighbors);
+    });
+    queue = cells;
+  };
+  while (queue.length) {
+    _loop4();
+  }
+}
+function getNodeOrderFrom(flowGraph) {
+  var nodeOrder = [];
+  var rootNodes = flowGraph.getRootNodes() || [];
+  if (rootNodes) {
+    var queue = _toConsumableArray(rootNodes);
+    var visited = {};
+    var _loop5 = function _loop5() {
+      var next = queue.pop();
+      if (next == null || visited[next.id]) {
+        return 1; // continue
+      }
+      visited[next.id] = true;
+      nodeOrder.push(next.id);
+      var neighbors = flowGraph.getNeighbors(next, {
+        outgoing: true
+      });
+      neighbors.sort(function (a, b) {
+        var _a$position = a.position(),
+          aY = _a$position.y;
+        var _b$position = b.position(),
+          bY = _b$position.y;
+        return aY - bY;
+      });
+      var lastIndex = queue.length;
+      neighbors.forEach(function (neighbor) {
+        queue.splice(lastIndex, 0, neighbor);
+      });
+    };
+    while (queue.length > 0) {
+      if (_loop5()) continue;
+    }
+  }
+  return nodeOrder;
+}
+
+/**
+ * 使用Dagre原始包实现布局
+ * @param flowGraph 图实例
+ * @param cfg 配置
+ */
+// function dagreLayout(flowGraph: Graph, cfg: any = {}): void {
+//   const g = new dagre.graphlib.Graph();
+//   g.setGraph({ rankdir, nodesep: 50, ranksep: 50 });
+//   g.setDefaultEdgeLabel(() => ({}));
+
+//   flowGraph.getNodes().forEach((node) => {
+//     node.setZIndex(1);
+//     g.setNode(node.id, { width: nodeSize, height: nodeSize });
+//   })
+
+//   flowGraph.getEdges().forEach((edge) => {
+//     edge.setZIndex(0);
+//     const source = edge.getSourceNode() as Node;
+//     const target = edge.getTargetNode() as Node;
+//     g.setEdge(source?.id, target?.id);
+//   })
+
+//   dagre.layout(g);
+
+//   flowGraph.freeze();
+
+//   g.nodes().forEach((id) => {
+//     const node = flowGraph.getCellById(id) as Node;
+//     if (node) {
+//       const pos = g.node(id);
+//       node.position(pos.x, pos.y);
+//     }
+//   })
+
+//   flowGraph.unfreeze();
+// }
+
+/**
+ * 使用ELK实现布局
+ * @param flowGraph 图实例
+ * @param cfg 配置
+ */
+// function elkLayout(flowGraph: Graph, cfg: any = {}) {
+//   const elk = new ELK();
+//   const elkOptions: Record<string, any> = {
+//     'elk.algorithm': 'layered',
+//     'elk.layered.spacing.nodeNodeBetweenLayers': 80,
+//     'elk.spacing.nodeNode': 20,
+//     'elk.direction': 'RIGHT',
+//   };
+//   const nodes = flowGraph
+//     .getCells()
+//     .filter((cell) => cell.isNode())
+//     .map((cell) => cell.toJSON()) as any[];
+//   const edges = flowGraph
+//     .getCells()
+//     .filter((cell) => cell.isEdge())
+//     .map((cell) => cell.toJSON()) as any[];
+//   const elkGraph = {
+//     id: 'root',
+//     layoutOptions: elkOptions,
+//     children: nodes.map((node) => ({
+//       ...node,
+//       width: nodeSize,
+//       height: nodeSize,
+//     })),
+//     edges: edges.map((edge) => ({
+//       ...edge,
+//       source: edge.source.cell,
+//       target: edge.target.cell,
+//     })),
+//   };
+//   elk
+//     .layout(elkGraph as any)
+//     .then((layoutedGraph: any) => {
+//       flowGraph.freeze();
+//       layoutedGraph.children.forEach((node: any) => {
+//         const current: Node | undefined = flowGraph.getCellById(node?.id) as Node | undefined;
+//         if (current) {
+//           current.position(node.x, node.y);
+//         }
+//       });
+//       flowGraph.unfreeze();
+//     })
+//     .catch(console.error);
+// }

package/dist/LiteFlowEditor/common/router.d.ts

@@ -0,0 +1,2 @@
+import { EdgeView, Point } from '@antv/x6';
+export default function router(vertices: Point.PointLike[], args: any, view: EdgeView): Point.PointLike[];

package/dist/LiteFlowEditor/common/router.js

@@ -0,0 +1,40 @@
+import { Point, Registry } from '@antv/x6';
+import anchor from "./anchor";
+import { NODE_TYPE_INTERMEDIATE_END } from "../constant";
+export default function router(vertices, args, view) {
+  var normalRouter = Registry.Router.presets.normal;
+  var points = vertices.map(function (p) {
+    return Point.create(p);
+  });
+  if (!(view.sourceView && view.sourceView.cell) || !(view.targetView && view.targetView.cell)) {
+    // @ts-ignore
+    return normalRouter.call(this, points, args, view);
+  }
+  var sourceCorner = anchor(view.sourceView);
+  var targetCorner = anchor(view.targetView);
+  if (
+  // 第四象限
+  sourceCorner.x < targetCorner.x && sourceCorner.y < targetCorner.y ||
+  // 第一象限
+  sourceCorner.x < targetCorner.x && sourceCorner.y > targetCorner.y) {
+    if (view.targetView.cell.shape === NODE_TYPE_INTERMEDIATE_END) {
+      points.push(Point.create(targetCorner.x, sourceCorner.y));
+    } else {
+      points.push(Point.create(sourceCorner.x, targetCorner.y));
+    }
+  }
+  // const pointX = targetCorner.x - (NODE_WIDTH + RANK_SEP + 40) / 2;
+  // if (
+  //   // 第四象限
+  //   (sourceCorner.x < targetCorner.x && sourceCorner.y < targetCorner.y) ||
+  //   // 第一象限
+  //   (sourceCorner.x < targetCorner.x && sourceCorner.y > targetCorner.y)
+  // ) {
+  //   points.push(
+  //     Point.create(pointX, sourceCorner.y),
+  //     Point.create(pointX, targetCorner.y),
+  //   );
+  // }
+  // @ts-ignore
+  return normalRouter.call(this, points, args, view);
+}

package/dist/LiteFlowEditor/common/shortcuts.d.ts

@@ -0,0 +1,10 @@
+import { Graph } from '@antv/x6';
+interface Shortcut {
+    keys: string | string[];
+    handler: (flowGraph: Graph) => void;
+}
+export declare const shortcuts: {
+    [key: string]: Shortcut;
+};
+declare const registerShortcuts: (flowGraph: Graph) => void;
+export default registerShortcuts;

package/dist/LiteFlowEditor/common/shortcuts.js

@@ -0,0 +1,183 @@
+import { safeGet } from "../utils";
+import { Modal } from 'antd';
+import { MIN_ZOOM, MAX_ZOOM, ZOOM_STEP } from "../constant";
+import { getSelectedNodes } from "../utils/flowChartUtils";
+import { history } from "../hooks/useHistory";
+import { useModel } from "../hooks/useModel";
+export var shortcuts = {
+  save: {
+    keys: ['meta + s', 'ctrl + s'],
+    handler: function handler() {
+      // console.log('save');
+      console.log(useModel().toJSON());
+      return false;
+    }
+  },
+  undo: {
+    keys: ['meta + z', 'ctrl + z'],
+    handler: function handler() {
+      history.undo();
+      return false;
+    }
+  },
+  redo: {
+    keys: ['meta + shift + z', 'ctrl + shift + z'],
+    handler: function handler() {
+      history.redo();
+      return false;
+    }
+  },
+  zoomIn: {
+    keys: ['meta + shift + +', 'ctrl + shift + +'],
+    handler: function handler(flowGraph) {
+      var nextZoom = (flowGraph.zoom() + ZOOM_STEP).toPrecision(2);
+      flowGraph.zoomTo(Number(nextZoom), {
+        maxScale: MAX_ZOOM
+      });
+      return false;
+    }
+  },
+  zoomOut: {
+    keys: ['meta + shift + -', 'ctrl + shift + -'],
+    handler: function handler(flowGraph) {
+      var nextZoom = (flowGraph.zoom() - ZOOM_STEP).toPrecision(2);
+      flowGraph.zoomTo(Number(nextZoom), {
+        minScale: MIN_ZOOM
+      });
+      return false;
+    }
+  },
+  // copy: {
+  //   keys: ['meta + c', 'ctrl + c'],
+  //   handler(flowGraph: Graph) {
+  //     const cells = flowGraph.getSelectedCells();
+  //     if (cells.length > 0) {
+  //       flowGraph.copy(cells);
+  //       message.success('复制成功');
+  //     }
+  //     return false;
+  //   },
+  // },
+  // paste: {
+  //   keys: ['meta + v', 'ctrl + v'],
+  //   handler(flowGraph: Graph) {
+  //     if (!flowGraph.isClipboardEmpty()) {
+  //       const cells = flowGraph.paste({ offset: 32 });
+  //       flowGraph.cleanSelection();
+  //       flowGraph.select(cells);
+  //     }
+  //     return false;
+  //   },
+  // },
+  delete: {
+    keys: ['backspace', 'del'],
+    handler: function handler(flowGraph) {
+      var toDelCells = flowGraph.getSelectedCells().filter(function (cell) {
+        return cell.isNode();
+      });
+      if (toDelCells.length) {
+        Modal.confirm({
+          title: "\u786E\u8BA4\u8981\u5220\u9664\u9009\u4E2D\u7684\u8282\u70B9\uFF1F",
+          content: '点击确认按钮进行删除，点击取消按钮返回',
+          onOk: function onOk() {
+            toDelCells.forEach(function (node) {
+              var _model$remove;
+              var _ref = node.getData() || {},
+                model = _ref.model;
+              model === null || model === void 0 || (_model$remove = model.remove) === null || _model$remove === void 0 || _model$remove.call(model);
+            });
+            history.push();
+          }
+        });
+      }
+      return false;
+    }
+  },
+  selectAll: {
+    keys: ['meta + a', 'ctrl + a'],
+    handler: function handler(flowGraph) {
+      flowGraph.select(flowGraph.getCells());
+      return false;
+    }
+  },
+  bold: {
+    keys: ['meta + b', 'ctrl + b'],
+    handler: function handler(flowGraph) {
+      var cells = flowGraph.getSelectedCells();
+      if (cells.length > 0) {
+        var isAlreadyBold = safeGet(cells, '0.attrs.label.fontWeight', 'normal') === 'bold';
+        cells.forEach(function (cell) {
+          cell.setAttrs({
+            label: {
+              fontWeight: isAlreadyBold ? 'normal' : 'bold'
+            }
+          });
+        });
+        flowGraph.trigger('toolBar:forceUpdate');
+      }
+      return false;
+    }
+  },
+  italic: {
+    keys: ['meta + i', 'ctrl + i'],
+    handler: function handler(flowGraph) {
+      var cells = flowGraph.getSelectedCells();
+      if (cells.length > 0) {
+        var isAlreadyItalic = safeGet(cells, '0.attrs.label.fontStyle', 'normal') === 'italic';
+        cells.forEach(function (cell) {
+          cell.setAttrs({
+            label: {
+              fontStyle: isAlreadyItalic ? 'normal' : 'italic'
+            }
+          });
+        });
+        flowGraph.trigger('toolBar:forceUpdate');
+      }
+      return false;
+    }
+  },
+  underline: {
+    keys: ['meta + u', 'ctrl + u'],
+    handler: function handler(flowGraph) {
+      var cells = flowGraph.getSelectedCells();
+      if (cells.length > 0) {
+        var isAlreadyUnderline = safeGet(cells, '0.attrs.label.textDecoration', 'none') === 'underline';
+        cells.forEach(function (cell) {
+          cell.setAttrs({
+            label: {
+              textDecoration: isAlreadyUnderline ? 'none' : 'underline'
+            }
+          });
+        });
+        flowGraph.trigger('toolBar:forceUpdate');
+      }
+      return false;
+    }
+  },
+  bringToTop: {
+    keys: ['meta + ]', 'ctrl + ]'],
+    handler: function handler(flowGraph) {
+      getSelectedNodes(flowGraph).forEach(function (node) {
+        return node.toFront();
+      });
+    }
+  },
+  bringToBack: {
+    keys: ['meta + [', 'ctrl + ['],
+    handler: function handler(flowGraph) {
+      getSelectedNodes(flowGraph).forEach(function (node) {
+        return node.toBack();
+      });
+    }
+  }
+};
+var registerShortcuts = function registerShortcuts(flowGraph) {
+  Object.values(shortcuts).forEach(function (shortcut) {
+    var keys = shortcut.keys,
+      handler = shortcut.handler;
+    flowGraph.bindKey(keys, function () {
+      return handler(flowGraph);
+    });
+  });
+};
+export default registerShortcuts;

package/dist/LiteFlowEditor/components/NodeBadge/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Node } from '@antv/x6';
+declare const NodeBadge: React.FC<{
+    node: Node;
+}>;
+export default NodeBadge;

package/dist/LiteFlowEditor/components/NodeBadge/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { NODE_TYPE_INTERMEDIATE_END, NodeTypeEnum, ConditionTypeEnum } from "../../constant";
+import { getIconByType } from "../../cells";
+import styles from "./index.module.less";
+var NodeBadge = function NodeBadge(props) {
+  var node = props.node;
+  var _node$getData = node.getData(),
+    model = _node$getData.model;
+  var badge = null;
+  if (model) {
+    var currentModel = model.proxy || model;
+    if (currentModel.type !== node.shape && currentModel.type !== NodeTypeEnum.COMMON && currentModel.type !== NodeTypeEnum.BOOLEAN && currentModel.type !== NodeTypeEnum.VIRTUAL && currentModel.type !== ConditionTypeEnum.CHAIN && NODE_TYPE_INTERMEDIATE_END !== node.shape) {
+      badge = /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.liteflowShapeBadgeWrapper)
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.liteflowShapeBadgeSvg,
+        src: getIconByType(currentModel.type)
+      }));
+    }
+  }
+  return badge;
+};
+export default NodeBadge;

package/dist/LiteFlowEditor/components/NodeBadge/index.module.less

@@ -0,0 +1,10 @@
+.liteflowShapeBadgeWrapper {
+  .liteflowShapeBadgeSvg {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    width: 18px;
+    height: 18px;
+    text-align: center;
+  }
+}

package/dist/LiteFlowEditor/components/NodeToolBar/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Node } from '@antv/x6';
+declare const NodeToolBar: React.FC<{
+    node: Node;
+}>;
+export default NodeToolBar;