@logicflow/extension 1.1.5 → 1.1.7-alpha.1

package/cjs/NodeResize/Node/DiamondResize.js

@@ -29,12 +29,17 @@ var ControlGroup_1 = require("../Control/ControlGroup");
 var Polygon_1 = require("../BasicShape/Polygon");
 var DiamondResizeModel = /** @class */ (function (_super) {
     __extends(DiamondResizeModel, _super);
-    function DiamondResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function DiamondResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
         _this.minWidth = 30;
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.rx = nodeSize.rx;
+            _this.ry = nodeSize.ry;
+        }
         return _this;
     }
     DiamondResizeModel.prototype.getOutlineStyle = function () {
@@ -60,14 +65,6 @@ var DiamondResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    DiamondResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.rx = nodeSize.rx;
-            this.ry = nodeSize.ry;
-        }
-    };
     return DiamondResizeModel;
 }(core_1.DiamondNodeModel));
 var DiamondResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/EllipseResize.js

@@ -23,8 +23,11 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
-        _this.rx = 50;
-        _this.ry = 50;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.rx = nodeSize.rx;
+            _this.ry = nodeSize.ry;
+        }
         return _this;
     }
     EllipseResizeModel.prototype.getOutlineStyle = function () {
@@ -50,14 +53,6 @@ var EllipseResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    EllipseResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.rx = nodeSize.rx;
-            this.ry = nodeSize.ry;
-        }
-    };
     return EllipseResizeModel;
 }(core_1.EllipseNodeModel));
 var EllipseResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/HtmlResize.js

@@ -17,12 +17,17 @@ 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;
+    function HtmlResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
         _this.minWidth = 30;
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.width = nodeSize.width;
+            _this.height = nodeSize.height;
+        }
         return _this;
     }
     HtmlResizeModel.prototype.getOutlineStyle = function () {
@@ -48,14 +53,6 @@ var HtmlResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    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) {

package/cjs/NodeResize/Node/RectResize.js

@@ -17,12 +17,17 @@ var core_1 = require("@logicflow/core");
 var ControlGroup_1 = require("../Control/ControlGroup");
 var RectResizeModel = /** @class */ (function (_super) {
     __extends(RectResizeModel, _super);
-    function RectResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function RectResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
         _this.minWidth = 30;
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.width = nodeSize.width;
+            _this.height = nodeSize.height;
+        }
         return _this;
     }
     RectResizeModel.prototype.getOutlineStyle = function () {
@@ -49,14 +54,6 @@ var RectResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    RectResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.width = nodeSize.width;
-            this.height = nodeSize.height;
-        }
-    };
     RectResizeModel.prototype.resize = function (deltaX, deltaY) {
         console.log(deltaX, deltaY);
     };

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

