@logicflow/core 2.0.8 → 2.0.10

package/lib/model/GraphModel.js

@@ -16,6 +16,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -55,6 +66,8 @@ var eventEmitter_1 = __importDefault(require("../event/eventEmitter"));
 var overlay_1 = require("../view/overlay");
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
+        var _this = this;
+        var _a, _b;
         // 维护所有节点和边类型对应的 model
         this.modelMap = new Map();
         // Remind：用于记录当前画布上所有节点和边的 model 的 Map
@@ -87,11 +100,14 @@ var GraphModel = /** @class */ (function () {
         this.gridSize = 1;
         // 控制是否开启局部渲染
         this.partial = false;
-        var container = options.container, partial = options.partial, _a = options.background, background = _a === void 0 ? {} : _a, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
+        this.waitCleanEffects = [];
+        var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
         this.rootEl = container;
         this.partial = !!partial;
         this.background = background;
-        if (typeof grid === 'object') {
+        if (typeof grid === 'object' && options.snapGrid) {
+            // 开启网格对齐时才根据网格尺寸设置步长
+            // TODO：需要让用户设置成 0 吗？后面可以讨论一下
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
         this.theme = (0, util_1.setupTheme)(options.style);
@@ -99,8 +115,36 @@ var GraphModel = /** @class */ (function () {
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
-        this.width = options.width || this.rootEl.getBoundingClientRect().width;
-        this.height = options.height || this.rootEl.getBoundingClientRect().height;
+        this.width = (_a = options.width) !== null && _a !== void 0 ? _a : this.rootEl.getBoundingClientRect().width;
+        this.isContainerWidth = (0, lodash_es_1.isNil)(options.width);
+        this.height = (_b = options.height) !== null && _b !== void 0 ? _b : this.rootEl.getBoundingClientRect().height;
+        this.isContainerHeight = (0, lodash_es_1.isNil)(options.height);
+        var resizeObserver = new ResizeObserver((0, lodash_es_1.debounce)((function (entries) {
+            var e_1, _a;
+            try {
+                for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
+                    var entry = entries_1_1.value;
+                    if (entry.target === _this.rootEl) {
+                        _this.resize();
+                        _this.eventCenter.emit('graph:resize', {
+                            target: _this.rootEl,
+                            contentRect: entry.contentRect,
+                        });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }), 16));
+        resizeObserver.observe(this.rootEl);
+        this.waitCleanEffects.push(function () {
+            resizeObserver.disconnect();
+        });
         this.eventCenter = new eventEmitter_1.default();
         this.editConfigModel = new _1.EditConfigModel(options);
         this.transformModel = new _1.TransformModel(this.eventCenter, options);
@@ -356,17 +400,23 @@ var GraphModel = /** @class */ (function () {
      */
     GraphModel.prototype.graphDataToModel = function (graphData) {
         var _this = this;
-        if (!this.width || !this.height) {
-            this.resize();
-        }
+        // 宽度必然存在，取消重新计算
+        // if (!this.width || !this.height) {
+        //   this.resize()
+        // }
         if (!graphData) {
-            this.nodes = [];
-            this.edges = [];
+            this.clearData();
             return;
         }
+        this.elementsModelMap.clear();
+        this.nodeModelMap.clear();
+        this.edgeModelMap.clear();
         if (graphData.nodes) {
             this.nodes = (0, lodash_es_1.map)(graphData.nodes, function (node) {
-                return _this.getModelAfterSnapToGrid(node);
+                var nodeModel = _this.getModelAfterSnapToGrid(node);
+                _this.elementsModelMap.set(nodeModel.id, nodeModel);
+                _this.nodeModelMap.set(nodeModel.id, nodeModel);
+                return nodeModel;
             });
         }
         else {
@@ -381,31 +431,6 @@ var GraphModel = /** @class */ (function () {
                     throw new Error("\u627E\u4E0D\u5230".concat(edge.type, "\u5BF9\u5E94\u7684\u8FB9\u3002"));
                 }
                 var edgeModel = new Model(edge, _this);
-                // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
-                // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
-                var sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, _b = edgeModel.sourceAnchorId, sourceAnchorId = _b === void 0 ? '' : _b, _c = edgeModel.targetAnchorId, targetAnchorId = _c === void 0 ? '' : _c, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, text = edgeModel.text, textPosition = edgeModel.textPosition;
-                var updateAnchorPoint = function (node, anchorId, point, updatePoint) {
-                    var anchor = node === null || node === void 0 ? void 0 : node.anchors.find(function (anchor) { return anchor.id === anchorId; });
-                    if (anchor && !(0, lodash_es_1.isEqual)(anchor, point)) {
-                        updatePoint(anchor);
-                    }
-                };
-                var sourceNode = _this.getNodeModelById(sourceNodeId);
-                var targetNode = _this.getNodeModelById(targetNodeId);
-                updateAnchorPoint(sourceNode, sourceAnchorId, startPoint, edgeModel.updateStartPoint.bind(edgeModel));
-                updateAnchorPoint(targetNode, targetAnchorId, endPoint, edgeModel.updateEndPoint.bind(edgeModel));
-                // 而文本需要先算一下文本与默认文本位置之间的相对位置差
-                // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
-                if (text) {
-                    var x = text.x, y = text.y;
-                    var defaultX = textPosition.x, defaultY = textPosition.y;
-                    if (x && y && defaultX && defaultY) {
-                        var deltaX = x - defaultX;
-                        var deltaY = y - defaultY;
-                        edgeModel.resetTextPosition();
-                        edgeModel.moveText(deltaX, deltaY);
-                    }
-                }
                 _this.edgeModelMap.set(edgeModel.id, edgeModel);
                 _this.elementsModelMap.set(edgeModel.id, edgeModel);
                 return edgeModel;
@@ -739,14 +764,15 @@ var GraphModel = /** @class */ (function () {
      */
     GraphModel.prototype.getModelAfterSnapToGrid = function (node) {
         var Model = this.getModel(node.type);
+        var snapGrid = this.editConfigModel.snapGrid;
         if (!Model) {
             throw new Error("\u627E\u4E0D\u5230".concat(node.type, "\u5BF9\u5E94\u7684\u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u5DF2\u6CE8\u518C\u6B64\u7C7B\u578B\u8282\u70B9\u3002"));
         }
         var nodeX = node.x, nodeY = node.y;
         // 根据 grid 修正节点的 x, y
         if (nodeX && nodeY) {
-            node.x = (0, util_1.snapToGrid)(nodeX, this.gridSize);
-            node.y = (0, util_1.snapToGrid)(nodeY, this.gridSize);
+            node.x = (0, util_1.snapToGrid)(nodeX, this.gridSize, snapGrid);
+            node.y = (0, util_1.snapToGrid)(nodeY, this.gridSize, snapGrid);
             if (typeof node.text === 'object' && node.text !== null) {
                 // 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
                 // 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
@@ -1282,7 +1308,13 @@ var GraphModel = /** @class */ (function () {
         (0, lodash_es_1.merge)(this.grid, options);
     };
     /**
-     * 更新网格配置
+     * 更新网格尺寸
+     */
+    GraphModel.prototype.updateGridSize = function (size) {
+        this.gridSize = size;
+    };
+    /**
+     * 更新背景配置
      */
     GraphModel.prototype.updateBackgroundOptions = function (options) {
         if ((0, lodash_es_1.isBoolean)(options) || (0, lodash_es_1.isBoolean)(this.background)) {
@@ -1296,8 +1328,10 @@ var GraphModel = /** @class */ (function () {
      * 重新设置画布的宽高
      */
     GraphModel.prototype.resize = function (width, height) {
-        this.width = width || this.rootEl.getBoundingClientRect().width;
-        this.height = height || this.rootEl.getBoundingClientRect().height;
+        this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
+        this.isContainerWidth = (0, lodash_es_1.isNil)(width);
+        this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
+        this.isContainerHeight = (0, lodash_es_1.isNil)(height);
         if (!this.width || !this.height) {
             console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
         }
@@ -1308,6 +1342,10 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.clearData = function () {
         this.nodes = [];
         this.edges = [];
+        // 清除对已清除节点的引用
+        this.edgeModelMap.clear();
+        this.nodeModelMap.clear();
+        this.elementsModelMap.clear();
     };
     /**
      * 获取图形区域虚拟矩型的尺寸和中心坐标
@@ -1413,6 +1451,19 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setPartial = function (partial) {
         this.partial = partial;
     };
+    /** 销毁当前实例 */
+    GraphModel.prototype.destroy = function () {
+        try {
+            this.waitCleanEffects.forEach(function (fn) {
+                fn();
+            });
+        }
+        catch (err) {
+            console.warn('error on destroy GraphModel', err);
+        }
+        this.waitCleanEffects.length = 0;
+        this.eventCenter.destroy();
+    };
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "width", void 0);

package/lib/model/edge/BaseEdgeModel.js

@@ -320,6 +320,8 @@ var BaseEdgeModel = /** @class */ (function () {
             properties: properties,
             sourceNodeId: this.sourceNodeId,
             targetNodeId: this.targetNodeId,
+            sourceAnchorId: this.sourceAnchorId,
+            targetAnchorId: this.targetAnchorId,
             startPoint: (0, lodash_es_1.assign)({}, this.startPoint),
             endPoint: (0, lodash_es_1.assign)({}, this.endPoint),
         };
@@ -419,14 +421,15 @@ var BaseEdgeModel = /** @class */ (function () {
      */
     BaseEdgeModel.prototype.formatText = function (data) {
         var _a, _b, _c;
-        var _d = this.textPosition, x = _d.x, y = _d.y;
+        var _d = this.graphModel.editConfigModel, edgeTextDraggable = _d.edgeTextDraggable, edgeTextEdit = _d.edgeTextEdit;
+        var _e = this.textPosition, x = _e.x, y = _e.y;
         var text = data.text;
         var textConfig = {
             value: '',
             x: x,
             y: y,
-            draggable: false,
-            editable: true,
+            draggable: edgeTextDraggable,
+            editable: edgeTextEdit,
         };
         if (text) {
             if (typeof text === 'string') {

package/lib/model/edge/PolylineEdgeModel.d.ts

@@ -33,6 +33,7 @@ export declare class PolylineEdgeModel extends BaseEdgeModel {
     removeCrossPoints(startIndex: number, endIndex: number, pointList: Point[]): LogicFlow.Point[];
     getDraggingPoints(direction: SegmentDirection, positionType: string, position: Position, anchorList: AnchorConfig[], draggingPointList: Point[]): LogicFlow.Point[];
     updateCrossPoints(pointList: Point[]): LogicFlow.Point[];
+    updatePath(pointList: Point[]): void;
     getData(): LogicFlow.EdgeData & {
         pointsList: {
             x: number;

package/lib/model/edge/PolylineEdgeModel.js

@@ -73,6 +73,9 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
     }
     PolylineEdgeModel.prototype.initEdgeData = function (data) {
         this.offset = 30;
+        if (data.pointsList) {
+            this.pointsList = data.pointsList;
+        }
         _super.prototype.initEdgeData.call(this, data);
     };
     PolylineEdgeModel.prototype.getEdgeStyle = function () {
@@ -285,6 +288,10 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
         }
         return list;
     };
+    PolylineEdgeModel.prototype.updatePath = function (pointList) {
+        this.pointsList = pointList;
+        this.points = this.getPath(this.pointsList);
+    };
     PolylineEdgeModel.prototype.getData = function () {
         var data = _super.prototype.getData.call(this);
         var pointsList = this.pointsList.map(function (_a) {

package/lib/model/node/BaseNodeModel.d.ts

@@ -172,8 +172,8 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
         color?: string | undefined;
         fontSize: number;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
     };
     /**
      * @overridable 支持重写

package/lib/model/node/BaseNodeModel.js

@@ -226,13 +226,14 @@ var BaseNodeModel = /** @class */ (function () {
      */
     BaseNodeModel.prototype.formatText = function (data) {
         var _a, _b, _c;
+        var _d = this.graphModel.editConfigModel, nodeTextDraggable = _d.nodeTextDraggable, nodeTextEdit = _d.nodeTextEdit;
         var x = data.x, y = data.y, text = data.text;
         var textConfig = {
             value: '',
             x: x,
             y: y,
-            draggable: false,
-            editable: true,
+            draggable: nodeTextDraggable,
+            editable: nodeTextEdit,
         };
         if (text) {
             if (typeof text === 'string') {

package/lib/model/node/TextNodeModel.d.ts

@@ -24,8 +24,8 @@ export declare class TextNodeModel<P extends ITextNodeProperties = ITextNodeProp
         fontSize: number;
         textWidth?: number | undefined;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
         overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
         wrapPadding?: string | undefined;
     };

package/lib/tool/index.d.ts

@@ -20,5 +20,6 @@ export declare class Tool {
     enableTool(name: string): boolean | Error;
     getTools(): ToolConstructor[];
     getInstance(): LogicFlow;
+    destroy(): void;
 }
 export default Tool;

package/lib/tool/index.js

@@ -73,6 +73,10 @@ var Tool = /** @class */ (function () {
     Tool.prototype.getInstance = function () {
         return this.instance;
     };
+    Tool.prototype.destroy = function () {
+        this.toolMap.clear();
+        this.disabledToolMap.clear();
+    };
     __decorate([
         mobx_1.observable
     ], Tool.prototype, "toolMap", void 0);

package/lib/util/geometry.d.ts

@@ -1,6 +1,6 @@
 import LogicFlow from '../LogicFlow';
 import PointTuple = LogicFlow.PointTuple;
-export declare function snapToGrid(point: number, gridSize: number): number;
+export declare function snapToGrid(point: number, gridSize: number, snapGrid: boolean): number;
 export declare function getGridOffset(distance: number, gridSize: number): number;
 /**
  * 多边形设置 points 后，坐标平移至原点 并 根据 width、height 缩放

package/lib/util/geometry.js

@@ -26,7 +26,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizePolygon = exports.getGridOffset = exports.snapToGrid = void 0;
-function snapToGrid(point, gridSize) {
+function snapToGrid(point, gridSize, snapGrid) {
+    // 开启节网格对齐时才根据网格尺寸校准坐标
+    if (!snapGrid)
+        return point;
     // 保证 x, y 的值为 gridSize 的整数倍
     return gridSize * Math.round(point / gridSize) || point;
 }

package/lib/view/Graph.js

@@ -57,9 +57,26 @@ var Graph = /** @class */ (function (_super) {
     function Graph() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
         _this.handleResize = function () {
-            _this.props.graphModel.resize();
+            var _a = _this.props, graphModel = _a.graphModel, options = _a.options;
+            var width = graphModel.width, height = graphModel.height, isContainerWidth = graphModel.isContainerWidth, isContainerHeight = graphModel.isContainerHeight;
+            var resizeWidth = width;
+            var resizeHeight = height;
+            var needUpdate = false;
+            if (isContainerWidth) {
+                resizeWidth = undefined;
+                needUpdate = true;
+            }
+            if (isContainerHeight) {
+                resizeHeight = undefined;
+                needUpdate = true;
+            }
+            if (needUpdate) {
+                graphModel.resize(resizeWidth, resizeHeight);
+            }
+            options.width = width;
+            options.height = height;
         };
-        _this.throttleResize = function () { return (0, lodash_es_1.throttle)(_this.handleResize, 200); };
+        _this.throttleResize = (0, lodash_es_1.throttle)(_this.handleResize, 200);
         return _this;
     }
     Graph.prototype.componentDidMount = function () {

package/lib/view/behavior/dnd.js

@@ -84,10 +84,11 @@ var Dnd = /** @class */ (function () {
         });
         // 处理缩放和偏移
         var _b = position.canvasOverlayPosition, x1 = _b.x, y1 = _b.y;
+        var snapGrid = this.lf.graphModel.editConfigModel.snapGrid;
         // x, y 对齐到网格的 size
         return {
-            x: (0, util_1.snapToGrid)(x1, gridSize),
-            y: (0, util_1.snapToGrid)(y1, gridSize),
+            x: (0, util_1.snapToGrid)(x1, gridSize, snapGrid),
+            y: (0, util_1.snapToGrid)(y1, gridSize, snapGrid),
         };
     };
     Dnd.prototype.startDrag = function (nodeConfig) {

package/lib/view/edge/BaseEdge.js

@@ -125,12 +125,16 @@ var BaseEdge = /** @class */ (function (_super) {
                 clearTimeout(_this.clickTimer);
             }
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            var editConfigModel = graphModel.editConfigModel;
             var position = graphModel.getPointByClient({
                 x: ev.clientX,
                 y: ev.clientY,
             });
             graphModel.setElementStateById(model.id, constant_1.ElementState.SHOW_MENU, position.domOverlayPosition);
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
             if (!model.isSelected) {
                 graphModel.selectEdgeById(model.id);
             }
@@ -218,7 +222,10 @@ var BaseEdge = /** @class */ (function (_super) {
             }
             var editConfigModel = graphModel.editConfigModel;
             graphModel.selectEdgeById(model.id, (0, util_1.isMultipleSelect)(e, editConfigModel));
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
         };
         _this.handleFocus = function () {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;

package/lib/view/node/BaseNode.js

@@ -89,7 +89,7 @@ var BaseNode = /** @class */ (function (_super) {
             var _b, _c, _d, _e;
             var event = _a.event;
             var _f = _this.props, model = _f.model, graphModel = _f.graphModel;
-            var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
+            var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, snapGrid = _g.snapGrid, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
             model.isDragging = true;
             var _h = event, clientX = _h.clientX, clientY = _h.clientY;
             var _j = graphModel.getPointByClient({
@@ -101,9 +101,9 @@ var BaseNode = /** @class */ (function (_super) {
             // 2. 考虑鼠标位置不再节点中心
             x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
             y = y + ((_e = (_d = _this.moveOffset) === null || _d === void 0 ? void 0 : _d.dy) !== null && _e !== void 0 ? _e : 0);
-            // 将x, y移动到grid上
-            x = (0, util_1.snapToGrid)(x, gridSize);
-            y = (0, util_1.snapToGrid)(y, gridSize);
+            // 校准坐标
+            x = (0, util_1.snapToGrid)(x, gridSize, snapGrid);
+            y = (0, util_1.snapToGrid)(y, gridSize, snapGrid);
             if (!width || !height) {
                 graphModel.moveNode2Coordinate(model.id, x, y);
                 return;
@@ -217,12 +217,15 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.selectNodeById(model.id, isMultiple);
                 eventOptions.isSelected = true;
-                _this.toFront();
+                // 静默模式下点击节点不变更节点层级
+                if (!editConfigModel.isSilentMode) {
+                    _this.toFront();
+                }
             }
             // 不是双击的，默认都是单击
             if (isDoubleClick) {
                 if (editConfigModel.nodeTextEdit) {
-                    if (model.text.editable) {
+                    if (model.text.editable && editConfigModel.textMode === constant_1.TextMode.TEXT) {
                         model.setSelected(false);
                         graphModel.setElementStateById(model.id, constant_1.ElementState.TEXT_EDIT);
                     }
@@ -237,6 +240,7 @@ var BaseNode = /** @class */ (function (_super) {
         _this.handleContextMenu = function (ev) {
             ev.preventDefault();
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            var editConfigModel = graphModel.editConfigModel;
             // 节点数据，多为事件对象数据抛出
             var nodeData = model.getData();
             var position = graphModel.getPointByClient({
@@ -252,7 +256,10 @@ var BaseNode = /** @class */ (function (_super) {
                 e: ev,
                 position: position,
             });
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
         };
         _this.handleMouseDown = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -326,6 +333,12 @@ var BaseNode = /** @class */ (function (_super) {
         if (this.modelDisposer) {
             this.modelDisposer();
         }
+        // 以下是 mobx-preact 中 componentWillUnmount 的回调逻辑，但是不知道出于什么考虑，mobx-preact 没有混入这一段逻辑
+        // @ts-ignore
+        if (this.render.$mobx) {
+            // @ts-ignore
+            this.render.$mobx.dispose();
+        }
     };
     BaseNode.prototype.componentDidMount = function () { };
     BaseNode.prototype.componentDidUpdate = function () { };

package/lib/view/node/HtmlNode.js

@@ -119,6 +119,7 @@ var HtmlNode = /** @class */ (function (_super) {
         }
     };
     HtmlNode.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
         this.rootEl.innerHTML = '';
     };
     HtmlNode.prototype.getShape = function () {

package/lib/view/overlay/CanvasOverlay.js

@@ -66,8 +66,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
         _this.zoomHandler = function (ev) {
             var _a = _this.props, _b = _a.graphModel, editConfigModel = _b.editConfigModel, transformModel = _b.transformModel, gridSize = _b.gridSize, graphModel = _a.graphModel;
             var eX = ev.deltaX, eY = ev.deltaY;
+            var stopScrollGraph = editConfigModel.stopScrollGraph, stopZoomGraph = editConfigModel.stopZoomGraph;
             // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键、cmd键没有按住, 那么移动画布
-            if (!editConfigModel.stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
+            if (!stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
                 ev.preventDefault();
                 _this.stepScrollX += eX;
                 _this.stepScrollY += eY;
@@ -86,7 +87,7 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 return;
             }
             // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
-            if (!editConfigModel.stopZoomGraph) {
+            if (!stopZoomGraph) {
                 ev.preventDefault();
                 var position = graphModel.getPointByClient({
                     x: ev.clientX,
@@ -127,10 +128,11 @@ var CanvasOverlay = /** @class */ (function (_super) {
         // 鼠标、触摸板 按下
         _this.mouseDownHandler = function (ev) {
             var _a = _this.props.graphModel, eventCenter = _a.eventCenter, editConfigModel = _a.editConfigModel, SCALE_X = _a.transformModel.SCALE_X, gridSize = _a.gridSize;
+            var adjustEdge = editConfigModel.adjustEdge, adjustNodePosition = editConfigModel.adjustNodePosition, stopMoveGraph = editConfigModel.stopMoveGraph;
             var target = ev.target;
-            var isFrozenElement = !editConfigModel.adjustEdge && !editConfigModel.adjustNodePosition;
+            var isFrozenElement = !adjustEdge && !adjustNodePosition;
             if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
-                if (editConfigModel.stopMoveGraph !== true) {
+                if (stopMoveGraph !== true) {
                     _this.stepDrag.setStep(gridSize * SCALE_X);
                     _this.stepDrag.handleMouseDown(ev);
                 }

package/lib/view/overlay/getTransformHoc.d.ts

@@ -25,7 +25,7 @@ export declare function getTransform<P>(WrappedComponent: ComponentType<P>): {
         props: import("preact").RenderableProps<IProps & P, any>;
         context: any;
         base?: Element | Text | undefined;
-        setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Pick<{}, K> | Partial<{}> | null) | Pick<{}, K> | Partial<{}> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: Partial<{}> | ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Partial<{}> | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
     };
     displayName?: string | undefined;

package/lib/view/text/BaseText.js

@@ -60,6 +60,7 @@ var BaseText = /** @class */ (function (_super) {
             var _a = _this.props, draggable = _a.draggable, model = _a.model, graphModel = _a.graphModel;
             var nodeTextDraggable = graphModel.editConfigModel.nodeTextDraggable;
             if (draggable !== null && draggable !== void 0 ? draggable : nodeTextDraggable) {
+                e.stopPropagation();
                 _this.stepperDrag.model = model;
                 _this.stepperDrag.handleMouseDown(e);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/LogicFlow.tsx

@@ -1,5 +1,5 @@
 import { ComponentType, createElement as h, render } from 'preact/compat'
-import { cloneDeep, forEach, indexOf } from 'lodash-es'
+import { cloneDeep, forEach, indexOf, isNil } from 'lodash-es'
 import { observer } from '.'
 import { Options as LFOptions } from './options'
 import * as _Model from './model'
@@ -885,12 +885,23 @@ export class LogicFlow {
    */
   updateEditConfig(config: Partial<IEditConfigType>) {
     const { editConfigModel, transformModel } = this.graphModel
+    const currentSnapGrid = editConfigModel.snapGrid
+
     editConfigModel.updateEditConfig(config)
     if (config?.stopMoveGraph !== undefined) {
       transformModel.updateTranslateLimits(config.stopMoveGraph)
     }
+
     // 静默模式切换时，修改快捷键的启用状态
     config?.isSilentMode ? this.keyboard.disable() : this.keyboard.enable(true)
+
+    // 切换网格对齐状态时，修改网格尺寸
+    if (!isNil(config?.snapGrid) && config.snapGrid !== currentSnapGrid) {
+      const {
+        grid: { size = 1 },
+      } = this.graphModel
+      this.graphModel.updateGridSize(config.snapGrid ? size : 1)
+    }
   }
 
   /**
@@ -1044,6 +1055,8 @@ export class LogicFlow {
    */
   clearData() {
     this.graphModel.clearData()
+    // 强制刷新数据, 让 preact 清除对已删除节点的引用
+    this.render({})
   }
 
   /*********************************************************
@@ -1372,7 +1385,12 @@ export class LogicFlow {
 
   /** 销毁当前实例 */
   destroy() {
+    this.clearData()
+    render(null, this.container)
+    this.keyboard.destroy()
     this.graphModel.destroy()
+    this.tool.destroy()
+    this.history.destroy()
   }
 }
 

package/src/event/eventEmitter.ts

@@ -147,6 +147,10 @@ export default class EventEmitter {
   getEvents() {
     return this._events
   }
+
+  destroy() {
+    this._events = {}
+  }
 }
 
 export { EventEmitter, EventArgs }