@logicflow/core 2.0.15 → 2.1.0

package/lib/model/SnaplineModel.js

@@ -21,7 +21,8 @@ exports.SnaplineModel = void 0;
 var mobx_1 = require("mobx");
 var util_1 = require("../util");
 var SnaplineModel = /** @class */ (function () {
-    function SnaplineModel(graphModel) {
+    function SnaplineModel(graphModel, epsilon) {
+        if (epsilon === void 0) { epsilon = 1; }
         this.isShowHorizontal = false;
         this.isShowVertical = false;
         this.position = {
@@ -29,6 +30,7 @@ var SnaplineModel = /** @class */ (function () {
             y: 0,
         };
         this.graphModel = graphModel;
+        this.epsilon = epsilon;
     }
     SnaplineModel.prototype.getStyle = function () {
         return __assign({}, this.graphModel.theme.snapline);
@@ -42,10 +44,10 @@ var SnaplineModel = /** @class */ (function () {
             var item = nodes[i];
             // 排除当前节点
             if (item.id !== draggingNode.id) {
-                if (x === item.x) {
+                if (equal(x, item.x, this.epsilon)) {
                     isShowVertical = true;
                 }
-                if (y === item.y) {
+                if (equal(y, item.y, this.epsilon)) {
                     isShowHorizontal = true;
                 }
                 // 如果水平垂直都显示，则停止循环。减少不必要的遍历
@@ -87,15 +89,15 @@ var SnaplineModel = /** @class */ (function () {
             if (item.id !== draggingNode.id) {
                 var itemData = (0, util_1.getNodeBBox)(item);
                 // 如果节点的最大最小Y轴坐标与节点的最大最小Y轴坐标相等，展示水平线
-                if (itemData.minY === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.minY) ||
-                    itemData.maxY === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.minY)) {
+                if (equal(itemData.minY, draggingData === null || draggingData === void 0 ? void 0 : draggingData.minY, this.epsilon) ||
+                    equal(itemData.maxY, draggingData === null || draggingData === void 0 ? void 0 : draggingData.minY, this.epsilon)) {
                     // 找到则停止循环。减少不必要的遍历
                     isShowHorizontal = true;
                     horizontalY = draggingData.minY;
                     break;
                 }
-                if (itemData.minY === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxY) ||
-                    itemData.maxY === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxY)) {
+                if (equal(itemData.minY, draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxY, this.epsilon) ||
+                    equal(itemData.maxY, draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxY, this.epsilon)) {
                     isShowHorizontal = true;
                     horizontalY = draggingData.maxY;
                     break;
@@ -132,15 +134,20 @@ var SnaplineModel = /** @class */ (function () {
             if (item.id !== draggingNode.id) {
                 var itemData = (0, util_1.getNodeBBox)(item);
                 // 如果节点的最大最小X轴坐标与节点的最大最小X轴坐标相等，展示垂直线
-                if (itemData.minX === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.minX) ||
-                    itemData.maxX === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.minX)) {
+                if (equal(itemData.minX, draggingData === null || draggingData === void 0 ? void 0 : draggingData.minX, this.epsilon)) {
+                    isShowVertical = true;
+                    verticalX = draggingData.minX;
+                    break;
+                }
+                if (equal(itemData.minX, draggingData === null || draggingData === void 0 ? void 0 : draggingData.minX, this.epsilon) ||
+                    equal(itemData.maxX, draggingData === null || draggingData === void 0 ? void 0 : draggingData.minX, this.epsilon)) {
                     // 找到则停止循环。减少不必要的遍历
                     isShowVertical = true;
                     verticalX = draggingData.minX;
                     break;
                 }
-                if (itemData.minX === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxX) ||
-                    itemData.maxX === (draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxX)) {
+                if (equal(itemData.minX, draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxX, this.epsilon) ||
+                    equal(itemData.maxX, draggingData === null || draggingData === void 0 ? void 0 : draggingData.maxX, this.epsilon)) {
                     isShowVertical = true;
                     verticalX = draggingData.maxX;
                     break;
@@ -216,4 +223,12 @@ var SnaplineModel = /** @class */ (function () {
     return SnaplineModel;
 }());
 exports.SnaplineModel = SnaplineModel;
+function equal(num1, num2, epsilon) {
+    if (Math.abs(num1 - num2) <= epsilon) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
 exports.default = SnaplineModel;

package/lib/options.d.ts

@@ -56,6 +56,7 @@ export declare namespace Options {
         history?: boolean;
         outline?: boolean;
         snapline?: boolean;
+        snaplineEpsilon?: number;
         textEdit?: boolean;
         guards?: GuardsConfig;
         overlapMode?: OverlapMode;

package/lib/util/resize.d.ts

@@ -3,6 +3,14 @@ import { BaseNodeModel, GraphModel } from '../model';
 import ResizeInfo = ResizeControl.ResizeInfo;
 import ResizeNodeData = ResizeControl.ResizeNodeData;
 import type { SimplePoint } from '../algorithm/rotate';
+export declare function calculateWidthAndHeight(startRotatedTouchControlPoint: SimplePoint, endRotatedTouchControlPoint: SimplePoint, oldCenter: SimplePoint, angle: number, freezeWidth: boolean | undefined, freezeHeight: boolean | undefined, oldWidth: number, oldHeight: number): {
+    width: number;
+    height: number;
+    center: {
+        x: number;
+        y: number;
+    };
+};
 /**
  * 计算 Control 拖动后，节点的高度信息
  * @param index
@@ -11,7 +19,7 @@ import type { SimplePoint } from '../algorithm/rotate';
  * @param freezeWidth
  * @param freezeHeight
  */
-export declare const recalcResizeInfo: (index: ResizeControlIndex, resizeInfo: ResizeInfo, pct: number | undefined, freezeWidth: boolean | undefined, freezeHeight: boolean | undefined, rotate: number | undefined, controlX: number | undefined, controlY: number | undefined, oldCenterX: number, oldCenterY: number) => ResizeInfo;
+export declare const recalcResizeInfo: (index: ResizeControlIndex, resizeInfo: ResizeInfo, pct: number | undefined, freezeWidth: boolean | undefined, freezeHeight: boolean | undefined, rotate: number | undefined, controlX: number | undefined, controlY: number | undefined, oldCenterX: number, oldCenterY: number, forceProportional?: boolean) => ResizeInfo;
 export declare const updateEdgePointByAnchors: (nodeModel: BaseNodeModel, graphModel: GraphModel) => void;
 export declare const triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeData: ResizeNodeData, deltaX: number, deltaY: number, index: number, nodeModel: BaseNodeModel, graphModel: GraphModel) => void;
 export type IHandleResizeParams = {
@@ -23,6 +31,7 @@ export type IHandleResizeParams = {
     nodeModel: BaseNodeModel;
     graphModel: GraphModel;
     cancelCallback?: () => void;
+    forceProportional?: boolean;
 };
 /**
  * 处理节点的 resize 事件，提出来放到 utils 中，方便在外面（extension）中使用
@@ -34,13 +43,6 @@ export type IHandleResizeParams = {
  * @param nodeModel
  * @param graphModel
  * @param cancelCallback
+ * @param forceProportional
  */
-export declare const handleResize: ({ x, y, deltaX, deltaY, index, nodeModel, graphModel, cancelCallback, }: IHandleResizeParams) => void;
-export declare function calculateWidthAndHeight(startRotatedTouchControlPoint: SimplePoint, endRotatedTouchControlPoint: SimplePoint, oldCenter: SimplePoint, angle: number, freezeWidth: boolean | undefined, freezeHeight: boolean | undefined, oldWidth: number, oldHeight: number): {
-    width: number;
-    height: number;
-    center: {
-        x: number;
-        y: number;
-    };
-};
+export declare const handleResize: ({ x, y, deltaX, deltaY, index, nodeModel, graphModel, cancelCallback, forceProportional, }: IHandleResizeParams) => void;

package/lib/util/resize.js

@@ -1,10 +1,88 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateWidthAndHeight = exports.handleResize = exports.triggerResizeEvent = exports.updateEdgePointByAnchors = exports.recalcResizeInfo = void 0;
+exports.handleResize = exports.triggerResizeEvent = exports.updateEdgePointByAnchors = exports.recalcResizeInfo = exports.calculateWidthAndHeight = void 0;
 var Control_1 = require("../view/Control");
 var lodash_es_1 = require("lodash-es");
 var constant_1 = require("../constant");
 var rotate_1 = require("../algorithm/rotate");
+function calculateWidthAndHeight(startRotatedTouchControlPoint, endRotatedTouchControlPoint, oldCenter, angle, freezeWidth, freezeHeight, oldWidth, oldHeight) {
+    if (freezeWidth === void 0) { freezeWidth = false; }
+    if (freezeHeight === void 0) { freezeHeight = false; }
+    // 假设目前触摸的是右下角的control点
+    // 计算出来左上角的control坐标，resize过程左上角的control坐标保持不变
+    var freezePoint = {
+        x: oldCenter.x - (startRotatedTouchControlPoint.x - oldCenter.x),
+        y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
+    };
+    // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
+    var newCenter = (0, rotate_1.getNewCenter)(freezePoint, endRotatedTouchControlPoint);
+    // 得到【touchEndPoint】右下角-没有transform的坐标
+    var endZeroTouchControlPoint = (0, rotate_1.calculatePointAfterRotateAngle)(endRotatedTouchControlPoint, newCenter, -angle);
+    // ---------- 使用transform之前的坐标计算出新的width和height ----------
+    // 得到左上角---没有transform的坐标
+    var zeroFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(freezePoint, newCenter, -angle);
+    if (freezeWidth) {
+        // 如果固定width，那么不能单纯使用endZeroTouchControlPoint.x=startZeroTouchControlPoint.x
+        // 因为去掉transform的左上角不一定是重合的，我们要保证的是transform后的左上角重合
+        var newWidth = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x);
+        var widthDx = newWidth - oldWidth;
+        // 点击的是左边锚点，是+widthDx/2，点击是右边锚点，是-widthDx/2
+        if (newCenter.x > endZeroTouchControlPoint.x) {
+            // 当前触摸的是左边锚点
+            newCenter.x = newCenter.x + widthDx / 2;
+        }
+        else {
+            // 当前触摸的是右边锚点
+            newCenter.x = newCenter.x - widthDx / 2;
+        }
+    }
+    if (freezeHeight) {
+        var newHeight = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y);
+        var heightDy = newHeight - oldHeight;
+        if (newCenter.y > endZeroTouchControlPoint.y) {
+            // 当前触摸的是上边锚点
+            newCenter.y = newCenter.y + heightDy / 2;
+        }
+        else {
+            newCenter.y = newCenter.y - heightDy / 2;
+        }
+    }
+    if (freezeWidth || freezeHeight) {
+        // 如果调整过transform之前的坐标，那么transform后的坐标也会改变，那么算出来的newCenter也得调整
+        // 由于无论如何rotate，中心点都是不变的，因此我们可以使用transform之前的坐标算出新的中心点
+        var nowFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(zeroFreezePoint, newCenter, angle);
+        // 得到当前新rect的左上角与实际上transform后的左上角的偏移量
+        var dx = nowFreezePoint.x - freezePoint.x;
+        var dy = nowFreezePoint.y - freezePoint.y;
+        // 修正不使用transform的坐标: 左上角、右下角、center
+        newCenter.x = newCenter.x - dx;
+        newCenter.y = newCenter.y - dy;
+        zeroFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(freezePoint, newCenter, -angle);
+        endZeroTouchControlPoint = {
+            x: newCenter.x - (zeroFreezePoint.x - newCenter.x),
+            y: newCenter.y - (zeroFreezePoint.y - newCenter.y),
+        };
+    }
+    // transform之前的坐标的左上角+右下角计算出宽度和高度
+    var width = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x);
+    var height = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y);
+    // ---------- 使用transform之前的坐标计算出新的width和height ----------
+    if (freezeWidth) {
+        // 理论计算出来的width应该等于oldWidth
+        // 但是有误差，比如oldWidth = 100; newWidth=100.000000000001
+        // 会在handleResize()限制放大缩小的最大最小范围中被阻止滑动
+        width = oldWidth;
+    }
+    if (freezeHeight) {
+        height = oldHeight;
+    }
+    return {
+        width: width,
+        height: height,
+        center: newCenter,
+    };
+}
+exports.calculateWidthAndHeight = calculateWidthAndHeight;
 function recalcRotatedResizeInfo(pct, resizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight) {
     if (freezeWidth === void 0) { freezeWidth = false; }
     if (freezeHeight === void 0) { freezeHeight = false; }
@@ -42,11 +120,12 @@ function recalcRotatedResizeInfo(pct, resizeInfo, rotate, controlX, controlY, ol
  * @param freezeWidth
  * @param freezeHeight
  */
-var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY) {
+var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY, forceProportional) {
     if (pct === void 0) { pct = 1; }
     if (freezeWidth === void 0) { freezeWidth = false; }
     if (freezeHeight === void 0) { freezeHeight = false; }
     if (rotate === void 0) { rotate = 0; }
+    if (forceProportional === void 0) { forceProportional = false; }
     var nextResizeInfo = (0, lodash_es_1.cloneDeep)(resizeInfo);
     var deltaX = nextResizeInfo.deltaX, deltaY = nextResizeInfo.deltaY;
     var width = nextResizeInfo.width, height = nextResizeInfo.height, PCTResizeInfo = nextResizeInfo.PCTResizeInfo;
@@ -112,7 +191,84 @@ var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeig
         // 角度rotate不为0得到的resizeInfo.deltaX仅仅代表中心点的变化，而不是宽度的变化
         return recalcRotatedResizeInfo(pct, nextResizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight);
     }
-    // 如果限制了宽/高不变，对应的 width/height 保持一致
+    //Shift键等比缩放逻辑
+    if (forceProportional) {
+        // 计算当前的宽高比
+        var aspectRatio = width / height;
+        // 根据拖拽方向确定主要的缩放参考
+        var primaryDelta = 0;
+        var newWidth = width;
+        var newHeight = height;
+        switch (index) {
+            case Control_1.ResizeControlIndex.LEFT_TOP:
+                // 取绝对值较大的delta作为主要缩放参考
+                primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? -deltaX : -deltaY;
+                if (aspectRatio >= 1) {
+                    // 宽度大于等于高度，以宽度为基准
+                    newWidth = width + primaryDelta;
+                    newHeight = newWidth / aspectRatio;
+                }
+                else {
+                    // 高度大于宽度，以高度为基准
+                    newHeight = height + primaryDelta;
+                    newWidth = newHeight * aspectRatio;
+                }
+                nextResizeInfo.width = newWidth;
+                nextResizeInfo.height = newHeight;
+                nextResizeInfo.deltaX = width - newWidth;
+                nextResizeInfo.deltaY = height - newHeight;
+                break;
+            case Control_1.ResizeControlIndex.RIGHT_TOP:
+                primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : -deltaY;
+                if (aspectRatio >= 1) {
+                    newWidth = width + primaryDelta;
+                    newHeight = newWidth / aspectRatio;
+                }
+                else {
+                    newHeight = height - primaryDelta;
+                    newWidth = newHeight * aspectRatio;
+                }
+                nextResizeInfo.width = newWidth;
+                nextResizeInfo.height = newHeight;
+                nextResizeInfo.deltaX = newWidth - width;
+                nextResizeInfo.deltaY = height - newHeight;
+                break;
+            case Control_1.ResizeControlIndex.RIGHT_BOTTOM:
+                primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
+                if (aspectRatio >= 1) {
+                    newWidth = width + primaryDelta;
+                    newHeight = newWidth / aspectRatio;
+                }
+                else {
+                    newHeight = height + primaryDelta;
+                    newWidth = newHeight * aspectRatio;
+                }
+                nextResizeInfo.width = newWidth;
+                nextResizeInfo.height = newHeight;
+                nextResizeInfo.deltaX = newWidth - width;
+                nextResizeInfo.deltaY = newHeight - height;
+                break;
+            case Control_1.ResizeControlIndex.LEFT_BOTTOM:
+                primaryDelta = Math.abs(deltaX) > Math.abs(deltaY) ? -deltaX : deltaY;
+                if (aspectRatio >= 1) {
+                    newWidth = width - primaryDelta;
+                    newHeight = newWidth / aspectRatio;
+                }
+                else {
+                    newHeight = height + primaryDelta;
+                    newWidth = newHeight * aspectRatio;
+                }
+                nextResizeInfo.width = newWidth;
+                nextResizeInfo.height = newHeight;
+                nextResizeInfo.deltaX = width - newWidth;
+                nextResizeInfo.deltaY = newHeight - height;
+                break;
+            default:
+                break;
+        }
+        return nextResizeInfo;
+    }
+    // 原有的非等比缩放逻辑保持不变
     switch (index) {
         case Control_1.ResizeControlIndex.LEFT_TOP:
             nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct;
@@ -195,9 +351,10 @@ exports.triggerResizeEvent = triggerResizeEvent;
  * @param nodeModel
  * @param graphModel
  * @param cancelCallback
+ * @param forceProportional
  */
 var handleResize = function (_a) {
-    var x = _a.x, y = _a.y, deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, nodeModel = _a.nodeModel, graphModel = _a.graphModel, cancelCallback = _a.cancelCallback;
+    var x = _a.x, y = _a.y, deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, nodeModel = _a.nodeModel, graphModel = _a.graphModel, cancelCallback = _a.cancelCallback, _b = _a.forceProportional, forceProportional = _b === void 0 ? false : _b;
     var r = nodeModel.r, // circle
     rx = nodeModel.rx, // ellipse/diamond
     ry = nodeModel.ry, width = nodeModel.width, // rect/html
@@ -214,7 +371,7 @@ var handleResize = function (_a) {
     var pct = r || (rx && ry) ? 1 / 2 : 1;
     var controlX = x;
     var controlY = y;
-    var nextSize = (0, exports.recalcResizeInfo)(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY);
+    var nextSize = (0, exports.recalcResizeInfo)(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY, forceProportional);
     // 限制放大缩小的最大最小范围
     if (nextSize.width < minWidth ||
         nextSize.width > maxWidth ||
@@ -247,81 +404,3 @@ var handleResize = function (_a) {
     (0, exports.triggerResizeEvent)(preNodeData, curNodeData, deltaX, deltaY, index, nodeModel, graphModel);
 };
 exports.handleResize = handleResize;
-function calculateWidthAndHeight(startRotatedTouchControlPoint, endRotatedTouchControlPoint, oldCenter, angle, freezeWidth, freezeHeight, oldWidth, oldHeight) {
-    if (freezeWidth === void 0) { freezeWidth = false; }
-    if (freezeHeight === void 0) { freezeHeight = false; }
-    // 假设目前触摸的是右下角的control点
-    // 计算出来左上角的control坐标，resize过程左上角的control坐标保持不变
-    var freezePoint = {
-        x: oldCenter.x - (startRotatedTouchControlPoint.x - oldCenter.x),
-        y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
-    };
-    // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
-    var newCenter = (0, rotate_1.getNewCenter)(freezePoint, endRotatedTouchControlPoint);
-    // 得到【touchEndPoint】右下角-没有transform的坐标
-    var endZeroTouchControlPoint = (0, rotate_1.calculatePointAfterRotateAngle)(endRotatedTouchControlPoint, newCenter, -angle);
-    // ---------- 使用transform之前的坐标计算出新的width和height ----------
-    // 得到左上角---没有transform的坐标
-    var zeroFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(freezePoint, newCenter, -angle);
-    if (freezeWidth) {
-        // 如果固定width，那么不能单纯使用endZeroTouchControlPoint.x=startZeroTouchControlPoint.x
-        // 因为去掉transform的左上角不一定是重合的，我们要保证的是transform后的左上角重合
-        var newWidth = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x);
-        var widthDx = newWidth - oldWidth;
-        // 点击的是左边锚点，是+widthDx/2，点击是右边锚点，是-widthDx/2
-        if (newCenter.x > endZeroTouchControlPoint.x) {
-            // 当前触摸的是左边锚点
-            newCenter.x = newCenter.x + widthDx / 2;
-        }
-        else {
-            // 当前触摸的是右边锚点
-            newCenter.x = newCenter.x - widthDx / 2;
-        }
-    }
-    if (freezeHeight) {
-        var newHeight = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y);
-        var heightDy = newHeight - oldHeight;
-        if (newCenter.y > endZeroTouchControlPoint.y) {
-            // 当前触摸的是上边锚点
-            newCenter.y = newCenter.y + heightDy / 2;
-        }
-        else {
-            newCenter.y = newCenter.y - heightDy / 2;
-        }
-    }
-    if (freezeWidth || freezeHeight) {
-        // 如果调整过transform之前的坐标，那么transform后的坐标也会改变，那么算出来的newCenter也得调整
-        // 由于无论如何rotate，中心点都是不变的，因此我们可以使用transform之前的坐标算出新的中心点
-        var nowFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(zeroFreezePoint, newCenter, angle);
-        // 得到当前新rect的左上角与实际上transform后的左上角的偏移量
-        var dx = nowFreezePoint.x - freezePoint.x;
-        var dy = nowFreezePoint.y - freezePoint.y;
-        // 修正不使用transform的坐标: 左上角、右下角、center
-        newCenter.x = newCenter.x - dx;
-        newCenter.y = newCenter.y - dy;
-        zeroFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(freezePoint, newCenter, -angle);
-        endZeroTouchControlPoint = {
-            x: newCenter.x - (zeroFreezePoint.x - newCenter.x),
-            y: newCenter.y - (zeroFreezePoint.y - newCenter.y),
-        };
-    }
-    // transform之前的坐标的左上角+右下角计算出宽度和高度
-    var width = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x);
-    var height = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y);
-    // ---------- 使用transform之前的坐标计算出新的width和height ----------
-    if (freezeWidth) {
-        // 理论计算出来的width应该等于oldWidth
-        // 但是有误差，比如oldWidth = 100; newWidth=100.000000000001
-        // 会在handleResize()限制放大缩小的最大最小范围中被阻止滑动
-        width = oldWidth;
-    }
-    if (freezeHeight) {
-        height = oldHeight;
-    }
-    return {
-        width: width,
-        height: height,
-        center: newCenter,
-    };
-}
-exports.calculateWidthAndHeight = calculateWidthAndHeight;

package/lib/view/Control.d.ts

@@ -4,8 +4,8 @@ import { IDragParams, StepDrag } from '../util';
 import { BaseNodeModel, GraphModel } from '../model';
 import NodeData = LogicFlow.NodeData;
 import VectorData = LogicFlow.VectorData;
-import ResizeInfo = ResizeControl.ResizeInfo;
 import ResizeNodeData = ResizeControl.ResizeNodeData;
+import ResizeInfo = ResizeControl.ResizeInfo;
 import ControlItemProps = ResizeControl.ControlItemProps;
 export declare enum ResizeControlIndex {
     LEFT_TOP = 0,
@@ -29,7 +29,11 @@ export declare class ResizeControl extends Component<IResizeControlProps, IResiz
     readonly nodeModel: BaseNodeModel;
     readonly graphModel: GraphModel;
     readonly dragHandler: StepDrag;
+    private isShiftPressed;
     constructor(props: IResizeControlProps);
+    bindKeyboardEvents: () => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleKeyUp: (event: KeyboardEvent) => void;
     componentWillUnmount(): void;
     updateEdgePointByAnchors: () => void;
     triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeData: ResizeNodeData, deltaX: any, deltaY: any, index: any, nodeModel: BaseNodeModel) => void;

package/lib/view/Control.js

@@ -71,6 +71,24 @@ var ResizeControl = /** @class */ (function (_super) {
     __extends(ResizeControl, _super);
     function ResizeControl(props) {
         var _this = _super.call(this) || this;
+        //判断Shift键状态
+        _this.isShiftPressed = false;
+        //绑定键盘事件监听
+        _this.bindKeyboardEvents = function () {
+            document.addEventListener('keydown', _this.handleKeyDown);
+            document.addEventListener('keyup', _this.handleKeyUp);
+        };
+        //处理键盘按下事件
+        _this.handleKeyDown = function (event) {
+            if (event.key === 'Shift') {
+                _this.isShiftPressed = true;
+            }
+        };
+        _this.handleKeyUp = function (event) {
+            if (event.key === 'Shift') {
+                _this.isShiftPressed = false;
+            }
+        };
         _this.updateEdgePointByAnchors = function () {
             // https://github.com/didi/LogicFlow/issues/807
             // https://github.com/didi/LogicFlow/issues/875
@@ -223,6 +241,7 @@ var ResizeControl = /** @class */ (function (_super) {
                 index: index,
                 nodeModel: model,
                 graphModel: graphModel,
+                forceProportional: _this.isShiftPressed,
                 cancelCallback: function () {
                     _this.dragHandler.cancelDrag();
                 },
@@ -313,17 +332,19 @@ var ResizeControl = /** @class */ (function (_super) {
         _this.index = index;
         _this.nodeModel = model;
         _this.graphModel = graphModel;
-        // 初始化拖拽工具
         _this.dragHandler = new util_1.StepDrag({
             onDragStart: _this.onDragStart,
             onDragging: _this.onDragging,
             onDragEnd: _this.onDragEnd,
             step: graphModel.gridSize,
         });
+        _this.bindKeyboardEvents();
         return _this;
     }
     ResizeControl.prototype.componentWillUnmount = function () {
         this.dragHandler.destroy();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
     };
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;

package/lib/view/node/BaseNode.js

@@ -261,6 +261,7 @@ 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.0.15",
+  "version": "2.1.0",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/LogicFlow.tsx

@@ -133,7 +133,10 @@ export class LogicFlow {
     })
 
     if (initOptions.snapline !== false) {
-      this.snaplineModel = new SnaplineModel(this.graphModel)
+      this.snaplineModel = new SnaplineModel(
+        this.graphModel,
+        initOptions.snaplineEpsilon,
+      )
       snapline(eventCenter, this.snaplineModel)
     }
     if (!initOptions.isSilentMode) {
@@ -900,7 +903,6 @@ export class LogicFlow {
   updateEditConfig(config: Partial<IEditConfigType>) {
     const { editConfigModel, transformModel } = this.graphModel
     const currentSnapGrid = editConfigModel.snapGrid
-
     editConfigModel.updateEditConfig(config)
     if (config?.stopMoveGraph !== undefined) {
       transformModel.updateTranslateLimits(config.stopMoveGraph)
@@ -916,6 +918,9 @@ export class LogicFlow {
       } = this.graphModel
       this.graphModel.updateGridSize(config.snapGrid ? size : 1)
     }
+    this.emit(EventType.EDIT_CONFIG_CHANGED, {
+      data: editConfigModel.getConfig(),
+    })
   }
 
   /**
@@ -1432,7 +1437,7 @@ export class LogicFlow {
     this.graphModel.destroy()
     this.tool.destroy()
     this.history.destroy()
-    this.clearThemeMode()
+    clearThemeMode()
     for (const extensionName in this.extension) {
       const extensionInstance = this.extension[extensionName]
       if ('destroy' in extensionInstance) {

package/src/constant/index.ts

@@ -101,6 +101,7 @@ export 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',
@@ -157,6 +158,7 @@ export enum EventType {
   GRAPH_TRANSFORM = 'graph:transform',
   GRAPH_RENDERED = 'graph:rendered',
   GRAPH_UPDATED = 'graph:updated',
+  EDIT_CONFIG_CHANGED = 'editConfig:changed',
 }
 
 export enum OverlapMode {

package/src/keyboard/shortcut.ts

@@ -19,6 +19,12 @@ export function translateNodeData(nodeData: NodeData, distance: number) {
     nodeData.text.y += distance
   }
 
+  if (!isEmpty(nodeData.properties?._label)) {
+    nodeData.properties?._label.forEach((label) => {
+      label.x += distance
+      label.y += distance
+    })
+  }
   return nodeData
 }
 

package/src/model/GraphModel.ts

@@ -984,6 +984,8 @@ export class GraphModel {
     }
     if (edgeOriginData.id && this.edgesMap[edgeOriginData.id]) {
       delete edgeOriginData.id
+      delete edgeOriginData.sourceAnchorId
+      delete edgeOriginData.targetAnchorId
     }
     const Model = this.getModel(type) as BaseEdgeModelCtor
     if (!Model) {