@logicflow/core 2.0.5 → 2.0.6

package/es/algorithm/rotate.d.ts

@@ -0,0 +1,31 @@
+export interface SimplePoint {
+    x: number;
+    y: number;
+}
+/**
+ * 根据两个点获取中心点坐标
+ */
+export declare function getNewCenter(startPoint: SimplePoint, endPoint: SimplePoint): {
+    x: number;
+    y: number;
+};
+/**
+ * 旋转矩阵公式，可以获取某一个坐标旋转angle后的坐标
+ * @param p 当前坐标
+ * @param center 旋转中心
+ * @param angle 旋转角度（不是弧度）
+ */
+export declare function calculatePointAfterRotateAngle(p: SimplePoint, center: SimplePoint, angle: number): {
+    x: number;
+    y: number;
+};
+/**
+ * 角度转弧度
+ * @param angle 角度
+ */
+export declare function angleToRadian(angle: number): number;
+/**
+ * 弧度转角度
+ * @param radian 弧度
+ */
+export declare function radianToAngle(radian: number): number;

package/es/algorithm/rotate.js

@@ -0,0 +1,43 @@
+/**
+ * 根据两个点获取中心点坐标
+ */
+export function getNewCenter(startPoint, endPoint) {
+    var x1 = startPoint.x, y1 = startPoint.y;
+    var x2 = endPoint.x, y2 = endPoint.y;
+    var newCenter = {
+        x: x1 + (x2 - x1) / 2,
+        y: y1 + (y2 - y1) / 2,
+    };
+    return newCenter;
+}
+/**
+ * 旋转矩阵公式，可以获取某一个坐标旋转angle后的坐标
+ * @param p 当前坐标
+ * @param center 旋转中心
+ * @param angle 旋转角度（不是弧度）
+ */
+export function calculatePointAfterRotateAngle(p, center, angle) {
+    var radian = angleToRadian(angle);
+    var dx = p.x - center.x;
+    var dy = p.y - center.y;
+    var x = dx * Math.cos(radian) - dy * Math.sin(radian) + center.x;
+    var y = dx * Math.sin(radian) + dy * Math.cos(radian) + center.y;
+    return {
+        x: x,
+        y: y,
+    };
+}
+/**
+ * 角度转弧度
+ * @param angle 角度
+ */
+export function angleToRadian(angle) {
+    return (angle * Math.PI) / 180;
+}
+/**
+ * 弧度转角度
+ * @param radian 弧度
+ */
+export function radianToAngle(radian) {
+    return (radian / Math.PI) * 180;
+}

package/es/model/BaseModel.d.ts

