@logicflow/core 2.0.9 → 2.0.11

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') {
@@ -647,6 +648,10 @@ var BaseNodeModel = /** @class */ (function () {
             this.text && this.moveText(0, deltaY);
             moveY = deltaY;
         }
+        this.transform = new util_1.TranslateMatrix(-this.x, -this.y)
+            .rotate(this.rotate)
+            .translate(this.x, this.y)
+            .toString();
         return [moveX, moveY];
     };
     BaseNodeModel.prototype.moveTo = function (x, y, isIgnoreRule) {

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

@@ -56,7 +56,7 @@ var Tool = /** @class */ (function () {
             this.toolMap.delete(name);
             return true;
         }
-        throw new Error('禁用失败，不存在名为 ${tool} 的工具');
+        throw new Error("\u7981\u7528\u5931\u8D25\uFF0C\u4E0D\u5B58\u5728\u540D\u4E3A ".concat(tool, " \u7684\u5DE5\u5177"));
     };
     Tool.prototype.enableTool = function (name) {
         var tool = this.disabledToolMap.get(name);
@@ -65,7 +65,7 @@ var Tool = /** @class */ (function () {
             this.disabledToolMap.delete(name);
             return true;
         }
-        throw new Error('不存在名为 ${tool} 的工具');
+        throw new Error("\u4E0D\u5B58\u5728\u540D\u4E3A ".concat(tool, " \u7684\u5DE5\u5177"));
     };
     Tool.prototype.getTools = function () {
         return Array.from(this.toolMap.values());
@@ -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/util/node.d.ts

@@ -15,7 +15,7 @@ export type NodeContaint = {
 export declare const targetNodeInfo: (position: Point, graphModel: GraphModel) => NodeContaint;
 export declare const getClosestAnchor: (position: Point, node: BaseNodeModel) => AnchorInfo;
 export declare const distance: (x1: number, y1: number, x2: number, y2: number) => number;
-export declare const isInNode: (position: Point, node: BaseNodeModel) => boolean;
+export declare const isInNode: (position: Point, node: BaseNodeModel, offset?: number) => boolean;
 export declare const isInNodeBbox: (position: Point, node: BaseNodeModel) => boolean;
 export type NodeBBox = {
     x: number;

package/lib/util/node.js

@@ -10,12 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+    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.formatAnchorConnectValidateData = exports.getSvgTextWidthHeight = exports.getHtmlTextHeight = exports.getNodeAnchorPosition = exports.pickNodeConfig = exports.getCrossPointWithPolygon = exports.getCrossPointWithEllipse = exports.inStraightLineOfRect = exports.pointEdgeDirection = exports.getCrossPointWithCircle = exports.getClosestRadiusCenter = exports.getRectRadiusCircle = exports.getNodeBBox = exports.isInNodeBbox = exports.isInNode = exports.distance = exports.getClosestAnchor = exports.targetNodeInfo = exports.getAnchors = void 0;
 var lodash_es_1 = require("lodash-es");
 var edge_1 = require("./edge");
 var constant_1 = require("../constant");
 var edge_2 = require("../algorithm/edge");
+var matrix_1 = require("./matrix");
 /* 获取所有锚点 */
 var getAnchors = function (data) {
     var anchors = data.anchors;
@@ -79,30 +96,29 @@ exports.getClosestAnchor = getClosestAnchor;
 var distance = function (x1, y1, x2, y2) { return Math.hypot(x1 - x2, y1 - y2); };
 exports.distance = distance;
 /* 是否在某个节点内，手否进行连接，有offset控制粒度，与outline有关，可以优化 */
-var isInNode = function (position, node) {
+var isInNode = function (position, node, offset) {
+    if (offset === void 0) { offset = 0; }
     var inNode = false;
-    var offset = 0;
     var bBox = (0, exports.getNodeBBox)(node);
-    if (position.x >= bBox.minX - offset &&
-        position.x <= bBox.maxX + offset &&
-        position.y >= bBox.minY - offset &&
-        position.y <= bBox.maxY + offset) {
+    var _a = __read(new matrix_1.Matrix([position.x, position.y, 1])
+        .translate(-node.x, -node.y)
+        .rotate(-node.rotate)
+        .translate(node.x, node.y)[0], 2), x = _a[0], y = _a[1];
+    var reverseRotatedPosition = {
+        x: x,
+        y: y,
+    };
+    if (reverseRotatedPosition.x >= bBox.minX - offset &&
+        reverseRotatedPosition.x <= bBox.maxX + offset &&
+        reverseRotatedPosition.y >= bBox.minY - offset &&
+        reverseRotatedPosition.y <= bBox.maxY + offset) {
         inNode = true;
     }
     return inNode;
 };
 exports.isInNode = isInNode;
 var isInNodeBbox = function (position, node) {
-    var inNode = false;
-    var offset = 5;
-    var bBox = (0, exports.getNodeBBox)(node);
-    if (position.x >= bBox.minX - offset &&
-        position.x <= bBox.maxX + offset &&
-        position.y >= bBox.minY - offset &&
-        position.y <= bBox.maxY + offset) {
-        inNode = true;
-    }
-    return inNode;
+    return (0, exports.isInNode)(position, node, 5);
 };
 exports.isInNodeBbox = isInNodeBbox;
 /* 获取节点bbox */

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;
@@ -139,10 +139,6 @@ var BaseNode = /** @class */ (function (_super) {
             if (_this.t) {
                 (0, util_1.cancelRaf)(_this.t);
             }
-            model.transform = new util_1.TranslateMatrix(-x, -y)
-                .rotate(model.rotate)
-                .translate(x, y)
-                .toString();
             var moveNodes = selectNodes.map(function (node) { return node.id; });
             // 未被选中的节点也可以拖动
             if (moveNodes.indexOf(model.id) === -1) {
@@ -217,7 +213,10 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.selectNodeById(model.id, isMultiple);
                 eventOptions.isSelected = true;
-                _this.toFront();
+                // 静默模式下点击节点不变更节点层级
+                if (!editConfigModel.isSilentMode) {
+                    _this.toFront();
+                }
             }
             // 不是双击的，默认都是单击
             if (isDoubleClick) {
@@ -237,6 +236,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 +252,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 +329,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/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.9",
+  "version": "2.0.11",
   "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,18 @@ export class LogicFlow {
 
   /** 销毁当前实例 */
   destroy() {
+    this.clearData()
+    render(null, this.container)
+    this.keyboard.destroy()
     this.graphModel.destroy()
+    this.tool.destroy()
+    this.history.destroy()
+    for (const extensionName in this.extension) {
+      const extensionInstance = this.extension[extensionName]
+      if ('destroy' in extensionInstance) {
+        extensionInstance.destroy?.()
+      }
+    }
   }
 }
 

package/src/event/eventEmitter.ts

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

package/src/history/index.ts

@@ -107,6 +107,13 @@ export class History {
       }, this.waitTime),
     )
   }
+
+  destroy() {
+    this.undos = []
+    this.redos = []
+    this.curData = null
+    this.stopWatch && this.stopWatch()
+  }
 }
 
 export default History

package/src/keyboard/index.ts

@@ -90,6 +90,10 @@ export class Keyboard {
     }
   }
 
+  destroy() {
+    this.mousetrap.reset()
+  }
+
   private getKeys(keys: string | string[]) {
     return (Array.isArray(keys) ? keys : [keys]).map((key) =>
       this.formatKey(key),

package/src/model/EditConfigModel.ts

@@ -123,6 +123,8 @@ export interface IEditConfigType {
   nodeTextMode: TextMode
   // 边文本类型
   edgeTextMode: TextMode
+  // 开启网格对齐
+  snapGrid: boolean
 }
 
 export type IConfigKeys = keyof IEditConfigType
@@ -154,6 +156,7 @@ const allKeys = [
   'stopZoomGraph', // 禁止缩放画布
   'stopScrollGraph', // 禁止鼠标滚动移动画布
   'stopMoveGraph', // 禁止拖动画布
+  'snapGrid', // 是否开启网格对齐
   'adjustEdge', // 允许调整边
   'adjustEdgeMiddle', // 允许调整边中点
   'adjustEdgeStartAndEnd', // 允许调整边起点和终点
@@ -198,6 +201,7 @@ export class EditConfigModel {
   @observable stopZoomGraph = false
   @observable stopMoveGraph = false
   @observable stopScrollGraph = false
+  @observable snapGrid = false
   /*********************************************************
    * 文本相关配置（全局）
    ********************************************************/