liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/cells/index.js

@@ -0,0 +1,219 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { Graph } from '@antv/x6';
+import '@antv/x6-react-shape';
+import { ConditionTypeEnum, NODE_HEIGHT, NODE_TYPE_INTERMEDIATE_END, NODE_WIDTH, NodeTypeEnum } from "../constant";
+/** AntV X6自定义节点 */
+// 开始 & 结束
+import { default as Start } from "./start";
+import { default as End } from "./end";
+// 顺序：串行、并行
+import { default as Then } from "./then";
+import { default as When } from "./when";
+import { default as Common } from "./common";
+import { default as IntermediateEnd } from "./intermediate-end";
+// 分支：选择、条件
+import { default as Switch } from "./switch";
+import { default as If } from "./if";
+// 循环：For、While
+// import {default as For} from './for';
+// import {default as While} from './while';
+import { default as Iterator } from "./iterator";
+// 捕获异常：Catch
+// import {default as Catch} from './catch';
+// 运算符：与或非
+// import {default as And} from './and';
+// import {default as Or} from './or';
+// import {default as Not} from './not';
+// 子流程：Chain
+// import {default as Chain} from './chain';
+// 其他辅助节点：虚节点
+import { default as Virtual } from "./virtual";
+
+// AntV X6自定义节点的视图：使用React组件
+import { NodeBadge, NodeToolBar, NodeView } from "../components";
+import i18n from "../i18n";
+
+/** 注册自定义节点到AntV X6 */
+[Start, End, Then, When, Common, IntermediateEnd, If, Switch,
+// For,
+// While,
+Iterator,
+// Catch,
+// And,
+// Or,
+// Not,
+Virtual
+// Chain,
+].forEach(function (cell) {
+  // 注册AntV X6节点
+  var type = cell.type,
+    label = cell.label,
+    icon = cell.icon,
+    _cell$node = cell.node,
+    node = _cell$node === void 0 ? {} : _cell$node;
+  Graph.registerNode(type, _objectSpread({
+    // primer: 'circle',
+    inherit: 'react-shape',
+    component: function component(node) {
+      return /*#__PURE__*/React.createElement(NodeView, {
+        node: node,
+        icon: icon
+      }, /*#__PURE__*/React.createElement(NodeBadge, {
+        node: node
+      }), /*#__PURE__*/React.createElement(NodeToolBar, {
+        node: node
+      }));
+    },
+    width: NODE_WIDTH,
+    height: NODE_HEIGHT,
+    attrs: {
+      label: {
+        refX: 0.5,
+        refY: '100%',
+        refY2: 20,
+        text: i18n.t(label),
+        fill: '#333',
+        fontSize: 13,
+        textAnchor: 'middle',
+        textVerticalAnchor: 'middle',
+        textWrap: {
+          width: 80,
+          height: 60,
+          ellipsis: true,
+          breakWord: true
+        }
+      }
+    }
+  }, node));
+});
+export { Start, End, Common, Then, When, IntermediateEnd, Switch, If,
+// For,
+// While,
+Iterator,
+// Catch,
+// And,
+// Or,
+// Not,
+Virtual
+// Chain,
+};
+export var NODE_GROUP = {
+  key: 'node',
+  name: 'node_class',
+  cellTypes: [_objectSpread(_objectSpread({}, Common), {}, {
+    type: NodeTypeEnum.COMMON,
+    shape: Common.type
+  })]
+};
+export var SEQUENCE_GROUP = {
+  key: 'sequence',
+  name: 'sequential_class',
+  cellTypes: [_objectSpread(_objectSpread({}, Then), {}, {
+    type: ConditionTypeEnum.THEN,
+    shape: Then.type
+  }), _objectSpread(_objectSpread({}, When), {}, {
+    type: ConditionTypeEnum.WHEN,
+    shape: When.type
+  })]
+};
+export var BRANCH_GROUP = {
+  key: 'branch',
+  name: 'branch_class',
+  cellTypes: [_objectSpread(_objectSpread({}, Switch), {}, {
+    type: ConditionTypeEnum.SWITCH,
+    shape: Switch.type
+  }), _objectSpread(_objectSpread({}, If), {}, {
+    type: ConditionTypeEnum.IF,
+    shape: If.type
+  })]
+};
+export var CONTROL_GROUP = {
+  key: 'control',
+  name: 'loop_class',
+  cellTypes: [// {...For, type: ConditionTypeEnum.FOR, shape: For.type},
+  // {...While, type: ConditionTypeEnum.WHILE, shape: While.type},
+  _objectSpread(_objectSpread({}, Iterator), {}, {
+    type: ConditionTypeEnum.ITERATOR,
+    shape: Iterator.type
+  })]
+};
+
+// export const OTHER_GROUP: IGroupItem = {
+//   key: 'other',
+//   name: '其他类',
+//   cellTypes: [
+//     {...Catch, type: ConditionTypeEnum.CATCH, shape: Catch.type},
+//     {...And, type: ConditionTypeEnum.AND, shape: And.type},
+//     {...Or, type: ConditionTypeEnum.OR, shape: Or.type},
+//     {...Not, type: ConditionTypeEnum.NOT, shape: Not.type},
+//     {...Chain, type: ConditionTypeEnum.CHAIN, shape: Chain.type},
+//   ],
+// };
+
+export var getIconByType = function getIconByType(nodeType) {
+  switch (nodeType) {
+    case ConditionTypeEnum.THEN:
+      return Then.icon;
+    case ConditionTypeEnum.WHEN:
+      return When.icon;
+    case ConditionTypeEnum.SWITCH:
+    case NodeTypeEnum.SWITCH:
+      return Switch.icon;
+    case ConditionTypeEnum.IF:
+    case NodeTypeEnum.IF:
+      return If.icon;
+    // case ConditionTypeEnum.FOR:
+    // case NodeTypeEnum.FOR:
+    //   return For.icon;
+    // case ConditionTypeEnum.WHILE:
+    // case NodeTypeEnum.WHILE:
+    //   return While.icon;
+    case ConditionTypeEnum.ITERATOR:
+    case NodeTypeEnum.ITERATOR:
+      return Iterator.icon;
+    // case ConditionTypeEnum.CHAIN:
+    //   return Chain.icon;
+    // case ConditionTypeEnum.CATCH:
+    //   return Catch.icon;
+    // case ConditionTypeEnum.AND:
+    //   return And.icon;
+    // case ConditionTypeEnum.OR:
+    //   return Or.icon;
+    // case ConditionTypeEnum.NOT:
+    //   return Not.icon;
+    case NodeTypeEnum.COMMON:
+    default:
+      return Common.icon;
+  }
+};
+export function getNodeShapeByType(nodeType) {
+  switch (nodeType) {
+    case NodeTypeEnum.BOOLEAN:
+    case NodeTypeEnum.BOOLEAN_SCRIPT:
+    case NodeTypeEnum.IF:
+    case NodeTypeEnum.IF_SCRIPT:
+      return NodeTypeEnum.IF;
+    case NodeTypeEnum.SWITCH:
+    case NodeTypeEnum.SWITCH_SCRIPT:
+      return NodeTypeEnum.SWITCH;
+    case NodeTypeEnum.FOR:
+    case NodeTypeEnum.FOR_SCRIPT:
+      return NodeTypeEnum.FOR;
+    case NodeTypeEnum.WHILE:
+    case NodeTypeEnum.WHILE_SCRIPT:
+      return NodeTypeEnum.WHILE;
+    case NodeTypeEnum.ITERATOR:
+      return NodeTypeEnum.ITERATOR;
+    case NodeTypeEnum.BREAK:
+    case NodeTypeEnum.BREAK_SCRIPT:
+      return NODE_TYPE_INTERMEDIATE_END;
+    case NodeTypeEnum.VIRTUAL:
+      return NodeTypeEnum.VIRTUAL;
+    case NodeTypeEnum.COMMON:
+    case NodeTypeEnum.FALLBACK:
+    case NodeTypeEnum.SCRIPT:
+    default:
+      return NodeTypeEnum.COMMON;
+  }
+}

