@logicflow/core 2.1.0 → 2.1.2

package/es/LogicFlow.js

@@ -796,6 +796,9 @@ var LogicFlow = /** @class */ (function () {
             var _b = this.graphModel.grid.size, size = _b === void 0 ? 1 : _b;
             this.graphModel.updateGridSize(config.snapGrid ? size : 1);
         }
+        this.emit(EventType.EDIT_CONFIG_CHANGED, {
+            data: editConfigModel.getConfig(),
+        });
     };
     /**
      * 获取流程图当前编辑相关设置

package/es/constant/index.d.ts

@@ -82,6 +82,7 @@ export declare enum EventType {
     BLANK_DRAG = "blank:drag",
     BLANK_DROP = "blank:drop",
     BLANK_MOUSEMOVE = "blank:mousemove",
+    BLANK_CANVAS_MOUSEMOVE = "blank:canvas-mousemove",
     BLANK_MOUSEUP = "blank:mouseup",
     BLANK_CLICK = "blank:click",
     BLANK_CONTEXTMENU = "blank:contextmenu",
@@ -129,7 +130,8 @@ export declare enum EventType {
     HISTORY_CHANGE = "history:change",
     GRAPH_TRANSFORM = "graph:transform",
     GRAPH_RENDERED = "graph:rendered",
-    GRAPH_UPDATED = "graph:updated"
+    GRAPH_UPDATED = "graph:updated",
+    EDIT_CONFIG_CHANGED = "editConfig:changed"
 }
 export declare enum OverlapMode {
     DEFAULT = 0,// 默认

package/es/constant/index.js

@@ -92,6 +92,7 @@ export var EventType;
     EventType["BLANK_DRAG"] = "blank:drag";
     EventType["BLANK_DROP"] = "blank:drop";
     EventType["BLANK_MOUSEMOVE"] = "blank:mousemove";
+    EventType["BLANK_CANVAS_MOUSEMOVE"] = "blank:canvas-mousemove";
     EventType["BLANK_MOUSEUP"] = "blank:mouseup";
     EventType["BLANK_CLICK"] = "blank:click";
     EventType["BLANK_CONTEXTMENU"] = "blank:contextmenu";
@@ -144,6 +145,7 @@ export var EventType;
     EventType["GRAPH_TRANSFORM"] = "graph:transform";
     EventType["GRAPH_RENDERED"] = "graph:rendered";
     EventType["GRAPH_UPDATED"] = "graph:updated";
+    EventType["EDIT_CONFIG_CHANGED"] = "editConfig:changed";
 })(EventType || (EventType = {}));
 export var OverlapMode;
 (function (OverlapMode) {

package/es/model/EditConfigModel.d.ts

@@ -170,7 +170,7 @@ export declare class EditConfigModel {
     multipleSelectKey: string;
     constructor(config: Partial<IEditConfigType>);
     updateEditConfig(config: Partial<IEditConfigType>): void;
-    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "isSilentMode" | "stopZoomGraph" | "stopScrollGraph" | "stopMoveGraph" | "snapGrid" | "adjustEdge" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "allowRotate" | "allowResize" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textEdit" | "textDraggable" | "multipleSelectKey" | "nodeTextMode" | "edgeTextMode" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
+    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "adjustEdge" | "edgeTextMode" | "nodeTextMode" | "allowRotate" | "allowResize" | "isSilentMode" | "stopScrollGraph" | "stopZoomGraph" | "stopMoveGraph" | "textEdit" | "snapGrid" | "adjustNodePosition" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "hideAnchors" | "autoExpand" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
     updateTextMode(textMode: TextMode): void;
     getConfig(): IEditConfigType;
 }

package/es/model/GraphModel.js

@@ -53,11 +53,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { find, forEach, map, merge, isBoolean, debounce, cloneDeep, isNil, } from 'lodash-es';
 import { action, computed, observable } from 'mobx';
-import { EditConfigModel, TransformModel, } from '.';
+import { EditConfigModel, } 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, backgroundModeMap, gridModeMap, } from '../util';
 import EventEmitter from '../event/eventEmitter';
 import { Grid } from '../view/overlay';
+import NestedTransformModel from './NestedTransformModel';
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         var _this = this;
@@ -144,7 +145,7 @@ var GraphModel = /** @class */ (function () {
         });
         this.eventCenter = new EventEmitter();
         this.editConfigModel = new EditConfigModel(options);
