liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/panels/toolBar/widgets/selection.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import makeBtnWidget from "./common/makeBtnWidget";
+import { GatewayOutlined } from '@ant-design/icons';
+var ToggleSelection = makeBtnWidget({
+  tooltip: 'select_nodes',
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(GatewayOutlined, null);
+  },
+  handler: function handler(flowGraph) {
+    var needEnableRubberBand = !flowGraph.isRubberbandEnabled();
+    if (needEnableRubberBand) {
+      flowGraph.disablePanning();
+      flowGraph.enableRubberband();
+    } else {
+      flowGraph.enablePanning();
+      flowGraph.disableRubberband();
+    }
+  },
+  selected: function selected(flowGraph) {
+    return flowGraph.isRubberbandEnabled();
+  }
+});
+export default ToggleSelection;

package/dist/LiteFlowEditor/panels/toolBar/widgets/undo.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+interface IProps {
+    flowGraph: Graph;
+}
+declare const Save: React.FC<IProps>;
+export default Save;

package/dist/LiteFlowEditor/panels/toolBar/widgets/undo.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UndoOutlined } from '@ant-design/icons';
+import { shortcuts } from "../../../common/shortcuts";
+import makeBtnWidget from "./common/makeBtnWidget";
+import { history } from "../../../hooks/useHistory";
+var Save = makeBtnWidget({
+  tooltip: 'revoke',
+  handler: shortcuts.undo.handler,
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(UndoOutlined, null);
+  },
+  disabled: function disabled() {
+    return !history.canUndo();
+  }
+});
+export default Save;

package/dist/LiteFlowEditor/panels/toolBar/widgets/view.d.ts

@@ -0,0 +1,7 @@
+import { Graph } from '@antv/x6';
+import React from 'react';
+interface IProps {
+    flowGraph: Graph;
+}
+declare const View: React.FC<IProps>;
+export default View;

package/dist/LiteFlowEditor/panels/toolBar/widgets/view.js

@@ -0,0 +1,37 @@
+import { EyeOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Modal } from 'antd';
+import JsonView from 'react-json-view';
+import makeBtnWidget from "./common/makeBtnWidget";
+import { useModel } from "../../../hooks";
+var View = makeBtnWidget({
+  tooltip: '查看DSL',
+  handler: function handler() {
+    var model = useModel();
+    Modal.info({
+      title: '查看DSL',
+      width: 1000,
+      maskClosable: true,
+      closable: true,
+      content:
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement(JsonView, {
+        name: null,
+        collapsed: false,
+        enableClipboard: true,
+        displayDataTypes: false,
+        displayObjectSize: false,
+        src: JSON.parse(JSON.stringify(model.toJSON()))
+      })
+    });
+    // console.log(JSON.stringify(model.toJSON(), null, 2));
+  },
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(EyeOutlined, null);
+  },
+  disabled: function disabled(flowGraph) {
+    return false;
+  }
+});
+export default View;

package/dist/LiteFlowEditor/panels/toolBar/widgets/zoom.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+interface IProps {
+    flowGraph: Graph;
+}
+declare const Zoom: React.FC<IProps>;
+export default Zoom;