package/dist/LiteFlowEditor/cells/intermediate-end.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/intermediate-end.js

@@ -0,0 +1,11 @@
+import { NODE_TYPE_INTERMEDIATE_END } from "../constant";
+import icon from "../assets/intermediate-end-icon.svg";
+var config = {
+  label: 'node_intermediate_end',
+  type: NODE_TYPE_INTERMEDIATE_END,
+  icon: icon,
+  node: {
+    primer: 'circle'
+  }
+};
+export default config;

package/dist/LiteFlowEditor/cells/iterator.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/iterator.js

@@ -0,0 +1,8 @@
+import { NodeTypeEnum } from "../constant";
+import icon from "../assets/iterator-icon.svg";
+var config = {
+  label: 'node_iterator',
+  type: NodeTypeEnum.ITERATOR,
+  icon: icon
+};
+export default config;

package/dist/LiteFlowEditor/cells/not.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/not.js

@@ -0,0 +1,8 @@
+import { ConditionTypeEnum } from "../constant";
+import icon from "../assets/not-icon.svg";
+var config = {
+  label: 'node_not',
+  type: ConditionTypeEnum.NOT,
+  icon: icon
+};
+export default config;

package/dist/LiteFlowEditor/cells/or.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/or.js

@@ -0,0 +1,8 @@
+import { ConditionTypeEnum } from "../constant";
+import icon from "../assets/or-icon.svg";
+var config = {
+  label: 'node_or',
+  type: ConditionTypeEnum.OR,
+  icon: icon
+};
+export default config;

