@logicflow/extension 1.0.7 → 1.1.0-alpha.3

package/cjs/NodeResize/Control/Control.js

@@ -270,7 +270,8 @@ var Control = /** @class */ (function (_super) {
         _this.onDraging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var modelType = _this.nodeModel.modelType;
-            if (modelType === Util_1.ModelType.RECT_NODE) {
+            // html和矩形的计算方式是一样的，共用一个方法
+            if (modelType === Util_1.ModelType.RECT_NODE || modelType === Util_1.ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
             }
             else if (modelType === Util_1.ModelType.ELLIPSE_NODE) {

package/cjs/NodeResize/Control/Util.js

@@ -7,6 +7,7 @@ var ModelType;
     ModelType["CIRCLE_NODE"] = "circle-node";
     ModelType["POLYGON_NODE"] = "polygon-node";
     ModelType["RECT_NODE"] = "rect-node";
+    ModelType["HTML_NODE"] = "html-node";
     ModelType["TEXT_NODE"] = "text-node";
     ModelType["ELLIPSE_NODE"] = "ellipse-node";
     ModelType["DIAMOND_NODE"] = "diamond-node";

package/cjs/NodeResize/Node/EllipseResize.js

@@ -12,21 +12,9 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@logicflow/core");
 var ControlGroup_1 = require("../Control/ControlGroup");
-var Ellipse_1 = require("../BasicShape/Ellipse");
 var EllipseResizeModel = /** @class */ (function (_super) {
     __extends(EllipseResizeModel, _super);
     function EllipseResizeModel(data, graphModel) {
@@ -68,11 +56,7 @@ var EllipseResizeView = /** @class */ (function (_super) {
     };
     // getResizeShape绘制图形，功能等同于基础椭圆的getShape功能，可以通过复写此方法，进行节点自定义
     EllipseResizeView.prototype.getResizeShape = function () {
-        var model = this.props.model;
-        var rx = model.rx, ry = model.ry, x = model.x, y = model.y;
-        var style = model.getNodeStyle();
-        return (core_1.h("g", null,
-            core_1.h(Ellipse_1.default, __assign({}, style, { rx: rx, ry: ry, x: x, y: y }))));
+        return _super.prototype.getShape.call(this);
     };
     EllipseResizeView.prototype.getShape = function () {
         var model = this.props.model;

package/cjs/NodeResize/Node/HtmlResize.js

@@ -0,0 +1,72 @@
+"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 });
+var core_1 = require("@logicflow/core");
+var ControlGroup_1 = require("../Control/ControlGroup");
+var HtmlResizeModel = /** @class */ (function (_super) {
+    __extends(HtmlResizeModel, _super);
+    function HtmlResizeModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.minWidth = 30;
+        _this.minHeight = 30;
+        _this.maxWidth = 2000;
+        _this.maxHeight = 2000;
+        return _this;
+    }
+    HtmlResizeModel.prototype.getOutlineStyle = function () {
+        var style = _super.prototype.getOutlineStyle.call(this);
+        style.stroke = 'none';
+        if (style.hover) {
+            style.hover.stroke = 'none';
+        }
+        return style;
+    };
+    HtmlResizeModel.prototype.setAttributes = function () {
+        // @ts-ignore
+        var nodeSize = this.properties.nodeSize;
+        if (nodeSize) {
+            this.width = nodeSize.width;
+            this.height = nodeSize.height;
+        }
+    };
+    return HtmlResizeModel;
+}(core_1.HtmlNodeModel));
+var HtmlResizeView = /** @class */ (function (_super) {
+    __extends(HtmlResizeView, _super);
+    function HtmlResizeView() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HtmlResizeView.prototype.getControlGroup = function () {
+        var _a = this.props, model = _a.model, graphModel = _a.graphModel;
+        return (core_1.h(ControlGroup_1.default, { model: model, graphModel: graphModel }));
+    };
+    // getResizeShape绘制图形，功能等同于基础矩形的getShape功能，可以通过复写此方法，进行节点自定义
+    HtmlResizeView.prototype.getResizeShape = function () {
+        return _super.prototype.getShape.call(this);
+    };
+    HtmlResizeView.prototype.getShape = function () {
+        var isSelected = this.props.model.isSelected;
+        return (core_1.h("g", null,
+            this.getResizeShape(),
+            isSelected ? this.getControlGroup() : ''));
+    };
+    return HtmlResizeView;
+}(core_1.HtmlNode));
+var HtmlResize = {
+    type: 'html',
+    view: HtmlResizeView,
+    model: HtmlResizeModel,
+};
+exports.default = HtmlResize;

package/cjs/NodeResize/index.js

@@ -7,8 +7,9 @@ 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");
 var NodeResize = {
-    pluginName: 'node-resize',
+    pluginName: 'nodeResize',
     // 拖动step
     step: 0,
     // 边框和contol拖动点样式的设置
@@ -62,6 +63,11 @@ var NodeResize = {
             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;

package/cjs/bpmn/index.js

@@ -37,7 +37,7 @@ var BpmnElement = /** @class */ (function () {
             lf.setDefaultEdgeType('bpmn:sequenceFlow');
         }
     }
-    BpmnElement.pluginName = 'BpmnElement';
+    BpmnElement.pluginName = 'bpmnElement';
     return BpmnElement;
 }());
 exports.BpmnElement = BpmnElement;

package/cjs/bpmn-adapter/index.js

@@ -471,7 +471,7 @@ BpmnAdapter.shapeConfigMap.set(BpmnElements.USER, {
     height: constant_1.UserTaskConfig.height,
 });
 var BpmnXmlAdapter = {
-    pluginName: 'bpmn-xml-adapter',
+    pluginName: 'bpmnXmlAdapter',
     install: function (lf) {
         lf.adapterIn = this.adapterXmlIn;
         lf.adapterOut = this.adapterXmlOut;

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

@@ -26,29 +26,23 @@ var ContextMenu = /** @class */ (function () {
         var lf = _a.lf;
         this.menuTypeMap = new Map();
         this.listenDelete = function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         };
         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.setContextMenuByType(type, menus);
         };
         this.lf.setContextMenuItems = function (menus) {
-            _this.menuTypeMap.set(COMMON_TYPE_KEY, menus);
+            _this.setContextMenuItems(menus);
         };
         this.lf.showContextMenu = function (data) {
-            if (!data || !data.id) {
-                console.warn('请检查传入的参数');
-                return;
-            }
-            _this._activeData = data;
-            _this.createContextMenu();
+            _this.showContextMenu(data);
         };
         this.lf.hideContextMenu = function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         };
     }
     ContextMenu.prototype.render = function (lf, container) {
@@ -66,9 +60,39 @@ var ContextMenu = /** @class */ (function () {
             _this.createContextMenu();
         });
         lf.on('blank:click', function () {
-            _this.hideMenu();
+            _this.hideContextMenu();
         });
     };
+    ContextMenu.prototype.setContextMenuByType = function (type, menus) {
+        this.menuTypeMap.set(type, menus);
+    };
+    /**
+     * 隐藏菜单
+     */
+    ContextMenu.prototype.hideContextMenu = 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;
+    };
+    /**
+     * 显示指定元素菜单
+     * @param data 节点id、节点类型、菜单位置
+     */
+    ContextMenu.prototype.showContextMenu = function (data) {
+        if (!data || !data.id) {
+            console.warn('请检查传入的参数');
+            return;
+        }
+        this._activeData = data;
+        this.createContextMenu();
+    };
+    ContextMenu.prototype.setContextMenuItems = function (menus) {
+        this.menuTypeMap.set(COMMON_TYPE_KEY, menus);
+    };
     /**
      * 获取新菜单位置
      */
@@ -122,7 +146,7 @@ var ContextMenu = /** @class */ (function () {
                 menuItem.className = menuItem.className + " " + item.className;
             }
             img.addEventListener('click', function () {
-                _this.hideMenu();
+                _this.hideContextMenu();
                 if (item.callback) {
                     item.callback(_this._activeData);
                 }
@@ -194,16 +218,7 @@ var ContextMenu = /** @class */ (function () {
         !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';
+    ContextMenu.pluginName = 'contextMenu';
     return ContextMenu;
 }());
 exports.ContextMenu = ContextMenu;

package/cjs/components/control/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -34,10 +23,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Control = void 0;
 var Control = /** @class */ (function () {
     function Control(_a) {
-        var _b;
         var _this = this;
         var lf = _a.lf;
-        var _c;
         this.controlItems = [
             {
                 key: 'zoom-out',
@@ -86,7 +73,6 @@ var Control = /** @class */ (function () {
             },
         ];
         this.lf = lf;
-        this.lf.extension = __assign(__assign({}, ((_c = this.lf.extension) !== null && _c !== void 0 ? _c : {})), (_b = {}, _b[Control.pluginName] = this, _b));
     }
     Control.prototype.render = function (lf, domContainer) {
         this.destroy();

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

@@ -7,11 +7,7 @@ var DndPanel = /** @class */ (function () {
         var lf = _a.lf;
         this.lf = lf;
         this.lf.setPatternItems = function (shapeList) {
-            _this.shapeList = shapeList;
-            // 支持渲染后重新设置拖拽面板
-            if (_this.domContainer) {
-                _this.render(_this.lf, _this.domContainer);
-            }
+            _this.setPatternItems(shapeList);
         };
     }
     DndPanel.prototype.render = function (lf, domContainer) {
@@ -35,6 +31,13 @@ var DndPanel = /** @class */ (function () {
             this.domContainer.removeChild(this.panelEl);
         }
     };
+    DndPanel.prototype.setPatternItems = function (shapeList) {
+        this.shapeList = shapeList;
+        // 支持渲染后重新设置拖拽面板
+        if (this.domContainer) {
+            this.render(this.lf, this.domContainer);
+        }
+    };
     DndPanel.prototype.createDndItem = function (shapeItem) {
         var _this = this;
         var el = document.createElement('div');
@@ -65,7 +68,7 @@ var DndPanel = /** @class */ (function () {
         };
         return el;
     };
-    DndPanel.pluginName = 'DndPanel';
+    DndPanel.pluginName = 'dndPanel';
     return DndPanel;
 }());
 exports.DndPanel = DndPanel;

package/cjs/components/menu/index.js

@@ -34,10 +34,10 @@ var Menu = /** @class */ (function () {
         this.menuTypeMap = new Map();
         this.init();
         this.lf.setMenuConfig = function (config) {
-            _this.resetMenuItem(config);
+            _this.setMenuConfig(config);
         };
         this.lf.addMenuConfig = function (config) {
-            _this.addMenuItem(config);
+            _this.addMenuConfig(config);
         };
         this.lf.setMenuByType = function (config) {
             _this.setMenuByType(config);
@@ -250,7 +250,7 @@ var Menu = /** @class */ (function () {
         return menuList;
     };
     // 复写菜单
-    Menu.prototype.resetMenuItem = function (config) {
+    Menu.prototype.setMenuConfig = function (config) {
         if (!config) {
             return;
         }
@@ -265,7 +265,7 @@ var Menu = /** @class */ (function () {
             && this.menuTypeMap.set(DefalutGraphMenuKey, config.graphMenu ? config.graphMenu : []);
     };
     // 在默认菜单后面追加菜单项
-    Menu.prototype.addMenuItem = function (config) {
+    Menu.prototype.addMenuConfig = function (config) {
         if (!config) {
             return;
         }
@@ -289,14 +289,14 @@ var Menu = /** @class */ (function () {
      */
     Menu.prototype.changeMenuItem = function (type, config) {
         if (type === 'add')
-            this.addMenuItem(config);
+            this.addMenuConfig(config);
         else if (type === 'reset')
-            this.resetMenuItem(config);
+            this.setMenuConfig(config);
         else {
             throw new Error('The first parameter of changeMenuConfig should be \'add\' or \'reset\'');
         }
     };
-    Menu.pluginName = 'Menu';
+    Menu.pluginName = 'menu';
     return Menu;
 }());
 exports.Menu = Menu;