package/dist/LiteFlowEditor/panels/toolBar/widgets/zoom.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useContext } from 'react';
+import { ZoomOutOutlined, ZoomInOutlined } from '@ant-design/icons';
+import { MAX_ZOOM, MIN_ZOOM } from "../../../constant";
+import { shortcuts } from "../../../common/shortcuts";
+import makeBtnWidget from "./common/makeBtnWidget";
+import { useGraph } from "../../../hooks";
+import styles from "./index.module.less";
+import GraphContext from "../../../context/GraphContext";
+var ZoomOut = makeBtnWidget({
+  tooltip: 'shrink',
+  handler: shortcuts.zoomOut.handler,
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(ZoomOutOutlined, null);
+  },
+  disabled: function disabled(flowGraph) {
+    return flowGraph.zoom() <= MIN_ZOOM;
+  }
+});
+var ZoomIn = makeBtnWidget({
+  tooltip: 'magnify',
+  handler: shortcuts.zoomIn.handler,
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(ZoomInOutlined, null);
+  },
+  disabled: function disabled(flowGraph) {
+    return flowGraph.zoom() >= MAX_ZOOM;
+  }
+});
+var Zoom = function Zoom(props) {
+  var flowGraph = useGraph();
+  var _useState = useState(flowGraph.zoom()),
+    _useState2 = _slicedToArray(_useState, 2),
+    scale = _useState2[0],
+    setScale = _useState2[1];
+  var _useContext = useContext(GraphContext),
+    currentEditor = _useContext.currentEditor,
+    chainObject = _useContext.chainObject;
+  useEffect(function () {
+    var handleScale = function handleScale() {
+      setScale(flowGraph.zoom());
+    };
+    flowGraph.on('scale', handleScale);
+    setTimeout(function () {
+      if (chainObject !== null && chainObject !== void 0 && chainObject.dslData) {
+        typeof (chainObject === null || chainObject === void 0 ? void 0 : chainObject.dslData) === 'string' && (chainObject.dslData = JSON.parse(chainObject === null || chainObject === void 0 ? void 0 : chainObject.dslData));
+        currentEditor.fromJSON(chainObject === null || chainObject === void 0 ? void 0 : chainObject.dslData);
+        return;
+      }
+      currentEditor.fromJSON({});
+    }, 500);
+    return function () {
+      flowGraph.off('scale', handleScale);
+    };
+  }, [flowGraph]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.zoomContainer
+  }, /*#__PURE__*/React.createElement(ZoomOut, props), /*#__PURE__*/React.createElement("span", {
+    className: styles.zoomText
+  }, Helper.scaleFormatter(scale)), /*#__PURE__*/React.createElement(ZoomIn, props));
+};
+var Helper = {
+  scaleFormatter: function scaleFormatter(scale) {
+    return (scale * 100).toFixed(0) + '%';
+  }
+};
+export default Zoom;

package/dist/LiteFlowEditor/utils/eventBus.d.ts

@@ -0,0 +1,34 @@
+type EventHandler<T = any> = (payload: T) => void;
+declare class EventBus {
+    private events;
+    /**
+     * 添加监听器
+     * @param event 事件名称
+     * @param handler 事件处理函数
+    */
+    on<T = any>(event: string, handler: EventHandler<T>): void;
+    /**
+     * 添加一次性监听器
+     * @param event 事件名称
+     * @param handler 事件处理函数
+    */
+    once<T = any>(event: string, handler: EventHandler<T>): void;
+    /**
+     * 移除某事件的所有监听器
+     * @param event 事件名称
+     */
+    off(event: string): void;
+    /**
+     * 触发事件
+     * @param event 事件名称
+     * @param payload 事件参数
+     */
+    emit<T = any>(event: string, payload?: T): void;
+    /**
+     * 清除所有事件
+     * @description 移除所有事件监听器，谨慎使用
+     */
+    clear(): void;
+}
+export declare const eventBus: EventBus;
+export {};

package/dist/LiteFlowEditor/utils/eventBus.js

@@ -0,0 +1,86 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var EventBus = /*#__PURE__*/function () {
+  function EventBus() {
+    _classCallCheck(this, EventBus);
+    _defineProperty(this, "events", new Map());
+  }
+  _createClass(EventBus, [{
+    key: "on",
+    value:
+    /**
+     * 添加监听器
+     * @param event 事件名称
+     * @param handler 事件处理函数
+    */
+    function on(event, handler) {
+      if (!this.events.has(event)) {
+        this.events.set(event, new Set());
+      }
+      this.events.get(event).add(handler);
+    }
+
+    /**
+     * 添加一次性监听器
+     * @param event 事件名称
+     * @param handler 事件处理函数
+    */
+  }, {
+    key: "once",
+    value: function once(event, handler) {
+      var _this = this;
+      /**
+       * @description 移除当前监听器
+      */
+      var wrapper = function wrapper(payload) {
+        _this.off(event); // 移除当前监听器
+        handler(payload);
+      };
+      this.on(event, wrapper);
+    }
+
+    /**
+     * 移除某事件的所有监听器
+     * @param event 事件名称
+     */
+  }, {
+    key: "off",
+    value: function off(event) {
+      this.events.delete(event);
+    }
+
+    /**
+     * 触发事件
+     * @param event 事件名称
+     * @param payload 事件参数
+     */
+  }, {
+    key: "emit",
+    value: function emit(event, payload) {
+      var handlers = this.events.get(event);
+      if (handlers) {
+        // 使用 values() 方法获取迭代器来遍历 Set，避免扩展运算符兼容性问题
+        var iterator = handlers.values();
+        var result = iterator.next();
+        while (!result.done) {
+          var handler = result.value;
+          handler(payload);
+          result = iterator.next();
+        }
+      }
+    }
+
+    /**
+     * 清除所有事件
+     * @description 移除所有事件监听器，谨慎使用
+     */
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.events.clear();
+    }
+  }]);
+  return EventBus;
+}();
+export var eventBus = new EventBus();

