@logicflow/extension 1.2.27 → 2.0.0-beta.1

package/src/turbo-adapter/index.ts

@@ -0,0 +1,212 @@
+const TurboType = {
+  SEQUENCE_FLOW: 1,
+  START_EVENT: 2,
+  END_EVENT: 3,
+  USER_TASK: 4,
+  // SERVICE_TASK = 5, 暂不支持
+  EXCLUSIVE_GATEWAY: 6,
+}
+
+const TurboTypeMap = {
+  1: 'bpmn:sequenceFlow',
+  2: 'bpmn:startEvent',
+  3: 'bpmn:endEvent',
+  4: 'bpmn:userTask',
+  6: 'bpmn:exclusiveGateway',
+}
+
+// 转换Turbo识别的类型
+function getTurboType(type) {
+  switch (type) {
+    case 'bpmn:sequenceFlow':
+      return TurboType.SEQUENCE_FLOW
+    case 'bpmn:startEvent':
+      return TurboType.START_EVENT
+    case 'bpmn:endEvent':
+      return TurboType.END_EVENT
+    case 'bpmn:userTask':
+      return TurboType.USER_TASK
+    // case 'bpmn:serviceTask':
+    //   return TurboType.SERVICE_TASK;
+    case 'bpmn:exclusiveGateway':
+      return TurboType.EXCLUSIVE_GATEWAY
+    default:
+      return type
+  }
+}
+
+// 将LogicFlow中的Node数据转换为Turbo元素数据
+function convertNodeToTurboElement(node) {
+  const { id, type, x, y, text = '', properties } = node
+  return {
+    incoming: [],
+    outgoing: [],
+    dockers: [],
+    type: getTurboType(type),
+    properties: {
+      ...properties,
+      name: (text && text.value) || '',
+      x,
+      y,
+      text,
+    },
+    key: id,
+  }
+}
+
+// 将LogicFlow中的Edge数据转换为Turbo元素数据
+function convertEdgeToTurboElement(edge) {
+  const {
+    id,
+    type,
+    sourceNodeId,
+    targetNodeId,
+    startPoint,
+    endPoint,
+    pointsList,
+    text = '',
+    properties,
+  } = edge
+  return {
+    incoming: [sourceNodeId],
+    outgoing: [targetNodeId],
+    type: getTurboType(type),
+    dockers: [],
+    properties: {
+      ...properties,
+      name: (text && text.value) || '',
+      text,
+      startPoint: JSON.stringify(startPoint),
+      endPoint: JSON.stringify(endPoint),
+      pointsList: JSON.stringify(pointsList),
+    },
+    key: id,
+  }
+}
+
+// 将LogicFlow中数据转换为Turbo数据
+export function toTurboData(data) {
+  const nodeMap = new Map()
+  const turboData: any = {
+    // TODO: 定义类型
+    flowElementList: [],
+  }
+  data.nodes.forEach((node) => {
+    const flowElement = convertNodeToTurboElement(node)
+    turboData.flowElementList.push(flowElement)
+    nodeMap.set(node.id, flowElement)
+  })
+  data.edges.forEach((edge) => {
+    const flowElement = convertEdgeToTurboElement(edge)
+    const sourceElement = nodeMap.get(edge.sourceNodeId)
+    sourceElement.outgoing.push(flowElement.key)
+    const targetElement = nodeMap.get(edge.targetNodeId)
+    targetElement.incoming.push(flowElement.key)
+    turboData.flowElementList.push(flowElement)
+  })
+  return turboData
+}
+
+// 将Turbo元素数据转换为LogicFlow中的Edge数据
+function convertFlowElementToEdge(element) {
+  const { incoming, outgoing, properties, key, type } = element
+  const { text, name, startPoint, endPoint, pointsList } = properties
+  const edge: Record<string, any> = {
+    id: key,
+    type: TurboTypeMap[type],
+    sourceNodeId: incoming[0],
+    targetNodeId: outgoing[0],
+    text: text || name,
+    properties: {},
+  }
+  if (startPoint) {
+    edge.startPoint = JSON.parse(startPoint)
+  }
+  if (endPoint) {
+    edge.endPoint = JSON.parse(endPoint)
+  }
+  if (pointsList) {
+    edge.pointsList = JSON.parse(pointsList)
+  }
+  // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
+  const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text']
+  Object.keys(element.properties).forEach((property) => {
+    if (excludeProperties.indexOf(property) === -1) {
+      edge.properties[property] = element.properties[property]
+    }
+  })
+  return edge
+}
+
+// 将Turbo元素数据转换为LogicFlow中的Node数据
+function convertFlowElementToNode(element) {
+  const { properties, key, type, bounds } = element
+  let { x, y } = properties
+  const { text } = properties
+  if (x === undefined) {
+    const [{ x: x1, y: y1 }, { x: x2, y: y2 }] = bounds
+    x = (x1 + x2) / 2
+    y = (y1 + y2) / 2
+  }
+  const node = {
+    id: key,
+    type: TurboTypeMap[type],
+    x,
+    y,
+    text,
+    properties: {},
+  }
+  // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
+  const excludeProperties = ['x', 'y', 'text']
+  Object.keys(element.properties).forEach((property) => {
+    if (excludeProperties.indexOf(property) === -1) {
+      node.properties[property] = element.properties[property]
+    }
+  })
+  return node
+}
+
+// 将Turbo元素数据转换为LogicFlow数据
+export function toLogicflowData(data) {
+  const lfData: any = {
+    // TODO: 定义类型
+    nodes: [],
+    edges: [],
+  }
+  const list = data.flowElementList
+  list &&
+    list.length > 0 &&
+    list.forEach((element) => {
+      if (element.type === TurboType.SEQUENCE_FLOW) {
+        const edge = convertFlowElementToEdge(element)
+        lfData.edges.push(edge)
+      } else {
+        const node = convertFlowElementToNode(element)
+        lfData.nodes.push(node)
+      }
+    })
+  return lfData
+}
+
+class TurboAdapter {
+  static pluginName = 'turboAdapter'
+
+  constructor({ lf }) {
+    lf.adapterIn = this.adapterIn
+    lf.adapterOut = this.adapterOut
+  }
+
+  adapterOut(logicflowData) {
+    if (logicflowData) {
+      return toTurboData(logicflowData)
+    }
+  }
+
+  adapterIn(turboData) {
+    if (turboData) {
+      return toLogicflowData(turboData)
+    }
+  }
+}
+
+export default TurboAdapter

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": false,
+    "experimentalDecorators": true,
+    "outDir": "es",
+    "skipLibCheck": true,
+    "downlevelIteration": true,
+    "noImplicitAny": false,
+    "baseUrl": "./",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
+  },
+  "include": ["src/**/*", "**/*.d.ts"],
+  "exclude": ["node_modules", "**/*.spec.ts", "es", "lib"]
+}