package/dist/LiteFlowEditor/cells/start.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/start.js

@@ -0,0 +1,11 @@
+import { NODE_TYPE_START } from "../constant";
+import icon from "../assets/start-icon.svg";
+var config = {
+  label: 'start',
+  type: NODE_TYPE_START,
+  icon: icon,
+  node: {
+    primer: 'circle'
+  }
+};
+export default config;

package/dist/LiteFlowEditor/cells/switch.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/switch.js

@@ -0,0 +1,9 @@
+import { NodeTypeEnum } from "../constant";
+import icon from "../assets/switch-icon.svg";
+var config = {
+  label: 'node_switch',
+  type: NodeTypeEnum.SWITCH,
+  icon: icon,
+  disabled: true
+};
+export default config;

package/dist/LiteFlowEditor/cells/then.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/then.js

@@ -0,0 +1,11 @@
+import { ConditionTypeEnum } from "../constant";
+import icon from "../assets/then-icon.svg";
+var config = {
+  label: 'node_then',
+  type: ConditionTypeEnum.THEN,
+  icon: icon,
+  node: {
+    primer: 'circle'
+  }
+};
+export default config;

package/dist/LiteFlowEditor/cells/virtual.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/virtual.js

@@ -0,0 +1,8 @@
+import { NodeTypeEnum } from "../constant";
+import icon from "../assets/virtual-icon.svg";
+var config = {
+  label: 'node_virtual',
+  type: NodeTypeEnum.VIRTUAL,
+  icon: icon
+};
+export default config;

package/dist/LiteFlowEditor/cells/when.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/when.js

@@ -0,0 +1,11 @@
+import { ConditionTypeEnum } from "../constant";
+import icon from "../assets/when-icon.svg";
+var config = {
+  label: 'node_when',
+  type: ConditionTypeEnum.WHEN,
+  icon: icon,
+  node: {
+    primer: 'circle'
+  }
+};
+export default config;

package/dist/LiteFlowEditor/cells/while.d.ts

@@ -0,0 +1,2 @@
+declare const config: LiteFlowNode;
+export default config;

package/dist/LiteFlowEditor/cells/while.js

@@ -0,0 +1,8 @@
+import { NodeTypeEnum } from "../constant";
+import icon from "../assets/while-icon.svg";
+var config = {
+  label: 'node_while',
+  type: NodeTypeEnum.WHILE,
+  icon: icon
+};
+export default config;

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

@@ -0,0 +1,2 @@
+import { Point, NodeView } from '@antv/x6';
+export default function anchor(view: NodeView): Point;

package/dist/LiteFlowEditor/common/anchor.js

@@ -0,0 +1,10 @@
+import { Point } from '@antv/x6';
+export default function anchor(view) {
+  var _view$cell$position = view.cell.position(),
+    x = _view$cell$position.x,
+    y = _view$cell$position.y;
+  var _view$cell$size = view.cell.size(),
+    width = _view$cell$size.width,
+    height = _view$cell$size.height;
+  return Point.create(x + width / 2, y + height / 2);
+}

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

@@ -0,0 +1,2 @@
+import { Point } from '@antv/x6';
+export default function connector(sourcePoint: Point.PointLike, targetPoint: Point.PointLike, routePoints: Point.PointLike[], args: any): string;

package/dist/LiteFlowEditor/common/connector.js