package/dist/LiteFlowEditor/utils/flowChartUtils.d.ts

@@ -0,0 +1,9 @@
+import { Cell, Graph } from '@antv/x6';
+export declare const hasCellSelected: (flowGraph: Graph) => boolean;
+export declare const hasNodeSelected: (flowGraph: Graph) => boolean;
+export declare const hasEdgeSelected: (flowGraph: Graph) => boolean;
+export declare const getSelectedNodes: (flowGraph: Graph) => Cell[];
+export declare const getSelectedEdges: (flowGraph: Graph) => Cell[];
+export declare const toSelectedCellsJSON: (flowGraph: Graph) => {
+    cells: Cell.Properties[];
+};

package/dist/LiteFlowEditor/utils/flowChartUtils.js

@@ -0,0 +1,34 @@
+export var hasCellSelected = function hasCellSelected(flowGraph) {
+  return flowGraph.getSelectedCellCount() > 0;
+};
+export var hasNodeSelected = function hasNodeSelected(flowGraph) {
+  return flowGraph.getSelectedCells().filter(function (cell) {
+    return cell.isNode();
+  }).length > 0;
+};
+export var hasEdgeSelected = function hasEdgeSelected(flowGraph) {
+  return flowGraph.getSelectedCells().filter(function (cell) {
+    return cell.isEdge();
+  }).length > 0;
+};
+export var getSelectedNodes = function getSelectedNodes(flowGraph) {
+  return flowGraph.getSelectedCells().filter(function (cell) {
+    return cell.isNode();
+  });
+};
+export var getSelectedEdges = function getSelectedEdges(flowGraph) {
+  return flowGraph.getSelectedCells().filter(function (cell) {
+    return cell.isEdge();
+  });
+};
+export var toSelectedCellsJSON = function toSelectedCellsJSON(flowGraph) {
+  var json = flowGraph.toJSON();
+  var selectedCells = flowGraph.getSelectedCells();
+  return {
+    cells: json.cells.filter(function (cell) {
+      return selectedCells.find(function (o) {
+        return o.id === cell.id;
+      });
+    })
+  };
+};

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

@@ -0,0 +1,33 @@
+export declare const safeParse: (json: string) => Record<string, any>;
+export declare const safeGet: (obj: any, keyChain: string, defaultVal?: any) => any;
+export declare const executeScript: (code: string, type?: string) => void;
+/**
+ * @description: 查找在当前节点之前的所有节点
+ * @param {Record<string, any>} data
+ * @param {string} targetTag
+ * @param {any[]} result
+*/
+export declare const findNodesBeforeTag: (data: Record<string, any>, targetTag: string, result?: any[]) => any[];
+/**
+ * @description 提取{{}}内的内容
+ * @param {string} str
+ * @return 提取到的内容数组
+*/
+export declare const extractBracedContent: (str: string) => string[];
+/**
+ * @description: 查找使用工作流参数的节点
+ * @param {Record<string, any>} data
+*/
+export declare const findWorkInputs: (data: Record<string, any>) => any[];
+/**
+ * @description: 使用正则匹配括号内的内容
+ * @param {string} text
+*/
+export declare const extractTextInParentheses: (text: string) => string;
+/**
+ * @description: 格式化时间
+ * @param {string} time
+ * @return 格式化后的时间
+*/
+export declare const formatDateTime: (time: string) => string;
+export declare const useTagGetModel: (tag: string, useModel: any) => any;

