@logicflow/core 2.0.6 → 2.0.7

package/es/event/eventArgs.d.ts

@@ -105,7 +105,7 @@ interface NodeEventArgs {
     /**
      * 拖拽外部拖入节点
      */
-    'node:dnd-drag': NodeEventArgsPick<'data'>;
+    'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>;
     /**
      * 开始拖拽节点
      */
@@ -130,6 +130,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<{
     /**
@@ -275,33 +296,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>;
-        };
-    };
     /**
      * 进行画布平移或缩放等变化操作时触发
      */
@@ -356,7 +350,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = P
     /**
      * 通过拖动锚点连线添加的边的数据
      */
-    edgeModel: BaseEdgeModel;
+    edgeModel?: BaseEdgeModel;
 }, T>;
 /**
  * 锚点事件

package/es/model/GraphModel.d.ts

@@ -3,6 +3,7 @@ import { ElementState, EventType, OverlapMode, TextMode } from '../constant';
 import LogicFlow from '../LogicFlow';
 import { Options as LFOptions } from '../options';
 import EventEmitter from '../event/eventEmitter';
+import { Grid } from '../view/overlay';
 import PointTuple = LogicFlow.PointTuple;
 import GraphData = LogicFlow.GraphData;
 import NodeConfig = LogicFlow.NodeConfig;
@@ -16,6 +17,7 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
+    grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
     /**
@@ -383,6 +385,14 @@ export declare class GraphModel {
      * todo docs link
      */
     setTheme(style: Partial<LogicFlow.Theme>): void;
+    /**
+     * 更新网格配置
+     */
+    updateGridOptions(options: Partial<Grid.GridOptions>): void;
+    /**
+     * 更新网格配置
+     */
+    updateBackgroundOptions(options: boolean | Partial<LFOptions.BackgroundConfig>): void;
     /**
      * 重新设置画布的宽高
      */

package/es/model/GraphModel.js

@@ -40,12 +40,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { find, forEach, map } from 'lodash-es';
+import { find, forEach, map, merge } from 'lodash-es';
 import { action, computed, observable } from 'mobx';
 import { EditConfigModel, TransformModel, } from '.';
 import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
 import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, } from '../util';
 import EventEmitter from '../event/eventEmitter';
+import { Grid } from '../view/overlay';
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         // 维护所有节点和边类型对应的 model
@@ -88,6 +89,7 @@ var GraphModel = /** @class */ (function () {
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
         this.theme = setupTheme(options.style);
+        this.grid = Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
         this.edgeType = options.edgeType || 'polyline';
         this.animation = setupAnimation(animation);
         this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
@@ -1238,6 +1240,26 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setTheme = function (style) {
         this.theme = updateTheme(__assign(__assign({}, this.theme), style));
     };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateGridOptions = function (options) {
+        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);
+        }
+    };
     /**
      * 重新设置画布的宽高
      */
@@ -1365,6 +1387,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         observable
     ], GraphModel.prototype, "height", void 0);
+    __decorate([
+        observable
+    ], GraphModel.prototype, "grid", void 0);
     __decorate([
         observable
     ], GraphModel.prototype, "edgeType", void 0);

package/es/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/es/model/node/BaseNodeModel.js

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

package/es/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/es/util/drag.js

@@ -121,6 +121,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/es/view/Anchor.js

