@logicflow/extension 0.7.9 → 0.7.13-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.13-alpha.0](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.12...@logicflow/extension@0.7.13-alpha.0) (2021-12-07)
+
+
+### Bug Fixes
+
+* fix addNodeSelection methods in node-selection plugin ([f75afd4](https://github.com/didi/LogicFlow/commit/f75afd4678de91c11d97aa1c628a0b8417f01ed9))
+
+
+
+
+
+## [0.7.12](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.11...@logicflow/extension@0.7.12) (2021-12-04)
+
+**Note:** Version bump only for package @logicflow/extension
+
+
+
+
+
+## [0.7.11](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.10...@logicflow/extension@0.7.11) (2021-11-30)
+
+
+### Features
+
+* support disabled tool in core package ([1c7527f](https://github.com/didi/LogicFlow/commit/1c7527fc75929c444d9e5fb4b0b70b87086694c8))
+
+
+
+
+
+## [0.7.10](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.9...@logicflow/extension@0.7.10) (2021-11-26)
+
+
+### Features
+
+* add mind map plugin ([11ae7e0](https://github.com/didi/LogicFlow/commit/11ae7e06f878cb6b8c82f2f73f74e8e4620fecb6))
+* hide mind map ([2aa1120](https://github.com/didi/LogicFlow/commit/2aa112002023b87188c9b132dbeb6c77e92e17bf))
+
+
+
+
+
 ## [0.7.9](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.8...@logicflow/extension@0.7.9) (2021-11-23)
 
 

package/cjs/components/context-menu/index.js

@@ -118,6 +118,9 @@ var ContextMenu = /** @class */ (function () {
             var img = document.createElement('img');
             img.src = item.icon;
             img.className = 'lf-context-img';
+            if (item.className) {
+                menuItem.className = menuItem.className + " " + item.className;
+            }
             img.addEventListener('click', function () {
                 _this.hideMenu();
                 if (item.callback) {

package/cjs/components/dnd-panel/index.js

@@ -8,6 +8,10 @@ var DndPanel = /** @class */ (function () {
         this.lf = lf;
         this.lf.setPatternItems = function (shapeList) {
             _this.shapeList = shapeList;
+            // 支持渲染后重新设置拖拽面板
+            if (_this.domContainer) {
+                _this.render(_this.lf, _this.domContainer);
+            }
         };
     }
     DndPanel.prototype.render = function (lf, domContainer) {
@@ -23,6 +27,7 @@ var DndPanel = /** @class */ (function () {
             _this.panelEl.appendChild(_this.createDndItem(shapeItem));
         });
         domContainer.appendChild(this.panelEl);
+        this.domContainer = domContainer;
     };
     DndPanel.prototype.createDndItem = function (shapeItem) {
         var _this = this;

package/cjs/index.js

@@ -11,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./bpmn"), exports);
+// export * from './~mindmap';
 __exportStar(require("./tools/snapshot"), exports);
 __exportStar(require("./bpmn-adapter"), exports);
 __exportStar(require("./turbo-adapter"), exports);
@@ -26,3 +27,4 @@ __exportStar(require("./materials/group"), exports);
 __exportStar(require("./NodeResize"), exports);
 __exportStar(require("./tools/flow-path"), exports);
 __exportStar(require("./tools/auto-layout"), exports);
+__exportStar(require("./materials/node-selection"), exports);

package/cjs/materials/node-selection/index.js

@@ -0,0 +1,272 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeSelection = void 0;
+var lodash_es_1 = require("lodash-es");
+var core_1 = require("@logicflow/core");
+var NodeSelectionView = /** @class */ (function (_super) {
+    __extends(NodeSelectionView, _super);
+    function NodeSelectionView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.d = 10;
+        return _this;
+    }
+    NodeSelectionView.prototype.getShapeStyle = function () {
+        // 设置边框为虚线
+        var style = _super.prototype.getShapeStyle.call(this);
+        // @ts-ignore
+        style.strokeDashArray = '10 5';
+        return style;
+    };
+    NodeSelectionView.prototype.getLabelShape = function () {
+        var attributes = _super.prototype.getAttributes.call(this);
+        var x = attributes.x, // 元素中心点
+        y = attributes.y, // 元素中心点
+        width = attributes.width, height = attributes.height, stroke = attributes.stroke, id = attributes.id, labelText = attributes.properties.label_text;
+        return core_1.h('svg', {
+            x: x - width / 2,
+            y: y - height / 2,
+            style: 'z-index: 0; background: none; overflow: auto;',
+        }, labelText ? core_1.h('text', {
+            x: 0,
+            y: -5,
+            width: 50,
+            height: 24,
+            fontSize: '16px',
+            fill: stroke,
+        }, '方案') : '', labelText ? core_1.h('text', {
+            x: 50,
+            y: -5,
+            width: 50,
+            height: 24,
+            fontSize: '24px',
+            cursor: 'pointer',
+            fill: stroke,
+            onclick: this.handleCustomDeleteIconClick.bind(this, id),
+        }, 'x') : '');
+    };
+    NodeSelectionView.prototype.getShape = function () {
+        var attributes = _super.prototype.getAttributes.call(this);
+        var x = attributes.x, // 元素中心点
+        y = attributes.y, // 元素中心点
+        width = attributes.width, height = attributes.height, fill = attributes.fill, stroke = attributes.stroke, strokeWidth = attributes.strokeWidth, strokeDashArray = attributes.strokeDashArray, id = attributes.id;
+        return core_1.h('g', {}, [
+            core_1.h('rect', {
+                x: x - width / 2,
+                y: y - height / 2,
+                fill: fill,
+                stroke: stroke,
+                strokeWidth: strokeWidth,
+                width: width,
+                height: height,
+                strokeDashArray: strokeDashArray,
+                id: id,
+            }),
+            this.getLabelShape(),
+        ]);
+    };
+    NodeSelectionView.prototype.toFront = function () { };
+    /**
+     * 点击删除
+     * @param id
+     */
+    NodeSelectionView.prototype.handleCustomDeleteIconClick = function (id) {
+        var graphModel = this.props.graphModel;
+        graphModel.deleteNode(id);
+    };
+    return NodeSelectionView;
+}(core_1.PolygonNode));
+var NodeSelectionModel = /** @class */ (function (_super) {
+    __extends(NodeSelectionModel, _super);
+    function NodeSelectionModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.d = 10;
+        return _this;
+    }
+    NodeSelectionModel.prototype.setAttributes = function () {
+        var _this = this;
+        // 默认不显示
+        this.points = [];
+        this.text = {
+            value: '',
+            x: 0,
+            y: 0,
+            draggable: false,
+            editable: false,
+        };
+        this.stroke = this.properties.active_color || '#008000';
+        this.zIndex = 0;
+        this.draggable = false;
+        this.anchorsOffset = [[0, 0]];
+        if (this.properties.node_selection_ids.length > 1) {
+            setTimeout(function () {
+                _this.updatePointsByNodes(_this.properties.node_selection_ids);
+            });
+        }
+    };
+    NodeSelectionModel.prototype.getAnchorsByOffset = function () {
+        return [];
+    };
+    /**
+     * 更新points
+     * @param points
+     */
+    NodeSelectionModel.prototype.updatePoints = function (points) {
+        this.points = points;
+    };
+    /**
+     * 更新x y
+     */
+    NodeSelectionModel.prototype.updateCoordinate = function (_a) {
+        var x = _a.x, y = _a.y;
+        this.x = x;
+        this.y = y;
+    };
+    /**
+     * 更新points
+     */
+    NodeSelectionModel.prototype.updatePointsByNodes = function (nodesIds) {
+        var _this = this;
+        // TODO: 临时方案矩形
+        var points = [];
+        var minX = Infinity;
+        var minY = Infinity;
+        var maxX = -Infinity;
+        var maxY = -Infinity;
+        nodesIds.forEach(function (id) {
+            var model = _this.graphModel.getNodeModel(id);
+            if (!model)
+                return;
+            var width = model.width, height = model.height, x = model.x, y = model.y;
+            minX = Math.min(minX, x - width / 2 - _this.d);
+            minY = Math.min(minY, y - height / 2 - _this.d);
+            maxX = Math.max(maxX, x + width / 2 + _this.d);
+            maxY = Math.max(maxY, y + height / 2 + _this.d);
+        });
+        points.push([minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY]);
+        if ([minX, minY, maxX, maxY].some(function (n) { return Math.abs(n) === Infinity; }))
+            return;
+        this.updatePoints(points);
+        this.updateCoordinate({ x: ((maxX + minX) / 2), y: (maxY + minY) / 2 });
+    };
+    return NodeSelectionModel;
+}(core_1.PolygonNodeModel));
+var NodeSelection = /** @class */ (function () {
+    function NodeSelection(_a) {
+        var lf = _a.lf;
+        this.lf = null; // lf 实例
+        this.selectNodes = []; // 选择的nodes
+        this.currentClickNode = null; // 当前点击的节点，选中的节点是无序的
+        this.d = 10;
+        lf.register({
+            type: 'node-selection',
+            view: NodeSelectionView,
+            model: NodeSelectionModel,
+        });
+    }
+    Object.defineProperty(NodeSelection.prototype, "selectNodesIds", {
+        /**
+         * 获取所选node的id数组
+         */
+        get: function () {
+            return this.selectNodes.map(function (node) { return node.id; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * 新建node-selection节点
+     */
+    NodeSelection.prototype.addNodeSelection = function () {
+        var node = this.lf.addNode({
+            type: 'node-selection',
+            text: '',
+            properties: {
+                node_selection_ids: this.selectNodesIds,
+            },
+        });
+        node.updatePointsByNodes(this.selectNodesIds);
+    };
+    /**
+     * 删除node-selection节点
+     */
+    NodeSelection.prototype.deleteNodeSelection = function () {
+        var nodeSelection = this.getNodeSelection();
+        if (!nodeSelection)
+            return;
+        this.lf.deleteNode(nodeSelection.id);
+    };
+    /**
+     * 更新node-selection节点
+     */
+    NodeSelection.prototype.updateNodeSelection = function () {
+        var nodeSelection = this.getNodeSelection();
+        if (!nodeSelection)
+            return;
+        this.lf.setProperties(nodeSelection.id, {
+            node_selection_ids: this.selectNodesIds,
+        });
+        this.lf.getNodeModel(nodeSelection.id).updatePointsByNodes(this.selectNodesIds);
+    };
+    /**
+     * 获取所属的node-selection
+     */
+    NodeSelection.prototype.getNodeSelection = function () {
+        var _this = this;
+        var ids = this.selectNodesIds;
+        var rawData = this.lf.getGraphRawData();
+        var oldIds = ids.filter(function (id) { return id !== _this.currentClickNode.id; });
+        return rawData.nodes.find(function (node) {
+            if (node.type === 'node-selection') {
+                var nodeSelectionIds_1 = lodash_es_1.default.get(node, 'properties.node_selection_ids', []);
+                return oldIds.every(function (id) { return nodeSelectionIds_1.includes(id); });
+            }
+            return false;
+        });
+    };
+    NodeSelection.prototype.render = function (lf) {
+        var _this = this;
+        this.lf = lf;
+        lf.on('node:click', function (val) {
+            if (!val.e.shiftKey)
+                return;
+            _this.currentClickNode = val.data;
+            // 如果selectNodesIds中已存在此节点，则取消选中次节点
+            var isUnSelected = false;
+            if (_this.selectNodesIds.includes(val.data.id)) {
+                _this.lf.getNodeModel(val.data.id).setSelected(false);
+                isUnSelected = true;
+            }
+            // 获取所有被选中的节点，获取到的数组是无序的
+            var nodes = lf.getSelectElements(true).nodes;
+            _this.selectNodes = nodes;
+            if (_this.selectNodes.length === 1) {
+                if (isUnSelected)
+                    _this.deleteNodeSelection();
+            }
+            else {
+                if (!isUnSelected && _this.selectNodes.length === 2) {
+                    _this.addNodeSelection();
+                    return;
+                }
+                _this.updateNodeSelection();
+            }
+        });
+    };
+    NodeSelection.pluginName = 'node-selection';
+    return NodeSelection;
+}());
+exports.NodeSelection = NodeSelection;
+exports.default = NodeSelection;

package/cjs/style/index.css

@@ -200,4 +200,8 @@
   width: 20px;
   height: 20px;
   cursor: pointer;
+}
+/* mind map */
+.lf-mindmap_addIcon {
+  margin-top: 10px;
 }

package/es/bpmn/events/StartEvent.d.ts

@@ -11,27 +11,24 @@ declare class StartEventView extends CircleNode {
         width: number;
         height: number;
         fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
+        fillOpacity?: number;
+        strokeWidth?: number;
         stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
+        strokeOpacity?: number;
+        opacity?: number;
+        outlineColor?: string;
         id: string;
-        properties: {
-            [x: string]: any;
-        };
+        properties: Record<string, any>;
         type: string;
         x: number;
         y: number;
         isSelected: boolean;
         isHovered: boolean;
         text: {
-            value: string;
+            [key: string]: any;
             x: number;
             y: number;
-            draggable: boolean;
-            editable: boolean;
+            value: string;
         };
     };
 }

package/es/components/context-menu/index.js

@@ -115,6 +115,9 @@ var ContextMenu = /** @class */ (function () {
             var img = document.createElement('img');
             img.src = item.icon;
             img.className = 'lf-context-img';
+            if (item.className) {
+                menuItem.className = menuItem.className + " " + item.className;
+            }
             img.addEventListener('click', function () {
                 _this.hideMenu();
                 if (item.callback) {

package/es/components/dnd-panel/index.d.ts

@@ -12,6 +12,7 @@ declare class DndPanel {
     shapeList: ShapeItem[];
     panelEl: HTMLDivElement;
     static pluginName: string;
+    domContainer: HTMLElement;
     constructor({ lf }: {
         lf: any;
     });

package/es/components/dnd-panel/index.js

@@ -5,6 +5,10 @@ var DndPanel = /** @class */ (function () {
         this.lf = lf;
         this.lf.setPatternItems = function (shapeList) {
             _this.shapeList = shapeList;
+            // 支持渲染后重新设置拖拽面板
+            if (_this.domContainer) {
+                _this.render(_this.lf, _this.domContainer);
+            }
         };
     }
     DndPanel.prototype.render = function (lf, domContainer) {
@@ -20,6 +24,7 @@ var DndPanel = /** @class */ (function () {
             _this.panelEl.appendChild(_this.createDndItem(shapeItem));
         });
         domContainer.appendChild(this.panelEl);
+        this.domContainer = domContainer;
     };
     DndPanel.prototype.createDndItem = function (shapeItem) {
         var _this = this;

package/es/index.d.ts

@@ -14,3 +14,4 @@ export * from './materials/group';
 export * from './NodeResize';
 export * from './tools/flow-path';
 export * from './tools/auto-layout';
+export * from './materials/node-selection';

package/es/index.js

@@ -1,4 +1,5 @@
 export * from './bpmn';
+// export * from './~mindmap';
 export * from './tools/snapshot';
 export * from './bpmn-adapter';
 export * from './turbo-adapter';
@@ -14,3 +15,4 @@ export * from './materials/group';
 export * from './NodeResize';
 export * from './tools/flow-path';
 export * from './tools/auto-layout';
+export * from './materials/node-selection';

package/es/materials/group/GroupNode.d.ts

@@ -29,12 +29,12 @@ declare class GroupNode extends RectNode {
         width: number;
         height: number;
         fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
+        fillOpacity?: number;
+        strokeWidth?: number;
         stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
+        strokeOpacity?: number;
+        opacity?: number;
+        outlineColor?: string;
     };
 }
 declare const _default: {

package/es/materials/node-selection/index.d.ts

@@ -0,0 +1,33 @@
+declare class NodeSelection {
+    static pluginName: string;
+    lf: any;
+    selectNodes: any[];
+    currentClickNode: any;
+    d: number;
+    constructor({ lf }: {
+        lf: any;
+    });
+    /**
+     * 获取所选node的id数组
+     */
+    get selectNodesIds(): any[];
+    /**
+     * 新建node-selection节点
+     */
+    addNodeSelection(): void;
+    /**
+     * 删除node-selection节点
+     */
+    deleteNodeSelection(): void;
+    /**
+     * 更新node-selection节点
+     */
+    updateNodeSelection(): void;
+    /**
+     * 获取所属的node-selection
+     */
+    getNodeSelection(): any;
+    render(lf: any): void;
+}
+export default NodeSelection;
+export { NodeSelection, };