package/dist/LiteFlowEditor/utils/index.js

@@ -0,0 +1,245 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+export var safeParse = function safeParse(json) {
+  try {
+    return JSON.parse(json);
+  } catch (error) {
+    return {};
+  }
+};
+export var safeGet = function safeGet(obj, keyChain, defaultVal) {
+  if (_typeof(obj) !== 'object' || obj === null) {
+    return defaultVal;
+  }
+  var val = obj;
+  var keys = keyChain.split('.');
+  var _iterator = _createForOfIteratorHelper(keys),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      if (val[key] === undefined) {
+        return defaultVal;
+      } else {
+        val = val[key];
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return val;
+};
+export var executeScript = function executeScript(code) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'module';
+  var script = document.createElement('script');
+  script.type = type;
+  script.text = code;
+  document.body.appendChild(script);
+};
+
+/**
+ * @description: 查找在当前节点之前的所有节点
+ * @param {Record<string, any>} data
+ * @param {string} targetTag
+ * @param {any[]} result
+*/
+export var findNodesBeforeTag = function findNodesBeforeTag(data, targetTag) {
+  var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  if (Array.isArray(data)) {
+    var _iterator2 = _createForOfIteratorHelper(data),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var item = _step2.value;
+        // console.log('item', item);
+        if (item.type === 'NodeComponent') {
+          var _item$properties;
+          if (((_item$properties = item.properties) === null || _item$properties === void 0 ? void 0 : _item$properties.tag) === targetTag) {
+            return result;
+          }
+          result.push({
+            properties: item.properties,
+            id: item.id
+          });
+        } else if (item.type === 'WHEN' && item.children) {
+          // 检查目标节点是否在 WHEN 内部
+          var isTargetInWhen = item.children.some(function (child) {
+            var _child$properties;
+            return ((_child$properties = child.properties) === null || _child$properties === void 0 ? void 0 : _child$properties.tag) === targetTag;
+          });
+          if (isTargetInWhen) {
+            // 若目标节点在 WHEN 内部，直接跳过整个 WHEN 节点
+            continue;
+          } else {
+            // 若目标节点不在 WHEN 内部，递归处理 WHEN 的子节点
+            findNodesBeforeTag(item.children, targetTag, result);
+          }
+        } else if (item.type === "ITERATOR") {
+          var _item$condition$prope;
+          var isTargetInIterator = ((_item$condition$prope = item.condition.properties) === null || _item$condition$prope === void 0 ? void 0 : _item$condition$prope.tag) === targetTag;
+          if (isTargetInIterator) {
+            // 若目标节点在 ITERATOR 内部，直接跳过整个 ITERATOR 节点
+            continue;
+          } else {
+            // 若目标节点不在 ITERATOR 内部，递归处理 ITERATOR 的子节点
+            findNodesBeforeTag(item.children, targetTag, result);
+          }
+        } else if (item.children) {
+          findNodesBeforeTag(item.children, targetTag, result);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  } else if (data.children) {
+    findNodesBeforeTag(data.children, targetTag, result);
+  }
+  return result;
+};
+
+/**
+ * @description 提取{{}}内的内容
+ * @param {string} str
+ * @return 提取到的内容数组
+*/
+export var extractBracedContent = function extractBracedContent(str) {
+  var regex = /\{\{(.*?)\}\}/g;
+  var matches = [];
+  var match;
+  while ((match = regex.exec(str)) !== null) {
+    matches.push(match[1]); // match[1] 是括号内的内容
+  }
+  return matches;
+};
+
+/**
+ * @description: 查找使用工作流参数的节点
+ * @param {Record<string, any>} data
+*/
+export var findWorkInputs = function findWorkInputs(data) {
+  var result = [];
+  function traverse(nodes) {
+    if (!Array.isArray(nodes)) return;
+    var _iterator3 = _createForOfIteratorHelper(nodes),
+      _step3;
+    try {
+      var _loop = function _loop() {
+        var _node$properties, _node$properties2;
+        var node = _step3.value;
+        if (node.type === 'NodeComponent' && Array.isArray((_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.inputList)) {
+          node.properties.inputList.forEach(function (input) {
+            var _input$value;
+            if (input.type === 'input') {
+              var usePramsList = extractBracedContent(input.value);
+              if (usePramsList.length > 0) {
+                usePramsList.forEach(function (item) {
+                  if (item.split('~~~')[0] === 'work') {
+                    result.push({
+                      tag: node.properties.tag,
+                      label: input.label,
+                      value: item.split('~~~')[1]
+                    }); // 也可以换成 `result.push(input.value);`
+                  }
+                });
+              }
+              return;
+            }
+            var prefix = (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.split('~~~')[0];
+            if (prefix === 'work') {
+              var _input$value2;
+              result.push({
+                tag: node.properties.tag,
+                label: input.label,
+                value: (_input$value2 = input.value) === null || _input$value2 === void 0 ? void 0 : _input$value2.split('~~~')[1]
+              }); // 也可以换成 `result.push(input.value);`
+            }
+          });
+        }
+        if (node.type === 'NodeComponent' && (_node$properties2 = node.properties) !== null && _node$properties2 !== void 0 && _node$properties2.filterParam) {
+          var _node$properties3;
+          var filterParam = JSON.parse((_node$properties3 = node.properties) === null || _node$properties3 === void 0 ? void 0 : _node$properties3.filterParam);
+          filterParam.forEach(function (item) {
+            var _loop2 = function _loop2(key) {
+              if (key.split('-')[0] === 'initialize' && !result.find(function (i) {
+                return i.value === JSON.parse(item.param[key]).value.split('@@')[1];
+              })) {
+                result.push({
+                  tag: node.properties.tag,
+                  label: '过滤器条件',
+                  value: JSON.parse(item.param[key]).value.split('@@')[1]
+                });
+              }
+            };
+            for (var key in item.param) {
+              _loop2(key);
+            }
+          });
+        }
+        if (Array.isArray(node.children)) {
+          traverse(node.children);
+        }
+      };
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        _loop();
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  }
+  traverse(data.children);
+  return result;
+};
+
+/**
+ * @description: 使用正则匹配括号内的内容
+ * @param {string} text
+*/
+export var extractTextInParentheses = function extractTextInParentheses(text) {
+  var match = text.match(/\(([^)]+)\)/);
+  return match ? match[1] : text;
+};
+/**
+ * @description: 格式化时间
+ * @param {string} time
+ * @return 格式化后的时间
+*/
+export var formatDateTime = function formatDateTime(time) {
+  var date = new Date(time);
+  if (isNaN(date.getTime())) return ''; // 处理非法时间输入
+
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+  var day = String(date.getDate()).padStart(2, '0');
+  return "".concat(year, "/").concat(month, "/").concat(day);
+};
+export var useTagGetModel = function useTagGetModel(tag, useModel) {
+  if (typeof useModel !== 'function') return null;
+  var stack = [];
+  var model = useModel();
+  var modelJSON = model.toJSON();
+  if (!modelJSON.children) return null;
+
+  // 初始时，将所有子节点入栈
+  stack.push.apply(stack, _toConsumableArray(modelJSON.children));
+  while (stack.length > 0) {
+    var _item$properties2;
+    var item = stack.pop(); // 取出栈顶元素
+
+    if (item.type === "NodeComponent" && ((_item$properties2 = item.properties) === null || _item$properties2 === void 0 ? void 0 : _item$properties2.tag) === tag) {
+      return item; // 找到目标节点，直接返回
+    }
+
+    // 如果当前节点有子节点，将其子节点入栈（继续遍历）
+    if (item.children) {
+      stack.push.apply(stack, _toConsumableArray(item.children));
+    }
+  }
+  return null; // 遍历完所有节点仍未找到，返回 null
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as LiteFlowEditor } from './LiteFlowEditor';
+export { GraphContext } from './LiteFlowEditor/context/GraphContext';
+export { ScriptContext, useScriptContext } from './LiteFlowEditor/context/ScriptContext';
+export * from './LiteFlowEditor/hooks';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as LiteFlowEditor } from "./LiteFlowEditor";
+export { GraphContext } from "./LiteFlowEditor/context/GraphContext";
+export { ScriptContext, useScriptContext } from "./LiteFlowEditor/context/ScriptContext";
+export * from "./LiteFlowEditor/hooks";