@logicflow/extension 0.7.5 → 0.7.9

package/CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.9](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.8...@logicflow/extension@0.7.9) (2021-11-23)
+
+
+### Bug Fixes
+
+* context menu edge icon position ([f06ead4](https://github.com/didi/LogicFlow/commit/f06ead4e687498550012e654765430d1fa1f48a2))
+* nodeResize outline bugfix ([8e76f5f](https://github.com/didi/LogicFlow/commit/8e76f5f8e79a18189f48339b85904b06d29cfda2))
+
+
+### Features
+
+* context-menu use className ([e58eaea](https://github.com/didi/LogicFlow/commit/e58eaea67aaf7c8f420aed849a4f77b753a1bc6c))
+
+
+
+
+
+## [0.7.8](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.7...@logicflow/extension@0.7.8) (2021-11-22)
+
+
+### Bug Fixes
+
+* nodeResize getResizeShape bugfix ([e617013](https://github.com/didi/LogicFlow/commit/e617013f979cd67dbe438dad141f0eef25690aa2))
+
+
+### Features
+
+* export context menu ([f0ff960](https://github.com/didi/LogicFlow/commit/f0ff960a2518cfe0e3f9d2a5abb843b87957def6))
+
+
+
+
+
+## [0.7.7](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.6...@logicflow/extension@0.7.7) (2021-11-19)
+
+
+### Features
+
+* add context menu plugin ([8c5d7a8](https://github.com/didi/LogicFlow/commit/8c5d7a84309ba8d07fbbb99dcebcae81b521bd06))
+
+
+
+
+
+## [0.7.6](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.5...@logicflow/extension@0.7.6) (2021-11-11)
+
+
+### Bug Fixes
+
+* minimap become invisible when repeat init ([ad488fd](https://github.com/didi/LogicFlow/commit/ad488fde9041834e9e809eb38904c013751d9cc8))
+
+
+
+
+
 ## [0.7.5](https://github.com/didi/LogicFlow/compare/@logicflow/extension@0.7.4...@logicflow/extension@0.7.5) (2021-11-08)
 
 **Note:** Version bump only for package @logicflow/extension

package/cjs/NodeResize/Control/ControlGroup.js

@@ -71,7 +71,9 @@ var ControlGroup = /** @class */ (function (_super) {
         return (preact_1.h(Rect_1.default, { fill: "none", x: x, y: y, width: width, height: height, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray }));
     };
     ControlGroup.prototype.render = function () {
-        return (preact_1.h("g", { className: "lf-resize-control" }, this.getResizeControl()));
+        return (preact_1.h("g", { className: "lf-resize-control" },
+            this.getGroupSolid(),
+            this.getResizeControl()));
     };
     return ControlGroup;
 }(preact_1.Component));

package/cjs/NodeResize/Node/DiamondResize.js

@@ -33,6 +33,7 @@ var DiamondResizeModel = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DiamondResizeModel.prototype.setAttributes = function () {
+        this.hideOutline = true;
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
         if (nodeSize) {

package/cjs/NodeResize/Node/EllipseResize.js

@@ -38,6 +38,7 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         return _this;
     }
     EllipseResizeModel.prototype.setAttributes = function () {
+        this.hideOutline = true;
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
         if (nodeSize) {

package/cjs/NodeResize/Node/RectResize.js

@@ -37,6 +37,7 @@ var RectResizeModel = /** @class */ (function (_super) {
         return _this;
     }
     RectResizeModel.prototype.setAttributes = function () {
+        this.hideOutline = true;
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
         if (nodeSize) {
@@ -55,15 +56,15 @@ var RectResizeView = /** @class */ (function (_super) {
         var _a = this.props, model = _a.model, graphModel = _a.graphModel;
         return (core_1.h(ControlGroup_1.default, __assign({}, attributes, { nodeModel: model, graphModel: graphModel })));
     };
-    // // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
-    // getResizeShape() {
-    //   return super.getShape();
-    // }
+    // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+    RectResizeView.prototype.getResizeShape = function () {
+        return _super.prototype.getShape.call(this);
+    };
     RectResizeView.prototype.getShape = function () {
         var attributes = _super.prototype.getAttributes.call(this);
         var isSelected = this.props.model.isSelected;
         return (core_1.h("g", null,
-            _super.prototype.getShape.call(this),
+            this.getResizeShape(),
             isSelected ? this.getControlGroup(attributes) : ''));
     };
     return RectResizeView;

package/cjs/NodeResize/index.js

@@ -47,21 +47,6 @@ var NodeResize = {
         },
     },
     install: function (lf) {
-        // 设置默认样式，主要将outlineColor设置为透明，不再core包中默认的节点外框
-        lf.setTheme({
-            rect: {
-                strokeWidth: 2,
-                outlineColor: 'transparent',
-            },
-            ellipse: {
-                strokeWidth: 2,
-                outlineColor: 'transparent',
-            },
-            diamond: {
-                strokeWidth: 2,
-                outlineColor: 'transparent',
-            },
-        });
         lf.register({
             type: RectResize_1.default.type,
             view: RectResize_1.default.view,

package/cjs/bpmn/index.js

@@ -31,8 +31,11 @@ var BpmnElement = /** @class */ (function () {
         lf.register(ExclusiveGateway_1.default);
         lf.register(UserTask_1.default);
         lf.register(ServiceTask_1.default);
-        lf.register(SequenceFlow_1.default);
-        lf.setDefaultEdgeType('bpmn:sequenceFlow');
+        // 支持自定义bpmn元素的连线
+        if (!lf.options.customBpmnEdge) {
+            lf.register(SequenceFlow_1.default);
+            lf.setDefaultEdgeType('bpmn:sequenceFlow');
+        }
     }
     BpmnElement.pluginName = 'BpmnElement';
     return BpmnElement;

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

@@ -0,0 +1,207 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+var COMMON_TYPE_KEY = 'menu-common';
+var NEXT_X_DISTANCE = 200;
+var NEXT_Y_DISTANCE = 100;
+var ContextMenu = /** @class */ (function () {
+    function ContextMenu(_a) {
+        var _this = this;
+        var lf = _a.lf;
+        this.menuTypeMap = new Map();
+        this.listenDelete = function () {
+            _this.hideMenu();
+        };
+        this.lf = lf;
+        this.__menuDOM = document.createElement('div');
+        this.__menuDOM.className = 'lf-inner-context';
+        // const commonMenu = [];
+        this.menuTypeMap.set(COMMON_TYPE_KEY, []);
+        this.lf.setContextMenuByType = function (type, menus) {
+            _this.menuTypeMap.set(type, menus);
+        };
+        this.lf.setContextMenuItems = function (menus) {
+            _this.menuTypeMap.set(COMMON_TYPE_KEY, menus);
+        };
+        this.lf.showContextMenu = function (data) {
+            if (!data || !data.id) {
+                console.warn('请检查传入的参数');
+                return;
+            }
+            _this._activeData = data;
+            _this.createContextMenu();
+        };
+        this.lf.hideContextMenu = function () {
+            _this.hideMenu();
+        };
+    }
+    ContextMenu.prototype.render = function (lf, container) {
+        var _this = this;
+        this.container = container;
+        lf.on('node:click', function (_a) {
+            var data = _a.data;
+            _this._activeData = data;
+            _this.createContextMenu();
+        });
+        lf.on('edge:click', function (_a) {
+            var data = _a.data;
+            // 获取右上角坐标
+            _this._activeData = data;
+            _this.createContextMenu();
+        });
+        lf.on('blank:click', function () {
+            _this.hideMenu();
+        });
+    };
+    /**
+     * 获取新菜单位置
+     */
+    ContextMenu.prototype.getContextMenuPosition = function () {
+        var data = this._activeData;
+        var Model = this.lf.graphModel.getElement(data.id);
+        if (!Model) {
+            console.warn("\u627E\u4E0D\u5230\u5143\u7D20" + data.id);
+            return;
+        }
+        var x;
+        var y;
+        if (Model.BaseType === 'edge') {
+            x = Number.MIN_SAFE_INTEGER;
+            y = Number.MAX_SAFE_INTEGER;
+            var edgeData = Model.getData();
+            x = Math.max(edgeData.startPoint.x, x);
+            y = Math.min(edgeData.startPoint.y, y);
+            x = Math.max(edgeData.endPoint.x, x);
+            y = Math.min(edgeData.endPoint.y, y);
+            if (edgeData.pointsList) {
+                edgeData.pointsList.forEach(function (point) {
+                    x = Math.max(point.x, x);
+                    y = Math.min(point.y, y);
+                });
+            }
+        }
+        if (Model.BaseType === 'node') {
+            x = data.x + Model.width / 2;
+            y = data.y - Model.height / 2;
+        }
+        return this.lf.graphModel.transformMatrix.CanvasPointToHtmlPoint([x, y]);
+    };
+    ContextMenu.prototype.createContextMenu = function () {
+        var _this = this;
+        var isSilentMode = this.lf.options.isSilentMode;
+        // 静默模式不显示菜单
+        if (isSilentMode) {
+            return;
+        }
+        var items = this.menuTypeMap.get(this._activeData.type) || [];
+        items = items.concat(this.menuTypeMap.get(COMMON_TYPE_KEY));
+        var menus = document.createDocumentFragment();
+        items.forEach(function (item) {
+            var menuItem = document.createElement('div');
+            menuItem.className = 'lf-context-item';
+            var img = document.createElement('img');
+            img.src = item.icon;
+            img.className = 'lf-context-img';
+            img.addEventListener('click', function () {
+                _this.hideMenu();
+                if (item.callback) {
+                    item.callback(_this._activeData);
+                }
+                else {
+                    _this.addNode({
+                        sourceId: _this._activeData.id,
+                        x: _this._activeData.x,
+                        y: _this._activeData.y,
+                        properties: item.properties,
+                        type: item.type,
+                    });
+                }
+            });
+            menuItem.appendChild(img);
+            menus.appendChild(menuItem);
+        });
+        this.__menuDOM.innerHTML = '';
+        this.__menuDOM.appendChild(menus);
+        this.showMenu();
+    };
+    ContextMenu.prototype.addNode = function (node, y) {
+        var isDeep = y !== undefined;
+        if (y === undefined) {
+            y = node.y;
+        }
+        var nodeModel = this.lf.getNodeModel(node.sourceId);
+        var leftTopX = node.x - nodeModel.width + NEXT_X_DISTANCE;
+        var leftTopY = y - node.y / 2 - 20;
+        var rightBottomX = node.x + nodeModel.width + NEXT_X_DISTANCE;
+        var rightBottomY = y + node.y / 2 + 20;
+        var exsitElements = this.lf.getAreaElement([leftTopX, leftTopY], [rightBottomX, rightBottomY]);
+        if (exsitElements.length) {
+            y = y + NEXT_Y_DISTANCE;
+            this.addNode(node, y);
+            return;
+        }
+        var newNode = this.lf.addNode({
+            type: node.type,
+            x: node.x + 200,
+            y: y,
+            properties: node.properties,
+        });
+        var startPoint;
+        var endPoint;
+        if (isDeep) {
+            startPoint = {
+                x: node.x,
+                y: node.y + nodeModel.height / 2,
+            };
+            endPoint = {
+                x: newNode.x - newNode.width / 2,
+                y: newNode.y,
+            };
+        }
+        this.lf.createEdge({
+            sourceNodeId: node.sourceId,
+            targetNodeId: newNode.id,
+            startPoint: startPoint,
+            endPoint: endPoint,
+        });
+    };
+    ContextMenu.prototype.showMenu = function () {
+        var _a = __read(this.getContextMenuPosition(), 2), x = _a[0], y = _a[1];
+        this.__menuDOM.style.display = 'flex';
+        this.__menuDOM.style.top = y + "px";
+        this.__menuDOM.style.left = x + 10 + "px";
+        this.container.appendChild(this.__menuDOM);
+        // 菜单显示的时候，监听删除，同时隐藏
+        !this.isShow && this.lf.on('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
+        this.isShow = true;
+    };
+    ContextMenu.prototype.hideMenu = function () {
+        this.__menuDOM.innerHTML = '';
+        this.__menuDOM.style.display = 'none';
+        if (this.isShow) {
+            this.container.removeChild(this.__menuDOM);
+        }
+        this.lf.off('node:delete,edge:delete,node:drag,graph:transform', this.listenDelete);
+        this.isShow = false;
+    };
+    ContextMenu.pluginName = 'ContextMenu';
+    return ContextMenu;
+}());
+exports.ContextMenu = ContextMenu;
+exports.default = ContextMenu;

package/cjs/components/mini-map/index.js

@@ -30,7 +30,6 @@ var MiniMap = {
     __height: 220,
     __miniMapWidth: 450,
     __miniMapHeight: 660,
-    __isShow: false,
     __viewPortTop: 0,
     __viewPortLeft: 0,
     __startPosition: null,
@@ -47,6 +46,8 @@ var MiniMap = {
         MiniMap.__miniMapHeight = (lf.width * 220) / 150;
         MiniMap.__LogicFlow = LogicFlow;
         this.__init();
+        // 避免多次install的时候, _isShow状态被修改了
+        MiniMap.__isShow = false;
     },
     init: function (option) {
         this.__disabledPlugins = this.__disabledPlugins.concat(option.disabledPlugins || []);
@@ -63,7 +64,9 @@ var MiniMap = {
         ];
         events.forEach(function (eventName) {
             MiniMap.__lf.on(eventName, function () {
-                MiniMap.__setView();
+                if (MiniMap.__isShow) {
+                    MiniMap.__setView();
+                }
             });
         });
     },

package/cjs/index.js

@@ -17,6 +17,7 @@ __exportStar(require("./turbo-adapter"), exports);
 __exportStar(require("./insert-node-in-polyline"), exports);
 __exportStar(require("./components/control"), exports);
 __exportStar(require("./components/menu"), exports);
+__exportStar(require("./components/context-menu"), exports);
 __exportStar(require("./components/dnd-panel"), exports);
 __exportStar(require("./components/selection-select"), exports);
 __exportStar(require("./components/mini-map"), exports);

package/cjs/style/index.css

@@ -177,3 +177,27 @@
 .lf-resize-control-3{
   cursor: sw-resize;
 }
+/* context-menu */
+.lf-inner-context {
+  display: none;
+  position: absolute;
+  /* display: flex; */
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 90px;
+}
+.lf-context-item {
+  padding: 2px 3px;
+  width: 20px;
+  height: 20px;
+  margin: 0 2px 2px 0;
+  box-sizing: content-box;
+}
+.lf-context-item:hover {
+  background: rgba(201, 217, 216, 0.5);
+}
+.lf-context-img {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}

package/es/NodeResize/Control/ControlGroup.js

@@ -69,7 +69,9 @@ var ControlGroup = /** @class */ (function (_super) {
         return (h(Rect, { fill: "none", x: x, y: y, width: width, height: height, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray }));
     };
     ControlGroup.prototype.render = function () {
-        return (h("g", { className: "lf-resize-control" }, this.getResizeControl()));
+        return (h("g", { className: "lf-resize-control" },
+            this.getGroupSolid(),
+            this.getResizeControl()));
     };
     return ControlGroup;
 }(Component));

package/es/NodeResize/Node/DiamondResize.js

@@ -31,6 +31,7 @@ var DiamondResizeModel = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DiamondResizeModel.prototype.setAttributes = function () {
+        this.hideOutline = true;
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
         if (nodeSize) {

package/es/NodeResize/Node/EllipseResize.js

@@ -36,6 +36,7 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         return _this;
     }
     EllipseResizeModel.prototype.setAttributes = function () {
+        this.hideOutline = true;
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
         if (nodeSize) {

package/es/NodeResize/Node/RectResize.d.ts

@@ -8,6 +8,7 @@ declare class RectResizeModel extends RectNodeModel {
 }
 declare class RectResizeView extends RectNode {
     getControlGroup(attributes: any): h.JSX.Element;
+    getResizeShape(): h.JSX.Element;
     getShape(): h.JSX.Element;
 }
 declare const RectResize: {

package/es/NodeResize/Node/RectResize.js

@@ -35,6 +35,7 @@ var RectResizeModel = /** @class */ (function (_super) {
         return _this;
     }
     RectResizeModel.prototype.setAttributes = function () {
+        this.hideOutline = true;
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
         if (nodeSize) {
@@ -53,15 +54,15 @@ var RectResizeView = /** @class */ (function (_super) {
         var _a = this.props, model = _a.model, graphModel = _a.graphModel;
         return (h(ControlGroup, __assign({}, attributes, { nodeModel: model, graphModel: graphModel })));
     };
-    // // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
-    // getResizeShape() {
-    //   return super.getShape();
-    // }
+    // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+    RectResizeView.prototype.getResizeShape = function () {
+        return _super.prototype.getShape.call(this);
+    };
     RectResizeView.prototype.getShape = function () {
         var attributes = _super.prototype.getAttributes.call(this);
         var isSelected = this.props.model.isSelected;
         return (h("g", null,
-            _super.prototype.getShape.call(this),
+            this.getResizeShape(),
             isSelected ? this.getControlGroup(attributes) : ''));
     };
     return RectResizeView;

package/es/NodeResize/index.js

@@ -41,21 +41,6 @@ var NodeResize = {
         },
     },
     install: function (lf) {
-        // 设置默认样式，主要将outlineColor设置为透明，不再core包中默认的节点外框
-        lf.setTheme({
-            rect: {
-                strokeWidth: 2,
-                outlineColor: 'transparent',
-            },
-            ellipse: {
-                strokeWidth: 2,
-                outlineColor: 'transparent',
-            },
-            diamond: {
-                strokeWidth: 2,
-                outlineColor: 'transparent',
-            },
-        });
         lf.register({
             type: RectResize.type,
             view: RectResize.view,

package/es/bpmn/index.js

@@ -16,8 +16,11 @@ var BpmnElement = /** @class */ (function () {
         lf.register(ExclusiveGateway);
         lf.register(UserTask);
         lf.register(ServiceTask);
-        lf.register(SequenceFlow);
-        lf.setDefaultEdgeType('bpmn:sequenceFlow');
+        // 支持自定义bpmn元素的连线
+        if (!lf.options.customBpmnEdge) {
+            lf.register(SequenceFlow);
+            lf.setDefaultEdgeType('bpmn:sequenceFlow');
+        }
     }
     BpmnElement.pluginName = 'BpmnElement';
     return BpmnElement;

package/es/components/context-menu/index.d.ts

@@ -0,0 +1,24 @@
+declare class ContextMenu {
+    static pluginName: string;
+    private __menuDOM;
+    private lf;
+    private _activeData;
+    private menuTypeMap;
+    container: any;
+    isShow: boolean;
+    constructor({ lf }: {
+        lf: any;
+    });
+    render(lf: any, container: any): void;
+    /**
+     * 获取新菜单位置
+     */
+    private getContextMenuPosition;
+    private createContextMenu;
+    private addNode;
+    private showMenu;
+    listenDelete: () => void;
+    private hideMenu;
+}
+export default ContextMenu;
+export { ContextMenu, };