@logicflow/core 2.0.5 → 2.0.6

package/lib/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/lib/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/lib/model/GraphModel.js

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

package/lib/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/lib/model/node/BaseNodeModel.js

@@ -98,6 +98,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;
@@ -243,7 +244,7 @@ var BaseNodeModel = /** @class */ (function () {
                     textConfig.draggable = text.draggable;
                 }
                 if (!(0, lodash_es_1.isUndefined)(text.editable)) {
-                    textConfig.draggable = text.draggable;
+                    textConfig.editable = text.editable;
                 }
             }
         }
@@ -255,6 +256,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;
@@ -277,6 +282,18 @@ var BaseNodeModel = /** @class */ (function () {
         if ((0, mobx_1.isObservable)(properties)) {
             properties = (0, mobx_1.toJS)(properties);
         }
+        if ((0, lodash_es_1.isNil)(properties.width)) {
+            // resize()的时候会触发this.setProperties({width,height})
+            // 然后返回getData()，可以从properties拿到width
+            // 但是初始化如果没有在properties传入width，那么getData()就一直无法从properties拿到width
+            properties.width = this.width;
+        }
+        if ((0, lodash_es_1.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,
@@ -609,6 +626,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) {
@@ -652,6 +673,35 @@ var BaseNodeModel = /** @class */ (function () {
     BaseNodeModel.prototype.updateText = function (value) {
         this.text = __assign(__assign({}, (0, mobx_1.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;
@@ -842,6 +892,9 @@ var BaseNodeModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], BaseNodeModel.prototype, "updateText", null);
+    __decorate([
+        mobx_1.action
+    ], BaseNodeModel.prototype, "addNodeResizeRules", null);
     __decorate([
         mobx_1.action
     ], BaseNodeModel.prototype, "setSelected", null);

package/lib/util/graph.d.ts

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

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

@@ -1,9 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleResize = exports.triggerResizeEvent = exports.updateEdgePointByAnchors = exports.recalcResizeInfo = void 0;
+exports.calculateWidthAndHeight = exports.handleResize = exports.triggerResizeEvent = exports.updateEdgePointByAnchors = exports.recalcResizeInfo = 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 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 = (0, rotate_1.radianToAngle)(rotate);
+    // 右下角的control
+    var startZeroTouchControlPoint = {
+        x: controlX, // control锚点的坐标x
+        y: controlY, // control锚点的坐标y
+    };
+    var oldCenter = { x: oldCenterX, y: oldCenterY };
+    // 右下角的control坐标（transform后的-touchStartPoint）
+    var startRotatedTouchControlPoint = (0, rotate_1.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
@@ -12,10 +42,11 @@ var constant_1 = require("../constant");
  * @param freezeWidth
  * @param freezeHeight
  */
-var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight) {
+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 = (0, lodash_es_1.cloneDeep)(resizeInfo);
     var deltaX = nextResizeInfo.deltaX, deltaY = nextResizeInfo.deltaY;
     var width = nextResizeInfo.width, height = nextResizeInfo.height, PCTResizeInfo = nextResizeInfo.PCTResizeInfo;
@@ -73,6 +104,14 @@ var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeig
         }
         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 Control_1.ResizeControlIndex.LEFT_TOP:
@@ -146,17 +185,10 @@ var triggerResizeEvent = function (preNodeData, curNodeData, deltaX, deltaY, ind
     });
 };
 exports.triggerResizeEvent = triggerResizeEvent;
-// 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
@@ -165,11 +197,11 @@ exports.triggerResizeEvent = triggerResizeEvent;
  * @param cancelCallback
  */
 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 = {
@@ -180,7 +212,9 @@ var handleResize = function (_a) {
         PCTResizeInfo: PCTResizeInfo,
     };
     var pct = r || (rx && ry) ? 1 / 2 : 1;
-    var nextSize = (0, exports.recalcResizeInfo)(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight);
+    var controlX = x;
+    var controlY = y;
+    var nextSize = (0, exports.recalcResizeInfo)(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY);
     // 限制放大缩小的最大最小范围
     if (nextSize.width < minWidth ||
         nextSize.width > maxWidth ||
@@ -190,14 +224,104 @@ 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;
+    }
     // 更新边
     (0, exports.updateEdgePointByAnchors)(nodeModel, graphModel);
     // 触发 resize 事件
     (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

@@ -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/lib/view/Control.js

@@ -213,9 +213,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 函数，用来各节点缩放的方法
             (0, util_1.handleResize)({
+                x: x,
+                y: y,
                 deltaX: deltaX,
                 deltaY: deltaY,
                 index: index,
@@ -316,6 +318,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/package.json

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

package/src/model/BaseModel.ts

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

package/src/model/GraphModel.ts

@@ -81,10 +81,15 @@ export class GraphModel {
 
   /**
    * 节点移动规则判断
-   * 在节点移动的时候，会出发此数组中的所有规则判断
+   * 在节点移动的时候，会触发此数组中的所有规则判断
    */
-
   nodeMoveRules: Model.NodeMoveRule[] = []
+  /**
+   * 节点resize规则判断
+   * 在节点resize的时候，会触发此数组中的所有规则判断
+   */
+  nodeResizeRules: Model.NodeResizeRule[] = []
+
   /**
    * 获取自定义连线轨迹
    */
@@ -1230,6 +1235,12 @@ export class GraphModel {
     }
   }
 
+  addNodeResizeRules(fn: Model.NodeResizeRule) {
+    if (!this.nodeResizeRules.includes(fn)) {
+      this.nodeResizeRules.push(fn)
+    }
+  }
+
   /**
    * 设置默认的边类型
    * 也就是设置在节点直接有用户手动绘制的连线类型。

package/src/model/node/BaseNodeModel.ts

@@ -148,6 +148,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
   targetRules: Model.ConnectRule[] = []
   sourceRules: Model.ConnectRule[] = []
   moveRules: Model.NodeMoveRule[] = [] // 节点移动之前的hook
+  resizeRules: Model.NodeResizeRule[] = [] // 节点resize之前的hook
   hasSetTargetRules = false // 用来限制rules的重复值
   hasSetSourceRules = false; // 用来限制rules的重复值
   [propName: string]: any // 支持用户自定义属性
@@ -281,6 +282,13 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    */
   resize(resizeInfo: ResizeInfo): ResizeNodeData {
     const { width, height, deltaX, deltaY } = resizeInfo
+
+    const isAllowResize = this.isAllowResizeNode(deltaX, deltaY, width, height)
+
+    if (!isAllowResize) {
+      return this.getData()
+    }
+
     // 移动节点以及文本内容
     this.move(deltaX / 2, deltaY / 2)
 
@@ -761,6 +769,30 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     }
   }
 
+  @action addNodeResizeRules(fn: Model.NodeResizeRule) {
+    if (!this.resizeRules.includes(fn)) {
+      this.resizeRules.push(fn)
+    }
+  }
+
+  /**
+   * 内部方法
+   * 是否允许resize节点到新的位置
+   */
+  isAllowResizeNode(
+    deltaX: number,
+    deltaY: number,
+    width: number,
+    height: number,
+  ): boolean {
+    const rules = this.resizeRules.concat(this.graphModel.nodeResizeRules)
+    for (const rule of rules) {
+      const r = rule(this, deltaX, deltaY, width, height)
+      if (!r) return false
+    }
+    return true
+  }
+
   @action setSelected(flag = true): void {
     this.isSelected = flag
   }

package/src/util/resize.ts

@@ -386,6 +386,12 @@ export const handleResize = ({
   const preNodeData = nodeModel.getData()
   const 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 事件
@@ -417,7 +423,7 @@ export function calculateWidthAndHeight(
     y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
   }
   // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
-  let newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint)
+  const newCenter = getNewCenter(freezePoint, endRotatedTouchControlPoint)
 
   // 得到【touchEndPoint】右下角-没有transform的坐标
   let endZeroTouchControlPoint: SimplePoint = calculatePointAfterRotateAngle(