@logicflow/core 2.0.6 → 2.0.8

package/lib/view/node/BaseNode.js

@@ -262,6 +262,18 @@ var BaseNode = /** @class */ (function (_super) {
                 _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
             }
         };
+        _this.handleFocus = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(constant_1.EventType.NODE_FOCUS, {
+                data: model.getData(),
+            });
+        };
+        _this.handleBlur = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(constant_1.EventType.NODE_BLUR, {
+                data: model.getData(),
+            });
+        };
         // 因为自定义节点的时候，可能会基于hover状态自定义不同的样式。
         _this.setHoverOn = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -421,7 +433,7 @@ var BaseNode = /** @class */ (function (_super) {
             if (adjustNodePosition && draggable) {
                 this.stepDrag.setStep(gridSize * SCALE_X);
             }
-            nodeShape = ((0, jsx_runtime_1.jsx)("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu }, restAttributes, { children: nodeShapeInner })));
+            nodeShape = ((0, jsx_runtime_1.jsx)("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
         }
         return nodeShape;
     };

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,18 @@ 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 lodash_es_1 = require("lodash-es");
+var __1 = require("../..");
 var BackgroundOverlay = /** @class */ (function (_super) {
     __extends(BackgroundOverlay, _super);
     function BackgroundOverlay() {
@@ -25,8 +33,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: (0, lodash_es_1.isObject)(background) ? 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/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: Partial<{}> | ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Partial<{}> | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Pick<{}, K> | Partial<{}> | null) | Pick<{}, K> | Partial<{}> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
     };
     displayName?: string | undefined;

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.8",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/LogicFlow.tsx

@@ -1369,6 +1369,11 @@ export class LogicFlow {
       this.components.push(extensionIns.render.bind(extensionIns))
     this.extension[pluginName] = extensionIns
   }
+
+  /** 销毁当前实例 */
+  destroy() {
+    this.graphModel.destroy()
+  }
 }
 
 // Option
@@ -1451,6 +1456,7 @@ export namespace LogicFlow {
   // label数据类型声明
   export type LabelConfig = {
     id?: string // label唯一标识
+    type?: string
     x: number
     y: number
     content?: string // 富文本内容

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 &&
-    Math.abs(y - k * x + b) < Number.EPSILON
+    ((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/algorithm/outline.ts

@@ -66,7 +66,7 @@ export const getEdgeOutline = (
   edge: BaseEdgeModel,
 ): OutlineInfo | undefined => {
   if (edge.modelType === ModelType.LINE_EDGE) {
-    return getLineOutline(edge)
+    return getLineOutline(edge as LineEdgeModel)
   }
   if (edge.modelType === ModelType.POLYLINE_EDGE) {
     return getPolylineOutline(edge as PolylineEdgeModel)

package/src/constant/index.ts

@@ -57,6 +57,8 @@ export enum EventType {
   NODE_CONTEXTMENU = 'node:contextmenu',
   NODE_ROTATE = 'node:rotate',
   NODE_RESIZE = 'node:resize',
+  NODE_FOCUS = 'node:focus',
+  NODE_BLUR = 'node:blur',
 
   // 节点 properties 变化事件
   NODE_PROPERTIES_CHANGE = 'node:properties-change',
@@ -67,6 +69,8 @@ export enum EventType {
   EDGE_DELETE = 'edge:delete',
   EDGE_CLICK = 'edge:click',
   EDGE_DBCLICK = 'edge:dbclick',
+  EDGE_FOCUS = 'edge:focus',
+  EDGE_BLUR = 'edge:blur',
 
   EDGE_MOUSEENTER = 'edge:mouseenter',
   EDGE_MOUSELEAVE = 'edge:mouseleave',

package/src/event/eventArgs.ts

@@ -132,7 +132,7 @@ interface NodeEventArgs {
   /**
    * 删除节点
    */
-  'node:delete': NodeEventArgsPick<'data'>
+  'node:delete': NodeEventArgsPick<'data' | 'model'>
   /**
    * 添加外部拖入节点
    */
@@ -140,7 +140,7 @@ interface NodeEventArgs {
   /**
    * 拖拽外部拖入节点
    */
-  'node:dnd-drag': NodeEventArgsPick<'data'>
+  'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>
   /**
    * 开始拖拽节点
    */
@@ -167,6 +167,35 @@ 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>
+  }
+  /**
+   * 节点获焦
+   */
+  'node:focus': NodeEventArgsPick<'data'>
+  /**
+   * 节点失焦
+   */
+  'node:blur': NodeEventArgsPick<'data'>
 }
 
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
@@ -238,6 +267,14 @@ interface EdgeEventArgs {
       oldEdge: EdgeData
     }
   }
+  /**
+   * 边获焦
+   */
+  'edge:focus': EdgeEventArgsPick<'data'>
+  /**
+   * 边失焦
+   */
+  'edge:blur': EdgeEventArgsPick<'data'>
 }
 
 /**
@@ -356,33 +393,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>
-    }
-  }
   /**
    * 进行画布平移或缩放等变化操作时触发
    */
@@ -420,6 +430,16 @@ interface CommonEventArgs {
      */
     data: GraphData
   }
+  /**
+   * 画布容器大小发生变化触发，为了性能考虑对事件做了防抖处理，间隔为16ms
+   */
+  'graph:resize': {
+    /**
+     * 更新后的画布数据
+     */
+    target: HTMLElement
+    contentRect: DOMRectReadOnly
+  }
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =
@@ -440,7 +460,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, isBoolean, debounce, isEqual } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -36,10 +36,12 @@ 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
 import NodeConfig = LogicFlow.NodeConfig
+import AnchorConfig = Model.AnchorConfig
 import BaseNodeModelCtor = LogicFlow.BaseNodeModelCtor
 import BaseEdgeModelCtor = LogicFlow.BaseEdgeModelCtor
 
@@ -55,6 +57,8 @@ export class GraphModel {
 
   // 流程图主题配置
   theme: LogicFlow.Theme
+  // 网格配置
+  @observable grid: Grid.GridOptions
   // 事件中心
   readonly eventCenter: EventEmitter
   // 维护所有节点和边类型对应的 model
@@ -124,6 +128,8 @@ export class GraphModel {
   // 用户自定义属性
   [propName: string]: any
 
+  private waitCleanEffects: (() => void)[] = []
+
   constructor(options: LFOptions.Common) {
     const {
       container,
@@ -142,6 +148,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
@@ -149,6 +156,27 @@ export class GraphModel {
     this.width = options.width || this.rootEl.getBoundingClientRect().width
     this.height = options.height || this.rootEl.getBoundingClientRect().height
 
+    const resizeObserver = new ResizeObserver(
+      debounce(
+        ((entries) => {
+          for (const entry of entries) {
+            if (entry.target === this.rootEl) {
+              this.resize()
+              this.eventCenter.emit('graph:resize', {
+                target: this.rootEl,
+                contentRect: entry.contentRect,
+              })
+            }
+          }
+        }) as ResizeObserverCallback,
+        16,
+      ),
+    )
+    resizeObserver.observe(this.rootEl)
+    this.waitCleanEffects.push(() => {
+      resizeObserver.disconnect()
+    })
+
     this.eventCenter = new EventEmitter()
     this.editConfigModel = new EditConfigModel(options)
     this.transformModel = new TransformModel(this.eventCenter, options)
@@ -435,6 +463,58 @@ export class GraphModel {
           throw new Error(`找不到${edge.type}对应的边。`)
         }
         const edgeModel = new Model(edge, this)
+        // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
+        // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
+        const {
+          sourceNodeId,
+          targetNodeId,
+          sourceAnchorId = '',
+          targetAnchorId = '',
+          startPoint,
+          endPoint,
+          text,
+          textPosition,
+        } = edgeModel
+        const updateAnchorPoint = (
+          node: BaseNodeModel | undefined,
+          anchorId: string,
+          point: Position,
+          updatePoint: (anchor: AnchorConfig) => void,
+        ) => {
+          const anchor = node?.anchors.find((anchor) => anchor.id === anchorId)
+          if (anchor && !isEqual(anchor, point)) {
+            updatePoint(anchor)
+          }
+        }
+
+        const sourceNode = this.getNodeModelById(sourceNodeId)
+        const targetNode = this.getNodeModelById(targetNodeId)
+
+        updateAnchorPoint(
+          sourceNode,
+          sourceAnchorId,
+          startPoint,
+          edgeModel.updateStartPoint.bind(edgeModel),
+        )
+        updateAnchorPoint(
+          targetNode,
+          targetAnchorId,
+          endPoint,
+          edgeModel.updateEndPoint.bind(edgeModel),
+        )
+
+        // 而文本需要先算一下文本与默认文本位置之间的相对位置差
+        // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
+        if (text) {
+          const { x, y } = text
+          const { x: defaultX, y: defaultY } = textPosition
+          if (x && y && defaultX && defaultY) {
+            const deltaX = x - defaultX
+            const deltaY = y - defaultY
+            edgeModel.resetTextPosition()
+            edgeModel.moveText(deltaX, deltaY)
+          }
+        }
         this.edgeModelMap.set(edgeModel.id, edgeModel)
         this.elementsModelMap.set(edgeModel.id, edgeModel)
 
@@ -745,11 +825,15 @@ export class GraphModel {
    */
   @action
   deleteNode(nodeId: string) {
-    const nodeData = this.nodesMap[nodeId].model.getData()
+    const nodeModel = this.nodesMap[nodeId].model
+    const nodeData = nodeModel.getData()
     this.deleteEdgeBySource(nodeId)
     this.deleteEdgeByTarget(nodeId)
     this.nodes.splice(this.nodesMap[nodeId].index, 1)
-    this.eventCenter.emit(EventType.NODE_DELETE, { data: nodeData })
+    this.eventCenter.emit(EventType.NODE_DELETE, {
+      data: nodeData,
+      model: nodeModel,
+    })
   }
 
   /**
@@ -1407,6 +1491,29 @@ export class GraphModel {
     this.theme = updateTheme({ ...this.theme, ...style })
   }
 
+  /**
+   * 更新网格配置
+   */
+  updateGridOptions(options: Partial<Grid.GridOptions>) {
+    merge(this.grid, options)
+  }
+
+  /**
+   * 更新网格配置
+   */
+  updateBackgroundOptions(
+    options: boolean | Partial<LFOptions.BackgroundConfig>,
+  ) {
+    if (isBoolean(options) || isBoolean(this.background)) {
+      this.background = options
+    } else {
+      this.background = {
+        ...this.background,
+        ...options,
+      }
+    }
+  }
+
   /**
    * 重新设置画布的宽高
    */
@@ -1562,6 +1669,18 @@ export class GraphModel {
   @action setPartial(partial: boolean): void {
     this.partial = partial
   }
+
+  /** 销毁当前实例 */
+  destroy() {
+    try {
+      this.waitCleanEffects.forEach((fn) => {
+        fn()
+      })
+    } catch (err) {
+      console.warn('error on destroy GraphModel', err)
+    }
+    this.waitCleanEffects.length = 0
+  }
 }
 
 export namespace GraphModel {

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/edge/LineEdgeModel.ts

@@ -17,6 +17,14 @@ export class LineEdgeModel extends BaseEdgeModel {
       ...cloneDeep(customStyle),
     }
   }
+  initEdgeData(data: LogicFlow.EdgeConfig): void {
+    super.initEdgeData(data)
+    this.points = this.getPath([this.startPoint, this.endPoint])
+  }
+  getPath(points: Point[]): string {
+    const [start, end] = points
+    return `${start.x},${start.y} ${end.x},${end.y}`
+  }
   getTextPosition(): Point {
     return {
       x: (this.startPoint.x + this.endPoint.x) / 2,

package/src/model/edge/PolylineEdgeModel.ts

@@ -326,12 +326,14 @@ export class PolylineEdgeModel extends BaseEdgeModel {
     })
   }
 
+  getPath(points: Point[]): string {
+    return points.map((point) => `${point.x},${point.y}`).join(' ')
+  }
+
   @action
   initPoints() {
     if (this.pointsList.length > 0) {
-      this.points = this.pointsList
-        .map((point) => `${point.x},${point.y}`)
-        .join(' ')
+      this.points = this.getPath(this.pointsList)
     } else {
       this.updatePoints()
     }

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