@logicflow/core 2.0.16 → 2.1.1

package/es/LogicFlow.js

@@ -83,7 +83,7 @@ var LogicFlow = /** @class */ (function () {
             keyboard: initOptions.keyboard,
         });
         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) {
@@ -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/keyboard/shortcut.js

@@ -24,12 +24,19 @@ import { isEmpty } from 'lodash-es';
 import { map } from 'lodash-es';
 var selected = null;
 export function translateNodeData(nodeData, distance) {
+    var _a, _b;
     nodeData.x += distance;
     nodeData.y += distance;
     if (!isEmpty(nodeData.text)) {
         nodeData.text.x += distance;
         nodeData.text.y += distance;
     }
+    if (!isEmpty((_a = nodeData.properties) === null || _a === void 0 ? void 0 : _a._label)) {
+        (_b = nodeData.properties) === null || _b === void 0 ? void 0 : _b._label.forEach(function (label) {
+            label.x += distance;
+            label.y += distance;
+        });
+    }
     return nodeData;
 }
 export function translateEdgeData(edgeData, distance) {

package/es/model/GraphModel.js

@@ -869,6 +869,8 @@ var GraphModel = /** @class */ (function () {
         }
         if (edgeOriginData.id && this.edgesMap[edgeOriginData.id]) {
             delete edgeOriginData.id;
+            delete edgeOriginData.sourceAnchorId;
+            delete edgeOriginData.targetAnchorId;
         }
         var Model = this.getModel(type);
         if (!Model) {

package/es/model/SnaplineModel.d.ts

@@ -12,7 +12,8 @@ export declare class SnaplineModel {
     isShowHorizontal: boolean;
     isShowVertical: boolean;
     position: Position;
-    constructor(graphModel: GraphModel);
+    epsilon: number;
+    constructor(graphModel: GraphModel, epsilon?: number);
     getStyle(): {
         [x: string]: unknown;
         fill?: string | undefined;

package/es/model/SnaplineModel.js

@@ -18,7 +18,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { action, observable } from 'mobx';
 import { getNodeBBox } from '../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 = {
@@ -26,6 +27,7 @@ var SnaplineModel = /** @class */ (function () {
             y: 0,
         };
         this.graphModel = graphModel;
+        this.epsilon = epsilon;
     }
     SnaplineModel.prototype.getStyle = function () {
         return __assign({}, this.graphModel.theme.snapline);
@@ -39,10 +41,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;
                 }
                 // 如果水平垂直都显示，则停止循环。减少不必要的遍历
@@ -84,15 +86,15 @@ var SnaplineModel = /** @class */ (function () {
             if (item.id !== draggingNode.id) {
                 var itemData = 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;
@@ -129,15 +131,20 @@ var SnaplineModel = /** @class */ (function () {
             if (item.id !== draggingNode.id) {
                 var itemData = 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;
@@ -213,4 +220,12 @@ var SnaplineModel = /** @class */ (function () {
     return SnaplineModel;
 }());
 export { SnaplineModel };
+function equal(num1, num2, epsilon) {
+    if (Math.abs(num1 - num2) <= epsilon) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
 export default SnaplineModel;

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

@@ -2,6 +2,83 @@ import { ResizeControlIndex } from '../view/Control';
 import { cloneDeep, find, forEach } from 'lodash-es';
 import { EventType } from '../constant';
 import { calculatePointAfterRotateAngle, getNewCenter, radianToAngle, } from '../algorithm/rotate';
+export 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 = getNewCenter(freezePoint, endRotatedTouchControlPoint);
+    // 得到【touchEndPoint】右下角-没有transform的坐标
+    var endZeroTouchControlPoint = calculatePointAfterRotateAngle(endRotatedTouchControlPoint, newCenter, -angle);
+    // ---------- 使用transform之前的坐标计算出新的width和height ----------
+    // 得到左上角---没有transform的坐标
+    var zeroFreezePoint = 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 = 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 = 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,
+    };
+}
 function recalcRotatedResizeInfo(pct, resizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight) {
     if (freezeWidth === void 0) { freezeWidth = false; }
     if (freezeHeight === void 0) { freezeHeight = false; }
@@ -39,11 +116,12 @@ function recalcRotatedResizeInfo(pct, resizeInfo, rotate, controlX, controlY, ol
  * @param freezeWidth
  * @param freezeHeight
  */
-export var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY) {
+export 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 = cloneDeep(resizeInfo);
     var deltaX = nextResizeInfo.deltaX, deltaY = nextResizeInfo.deltaY;
     var width = nextResizeInfo.width, height = nextResizeInfo.height, PCTResizeInfo = nextResizeInfo.PCTResizeInfo;
@@ -109,7 +187,84 @@ export var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, fre
         // 角度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 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 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 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 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 ResizeControlIndex.LEFT_TOP:
             nextResizeInfo.width = freezeWidth ? width : width - deltaX * pct;
@@ -189,9 +344,10 @@ export var triggerResizeEvent = function (preNodeData, curNodeData, deltaX, delt
  * @param nodeModel
  * @param graphModel
  * @param cancelCallback
+ * @param forceProportional
  */
 export 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
@@ -208,7 +364,7 @@ export var handleResize = function (_a) {
     var pct = r || (rx && ry) ? 1 / 2 : 1;
     var controlX = x;
     var controlY = y;
-    var nextSize = recalcResizeInfo(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY);
+    var nextSize = recalcResizeInfo(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY, forceProportional);
     // 限制放大缩小的最大最小范围
     if (nextSize.width < minWidth ||
         nextSize.width > maxWidth ||
@@ -240,80 +396,3 @@ export var handleResize = function (_a) {
     // 触发 resize 事件
     triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, index, nodeModel, graphModel);
 };
-export 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 = getNewCenter(freezePoint, endRotatedTouchControlPoint);
-    // 得到【touchEndPoint】右下角-没有transform的坐标
-    var endZeroTouchControlPoint = calculatePointAfterRotateAngle(endRotatedTouchControlPoint, newCenter, -angle);
-    // ---------- 使用transform之前的坐标计算出新的width和height ----------
-    // 得到左上角---没有transform的坐标
-    var zeroFreezePoint = 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 = 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 = 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,
-    };
-}

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

@@ -53,7 +53,7 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
-import { cloneDeep, find, forEach, map } from 'lodash-es';
+import { find, forEach, map, cloneDeep } from 'lodash-es';
 import { Rect } from './shape';
 import { getNodeBBox, StepDrag, handleResize } from '../util';
 import { EventType } from '../constant';
@@ -68,6 +68,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
@@ -220,6 +238,7 @@ var ResizeControl = /** @class */ (function (_super) {
                 index: index,
                 nodeModel: model,
                 graphModel: graphModel,
+                forceProportional: _this.isShiftPressed,
                 cancelCallback: function () {
                     _this.dragHandler.cancelDrag();
                 },
@@ -310,17 +329,19 @@ var ResizeControl = /** @class */ (function (_super) {
         _this.index = index;
         _this.nodeModel = model;
         _this.graphModel = graphModel;
-        // 初始化拖拽工具
         _this.dragHandler = new 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/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/lib/LogicFlow.js

@@ -112,7 +112,7 @@ var LogicFlow = /** @class */ (function () {
             keyboard: initOptions.keyboard,
         });
         if (initOptions.snapline !== false) {
-            this.snaplineModel = new model_1.SnaplineModel(this.graphModel);
+            this.snaplineModel = new model_1.SnaplineModel(this.graphModel, initOptions.snaplineEpsilon);
             (0, behavior_1.snapline)(eventCenter, this.snaplineModel);
         }
         if (!initOptions.isSilentMode) {
@@ -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,// 默认