@@ -98,20 +98,10 @@ var MiniMap = /** @class */ (function () {
     MiniMap.prototype.render = function (lf, container) {
         var _this = this;
         this.__container = container;
-        var events = [
-            'node:add',
-            'node:delete',
-            'edge:add',
-            'edge:delete',
-            'node:drop',
-            'blank:drop',
-        ];
-        events.forEach(function (eventName) {
-            _this.__lf.on(eventName, function () {
-                if (_this.__isShow) {
-                    _this.__setView();
-                }
-            });
+        this.__lf.on('history:change', function () {
+            if (_this.__isShow) {
+                _this.__setView();
+            }
         });
     };
     MiniMap.prototype.init = function (option) {

package/cjs/tools/auto-layout/index.js

@@ -27,6 +27,20 @@ var AutoLayout = /** @class */ (function () {
         var _this = this;
         var lf = _a.lf;
         this.lf = lf;
+        /**
+         * 用于记录上一次调用layout时计算出的trunk
+         * 当旧trunk和新trunk长度一致时，用于选择旧trunk,
+         * a->b->c->d
+         *    |->e
+         * e后面新增f节点时候，旧逻辑会返回新trunk[a,b,e,f]
+         * 界面布局变成
+         * a->b->e->f
+         *    |->c->d
+         * 其实只想要这样 尽量少变化
+         * a->b->c->d
+         *    |->e->f
+         * */
+        this.trunk = [];
         // 给lf添加方法
         lf.layout = function (startNodeType) {
             var data = _this.lf.getGraphRawData();
@@ -43,12 +57,22 @@ var AutoLayout = /** @class */ (function () {
     // 拿到最长的路径。
     // nodes: [], edges: [],
     AutoLayout.prototype.layout = function (data, path) {
+        var _this = this;
         var trunk = [];
         path.forEach(function (p) {
-            if (p.elements.length > trunk.length) {
-                trunk = p.elements;
+            var elements = p.elements;
+            if (elements.length > trunk.length) {
+                trunk = elements;
+            }
+            else if (elements.length === trunk.length) {
+                // 考虑是否替换为旧的trunk
+                if (JSON.stringify(elements) === JSON.stringify(_this.trunk)) {
+                    trunk = _this.trunk;
+                }
             }
         });
+        // 记录上一次trunk
+        this.trunk = trunk;
         var nodeMap = this.formatData(data);
         var newGraphData = {
             nodes: [],
@@ -182,7 +206,8 @@ var AutoLayout = /** @class */ (function () {
     AutoLayout.prototype.formatData = function (data) {
         var nodeMap = data.nodes.reduce(function (nMap, node) {
             var type = node.type, properties = node.properties, text = node.text, x = node.x, y = node.y;
-            if (text && typeof text === 'object') { // 坐标转换为偏移量
+            if (text && typeof text === 'object') {
+                // 坐标转换为偏移量
                 text.x = text.x - x;
                 text.y = text.y - y;
             }

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

@@ -4,6 +4,7 @@ declare class DiamondResizeModel extends DiamondNodeModel {
     minHeight: number;
     maxWidth: number;
     maxHeight: number;
+    constructor(data: any, graphModel: any);
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;
@@ -16,7 +17,6 @@ declare class DiamondResizeModel extends DiamondNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
 }
 declare class DiamondResizeView extends DiamondNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/DiamondResize.js

@@ -27,12 +27,17 @@ import ControlGroup from '../Control/ControlGroup';
 import Polygon from '../BasicShape/Polygon';
 var DiamondResizeModel = /** @class */ (function (_super) {
     __extends(DiamondResizeModel, _super);
-    function DiamondResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function DiamondResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
         _this.minWidth = 30;
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.rx = nodeSize.rx;
+            _this.ry = nodeSize.ry;
+        }
         return _this;
     }
     DiamondResizeModel.prototype.getOutlineStyle = function () {
@@ -58,14 +63,6 @@ var DiamondResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    DiamondResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.rx = nodeSize.rx;
-            this.ry = nodeSize.ry;
-        }
-    };
     return DiamondResizeModel;
 }(DiamondNodeModel));
 var DiamondResizeView = /** @class */ (function (_super) {

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

@@ -17,7 +17,6 @@ declare class EllipseResizeModel extends EllipseNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
 }
 declare class EllipseResizeView extends EllipseNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/EllipseResize.js

@@ -21,8 +21,11 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
-        _this.rx = 50;
-        _this.ry = 50;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.rx = nodeSize.rx;
+            _this.ry = nodeSize.ry;
+        }
         return _this;
     }
     EllipseResizeModel.prototype.getOutlineStyle = function () {
@@ -48,14 +51,6 @@ var EllipseResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    EllipseResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.rx = nodeSize.rx;
-            this.ry = nodeSize.ry;
-        }
-    };
     return EllipseResizeModel;
 }(EllipseNodeModel));
 var EllipseResizeView = /** @class */ (function (_super) {

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

@@ -4,6 +4,7 @@ declare class HtmlResizeModel extends HtmlNodeModel {
     minHeight: number;
     maxWidth: number;
     maxHeight: number;
+    constructor(data: any, graphModel: any);
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;
@@ -16,7 +17,6 @@ declare class HtmlResizeModel extends HtmlNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
 }
 declare class HtmlResizeView extends HtmlNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/HtmlResize.js

@@ -15,12 +15,17 @@ import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
 import ControlGroup from '../Control/ControlGroup';
 var HtmlResizeModel = /** @class */ (function (_super) {
     __extends(HtmlResizeModel, _super);
-    function HtmlResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function HtmlResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
         _this.minWidth = 30;
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.width = nodeSize.width;
+            _this.height = nodeSize.height;
+        }
         return _this;
     }
     HtmlResizeModel.prototype.getOutlineStyle = function () {
@@ -46,14 +51,6 @@ var HtmlResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    HtmlResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.width = nodeSize.width;
-            this.height = nodeSize.height;
-        }
-    };
     return HtmlResizeModel;
 }(HtmlNodeModel));
 var HtmlResizeView = /** @class */ (function (_super) {

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

@@ -4,6 +4,7 @@ declare class RectResizeModel extends RectNodeModel {
     minHeight: number;
     maxWidth: number;
     maxHeight: number;
+    constructor(data: any, graphModel: any);
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         fill: string;
@@ -17,7 +18,6 @@ declare class RectResizeModel extends RectNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
     resize(deltaX: any, deltaY: any): void;
 }
 declare class RectResizeView extends RectNode {

package/es/NodeResize/Node/RectResize.js

@@ -15,12 +15,17 @@ import { h, RectNode, RectNodeModel } from '@logicflow/core';
 import ControlGroup from '../Control/ControlGroup';
 var RectResizeModel = /** @class */ (function (_super) {
     __extends(RectResizeModel, _super);
-    function RectResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function RectResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
         _this.minWidth = 30;
         _this.minHeight = 30;
         _this.maxWidth = 2000;
         _this.maxHeight = 2000;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.width = nodeSize.width;
+            _this.height = nodeSize.height;
+        }
         return _this;
     }
     RectResizeModel.prototype.getOutlineStyle = function () {
@@ -47,14 +52,6 @@ var RectResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    RectResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.width = nodeSize.width;
-            this.height = nodeSize.height;
-        }
-    };
     RectResizeModel.prototype.resize = function (deltaX, deltaY) {
         console.log(deltaX, deltaY);
     };

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

@@ -95,20 +95,10 @@ var MiniMap = /** @class */ (function () {
     MiniMap.prototype.render = function (lf, container) {
         var _this = this;
         this.__container = container;
-        var events = [
-            'node:add',
-            'node:delete',
-            'edge:add',
-            'edge:delete',
-            'node:drop',
-            'blank:drop',
-        ];
-        events.forEach(function (eventName) {
-            _this.__lf.on(eventName, function () {
-                if (_this.__isShow) {
-                    _this.__setView();
-                }
-            });
+        this.__lf.on('history:change', function () {
+            if (_this.__isShow) {
+                _this.__setView();
+            }
         });
     };
     MiniMap.prototype.init = function (option) {

package/es/tools/auto-layout/index.d.ts

@@ -8,6 +8,7 @@ declare class AutoLayout {
     lf: LogicFlow;
     levelHeight: any[];
     newNodeMap: Map<string, any>;
+    trunk: any[];
     static pluginName: string;
     constructor({ lf }: {
         lf: any;
@@ -36,4 +37,4 @@ declare class AutoLayout {
     addLevelHeight(level: any, height?: number, isNegative?: boolean): void;
     getLevelHeight(level: any, isNegative?: boolean): any;
 }
-export { AutoLayout, };
+export { AutoLayout };

package/es/tools/auto-layout/index.js

@@ -24,6 +24,20 @@ var AutoLayout = /** @class */ (function () {
         var _this = this;
         var lf = _a.lf;
         this.lf = lf;
+        /**
+         * 用于记录上一次调用layout时计算出的trunk
+         * 当旧trunk和新trunk长度一致时，用于选择旧trunk,
+         * a->b->c->d
+         *    |->e
+         * e后面新增f节点时候，旧逻辑会返回新trunk[a,b,e,f]
+         * 界面布局变成
+         * a->b->e->f
+         *    |->c->d
+         * 其实只想要这样 尽量少变化
+         * a->b->c->d
+         *    |->e->f
+         * */
+        this.trunk = [];
         // 给lf添加方法
         lf.layout = function (startNodeType) {
             var data = _this.lf.getGraphRawData();
@@ -40,12 +54,22 @@ var AutoLayout = /** @class */ (function () {
     // 拿到最长的路径。
     // nodes: [], edges: [],
     AutoLayout.prototype.layout = function (data, path) {
+        var _this = this;
         var trunk = [];
         path.forEach(function (p) {
-            if (p.elements.length > trunk.length) {
-                trunk = p.elements;
+            var elements = p.elements;
+            if (elements.length > trunk.length) {
+                trunk = elements;
+            }
+            else if (elements.length === trunk.length) {
+                // 考虑是否替换为旧的trunk
+                if (JSON.stringify(elements) === JSON.stringify(_this.trunk)) {
+                    trunk = _this.trunk;
+                }
             }
         });
+        // 记录上一次trunk
+        this.trunk = trunk;
         var nodeMap = this.formatData(data);
         var newGraphData = {
             nodes: [],
@@ -179,7 +203,8 @@ var AutoLayout = /** @class */ (function () {
     AutoLayout.prototype.formatData = function (data) {
         var nodeMap = data.nodes.reduce(function (nMap, node) {
             var type = node.type, properties = node.properties, text = node.text, x = node.x, y = node.y;
-            if (text && typeof text === 'object') { // 坐标转换为偏移量
+            if (text && typeof text === 'object') {
+                // 坐标转换为偏移量
                 text.x = text.x - x;
                 text.y = text.y - y;
             }
@@ -238,4 +263,4 @@ var AutoLayout = /** @class */ (function () {
     AutoLayout.pluginName = 'AutoLayout';
     return AutoLayout;
 }());
-export { AutoLayout, };
+export { AutoLayout };