package/cjs/NodeResize/index.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlResize = exports.DiamondResize = exports.EllipseResize = exports.RectResize = exports.NodeResize = void 0;
-var RectResize_1 = require("./Node/RectResize");
-exports.RectResize = RectResize_1.default;
-var EllipseResize_1 = require("./Node/EllipseResize");
-exports.EllipseResize = EllipseResize_1.default;
-var DiamondResize_1 = require("./Node/DiamondResize");
-exports.DiamondResize = DiamondResize_1.default;
-var HtmlResize_1 = require("./Node/HtmlResize");
-exports.HtmlResize = HtmlResize_1.default;
-var NodeResize = {
-    pluginName: 'nodeResize',
-    // 拖动step
-    step: 0,
-    install: function (lf) {
-        lf.register({
-            type: RectResize_1.default.type,
-            view: RectResize_1.default.view,
-            model: RectResize_1.default.model,
-        });
-        lf.register({
-            type: EllipseResize_1.default.type,
-            view: EllipseResize_1.default.view,
-            model: EllipseResize_1.default.model,
-        });
-        lf.register({
-            type: DiamondResize_1.default.type,
-            view: DiamondResize_1.default.view,
-            model: DiamondResize_1.default.model,
-        });
-        lf.register({
-            type: HtmlResize_1.default.type,
-            view: HtmlResize_1.default.view,
-            model: HtmlResize_1.default.model,
-        });
-    },
-};
-exports.NodeResize = NodeResize;
-exports.default = NodeResize;

package/cjs/components/menu/index.js