-        this.transformModel = new TransformModel(this.eventCenter, options);
+        this.transformModel = new NestedTransformModel(this.eventCenter, options);
         this.flowId = createUuid();
         this.idGenerator = idGenerator;
         this.edgeGenerator = createEdgeGenerator(this, edgeGenerator);

package/es/model/NestedTransformModel.d.ts

@@ -0,0 +1,52 @@
+import LogicFlow from '../LogicFlow';
+import { TransformModel } from './TransformModel';
+import { Options as LFOptions } from '../options';
+import EventEmitter from '../event/eventEmitter';
+type PointTuple = LogicFlow.PointTuple;
+export declare class NestedTransformModel extends TransformModel {
+    parentTransform?: TransformModel;
+    constructor(eventCenter: EventEmitter, options: LFOptions.Common);
+    /**
+     * 设置父级变换
+     * @param parentTransform 父级变换模型
+     */
+    setParentTransform(parentTransform: TransformModel): void;
+    /**
+     * 获取累积的缩放值
+     * 计算包括所有父级的累积缩放
+     */
+    private getCumulativeScale;
+    /**
+     * 获取累积的平移值
+     * 计算包括所有父级的累积平移
+     */
+    private getCumulativeTranslate;
+    /**
+     * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
+     * 重写以支持嵌套变换
+     * @param point HTML点
+     */
+    HtmlPointToCanvasPoint(point: PointTuple): PointTuple;
+    /**
+     * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
+     * 重写以支持嵌套变换
+     * @param point Canvas点
+     */
+    CanvasPointToHtmlPoint(point: PointTuple): PointTuple;
+    /**
+     * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
+     * 重写以支持嵌套变换
+     * @param point 点
+     * @param directionX x轴距离
+     * @param directionY y轴距离
+     */
+    moveCanvasPointByHtml(point: PointTuple, directionX: number, directionY: number): PointTuple;
+    /**
+     * 根据缩放情况，获取缩放后的delta距离
+     * 重写以支持嵌套变换
+     * @param deltaX x轴距离变化
+     * @param deltaY y轴距离变化
+     */
+    fixDeltaXY(deltaX: number, deltaY: number): PointTuple;
+}
+export default NestedTransformModel;

package/es/model/NestedTransformModel.js

@@ -0,0 +1,129 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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;
+};
+import { TransformModel } from './TransformModel';
+var NestedTransformModel = /** @class */ (function (_super) {
+    __extends(NestedTransformModel, _super);
+    function NestedTransformModel(eventCenter, options) {
+        var _this = _super.call(this, eventCenter, options) || this;
+        _this.parentTransform = options.parentTransform;
+        return _this;
+    }
+    /**
+     * 设置父级变换
+     * @param parentTransform 父级变换模型
+     */
+    NestedTransformModel.prototype.setParentTransform = function (parentTransform) {
+        this.parentTransform = parentTransform;
+    };
+    /**
+     * 获取累积的缩放值
+     * 计算包括所有父级的累积缩放
+     */
+    NestedTransformModel.prototype.getCumulativeScale = function () {
+        var scaleX = this.SCALE_X;
+        var scaleY = this.SCALE_Y;
+        if (this.parentTransform) {
+            if (this.parentTransform instanceof NestedTransformModel) {
+                var parentScale = this.parentTransform.getCumulativeScale();
+                scaleX *= parentScale.scaleX;
+                scaleY *= parentScale.scaleY;
+            }
+            else {
+                scaleX *= this.parentTransform.SCALE_X;
+                scaleY *= this.parentTransform.SCALE_Y;
+            }
+        }
+        return { scaleX: scaleX, scaleY: scaleY };
+    };
+    /**
+     * 获取累积的平移值
+     * 计算包括所有父级的累积平移
+     */
+    NestedTransformModel.prototype.getCumulativeTranslate = function () {
+        var translateX = this.TRANSLATE_X;
+        var translateY = this.TRANSLATE_Y;
+        if (this.parentTransform &&
+            this.parentTransform instanceof NestedTransformModel) {
+            var _a = this.parentTransform.getCumulativeScale(), scaleX = _a.scaleX, scaleY = _a.scaleY;
+            translateX = scaleX * translateX;
+            translateY = scaleY * translateY;
+        }
+        return { translateX: translateX, translateY: translateY };
+    };
+    /**
+     * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
+     * 重写以支持嵌套变换
+     * @param point HTML点
+     */
+    NestedTransformModel.prototype.HtmlPointToCanvasPoint = function (point) {
+        var _a = __read(point, 2), x = _a[0], y = _a[1];
+        var _b = this.getCumulativeScale(), scaleX = _b.scaleX, scaleY = _b.scaleY;
+        var _c = this.getCumulativeTranslate(), translateX = _c.translateX, translateY = _c.translateY;
+        return [(x - translateX) / scaleX, (y - translateY) / scaleY];
+    };
+    /**
+     * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
+     * 重写以支持嵌套变换
+     * @param point Canvas点
+     */
+    NestedTransformModel.prototype.CanvasPointToHtmlPoint = function (point) {
+        var _a = __read(point, 2), x = _a[0], y = _a[1];
+        var _b = this.getCumulativeScale(), scaleX = _b.scaleX, scaleY = _b.scaleY;
+        var _c = this.getCumulativeTranslate(), translateX = _c.translateX, translateY = _c.translateY;
+        return [x * scaleX + translateX, y * scaleY + translateY];
+    };
+    /**
+     * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
+     * 重写以支持嵌套变换
+     * @param point 点
+     * @param directionX x轴距离
+     * @param directionY y轴距离
+     */
+    NestedTransformModel.prototype.moveCanvasPointByHtml = function (point, directionX, directionY) {
+        var _a = __read(point, 2), x = _a[0], y = _a[1];
+        var _b = this.getCumulativeScale(), scaleX = _b.scaleX, scaleY = _b.scaleY;
+        return [x + directionX / scaleX, y + directionY / scaleY];
+    };
+    /**
+     * 根据缩放情况，获取缩放后的delta距离
+     * 重写以支持嵌套变换
+     * @param deltaX x轴距离变化
+     * @param deltaY y轴距离变化
+     */
+    NestedTransformModel.prototype.fixDeltaXY = function (deltaX, deltaY) {
+        var _a = this.getCumulativeScale(), scaleX = _a.scaleX, scaleY = _a.scaleY;
+        return [deltaX / scaleX, deltaY / scaleY];
+    };
+    return NestedTransformModel;
+}(TransformModel));
+export { NestedTransformModel };
+export default NestedTransformModel;