@@ -139,14 +139,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(EventType.ANCHOR_DRAGEND, {
-                    data: anchorData,
-                    e: event,
-                    nodeModel: nodeModel,
-                    edgeModel: edgeModel,
-                });
-            }
+            graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
+                data: anchorData,
+                e: event,
+                nodeModel: nodeModel,
+                edgeModel: edgeModel !== null && edgeModel !== void 0 ? edgeModel : undefined,
+            });
         };
         _this.checkEnd = function (event) {
             var _a;

package/es/view/Control.js

@@ -316,7 +316,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/es/view/Graph.js

@@ -13,17 +13,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);
@@ -102,12 +91,11 @@ var Graph = /** @class */ (function (_super) {
         if (options.height) {
             style.height = "".concat(graphModel.height, "px");
         }
-        var grid = options.grid && 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 (_jsxs("div", { className: "lf-graph", "flow-id": graphModel.flowId, children: [_jsxs(CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [_jsx("g", { className: "lf-base", children: map(graphModel.sortElements, function (nodeModel) {
+        return (_jsxs("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [_jsxs(CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [_jsx("g", { className: "lf-base", children: map(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), _jsxs(ModificationOverlay, { graphModel: graphModel, children: [_jsx(OutlineOverlay, { graphModel: graphModel }), adjustEdge ? _jsx(BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? (_jsx(SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), _jsx(ToolOverlay, { graphModel: graphModel, tool: tool }), options.background && (_jsx(BackgroundOverlay, { background: options.background })), grid && _jsx(Grid, __assign({}, grid, { graphModel: graphModel }))] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), _jsxs(ModificationOverlay, { graphModel: graphModel, children: [_jsx(OutlineOverlay, { graphModel: graphModel }), adjustEdge ? _jsx(BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? (_jsx(SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), _jsx(ToolOverlay, { graphModel: graphModel, tool: tool }), background && _jsx(BackgroundOverlay, { background: background }), _jsx(Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         observer

package/es/view/behavior/dnd.js

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

package/es/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/es/view/edge/BaseEdge.js

@@ -123,15 +123,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;
@@ -379,7 +382,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/es/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/es/view/overlay/BackgroundOverlay.js

@@ -13,8 +13,15 @@ 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;
+};
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
+import { observer } from '../..';
 var BackgroundOverlay = /** @class */ (function (_super) {
     __extends(BackgroundOverlay, _super);
     function BackgroundOverlay() {
@@ -22,8 +29,11 @@ var BackgroundOverlay = /** @class */ (function (_super) {
     }
     BackgroundOverlay.prototype.render = function () {
         var background = this.props.background;
-        return (_jsx("div", { className: "lf-background", children: _jsx("div", { style: background, className: "lf-background-area" }) }));
+        return (_jsx("div", { className: "lf-background", children: _jsx("div", { style: typeof background === 'object' ? background : {}, className: "lf-background-area" }) }));
     };
+    BackgroundOverlay = __decorate([
+        observer
+    ], BackgroundOverlay);
     return BackgroundOverlay;
 }(Component));
 export { BackgroundOverlay };

package/es/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/es/view/overlay/Grid.js

@@ -19,31 +19,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));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
 import { cloneDeep, assign } from 'lodash-es';
@@ -52,14 +27,15 @@ import { createUuid } from '../../util';
 import { DEFAULT_GRID_SIZE } from '../../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 = 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);
@@ -69,16 +45,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 (_jsx("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity, fill: "transparent" }));
+        return (_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/es/view/text/BaseText.js

@@ -61,7 +61,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/lib/event/eventArgs.d.ts

@@ -105,7 +105,7 @@ interface NodeEventArgs {
     /**
      * 拖拽外部拖入节点
      */
-    'node:dnd-drag': NodeEventArgsPick<'data'>;
+    'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>;
     /**
      * 开始拖拽节点
      */
@@ -130,6 +130,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<{
     /**
@@ -275,33 +296,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>;
-        };
-    };
     /**
      * 进行画布平移或缩放等变化操作时触发
      */
@@ -356,7 +350,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = P
     /**
      * 通过拖动锚点连线添加的边的数据
      */
-    edgeModel: BaseEdgeModel;
+    edgeModel?: BaseEdgeModel;
 }, T>;
 /**
  * 锚点事件

package/lib/model/GraphModel.d.ts

@@ -3,6 +3,7 @@ import { ElementState, EventType, OverlapMode, TextMode } from '../constant';
 import LogicFlow from '../LogicFlow';
 import { Options as LFOptions } from '../options';
 import EventEmitter from '../event/eventEmitter';
+import { Grid } from '../view/overlay';
 import PointTuple = LogicFlow.PointTuple;
 import GraphData = LogicFlow.GraphData;
 import NodeConfig = LogicFlow.NodeConfig;
@@ -16,6 +17,7 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
+    grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
     /**
@@ -383,6 +385,14 @@ export declare class GraphModel {
      * todo docs link
      */
     setTheme(style: Partial<LogicFlow.Theme>): void;
+    /**
+     * 更新网格配置
+     */
+    updateGridOptions(options: Partial<Grid.GridOptions>): void;
+    /**
+     * 更新网格配置
+     */
+    updateBackgroundOptions(options: boolean | Partial<LFOptions.BackgroundConfig>): void;
     /**
      * 重新设置画布的宽高
      */