@@ -1,377 +0,0 @@
-"use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-var DefaultNodeMenuKey = 'lf:defaultNodeMenu';
-var DefaultEdgeMenuKey = 'lf:defaultEdgeMenu';
-var DefaultGraphMenuKey = 'lf:defaultGraphMenu';
-var DefaultSelectionMenuKey = 'lf:defaultSelectionMenu';
-var Menu = /** @class */ (function () {
-    function Menu(_a) {
-        var _this = this;
-        var lf = _a.lf;
-        this.lf = lf;
-        var isSilentMode = lf.options.isSilentMode;
-        if (!isSilentMode) {
-            this.__menuDOM = document.createElement('ul');
-            this.menuTypeMap = new Map();
-            this.init();
-            this.lf.setMenuConfig = function (config) {
-                _this.setMenuConfig(config);
-            };
-            this.lf.addMenuConfig = function (config) {
-                _this.addMenuConfig(config);
-            };
-            this.lf.setMenuByType = function (config) {
-                _this.setMenuByType(config);
-            };
-        }
-    }
-    /**
-     * 初始化设置默认内置菜单栏
-     */
-    Menu.prototype.init = function () {
-        var _this = this;
-        var defaultNodeMenu = [
-            {
-                text: '删除',
-                callback: function (node) {
-                    _this.lf.deleteNode(node.id);
-                },
-            },
-            {
-                text: '编辑文本',
-                callback: function (node) {
-                    _this.lf.graphModel.editText(node.id);
-                },
-            },
-            {
-                text: '复制',
-                callback: function (node) {
-                    _this.lf.cloneNode(node.id);
-                },
-            },
-        ];
-        this.menuTypeMap.set(DefaultNodeMenuKey, defaultNodeMenu);
-        var defaultEdgeMenu = [
-            {
-                text: '删除',
-                callback: function (edge) {
-                    _this.lf.deleteEdge(edge.id);
-                },
-            },
-            {
-                text: '编辑文本',
-                callback: function (edge) {
-                    _this.lf.graphModel.editText(edge.id);
-                },
-            },
-        ];
-        this.menuTypeMap.set(DefaultEdgeMenuKey, defaultEdgeMenu);
-        this.menuTypeMap.set(DefaultGraphMenuKey, []);
-        var DefaultSelectionMenu = [
-            {
-                text: '删除',
-                callback: function (elements) {
-                    _this.lf.clearSelectElements();
-                    elements.edges.forEach(function (edge) { return _this.lf.deleteEdge(edge.id); });
-                    elements.nodes.forEach(function (node) { return _this.lf.deleteNode(node.id); });
-                },
-            },
-        ];
-        this.menuTypeMap.set(DefaultSelectionMenuKey, DefaultSelectionMenu);
-    };
-    Menu.prototype.render = function (lf, container) {
-        var _this = this;
-        if (lf.options.isSilentMode)
-            return;
-        this.__container = container;
-        this.__currentData = null; // 当前展示的菜单所属元素的model数据
-        this.__menuDOM.className = 'lf-menu';
-        container.appendChild(this.__menuDOM);
-        // 将选项的click事件委托至menu容器
-        // 在捕获阶段拦截并执行
-        this.__menuDOM.addEventListener('click', function (event) {
-            event.stopPropagation();
-            var target = event.target;
-            // 菜单有多层dom，需要精确获取菜单项所对应的dom
-            // 除菜单项dom外，应考虑两种情况
-            // 1. 菜单项的子元素 2. 菜单外层容器
-            while (Array.from(target.classList).indexOf('lf-menu-item') === -1 && Array.from(target.classList).indexOf('lf-menu') === -1) {
-                target = target.parentElement;
-            }
-            if (Array.from(target.classList).indexOf('lf-menu-item') > -1) {
-                // 如果点击区域在菜单项内
-                target.onclickCallback(_this.__currentData);
-                // 点击后隐藏menu
-                _this.__menuDOM.style.display = 'none';
-                _this.__currentData = null;
-            }
-            else {
-                // 如果点击区域不在菜单项内
-                console.warn('点击区域不在菜单项内，请检查代码！');
-            }
-        }, true);
-        // 通过事件控制菜单的显示和隐藏
-        this.lf.on('node:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position, e = _a.e;
-            var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
-            var id = data.id;
-            var model = _this.lf.graphModel.getNodeModelById(id);
-            var menuList = [];
-            var typeMenus = _this.menuTypeMap.get(model.type);
-            // 如果单个节点自定义了节点，以单个节点自定义为准
-            if (model && model.menu && Array.isArray(model.menu)) {
-                menuList = model.menu;
-            }
-            else if (typeMenus) { // 如果定义当前节点类型的元素
-                menuList = typeMenus;
-            }
-            else { // 最后取全局默认
-                menuList = _this.menuTypeMap.get(DefaultNodeMenuKey);
-            }
-            _this.__currentData = data;
-            _this.showMenu(x, y, menuList, {
-                width: model.width,
-                height: model.height,
-                clientX: e.clientX,
-                clientY: e.clientY,
-            });
-        });
-        this.lf.on('edge:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position, e = _a.e;
-            var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
-            var id = data.id;
-            var model = _this.lf.graphModel.getEdgeModelById(id);
-            var menuList = [];
-            var typeMenus = _this.menuTypeMap.get(model.type);
-            // 如果单个节点自定义了边
-            if (model && model.menu && Array.isArray(model.menu)) {
-                menuList = model.menu;
-            }
-            else if (typeMenus) { // 如果定义当前边类型的元素
-                menuList = typeMenus;
-            }
-            else { // 最后取全局默认
-                menuList = _this.menuTypeMap.get(DefaultEdgeMenuKey);
-            }
-            _this.__currentData = data;
-            _this.showMenu(x, y, menuList, {
-                width: model.width,
-                height: model.height,
-                clientX: e.clientX,
-                clientY: e.clientY,
-            });
-        });
-        this.lf.on('blank:contextmenu', function (_a) {
-            var position = _a.position;
-            var menuList = _this.menuTypeMap.get(DefaultGraphMenuKey);
-            var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
-            _this.showMenu(x, y, menuList);
-        });
-        this.lf.on('selection:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position;
-            var menuList = _this.menuTypeMap.get(DefaultSelectionMenuKey);
-            var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
-            _this.__currentData = data;
-            _this.showMenu(x, y, menuList);
-        });
-        this.lf.on('node:mousedown', function () {
-            _this.__menuDOM.style.display = 'none';
-        });
-        this.lf.on('edge:click', function () {
-            _this.__menuDOM.style.display = 'none';
-        });
-        this.lf.on('blank:click', function () {
-            _this.__menuDOM.style.display = 'none';
-        });
-    };
-    Menu.prototype.destroy = function () {
-        var _a;
-        (_a = this === null || this === void 0 ? void 0 : this.__container) === null || _a === void 0 ? void 0 : _a.removeChild(this.__menuDOM);
-        this.__menuDOM = null;
-    };
-    Menu.prototype.showMenu = function (x, y, menuList, options) {
-        if (!menuList || !menuList.length)
-            return;
-        var menu = this.__menuDOM;
-        // 菜单容器不变，需要先清空内部的菜单项
-        menu.innerHTML = '';
-        menu.append.apply(menu, __spread(this.__getMenuDom(menuList)));
-        // 菜单中没有项，不显示
-        if (!menu.children.length)
-            return;
-        menu.style.display = 'block';
-        if (!options) {
-            menu.style.top = y + "px";
-            menu.style.left = x + "px";
-            return;
-        }
-        // https://github.com/didi/LogicFlow/issues/1019
-        // 根据边界判断菜单的left 和 top
-        var width = options.width, height = options.height, clientX = options.clientX, clientY = options.clientY;
-        var graphModel = this.lf.graphModel;
-        var menuWidth = menu.offsetWidth;
-        var menuIsRightShow = true;
-        // ======先进行可视屏幕范围的判断=======
-        // 浏览器窗口可视区域兼容性写法
-        // eslint-disable-next-line max-len
-        var windowMaxX = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-        var rightDistance = windowMaxX - clientX;
-        // ======先进行可视屏幕范围的判断=======
-        // ========再进行画布范围的判断========
-        var graphRect = graphModel.rootEl.getBoundingClientRect();
-        var graphMaxX = graphRect.left + graphRect.width;
-        if (graphMaxX < windowMaxX) {
-            // 画布右边小于可视屏幕范围的最右边，取画布右边作为极限值，计算出当前触摸点距离右边极限值的距离
-            rightDistance = graphMaxX - clientX;
-        }
-        // ========再进行画布范围的判断========
-        // 根据当前触摸点距离右边的距离 跟 menuWidth进行比较
-        if (rightDistance < menuWidth) {
-            // 空间不足够，显示在左边
-            menuIsRightShow = false;
-        }
-        if (menuIsRightShow) {
-            menu.style.left = x + "px";
-        }
-        else {
-            menu.style.left = (x - width) + "px";
-        }
-        var menuHeight = menu.offsetHeight;
-        var menuIsBottomShow = true;
-        // ======先进行可视屏幕范围的判断=======
-        // 浏览器窗口可视区域兼容性写法
-        // eslint-disable-next-line max-len
-        var windowMaxY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-        var bottomDistance = windowMaxY - clientY;
-        // ======先进行可视屏幕范围的判断=======
-        // ========再进行画布范围的判断========
-        var graphMaxY = graphRect.top + graphRect.height;
-        if (graphMaxY < windowMaxY) {
-            // 画布底部小于可视屏幕范围的最底边，取画布底部作为极限值，计算出当前触摸点距离底部极限值的距离
-            bottomDistance = graphMaxY - clientY;
-        }
-        // ========再进行画布范围的判断========
-        if (bottomDistance < menuHeight) {
-            // 如果下边距离太小，无法显示menu，则向上显示
-            menuIsBottomShow = false;
-        }
-        if (menuIsBottomShow) {
-            menu.style.top = y + "px";
-        }
-        else {
-            menu.style.top = (y - height) + "px";
-        }
-    };
-    /**
-     * 设置指定类型元素的菜单
-     */
-    Menu.prototype.setMenuByType = function (config) {
-        if (!config.type || !config.menu) {
-            return;
-        }
-        this.menuTypeMap.set(config.type, config.menu);
-    };
-    /**
-     * 获取 Menu DOM
-     * @param list 菜单项
-     * @return 菜单项 DOM
-     */
-    Menu.prototype.__getMenuDom = function (list) {
-        var menuList = [];
-        list && list.length > 0 && list.forEach(function (item) {
-            var element = document.createElement('li');
-            if (item.className) {
-                element.className = "lf-menu-item " + item.className;
-            }
-            else {
-                element.className = 'lf-menu-item';
-            }
-            if (item.icon === true) {
-                var icon = document.createElement('span');
-                icon.className = 'lf-menu-item-icon';
-                element.appendChild(icon);
-            }
-            var text = document.createElement('span');
-            text.className = 'lf-menu-item-text';
-            if (item.text) {
-                text.innerText = item.text;
-            }
-            element.appendChild(text);
-            element.onclickCallback = item.callback;
-            menuList.push(element);
-        });
-        return menuList;
-    };
-    // 复写菜单
-    Menu.prototype.setMenuConfig = function (config) {
-        if (!config) {
-            return;
-        }
-        // node
-        config.nodeMenu !== undefined
-            && this.menuTypeMap.set(DefaultNodeMenuKey, config.nodeMenu ? config.nodeMenu : []);
-        // edge
-        config.edgeMenu !== undefined
-            && this.menuTypeMap.set(DefaultEdgeMenuKey, config.edgeMenu ? config.edgeMenu : []);
-        // graph
-        config.graphMenu !== undefined
-            && this.menuTypeMap.set(DefaultGraphMenuKey, config.graphMenu ? config.graphMenu : []);
-    };
-    // 在默认菜单后面追加菜单项
-    Menu.prototype.addMenuConfig = function (config) {
-        if (!config) {
-            return;
-        }
-        // 追加项时，只支持数组类型，对false不做操作
-        if (Array.isArray(config.nodeMenu)) {
-            var menuList = this.menuTypeMap.get(DefaultNodeMenuKey);
-            this.menuTypeMap.set(DefaultNodeMenuKey, menuList.concat(config.nodeMenu));
-        }
-        if (Array.isArray(config.edgeMenu)) {
-            var menuList = this.menuTypeMap.get(DefaultEdgeMenuKey);
-            this.menuTypeMap.set(DefaultEdgeMenuKey, menuList.concat(config.edgeMenu));
-        }
-        if (Array.isArray(config.graphMenu)) {
-            var menuList = this.menuTypeMap.get(DefaultGraphMenuKey);
-            this.menuTypeMap.set(DefaultGraphMenuKey, menuList.concat(config.graphMenu));
-        }
-    };
-    /**
-     * @deprecated
-     * 复写添加
-     */
-    Menu.prototype.changeMenuItem = function (type, config) {
-        if (type === 'add')
-            this.addMenuConfig(config);
-        else if (type === 'reset')
-            this.setMenuConfig(config);
-        else {
-            throw new Error('The first parameter of changeMenuConfig should be \'add\' or \'reset\'');
-        }
-    };
-    Menu.pluginName = 'menu';
-    return Menu;
-}());
-exports.Menu = Menu;
-exports.default = Menu;