@@ -0,0 +1,20 @@
+import { Path, Point } from '@antv/x6';
+import { NODE_HEIGHT } from "../constant";
+export default function connector(sourcePoint, targetPoint, routePoints, args) {
+  var path;
+  var _args$side = args.side,
+    side = _args$side === void 0 ? 'left' : _args$side,
+    _args$height = args.height,
+    height = _args$height === void 0 ? NODE_HEIGHT : _args$height;
+  var radius = height / 2;
+  if (side === 'right') {
+    var prev = Point.create(sourcePoint.x + radius, sourcePoint.y - radius);
+    path = new Path(Path.createSegment('M', prev));
+    path.arcTo(12, 12, 0, 1, 1, targetPoint.x + radius, targetPoint.y + radius);
+  } else {
+    var _prev = Point.create(sourcePoint.x - radius, sourcePoint.y - radius);
+    path = new Path(Path.createSegment('M', _prev));
+    path.arcTo(12, 12, 0, 1, 1, targetPoint.x - radius, targetPoint.y + radius);
+  }
+  return path.serialize();
+}

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

@@ -0,0 +1,61 @@
+import { Markup } from '@antv/x6';
+declare const _default: {
+    inherit: string;
+    markup: ({
+        tagName: string;
+        selector: string;
+        groupSelector: string;
+        attrs: {
+            fill: string;
+            cursor: string;
+            stroke: string;
+            strokeLinecap: string;
+            pointerEvents?: undefined;
+        };
+    } | {
+        tagName: string;
+        selector: string;
+        groupSelector: string;
+        attrs: {
+            fill: string;
+            pointerEvents: string;
+            cursor?: undefined;
+            stroke?: undefined;
+            strokeLinecap?: undefined;
+        };
+    })[];
+    attrs: {
+        wrap: {
+            fill: string;
+            cursor: string;
+            stroke: string;
+            strokeLinecap: string;
+        };
+        line: {
+            stroke: string;
+            strokeWidth: number;
+            fill: string;
+            pointerEvents: string;
+        };
+    };
+    label: string;
+    defaultLabel: {
+        markup: Markup.JSONMarkup;
+        attrs: {
+            fo: {
+                width: number;
+                height: number;
+                x: number;
+                y: number;
+            };
+        };
+        position: {
+            distance: number;
+            options: {
+                keepGradient: boolean;
+                ensureLegibility: boolean;
+            };
+        };
+    };
+};
+export default _default;

package/dist/LiteFlowEditor/common/edge.js

@@ -0,0 +1,57 @@
+import { Markup } from '@antv/x6';
+import { LINE_COLOR } from "../constant";
+export default {
+  inherit: 'edge',
+  markup: [{
+    tagName: 'path',
+    selector: 'wrap',
+    groupSelector: 'lines',
+    attrs: {
+      fill: 'none',
+      cursor: 'pointer',
+      stroke: 'transparent',
+      strokeLinecap: 'round'
+    }
+  }, {
+    tagName: 'path',
+    selector: 'line',
+    groupSelector: 'lines',
+    attrs: {
+      fill: 'none',
+      pointerEvents: 'none'
+    }
+  }],
+  attrs: {
+    wrap: {
+      fill: 'none',
+      cursor: 'pointer',
+      stroke: 'transparent',
+      strokeLinecap: 'round'
+    },
+    line: {
+      stroke: LINE_COLOR,
+      strokeWidth: 2,
+      fill: 'none',
+      pointerEvents: 'none'
+    }
+  },
+  label: '+',
+  defaultLabel: {
+    markup: Markup.getForeignObjectMarkup(),
+    attrs: {
+      fo: {
+        width: 30,
+        height: 30,
+        x: -15,
+        y: -15
+      }
+    },
+    position: {
+      distance: 0.5,
+      options: {
+        keepGradient: true,
+        ensureLegibility: true
+      }
+    }
+  }
+};

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

@@ -0,0 +1,4 @@
+import { Graph } from '@antv/x6';
+export declare function findViewsFromPoint(flowGraph: Graph, x: number, y: number): any[];
+declare const registerEvents: (flowGraph: Graph) => void;
+export default registerEvents;

package/dist/LiteFlowEditor/common/events.js

