@logicflow/core 2.0.6 → 2.0.7

package/lib/model/GraphModel.js

@@ -52,6 +52,7 @@ var _1 = require(".");
 var constant_1 = require("../constant");
 var util_1 = require("../util");
 var eventEmitter_1 = __importDefault(require("../event/eventEmitter"));
+var overlay_1 = require("../view/overlay");
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         // 维护所有节点和边类型对应的 model
@@ -94,6 +95,7 @@ var GraphModel = /** @class */ (function () {
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
         this.theme = (0, util_1.setupTheme)(options.style);
+        this.grid = overlay_1.Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
@@ -1244,6 +1246,26 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setTheme = function (style) {
         this.theme = (0, util_1.updateTheme)(__assign(__assign({}, this.theme), style));
     };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateGridOptions = function (options) {
+        (0, lodash_es_1.merge)(this.grid, options);
+    };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateBackgroundOptions = function (options) {
+        if (typeof options === 'boolean') {
+            this.background = options;
+        }
+        else if (typeof this.background === 'boolean') {
+            this.background = options;
+        }
+        else {
+            this.background = __assign(__assign({}, this.background), options);
+        }
+    };
     /**
      * 重新设置画布的宽高
      */
@@ -1371,6 +1393,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "height", void 0);
+    __decorate([
+        mobx_1.observable
+    ], GraphModel.prototype, "grid", void 0);
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "edgeType", void 0);

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

@@ -48,6 +48,7 @@ export declare class BaseEdgeModel<P extends PropertiesType = PropertiesType> im
     visible: boolean;
     isAnimation: boolean;
     isShowAdjustPoint: boolean;
+    isDragging?: boolean;
     graphModel: GraphModel;
     zIndex: number;
     state: ElementState;

package/lib/model/node/BaseNodeModel.js

