@logicflow/core 2.1.1 → 2.1.2

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.1.1",
+  "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

package/src/model/NestedTransformModel.ts

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

package/src/model/index.ts

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

package/src/options.ts

@@ -1,3 +1,5 @@
+import type { TransformModel } from './model'
+
 import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
@@ -104,6 +106,9 @@ export namespace Options {
 
     customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
     themeMode?: 'radius' | 'dark' | 'colorful' // 主题模式
+
+    parentTransform?: TransformModel // 父级变换模型，用于嵌套变换
+
     [key: string]: unknown
   }