@@ -0,0 +1,97 @@
+import { Dom, Rectangle } from '@antv/x6';
+import { getSelectedEdges } from "../utils/flowChartUtils";
+export function findViewsFromPoint(flowGraph, x, y) {
+  var flowGraphCellList = flowGraph.getCells(); // 获取所有的节点和边
+  var flowGraphViewList = flowGraphCellList.map(function (cell) {
+    return flowGraph.findViewByCell(cell);
+  }); // 获取所有的节点和边的view
+  var flowGraphViewFilterList = flowGraphViewList.filter(function (view) {
+    if (view != null) {
+      // console.log(view.container,'view.container');
+      // console.log(flowGraph.view.stage)
+      var bBox = Dom.getBBox(view.container, {
+        target: flowGraph.view.stage
+      });
+      // console.log(bBox,'bBox');
+      if (bBox.height < 16) {
+        bBox = Rectangle.create({
+          x: bBox.x,
+          y: bBox.y - 8 + bBox.height / 2,
+          width: bBox.width,
+          height: 16
+        });
+      }
+      // console.log(bBox.containsPoint({ x, y }),'containsPoint');
+      return bBox.containsPoint({
+        x: x,
+        y: y
+      });
+    }
+    return false;
+  });
+  return flowGraphViewFilterList;
+}
+var registerEvents = function registerEvents(flowGraph) {
+  flowGraph.on('selection:changed', function () {
+    flowGraph.trigger('toolBar:forceUpdate');
+    flowGraph.trigger('settingBar:forceUpdate');
+  });
+  flowGraph.on('edge:selected', function (args) {
+    args.edge.attr('line/stroke', '#feb663', {
+      ignore: true
+    });
+  });
+  flowGraph.on('edge:unselected', function (args) {
+    args.edge.attr('line/stroke', '#c1c1c1', {
+      ignore: true
+    });
+  });
+  flowGraph.on('edge:mouseover', function (args) {
+    args.edge.attr('line/stroke', '#feb663', {
+      ignore: true
+    });
+  });
+  flowGraph.on('edge:mouseleave', function (args) {
+    var edge = args.edge;
+    var selectedEdges = getSelectedEdges(flowGraph);
+    if (selectedEdges[0] !== edge) {
+      args.edge.attr('line/stroke', '#c1c1c1', {
+        ignore: true
+      });
+    }
+  });
+  flowGraph.on('node:dblclick', function () {
+    flowGraph.trigger('graph:editNode');
+  });
+  flowGraph.on('blank:contextmenu', function (args) {
+    var _args$e = args.e,
+      clientX = _args$e.clientX,
+      clientY = _args$e.clientY;
+    flowGraph.cleanSelection();
+    flowGraph.trigger('graph:showContextMenu', {
+      x: clientX,
+      y: clientY,
+      scene: 'blank'
+    });
+  });
+  flowGraph.on('node:contextmenu', function (args) {
+    var _args$e2 = args.e,
+      clientX = _args$e2.clientX,
+      clientY = _args$e2.clientY,
+      node = args.node;
+    // NOTE: if the clicked node is not in the selected nodes, then clear selection
+    if (!flowGraph.getSelectedCells().includes(node)) {
+      flowGraph.cleanSelection();
+      flowGraph.select(node);
+    }
+    flowGraph.trigger('graph:showContextMenu', {
+      x: clientX,
+      y: clientY,
+      scene: 'node'
+    });
+  });
+  flowGraph.on('blank:mousedown', function () {
+    flowGraph.cleanSelection();
+  });
+};
+export default registerEvents;

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

@@ -0,0 +1,4 @@
+export { default as registerEvents } from './events';
+export { default as registerShortcuts } from './shortcuts';
+import { LITEFLOW_ANCHOR, LITEFLOW_EDGE, LITEFLOW_ROUTER } from '../constant';
+export { LITEFLOW_EDGE, LITEFLOW_ROUTER, LITEFLOW_ANCHOR };

package/dist/LiteFlowEditor/common/index.js

@@ -0,0 +1,11 @@
+export { default as registerEvents } from "./events";
+export { default as registerShortcuts } from "./shortcuts";
+import { Graph } from '@antv/x6';
+import { LITEFLOW_ANCHOR, LITEFLOW_EDGE, LITEFLOW_ROUTER } from "../constant";
+import { default as liteflowEdge } from "./edge";
+import { default as liteflowRouter } from "./router";
+import { default as liteflowAnchor } from "./anchor";
+Graph.registerEdge(LITEFLOW_EDGE, liteflowEdge);
+Graph.registerRouter(LITEFLOW_ROUTER, liteflowRouter);
+Graph.registerAnchor(LITEFLOW_ANCHOR, liteflowAnchor);
+export { LITEFLOW_EDGE, LITEFLOW_ROUTER, LITEFLOW_ANCHOR };

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

@@ -0,0 +1,12 @@
+import { Graph } from '@antv/x6';
+export declare const forceLayout: (flowGraph: Graph, cfg?: any) => void;
+/**
+ * 使用Dagre原始包实现布局
+ * @param flowGraph 图实例
+ * @param cfg 配置
+ */
+/**
+ * 使用ELK实现布局
+ * @param flowGraph 图实例
+ * @param cfg 配置
+ */