package/es/model/index.d.ts

@@ -3,5 +3,6 @@ export * from './node';
 export * from './BaseModel';
 export * from './EditConfigModel';
 export * from './GraphModel';
+export * from './NestedTransformModel';
 export * from './SnaplineModel';
 export * from './TransformModel';

package/es/model/index.js

@@ -3,5 +3,6 @@ export * from './node';
 export * from './BaseModel';
 export * from './EditConfigModel';
 export * from './GraphModel';
+export * from './NestedTransformModel';
 export * from './SnaplineModel';
 export * from './TransformModel';

package/es/options.d.ts

@@ -1,3 +1,4 @@
+import type { TransformModel } from './model';
 import { createElement as h } from 'preact/compat';
 import LogicFlow from './LogicFlow';
 import { KeyboardDef } from './keyboard';
@@ -68,6 +69,7 @@ export declare namespace Options {
         edgeGenerator?: EdgeGeneratorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
         themeMode?: 'radius' | 'dark' | 'colorful';
+        parentTransform?: TransformModel;
         [key: string]: unknown;
     }
     interface ManualBooleans {

package/es/view/behavior/dnd.js

@@ -30,6 +30,9 @@ var Dnd = /** @class */ (function () {
             })));
         };
         this.onDragOver = function (e) {
+            _this.lf.graphModel.eventCenter.emit(EventType.BLANK_CANVAS_MOUSEMOVE, {
+                e: e,
+            });
             e.preventDefault();
             if (_this.fakeNode) {
                 var _a = _this.clientToLocalPoint({

package/es/view/node/BaseNode.js

@@ -257,7 +257,6 @@ var BaseNode = /** @class */ (function (_super) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             _this.startTime = new Date().getTime();
             var editConfigModel = graphModel.editConfigModel;
-            model.setSelected(true);
             if (editConfigModel.adjustNodePosition && model.draggable) {
                 _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
             }

package/lib/LogicFlow.js

@@ -825,6 +825,9 @@ var LogicFlow = /** @class */ (function () {
             var _b = this.graphModel.grid.size, size = _b === void 0 ? 1 : _b;
             this.graphModel.updateGridSize(config.snapGrid ? size : 1);
         }
+        this.emit(constant_1.EventType.EDIT_CONFIG_CHANGED, {
+            data: editConfigModel.getConfig(),
+        });
     };
     /**
      * 获取流程图当前编辑相关设置

package/lib/constant/index.d.ts

@@ -82,6 +82,7 @@ export declare enum EventType {
     BLANK_DRAG = "blank:drag",
     BLANK_DROP = "blank:drop",
     BLANK_MOUSEMOVE = "blank:mousemove",
+    BLANK_CANVAS_MOUSEMOVE = "blank:canvas-mousemove",
     BLANK_MOUSEUP = "blank:mouseup",
     BLANK_CLICK = "blank:click",
     BLANK_CONTEXTMENU = "blank:contextmenu",
@@ -129,7 +130,8 @@ export declare enum EventType {
     HISTORY_CHANGE = "history:change",
     GRAPH_TRANSFORM = "graph:transform",
     GRAPH_RENDERED = "graph:rendered",
-    GRAPH_UPDATED = "graph:updated"
+    GRAPH_UPDATED = "graph:updated",
+    EDIT_CONFIG_CHANGED = "editConfig:changed"
 }
 export declare enum OverlapMode {
     DEFAULT = 0,// 默认

package/lib/constant/index.js

@@ -95,6 +95,7 @@ var EventType;
     EventType["BLANK_DRAG"] = "blank:drag";
     EventType["BLANK_DROP"] = "blank:drop";
     EventType["BLANK_MOUSEMOVE"] = "blank:mousemove";
+    EventType["BLANK_CANVAS_MOUSEMOVE"] = "blank:canvas-mousemove";
     EventType["BLANK_MOUSEUP"] = "blank:mouseup";
     EventType["BLANK_CLICK"] = "blank:click";
     EventType["BLANK_CONTEXTMENU"] = "blank:contextmenu";
@@ -147,6 +148,7 @@ var EventType;
     EventType["GRAPH_TRANSFORM"] = "graph:transform";
     EventType["GRAPH_RENDERED"] = "graph:rendered";
     EventType["GRAPH_UPDATED"] = "graph:updated";
+    EventType["EDIT_CONFIG_CHANGED"] = "editConfig:changed";
 })(EventType || (exports.EventType = EventType = {}));
 var OverlapMode;
 (function (OverlapMode) {

package/lib/model/EditConfigModel.d.ts

@@ -170,7 +170,7 @@ export declare class EditConfigModel {
     multipleSelectKey: string;
     constructor(config: Partial<IEditConfigType>);
     updateEditConfig(config: Partial<IEditConfigType>): void;
-    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "isSilentMode" | "stopZoomGraph" | "stopScrollGraph" | "stopMoveGraph" | "snapGrid" | "adjustEdge" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "allowRotate" | "allowResize" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textEdit" | "textDraggable" | "multipleSelectKey" | "nodeTextMode" | "edgeTextMode" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
+    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "adjustEdge" | "edgeTextMode" | "nodeTextMode" | "allowRotate" | "allowResize" | "isSilentMode" | "stopScrollGraph" | "stopZoomGraph" | "stopMoveGraph" | "textEdit" | "snapGrid" | "adjustNodePosition" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "hideAnchors" | "autoExpand" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
     updateTextMode(textMode: TextMode): void;
     getConfig(): IEditConfigType;
 }

package/lib/model/GraphModel.js

@@ -64,6 +64,7 @@ var constant_1 = require("../constant");
 var util_1 = require("../util");
 var eventEmitter_1 = __importDefault(require("../event/eventEmitter"));
 var overlay_1 = require("../view/overlay");
+var NestedTransformModel_1 = __importDefault(require("./NestedTransformModel"));
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         var _this = this;
@@ -150,7 +151,7 @@ var GraphModel = /** @class */ (function () {
         });
         this.eventCenter = new eventEmitter_1.default();
         this.editConfigModel = new _1.EditConfigModel(options);
-        this.transformModel = new _1.TransformModel(this.eventCenter, options);
+        this.transformModel = new NestedTransformModel_1.default(this.eventCenter, options);
         this.flowId = (0, util_1.createUuid)();
         this.idGenerator = idGenerator;
         this.edgeGenerator = (0, util_1.createEdgeGenerator)(this, edgeGenerator);

package/lib/model/NestedTransformModel.d.ts

@@ -0,0 +1,52 @@
+import LogicFlow from '../LogicFlow';
+import { TransformModel } from './TransformModel';
+import { Options as LFOptions } from '../options';
+import EventEmitter from '../event/eventEmitter';
+type PointTuple = LogicFlow.PointTuple;
+export declare class NestedTransformModel extends TransformModel {
+    parentTransform?: TransformModel;
+    constructor(eventCenter: EventEmitter, options: LFOptions.Common);
+    /**
+     * 设置父级变换
+     * @param parentTransform 父级变换模型
+     */
+    setParentTransform(parentTransform: TransformModel): void;
+    /**
+     * 获取累积的缩放值
+     * 计算包括所有父级的累积缩放
+     */
+    private getCumulativeScale;
+    /**
+     * 获取累积的平移值
+     * 计算包括所有父级的累积平移
+     */
+    private getCumulativeTranslate;
+    /**
+     * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
+     * 重写以支持嵌套变换
+     * @param point HTML点
+     */
+    HtmlPointToCanvasPoint(point: PointTuple): PointTuple;
+    /**
+     * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
+     * 重写以支持嵌套变换
+     * @param point Canvas点
+     */
+    CanvasPointToHtmlPoint(point: PointTuple): PointTuple;
+    /**
+     * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
+     * 重写以支持嵌套变换
+     * @param point 点
+     * @param directionX x轴距离
+     * @param directionY y轴距离
+     */
+    moveCanvasPointByHtml(point: PointTuple, directionX: number, directionY: number): PointTuple;
+    /**
+     * 根据缩放情况，获取缩放后的delta距离
+     * 重写以支持嵌套变换
+     * @param deltaX x轴距离变化
+     * @param deltaY y轴距离变化
+     */
+    fixDeltaXY(deltaX: number, deltaY: number): PointTuple;
+}
+export default NestedTransformModel;

package/lib/model/NestedTransformModel.js

@@ -0,0 +1,132 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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.NestedTransformModel = void 0;
+var TransformModel_1 = require("./TransformModel");
+var NestedTransformModel = /** @class */ (function (_super) {
+    __extends(NestedTransformModel, _super);
+    function NestedTransformModel(eventCenter, options) {
+        var _this = _super.call(this, eventCenter, options) || this;
+        _this.parentTransform = options.parentTransform;
+        return _this;
+    }
+    /**
+     * 设置父级变换
+     * @param parentTransform 父级变换模型
+     */
+    NestedTransformModel.prototype.setParentTransform = function (parentTransform) {
+        this.parentTransform = parentTransform;
+    };
+    /**
+     * 获取累积的缩放值
+     * 计算包括所有父级的累积缩放
+     */
+    NestedTransformModel.prototype.getCumulativeScale = function () {
+        var scaleX = this.SCALE_X;
+        var scaleY = this.SCALE_Y;
+        if (this.parentTransform) {
+            if (this.parentTransform instanceof NestedTransformModel) {
+                var parentScale = this.parentTransform.getCumulativeScale();
+                scaleX *= parentScale.scaleX;
+                scaleY *= parentScale.scaleY;
+            }
+            else {
+                scaleX *= this.parentTransform.SCALE_X;
+                scaleY *= this.parentTransform.SCALE_Y;
+            }
+        }
+        return { scaleX: scaleX, scaleY: scaleY };
+    };
+    /**
+     * 获取累积的平移值
+     * 计算包括所有父级的累积平移
+     */
+    NestedTransformModel.prototype.getCumulativeTranslate = function () {
+        var translateX = this.TRANSLATE_X;
+        var translateY = this.TRANSLATE_Y;
+        if (this.parentTransform &&
+            this.parentTransform instanceof NestedTransformModel) {
+            var _a = this.parentTransform.getCumulativeScale(), scaleX = _a.scaleX, scaleY = _a.scaleY;
+            translateX = scaleX * translateX;
+            translateY = scaleY * translateY;
+        }
+        return { translateX: translateX, translateY: translateY };
+    };
+    /**
+     * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
+     * 重写以支持嵌套变换
+     * @param point HTML点
+     */
+    NestedTransformModel.prototype.HtmlPointToCanvasPoint = function (point) {
+        var _a = __read(point, 2), x = _a[0], y = _a[1];
+        var _b = this.getCumulativeScale(), scaleX = _b.scaleX, scaleY = _b.scaleY;
+        var _c = this.getCumulativeTranslate(), translateX = _c.translateX, translateY = _c.translateY;
+        return [(x - translateX) / scaleX, (y - translateY) / scaleY];
+    };
+    /**
+     * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
+     * 重写以支持嵌套变换
+     * @param point Canvas点
+     */
+    NestedTransformModel.prototype.CanvasPointToHtmlPoint = function (point) {
+        var _a = __read(point, 2), x = _a[0], y = _a[1];
+        var _b = this.getCumulativeScale(), scaleX = _b.scaleX, scaleY = _b.scaleY;
+        var _c = this.getCumulativeTranslate(), translateX = _c.translateX, translateY = _c.translateY;
+        return [x * scaleX + translateX, y * scaleY + translateY];
+    };
+    /**
+     * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
+     * 重写以支持嵌套变换
+     * @param point 点
+     * @param directionX x轴距离
+     * @param directionY y轴距离
+     */
+    NestedTransformModel.prototype.moveCanvasPointByHtml = function (point, directionX, directionY) {
+        var _a = __read(point, 2), x = _a[0], y = _a[1];
+        var _b = this.getCumulativeScale(), scaleX = _b.scaleX, scaleY = _b.scaleY;
+        return [x + directionX / scaleX, y + directionY / scaleY];
+    };
+    /**
+     * 根据缩放情况，获取缩放后的delta距离
+     * 重写以支持嵌套变换
+     * @param deltaX x轴距离变化
+     * @param deltaY y轴距离变化
+     */
+    NestedTransformModel.prototype.fixDeltaXY = function (deltaX, deltaY) {
+        var _a = this.getCumulativeScale(), scaleX = _a.scaleX, scaleY = _a.scaleY;
+        return [deltaX / scaleX, deltaY / scaleY];
+    };
+    return NestedTransformModel;
+}(TransformModel_1.TransformModel));
+exports.NestedTransformModel = NestedTransformModel;
+exports.default = NestedTransformModel;

package/lib/model/index.d.ts

@@ -3,5 +3,6 @@ export * from './node';
 export * from './BaseModel';
 export * from './EditConfigModel';
 export * from './GraphModel';
+export * from './NestedTransformModel';
 export * from './SnaplineModel';
 export * from './TransformModel';

package/lib/model/index.js

@@ -19,5 +19,6 @@ __exportStar(require("./node"), exports);
 __exportStar(require("./BaseModel"), exports);
 __exportStar(require("./EditConfigModel"), exports);
 __exportStar(require("./GraphModel"), exports);
+__exportStar(require("./NestedTransformModel"), exports);
 __exportStar(require("./SnaplineModel"), exports);
 __exportStar(require("./TransformModel"), exports);

package/lib/options.d.ts

@@ -1,3 +1,4 @@
+import type { TransformModel } from './model';
 import { createElement as h } from 'preact/compat';
 import LogicFlow from './LogicFlow';
 import { KeyboardDef } from './keyboard';
@@ -68,6 +69,7 @@ export declare namespace Options {
         edgeGenerator?: EdgeGeneratorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
         themeMode?: 'radius' | 'dark' | 'colorful';
+        parentTransform?: TransformModel;
         [key: string]: unknown;
     }
     interface ManualBooleans {

package/lib/view/behavior/dnd.js

@@ -33,6 +33,9 @@ var Dnd = /** @class */ (function () {
             })));
         };
         this.onDragOver = function (e) {
+            _this.lf.graphModel.eventCenter.emit(constant_1.EventType.BLANK_CANVAS_MOUSEMOVE, {
+                e: e,
+            });
             e.preventDefault();
             if (_this.fakeNode) {
                 var _a = _this.clientToLocalPoint({

package/lib/view/node/BaseNode.js

@@ -261,7 +261,6 @@ var BaseNode = /** @class */ (function (_super) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             _this.startTime = new Date().getTime();
             var editConfigModel = graphModel.editConfigModel;
-            model.setSelected(true);
             if (editConfigModel.adjustNodePosition && model.draggable) {
                 _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
             }

package/package.json

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

package/src/model/GraphModel.ts

@@ -48,6 +48,8 @@ import {
 } from '../util'
 import EventEmitter from '../event/eventEmitter'
 import { Grid } from '../view/overlay'
+import NestedTransformModel from './NestedTransformModel'
+
 import Position = LogicFlow.Position
 import PointTuple = LogicFlow.PointTuple
 import GraphData = LogicFlow.GraphData
@@ -207,7 +209,7 @@ export class GraphModel {
 
     this.eventCenter = new EventEmitter()
     this.editConfigModel = new EditConfigModel(options)
-    this.transformModel = new TransformModel(this.eventCenter, options)
+    this.transformModel = new NestedTransformModel(this.eventCenter, options)
 
     this.flowId = createUuid()
     this.idGenerator = idGenerator