@@ -42,6 +42,15 @@ export declare namespace Model {
      * deltaY: 移动的 Y 轴距离
      */
     type NodeMoveRule = (model: BaseNodeModel, deltaX: number, deltaY: number) => boolean | IsAllowMove;
+    /**
+     * 限制节点resize规则
+     * model: 移动节点的 model
+     * deltaX: 中心点移动的 X 轴距离
+     * deltaY: 中心点移动的 Y 轴距离
+     * width: 中心点新的width
+     * height: 中心点新的height
+     */
+    type NodeResizeRule = (model: BaseNodeModel, deltaX: number, deltaY: number, width: number, height: number) => boolean;
     type AdjustEdgeStartAndEndParams = {
         startPoint: LogicFlow.Point;
         endPoint: LogicFlow.Point;

package/es/model/GraphModel.d.ts

@@ -32,9 +32,14 @@ export declare class GraphModel {
     elementsModelMap: Map<string, BaseNodeModel | BaseEdgeModel>;
     /**
      * 节点移动规则判断
-     * 在节点移动的时候，会出发此数组中的所有规则判断
+     * 在节点移动的时候，会触发此数组中的所有规则判断
      */
     nodeMoveRules: Model.NodeMoveRule[];
+    /**
+     * 节点resize规则判断
+     * 在节点resize的时候，会触发此数组中的所有规则判断
+     */
+    nodeResizeRules: Model.NodeResizeRule[];
     /**
      * 获取自定义连线轨迹
      */
@@ -330,6 +335,7 @@ export declare class GraphModel {
      *
      */
     addNodeMoveRules(fn: Model.NodeMoveRule): void;
+    addNodeResizeRules(fn: Model.NodeResizeRule): void;
     /**
      * 设置默认的边类型
      * 也就是设置在节点直接有用户手动绘制的连线类型。

package/es/model/GraphModel.js

@@ -58,9 +58,14 @@ var GraphModel = /** @class */ (function () {
         this.elementsModelMap = new Map();
         /**
          * 节点移动规则判断
-         * 在节点移动的时候，会出发此数组中的所有规则判断
+         * 在节点移动的时候，会触发此数组中的所有规则判断
          */
         this.nodeMoveRules = [];
+        /**
+         * 节点resize规则判断
+         * 在节点resize的时候，会触发此数组中的所有规则判断
+         */
+        this.nodeResizeRules = [];
         // 当前图上所有节点的model
         this.nodes = [];
         // 当前图上所有边的model
@@ -1081,6 +1086,11 @@ var GraphModel = /** @class */ (function () {
             this.nodeMoveRules.push(fn);
         }
     };
+    GraphModel.prototype.addNodeResizeRules = function (fn) {
+        if (!this.nodeResizeRules.includes(fn)) {
+            this.nodeResizeRules.push(fn);
+        }
+    };
     /**
      * 设置默认的边类型
      * 也就是设置在节点直接有用户手动绘制的连线类型。

package/es/model/node/BaseNodeModel.d.ts

@@ -72,6 +72,7 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
     targetRules: Model.ConnectRule[];
     sourceRules: Model.ConnectRule[];
     moveRules: Model.NodeMoveRule[];
+    resizeRules: Model.NodeResizeRule[];
     hasSetTargetRules: boolean;
     hasSetSourceRules: boolean;
     [propName: string]: any;
@@ -264,6 +265,12 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
     moveTo(x: number, y: number, isIgnoreRule?: boolean): boolean;
     moveText(deltaX: number, deltaY: number): void;
     updateText(value: string): void;
+    addNodeResizeRules(fn: Model.NodeResizeRule): void;
+    /**
+     * 内部方法
+     * 是否允许resize节点到新的位置
+     */
+    isAllowResizeNode(deltaX: number, deltaY: number, width: number, height: number): boolean;
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
     setIsShowAnchor(flag?: boolean): void;

package/es/model/node/BaseNodeModel.js

@@ -95,6 +95,7 @@ var BaseNodeModel = /** @class */ (function () {
         this.targetRules = [];
         this.sourceRules = [];
         this.moveRules = []; // 节点移动之前的hook
+        this.resizeRules = []; // 节点resize之前的hook
         this.hasSetTargetRules = false; // 用来限制rules的重复值
         this.hasSetSourceRules = false; // 用来限制rules的重复值
         this.graphModel = graphModel;
@@ -240,7 +241,7 @@ var BaseNodeModel = /** @class */ (function () {
                     textConfig.draggable = text.draggable;
                 }
                 if (!isUndefined(text.editable)) {
-                    textConfig.draggable = text.draggable;
+                    textConfig.editable = text.editable;
                 }
             }
         }
@@ -252,6 +253,10 @@ var BaseNodeModel = /** @class */ (function () {
      */
     BaseNodeModel.prototype.resize = function (resizeInfo) {
         var width = resizeInfo.width, height = resizeInfo.height, deltaX = resizeInfo.deltaX, deltaY = resizeInfo.deltaY;
+        var isAllowResize = this.isAllowResizeNode(deltaX, deltaY, width, height);
+        if (!isAllowResize) {
+            return this.getData();
+        }
         // 移动节点以及文本内容
         this.move(deltaX / 2, deltaY / 2);
         this.width = width;
@@ -274,6 +279,18 @@ var BaseNodeModel = /** @class */ (function () {
         if (isObservable(properties)) {
             properties = toJS(properties);
         }
+        if (isNil(properties.width)) {
+            // resize()的时候会触发this.setProperties({width,height})
+            // 然后返回getData()，可以从properties拿到width
+            // 但是初始化如果没有在properties传入width，那么getData()就一直无法从properties拿到width
+            properties.width = this.width;
+        }
+        if (isNil(properties.height)) {
+            // resize()的时候会触发this.setProperties({width,height})
+            // 然后返回getData()，可以从properties拿到height
+            // 但是初始化如果没有在properties传入height，那么getData()就一直无法从properties拿到width
+            properties.height = this.height;
+        }
         var data = {
             id: this.id,
             type: this.type,
@@ -606,6 +623,10 @@ var BaseNodeModel = /** @class */ (function () {
             this.y = this.y + deltaY;
             this.text && this.moveText(0, deltaY);
         }
+        if (isAllowMoveX || isAllowMoveY) {
+            // 更新x和y的同时也要更新对应的transform旋转矩阵（依赖x、y)
+            this.rotate = this._rotate;
+        }
         return isAllowMoveX || isAllowMoveY;
     };
     BaseNodeModel.prototype.getMoveDistance = function (deltaX, deltaY, isIgnoreRule) {
@@ -649,6 +670,35 @@ var BaseNodeModel = /** @class */ (function () {
     BaseNodeModel.prototype.updateText = function (value) {
         this.text = __assign(__assign({}, toJS(this.text)), { value: value });
     };
+    BaseNodeModel.prototype.addNodeResizeRules = function (fn) {
+        if (!this.resizeRules.includes(fn)) {
+            this.resizeRules.push(fn);
+        }
+    };
+    /**
+     * 内部方法
+     * 是否允许resize节点到新的位置
+     */
+    BaseNodeModel.prototype.isAllowResizeNode = function (deltaX, deltaY, width, height) {
+        var e_2, _a;
+        var rules = this.resizeRules.concat(this.graphModel.nodeResizeRules);
+        try {
+            for (var rules_2 = __values(rules), rules_2_1 = rules_2.next(); !rules_2_1.done; rules_2_1 = rules_2.next()) {
+                var rule = rules_2_1.value;
+                var r = rule(this, deltaX, deltaY, width, height);
+                if (!r)
+                    return false;
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (rules_2_1 && !rules_2_1.done && (_a = rules_2.return)) _a.call(rules_2);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return true;
+    };
     BaseNodeModel.prototype.setSelected = function (flag) {
         if (flag === void 0) { flag = true; }
         this.isSelected = flag;
@@ -839,6 +889,9 @@ var BaseNodeModel = /** @class */ (function () {
     __decorate([
         action
     ], BaseNodeModel.prototype, "updateText", null);
+    __decorate([
+        action
+    ], BaseNodeModel.prototype, "addNodeResizeRules", null);
     __decorate([
         action
     ], BaseNodeModel.prototype, "setSelected", null);

package/es/util/graph.d.ts

@@ -1,5 +1,5 @@
 import LogicFlow from '..';
-import { EditConfigModel } from 'src/model';
+import { EditConfigModel } from '..';
 /**
  * 判断一个点是否在指定区域
  * @param point 当前点

package/es/util/resize.d.ts

@@ -2,6 +2,7 @@ import { ResizeControl, ResizeControlIndex } from '../view/Control';
 import { BaseNodeModel, GraphModel } from '../model';
 import ResizeInfo = ResizeControl.ResizeInfo;
 import ResizeNodeData = ResizeControl.ResizeNodeData;
+import type { SimplePoint } from '../algorithm/rotate';
 /**
  * 计算 Control 拖动后，节点的高度信息
  * @param index
@@ -10,11 +11,23 @@ import ResizeNodeData = ResizeControl.ResizeNodeData;
  * @param freezeWidth
  * @param freezeHeight
  */
-export declare const recalcResizeInfo: (index: ResizeControlIndex, resizeInfo: ResizeInfo, pct?: number, freezeWidth?: boolean, freezeHeight?: boolean) => 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) => 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 = {
+    x?: number;
+    y?: number;
+    deltaX: number;
+    deltaY: number;
+    index: ResizeControlIndex;
+    nodeModel: BaseNodeModel;
+    graphModel: GraphModel;
+    cancelCallback?: () => void;
+};
 /**
  * 处理节点的 resize 事件，提出来放到 utils 中，方便在外面（extension）中使用
+ * @param x
+ * @param y
  * @param deltaX
  * @param deltaY
  * @param index
@@ -22,11 +35,12 @@ export declare const triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeDa
  * @param graphModel
  * @param cancelCallback
  */
-export declare const handleResize: ({ deltaX, deltaY, index, nodeModel, graphModel, cancelCallback, }: {
-    deltaX: any;
-    deltaY: any;
-    index: any;
-    nodeModel: any;
-    graphModel: any;
-    cancelCallback: any;
-}) => void;
+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;
+    };
+};

package/es/util/resize.js

@@ -1,6 +1,36 @@
 import { ResizeControlIndex } from '../view/Control';
 import { cloneDeep, find, forEach } from 'lodash-es';
 import { EventType } from '../constant';
+import { calculatePointAfterRotateAngle, getNewCenter, radianToAngle, } from '../algorithm/rotate';
+function recalcRotatedResizeInfo(pct, resizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight) {
+    if (freezeWidth === void 0) { freezeWidth = false; }
+    if (freezeHeight === void 0) { freezeHeight = false; }
+    // 假设我们触摸的点是右下角的control
+    var deltaX = resizeInfo.deltaX, deltaY = resizeInfo.deltaY, oldWidth = resizeInfo.width, oldHeight = resizeInfo.height;
+    var angle = radianToAngle(rotate);
+    // 右下角的control
+    var startZeroTouchControlPoint = {
+        x: controlX, // control锚点的坐标x
+        y: controlY, // control锚点的坐标y
+    };
+    var oldCenter = { x: oldCenterX, y: oldCenterY };
+    // 右下角的control坐标（transform后的-touchStartPoint）
+    var startRotatedTouchControlPoint = calculatePointAfterRotateAngle(startZeroTouchControlPoint, oldCenter, angle);
+    // 右下角的control坐标（transform后的-touchEndPoint）
+    var endRotatedTouchControlPoint = {
+        x: startRotatedTouchControlPoint.x + deltaX,
+        y: startRotatedTouchControlPoint.y + deltaY,
+    };
+    // 计算出新的宽度和高度以及新的中心点
+    var _a = calculateWidthAndHeight(startRotatedTouchControlPoint, endRotatedTouchControlPoint, oldCenter, angle, freezeWidth, freezeHeight, oldWidth, oldHeight), newWidth = _a.width, newHeight = _a.height, newCenter = _a.center;
+    // calculateWidthAndHeight()得到的是整个宽度，比如圆pct=0.5,此时newWidth等于整个圆直径
+    resizeInfo.width = newWidth * pct;
+    resizeInfo.height = newHeight * pct;
+    // BaseNodeModel.resize(deltaX/2, deltaY/2)，因此这里要*2
+    resizeInfo.deltaX = (newCenter.x - oldCenter.x) * 2;
+    resizeInfo.deltaY = (newCenter.y - oldCenter.y) * 2;
+    return resizeInfo;
+}
 /**
  * 计算 Control 拖动后，节点的高度信息
  * @param index
@@ -9,10 +39,11 @@ import { EventType } from '../constant';
  * @param freezeWidth
  * @param freezeHeight
  */
-export var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight) {
+export var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY) {
     if (pct === void 0) { pct = 1; }
     if (freezeWidth === void 0) { freezeWidth = false; }
     if (freezeHeight === void 0) { freezeHeight = false; }
+    if (rotate === void 0) { rotate = 0; }
     var nextResizeInfo = cloneDeep(resizeInfo);
     var deltaX = nextResizeInfo.deltaX, deltaY = nextResizeInfo.deltaY;
     var width = nextResizeInfo.width, height = nextResizeInfo.height, PCTResizeInfo = nextResizeInfo.PCTResizeInfo;
@@ -70,6 +101,14 @@ export var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, fre
         }
         return nextResizeInfo;
     }
+    if (rotate % (2 * Math.PI) !== 0 &&
+        controlX !== undefined &&
+        controlY !== undefined) {
+        // 角度rotate不为0，则触发另外的计算修正resize的deltaX和deltaY
+        // 因为rotate不为0的时候，左上角的坐标一直在变化
+        // 角度rotate不为0得到的resizeInfo.deltaX仅仅代表中心点的变化，而不是宽度的变化
+        return recalcRotatedResizeInfo(pct, nextResizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight);
+    }
     // 如果限制了宽/高不变，对应的 width/height 保持一致
     switch (index) {
         case ResizeControlIndex.LEFT_TOP:
@@ -140,17 +179,10 @@ export var triggerResizeEvent = function (preNodeData, curNodeData, deltaX, delt
         model: nodeModel,
     });
 };
-// TODO：确认 handleResize 函数的类型定义
-// export type IHandleResizeParams = {
-//   deltaX: number
-//   deltaY: number
-//   index: ResizeControlIndex
-//   nodeModel: BaseNodeModel
-//   graphModel: GraphModel
-//   cancelCallback?: () => void
-// }
 /**
  * 处理节点的 resize 事件，提出来放到 utils 中，方便在外面（extension）中使用
+ * @param x
+ * @param y
  * @param deltaX
  * @param deltaY
  * @param index
@@ -159,11 +191,11 @@ export var triggerResizeEvent = function (preNodeData, curNodeData, deltaX, delt
  * @param cancelCallback
  */
 export var handleResize = function (_a) {
-    var 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;
     var r = nodeModel.r, // circle
     rx = nodeModel.rx, // ellipse/diamond
     ry = nodeModel.ry, width = nodeModel.width, // rect/html
-    height = nodeModel.height, PCTResizeInfo = nodeModel.PCTResizeInfo, minWidth = nodeModel.minWidth, minHeight = nodeModel.minHeight, maxWidth = nodeModel.maxWidth, maxHeight = nodeModel.maxHeight;
+    height = nodeModel.height, PCTResizeInfo = nodeModel.PCTResizeInfo, minWidth = nodeModel.minWidth, minHeight = nodeModel.minHeight, maxWidth = nodeModel.maxWidth, maxHeight = nodeModel.maxHeight, rotate = nodeModel.rotate, oldCenterX = nodeModel.x, oldCenterY = nodeModel.y;
     var isFreezeWidth = minWidth === maxWidth;
     var isFreezeHeight = minHeight === maxHeight;
     var resizeInfo = {
@@ -174,7 +206,9 @@ export var handleResize = function (_a) {
         PCTResizeInfo: PCTResizeInfo,
     };
     var pct = r || (rx && ry) ? 1 / 2 : 1;
-    var nextSize = recalcResizeInfo(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight);
+    var controlX = x;
+    var controlY = y;
+    var nextSize = recalcResizeInfo(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY);
     // 限制放大缩小的最大最小范围
     if (nextSize.width < minWidth ||
         nextSize.width > maxWidth ||
@@ -184,13 +218,102 @@ export var handleResize = function (_a) {
         cancelCallback === null || cancelCallback === void 0 ? void 0 : cancelCallback();
         return;
     }
-    // 如果限制了宽高不变，对应的 x/y 不产生位移
-    nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX;
-    nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY;
+    if (rotate % (2 * Math.PI) == 0 ||
+        PCTResizeInfo ||
+        controlX === undefined ||
+        controlY === undefined) {
+        // rotate!==0并且不是PCTResizeInfo时，即使是isFreezeWidth||isFreezeHeight
+        // recalcRotatedResizeInfo()计算出来的中心点会发生变化
+        // 如果限制了宽高不变，对应的 x/y 不产生位移
+        nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX;
+        nextSize.deltaY = isFreezeHeight ? 0 : nextSize.deltaY;
+    }
     var preNodeData = nodeModel.getData();
     var curNodeData = nodeModel.resize(nextSize);
+    // 检测preNodeData和curNodeData是否没变化
+    if (preNodeData.x === curNodeData.x && preNodeData.y === curNodeData.y) {
+        // 中心点x和y都没有变化，说明无法resize，阻止下面边的更新以及resize事件的emit
+        return;
+    }
     // 更新边
     updateEdgePointByAnchors(nodeModel, graphModel);
     // 触发 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

@@ -30,6 +30,7 @@ export declare class ResizeControl extends Component<IResizeControlProps, IResiz
     readonly graphModel: GraphModel;
     readonly dragHandler: StepDrag;
     constructor(props: IResizeControlProps);
+    componentWillUnmount(): void;
     updateEdgePointByAnchors: () => void;
     triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeData: ResizeNodeData, deltaX: any, deltaY: any, index: any, nodeModel: BaseNodeModel) => void;
     /**

package/es/view/Control.js

@@ -210,9 +210,11 @@ var ResizeControl = /** @class */ (function (_super) {
         _this.resizeNode = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var index = _this.index;
-            var _b = _this.props, model = _b.model, graphModel = _b.graphModel;
+            var _b = _this.props, model = _b.model, graphModel = _b.graphModel, x = _b.x, y = _b.y;
             // DONE: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
             handleResize({
+                x: x,
+                y: y,
                 deltaX: deltaX,
                 deltaY: deltaY,
                 index: index,
@@ -313,6 +315,9 @@ var ResizeControl = /** @class */ (function (_super) {
         });
         return _this;
     }
+    ResizeControl.prototype.componentWillUnmount = function () {
+        this.dragHandler.cancelDrag();
+    };
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;
         var _b = model.getResizeControlStyle(), width = _b.width, height = _b.height, restStyle = __rest(_b, ["width", "height"]);

package/lib/algorithm/rotate.d.ts

@@ -0,0 +1,31 @@
+export interface SimplePoint {
+    x: number;
+    y: number;
+}
+/**
+ * 根据两个点获取中心点坐标
+ */
+export declare function getNewCenter(startPoint: SimplePoint, endPoint: SimplePoint): {
+    x: number;
+    y: number;
+};
+/**
+ * 旋转矩阵公式，可以获取某一个坐标旋转angle后的坐标
+ * @param p 当前坐标
+ * @param center 旋转中心
+ * @param angle 旋转角度（不是弧度）
+ */
+export declare function calculatePointAfterRotateAngle(p: SimplePoint, center: SimplePoint, angle: number): {
+    x: number;
+    y: number;
+};
+/**
+ * 角度转弧度
+ * @param angle 角度
+ */
+export declare function angleToRadian(angle: number): number;
+/**
+ * 弧度转角度
+ * @param radian 弧度
+ */
+export declare function radianToAngle(radian: number): number;

package/lib/algorithm/rotate.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radianToAngle = exports.angleToRadian = exports.calculatePointAfterRotateAngle = exports.getNewCenter = void 0;
+/**
+ * 根据两个点获取中心点坐标
+ */
+function getNewCenter(startPoint, endPoint) {
+    var x1 = startPoint.x, y1 = startPoint.y;
+    var x2 = endPoint.x, y2 = endPoint.y;
+    var newCenter = {
+        x: x1 + (x2 - x1) / 2,
+        y: y1 + (y2 - y1) / 2,
+    };
+    return newCenter;
+}
+exports.getNewCenter = getNewCenter;
+/**
+ * 旋转矩阵公式，可以获取某一个坐标旋转angle后的坐标
+ * @param p 当前坐标
+ * @param center 旋转中心
+ * @param angle 旋转角度（不是弧度）
+ */
+function calculatePointAfterRotateAngle(p, center, angle) {
+    var radian = angleToRadian(angle);
+    var dx = p.x - center.x;
+    var dy = p.y - center.y;
+    var x = dx * Math.cos(radian) - dy * Math.sin(radian) + center.x;
+    var y = dx * Math.sin(radian) + dy * Math.cos(radian) + center.y;
+    return {
+        x: x,
+        y: y,
+    };
+}
+exports.calculatePointAfterRotateAngle = calculatePointAfterRotateAngle;
+/**
+ * 角度转弧度
+ * @param angle 角度
+ */
+function angleToRadian(angle) {
+    return (angle * Math.PI) / 180;
+}
+exports.angleToRadian = angleToRadian;
+/**
+ * 弧度转角度
+ * @param radian 弧度
+ */
+function radianToAngle(radian) {
+    return (radian / Math.PI) * 180;
+}
+exports.radianToAngle = radianToAngle;