@@ -739,7 +739,7 @@ var BaseNodeModel = /** @class */ (function () {
         var preProperties = (0, mobx_1.toJS)(this.properties);
         this.properties = nextProperties;
         this.setAttributes();
-        // 触发更新节点 properties:change 的事件
+        // 触发更新节点 node:properties-change 的事件
         this.graphModel.eventCenter.emit(constant_1.EventType.NODE_PROPERTIES_CHANGE, {
             id: this.id,
             keys: updateKeys,

package/lib/util/drag.d.ts

@@ -44,4 +44,5 @@ export declare class StepDrag {
     handleMouseMove: (e: MouseEvent) => void;
     handleMouseUp: (e: MouseEvent) => void;
     cancelDrag: () => void;
+    destroy: () => void;
 }

package/lib/util/drag.js

@@ -124,6 +124,17 @@ var StepDrag = /** @class */ (function () {
             _this.onDragEnd({ event: undefined });
             _this.isDragging = false;
         };
+        this.destroy = function () {
+            if (_this.isStartDragging) {
+                // https://github.com/didi/LogicFlow/issues/1934
+                // https://github.com/didi/LogicFlow/issues/1926
+                // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
+                // 我们的本意是为了防止mousemove和mouseup没有及时被移除
+                // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
+                // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
+                _this.cancelDrag();
+            }
+        };
         this.onDragStart = onDragStart;
         this.onDragging = onDragging;
         this.onDragEnd = onDragEnd;

package/lib/view/Anchor.js

@@ -141,14 +141,12 @@ var Anchor = /** @class */ (function (_super) {
             _this.sourceRuleResults.clear();
             _this.targetRuleResults.clear();
             var _b = _this.props, graphModel = _b.graphModel, nodeModel = _b.nodeModel, anchorData = _b.anchorData;
-            if (edgeModel) {
-                graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
-                    data: anchorData,
-                    e: event,
-                    nodeModel: nodeModel,
-                    edgeModel: edgeModel,
-                });
-            }
+            graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
+                data: anchorData,
+                e: event,
+                nodeModel: nodeModel,
+                edgeModel: edgeModel !== null && edgeModel !== void 0 ? edgeModel : undefined,
+            });
         };
         _this.checkEnd = function (event) {
             var _a;

package/lib/view/Control.js

@@ -319,7 +319,7 @@ var ResizeControl = /** @class */ (function (_super) {
         return _this;
     }
     ResizeControl.prototype.componentWillUnmount = function () {
-        this.dragHandler.cancelDrag();
+        this.dragHandler.destroy();
     };
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;

package/lib/view/Graph.js

@@ -14,17 +14,6 @@ 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);
-};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -104,12 +93,11 @@ var Graph = /** @class */ (function (_super) {
         if (options.height) {
             style.height = "".concat(graphModel.height, "px");
         }
-        var grid = options.grid && overlay_1.Grid.getGridOptions(options.grid);
-        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel;
+        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel, background = graphModel.background;
         var adjustEdge = editConfigModel.adjustEdge;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), options.background && ((0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: options.background })), grid && (0, jsx_runtime_1.jsx)(overlay_1.Grid, __assign({}, grid, { graphModel: graphModel }))] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), background && (0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: background }), (0, jsx_runtime_1.jsx)(overlay_1.Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         __1.observer

package/lib/view/behavior/dnd.js

@@ -44,6 +44,7 @@ var Dnd = /** @class */ (function () {
                 _this.lf.setNodeSnapLine(nodeData);
                 _this.lf.graphModel.eventCenter.emit(constant_1.EventType.NODE_DND_DRAG, {
                     data: nodeData,
+                    e: e,
                 });
             }
             return false;

package/lib/view/edge/BaseEdge.d.ts

@@ -13,6 +13,7 @@ export type IEdgeState = {
 export declare abstract class BaseEdge<P extends IProps> extends Component<P, IEdgeState> {
     static isObserved: boolean;
     static extendsKey?: string;
+    mouseUpDrag?: boolean;
     startTime?: number;
     contextMenuTime?: number;
     clickTimer?: number;
@@ -127,10 +128,11 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
      * 不支持重写
      */
     handleMouseDown: (e: MouseEvent) => void;
+    handleMouseUp: () => void;
     /**
      * 不支持重写
      */
-    handleMouseUp: (e: MouseEvent) => void;
+    handleClick: (e: MouseEvent) => void;
     /**
      * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
      * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9

package/lib/view/edge/BaseEdge.js

@@ -149,15 +149,18 @@ var BaseEdge = /** @class */ (function (_super) {
             e.stopPropagation();
             _this.startTime = new Date().getTime();
         };
+        _this.handleMouseUp = function () {
+            var model = _this.props.model;
+            _this.mouseUpDrag = model.isDragging;
+        };
         /**
          * 不支持重写
          */
-        _this.handleMouseUp = function (e) {
+        _this.handleClick = function (e) {
             if (!_this.startTime)
                 return;
-            var time = new Date().getTime() - _this.startTime;
-            if (time > 200)
-                return; // 事件大于200ms，认为是拖拽。
+            if (_this.mouseUpDrag)
+                return; // 如果是拖拽，不触发click事件。
             var isRightClick = e.button === 2;
             if (isRightClick)
                 return;
@@ -405,7 +408,7 @@ var BaseEdge = /** @class */ (function (_super) {
                         isSelected && 'lf-edge-selected',
                     ]
                         .filter(Boolean)
-                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
+                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
     };
     BaseEdge.isObserved = false;
     return BaseEdge;

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

@@ -1,26 +1,16 @@
 import { Component } from 'preact/compat';
+import { Options as LFOptions } from '../../options';
 /**
  * 背景配置, 支持css属性配置
  * https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
  * @example
  * {
- *  backgroundImage: "url('./img/grid.svg')",
- backgroundRepeat: 'repeat',
+ *    backgroundImage: "url('./img/grid.svg')",
+      backgroundRepeat: 'repeat',
  * }
  */
-export type BackgroundConfig = {
-    /**
-     * 背景图片地址
-     */
-    backgroundImage?: string;
-    /**
-     * 是否重复
-     */
-    backgroundRepeat?: string;
-    [key: string]: any;
-};
 type IProps = {
-    background: BackgroundConfig;
+    background: boolean | LFOptions.BackgroundConfig;
 };
 export declare class BackgroundOverlay extends Component<IProps> {
     render(): import("preact/compat").JSX.Element;

package/lib/view/overlay/BackgroundOverlay.js

@@ -14,10 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundOverlay = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
+var __1 = require("../..");
 var BackgroundOverlay = /** @class */ (function (_super) {
     __extends(BackgroundOverlay, _super);
     function BackgroundOverlay() {
@@ -25,8 +32,11 @@ var BackgroundOverlay = /** @class */ (function (_super) {
     }
     BackgroundOverlay.prototype.render = function () {
         var background = this.props.background;
-        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-background", children: (0, jsx_runtime_1.jsx)("div", { style: background, className: "lf-background-area" }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-background", children: (0, jsx_runtime_1.jsx)("div", { style: typeof background === 'object' ? background : {}, className: "lf-background-area" }) }));
     };
+    BackgroundOverlay = __decorate([
+        __1.observer
+    ], BackgroundOverlay);
     return BackgroundOverlay;
 }(compat_1.Component));
 exports.BackgroundOverlay = BackgroundOverlay;

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

@@ -1,11 +1,12 @@
 import { Component } from 'preact/compat';
 import { GraphModel } from '../../model';
-import GridOptions = Grid.GridOptions;
-type IProps = GridOptions & {
+type IProps = {
     graphModel: GraphModel;
 };
 export declare class Grid extends Component<IProps> {
+    gridOptions: Grid.GridOptions;
     readonly id: string;
+    constructor(props: IProps);
     renderDot(): import("preact/compat").JSX.Element;
     renderMesh(): import("preact/compat").JSX.Element;
     render(): import("preact/compat").JSX.Element;
@@ -30,7 +31,7 @@ export declare namespace Grid {
             /**
              * 网格的颜色
              */
-            color: string;
+            color?: string;
             /**
              * 网格的宽度
              * - 对于 `dot` 点状网格，表示点的大小

package/lib/view/overlay/Grid.js

@@ -20,31 +20,6 @@ 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 __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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
@@ -55,14 +30,15 @@ var util_1 = require("../../util");
 var constant_1 = require("../../constant");
 var Grid = /** @class */ (function (_super) {
     __extends(Grid, _super);
-    function Grid() {
-        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+    function Grid(props) {
+        var _this = _super.call(this, props) || this;
         _this.id = (0, util_1.createUuid)();
+        _this.gridOptions = _this.props.graphModel.grid;
         return _this;
     }
     // 网格类型为点状
     Grid.prototype.renderDot = function () {
-        var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
+        var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
         var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 2 : _d;
         // 对于点状网格，点的半径不能大于网格大小的四分之一
         var radius = Math.min(Math.max(2, thickness), size / 4);
@@ -72,16 +48,17 @@ var Grid = /** @class */ (function (_super) {
     // 网格类型为交叉线
     // todo: 采用背景缩放的方式，实现更好的体验
     Grid.prototype.renderMesh = function () {
-        var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
+        var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
         var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 1 : _d;
         // 对于交叉线网格，线的宽度不能大于网格大小的一半
         var strokeWidth = Math.min(Math.max(1, thickness), size / 2);
         var d = "M 0 0 H ".concat(size, " V ").concat(size, " H 0 Z");
         var opacity = visible ? 1 : 0;
-        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity, fill: "transparent" }));
+        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth / 2, opacity: opacity, fill: "transparent" }));
     };
     Grid.prototype.render = function () {
-        var _a = this.props, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b, transformModel = _a.graphModel.transformModel;
+        var transformModel = this.props.graphModel.transformModel;
+        var _a = this.gridOptions, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b;
         var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         var matrixString = [
             SCALE_X,

package/lib/view/text/BaseText.js

@@ -67,7 +67,7 @@ var BaseText = /** @class */ (function (_super) {
         _this.onDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var _b = _this.props, model = _b.model, transformModel = _b.graphModel.transformModel;
-            if (deltaX && deltaY) {
+            if (deltaX || deltaY) {
                 var _c = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), curDeltaX = _c[0], curDeltaY = _c[1];
                 model.moveText(curDeltaX, curDeltaY);
             }

package/package.json

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

package/src/algorithm/edge.ts

@@ -60,10 +60,8 @@ export const isInSegment = (point: Point, start: Point, end: Point) => {
   const k = (endY - startY) / (endX - startX)
   const b = startY - k * startX
   return (
-    x >= startX &&
-    x <= endX &&
-    y >= startY &&
-    y <= endY &&
+    ((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
+    ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
     Math.abs(y - k * x + b) < Number.EPSILON
   )
 }

package/src/event/eventArgs.ts

@@ -140,7 +140,7 @@ interface NodeEventArgs {
   /**
    * 拖拽外部拖入节点
    */
-  'node:dnd-drag': NodeEventArgsPick<'data'>
+  'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>
   /**
    * 开始拖拽节点
    */
@@ -167,6 +167,27 @@ interface NodeEventArgs {
   'node:resize': NodeEventArgsPick<
     'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'
   >
+  /**
+   * 元素的 properties 发生改变
+   */
+  'node:properties-change': {
+    /**
+     * 元素的 id
+     */
+    id: string
+    /**
+     * 改变的 properties 的 key
+     */
+    keys: string[]
+    /**
+     * 改变前的 properties
+     */
+    preProperties: Record<string, any>
+    /**
+     * 改变后的 properties
+     */
+    properties: Record<string, any>
+  }
 }
 
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
@@ -356,33 +377,6 @@ interface CommonEventArgs {
      */
     position: ClientPosition
   }
-  /**
-   * 元素的 properties 发生改变
-   */
-  'properties:change': {
-    data: {
-      /**
-       * 元素的 id
-       */
-      id: string
-      /**
-       * 元素的类型
-       */
-      type: string
-      /**
-       * 改变的 properties 的 key
-       */
-      keys: string[]
-      /**
-       * 改变前的 properties
-       */
-      preProperties: Record<string, any>
-      /**
-       * 改变后的 properties
-       */
-      properties: Record<string, any>
-    }
-  }
   /**
    * 进行画布平移或缩放等变化操作时触发
    */
@@ -440,7 +434,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =
       /**
        * 通过拖动锚点连线添加的边的数据
        */
-      edgeModel: BaseEdgeModel
+      edgeModel?: BaseEdgeModel
     },
     T
   >

package/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, map } from 'lodash-es'
+import { find, forEach, map, merge } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -36,6 +36,7 @@ import {
   updateTheme,
 } from '../util'
 import EventEmitter from '../event/eventEmitter'
+import { Grid } from '../view/overlay'
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
@@ -55,6 +56,8 @@ export class GraphModel {
 
   // 流程图主题配置
   theme: LogicFlow.Theme
+  // 网格配置
+  @observable grid: Grid.GridOptions
   // 事件中心
   readonly eventCenter: EventEmitter
   // 维护所有节点和边类型对应的 model
@@ -142,6 +145,7 @@ export class GraphModel {
       this.gridSize = grid.size || 1 // 默认 gridSize 设置为 1
     }
     this.theme = setupTheme(options.style)
+    this.grid = Grid.getGridOptions(grid ?? false)
     this.edgeType = options.edgeType || 'polyline'
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
@@ -1407,6 +1411,13 @@ export class GraphModel {
     this.theme = updateTheme({ ...this.theme, ...style })
   }
 
+  /**
+   * 更新网格配置
+   */
+  updateGridOptions(options: Partial<Grid.GridOptions>) {
+    merge(this.grid, options)
+  }
+
   /**
    * 重新设置画布的宽高
    */

package/src/model/edge/BaseEdgeModel.ts

@@ -87,6 +87,7 @@ export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
   // 边特有属性，动画及调整点
   @observable isAnimation = false
   @observable isShowAdjustPoint = false // 是否显示边两端的调整点
+  isDragging?: boolean
   // 引用属性
   graphModel: GraphModel
   @observable zIndex: number = 0

package/src/model/node/BaseNodeModel.ts

@@ -835,7 +835,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     this.properties = nextProperties
     this.setAttributes()
 
-    // 触发更新节点 properties:change 的事件
+    // 触发更新节点 node:properties-change 的事件
     this.graphModel.eventCenter.emit(EventType.NODE_PROPERTIES_CHANGE, {
       id: this.id,
       keys: updateKeys,

package/src/model/node/HtmlNodeModel.ts

@@ -6,7 +6,7 @@ import AnchorConfig = Model.AnchorConfig
 import LogicFlow from '../../LogicFlow'
 import GraphModel from '../GraphModel'
 
-export type IHtmlNodeProperties = {
+export interface IHtmlNodeProperties {
   width?: number
   height?: number
   style?: LogicFlow.CommonTheme

package/src/util/drag.ts

@@ -201,4 +201,16 @@ export class StepDrag {
     this.onDragEnd({ event: undefined })
     this.isDragging = false
   }
+
+  destroy = () => {
+    if (this.isStartDragging) {
+      // https://github.com/didi/LogicFlow/issues/1934
+      // https://github.com/didi/LogicFlow/issues/1926
+      // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
+      // 我们的本意是为了防止mousemove和mouseup没有及时被移除
+      // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
+      // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
+      this.cancelDrag()
+    }
+  }
 }

package/src/view/Anchor.tsx

@@ -189,14 +189,13 @@ class Anchor extends Component<IProps, IState> {
     this.sourceRuleResults.clear()
     this.targetRuleResults.clear()
     const { graphModel, nodeModel, anchorData } = this.props
-    if (edgeModel) {
-      graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
-        data: anchorData,
-        e: event!,
-        nodeModel,
-        edgeModel,
-      })
-    }
+
+    graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
+      data: anchorData,
+      e: event!,
+      nodeModel,
+      edgeModel: edgeModel ?? undefined,
+    })
   }
 
   get customTrajectory() {

package/src/view/Control.tsx

@@ -57,7 +57,7 @@ export class ResizeControl extends Component<
   }
 
   componentWillUnmount() {
-    this.dragHandler.cancelDrag()
+    this.dragHandler.destroy()
   }
 
   updateEdgePointByAnchors = () => {

package/src/view/Graph.tsx

@@ -87,11 +87,10 @@ class Graph extends Component<IGraphProps> {
     if (options.height) {
       style.height = `${graphModel.height}px`
     }
-    const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
     return (
-      <div className="lf-graph" flow-id={graphModel.flowId}>
+      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         {/* 元素层 */}
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
@@ -117,7 +116,7 @@ class Graph extends Component<IGraphProps> {
           <BackgroundOverlay background={options.background} />
         )}
         {/* 画布网格 */}
-        {grid && <Grid {...grid} graphModel={graphModel} />}
+        <Grid graphModel={graphModel} />
       </div>
     )
   }