@logicflow/extension 1.1.29 → 1.1.30

package/cjs/NodeResize/Control/Control.js

@@ -59,8 +59,64 @@ var Control = /** @class */ (function (_super) {
         };
         // 计算control拖动后，节点的宽高
         _this.getResize = function (_a) {
-            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
-            var resize = { width: width, height: height };
+            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, PCTResizeInfo = _a.PCTResizeInfo, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
+            var resize = { width: width, height: height, deltaX: deltaX, deltaY: deltaY };
+            if (PCTResizeInfo) {
+                var sensitivity = 4; // 越低越灵敏
+                var deltaScale = 0;
+                var combineDleta = 0;
+                switch (index) {
+                    case 0:
+                        combineDleta = (deltaX * -1 - deltaY) / sensitivity;
+                        break;
+                    case 1:
+                        combineDleta = (deltaX - deltaY) / sensitivity;
+                        break;
+                    case 2:
+                        combineDleta = (deltaX + deltaY) / sensitivity;
+                        break;
+                    case 3:
+                        combineDleta = (deltaX * -1 + deltaY) / sensitivity;
+                        break;
+                    default:
+                        break;
+                }
+                if (combineDleta !== 0) {
+                    deltaScale = Math.round((combineDleta / PCTResizeInfo.ResizeBasis.basisHeight)
+                        * 100000) / 1000;
+                }
+                PCTResizeInfo.ResizePCT.widthPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.widthPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                PCTResizeInfo.ResizePCT.hightPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.hightPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                var spcWidth = Math.round((PCTResizeInfo.ResizePCT.widthPCT
+                    * PCTResizeInfo.ResizeBasis.basisWidth) / 100);
+                var spcHeight = Math.round((PCTResizeInfo.ResizePCT.hightPCT
+                    * PCTResizeInfo.ResizeBasis.basisHeight) / 100);
+                switch (index) {
+                    case 0:
+                        deltaX = width - spcWidth;
+                        deltaY = height - spcHeight;
+                        break;
+                    case 1:
+                        deltaX = spcWidth - width;
+                        deltaY = height - spcHeight;
+                        break;
+                    case 2:
+                        deltaX = spcWidth - width;
+                        deltaY = spcHeight - height;
+                        break;
+                    case 3:
+                        deltaX = width - spcWidth;
+                        deltaY = spcHeight - height;
+                        break;
+                    default:
+                        break;
+                }
+                resize.width = spcWidth;
+                resize.height = spcHeight;
+                resize.deltaX = deltaX / pct;
+                resize.deltaY = deltaY / pct;
+                return resize;
+            }
             switch (index) {
                 case 0:
                     resize.width = width - deltaX * pct;
@@ -71,7 +127,7 @@ var Control = /** @class */ (function (_super) {
                     resize.height = height - deltaY * pct;
                     break;
                 case 2:
-                    resize.width = width + deltaX;
+                    resize.width = width + deltaX * pct;
                     resize.height = height + deltaY * pct;
                     break;
                 case 3:
@@ -86,7 +142,7 @@ var Control = /** @class */ (function (_super) {
         // 矩形更新
         _this.updateRect = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, x = _b.x, y = _b.y, width = _b.width, height = _b.height, radius = _b.radius;
+            var _b = _this.nodeModel, id = _b.id, x = _b.x, y = _b.y, width = _b.width, height = _b.height, radius = _b.radius, PCTResizeInfo = _b.PCTResizeInfo;
             // 更新中心点位置，更新文案位置
             var index = _this.index;
             var size = _this.getResize({
@@ -95,6 +151,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
             });
             // 限制放大缩小的最大最小范围
@@ -107,7 +164,7 @@ var Control = /** @class */ (function (_super) {
                 _this.dragHandler.cancelDrag();
                 return;
             }
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新宽高
             _this.nodeModel.width = size.width;
             _this.nodeModel.height = size.height;
@@ -154,7 +211,7 @@ var Control = /** @class */ (function (_super) {
         // 椭圆更新
         _this.updateEllipse = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y;
+            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
             var width = rx;
             var height = ry;
@@ -164,6 +221,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -176,12 +234,12 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -218,7 +276,7 @@ var Control = /** @class */ (function (_super) {
         // 菱形更新
         _this.updateDiamond = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y;
+            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
             var width = rx;
             var height = ry;
@@ -228,6 +286,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -240,12 +299,12 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,

package/cjs/NodeResize/Node/DiamondResize.js

@@ -72,6 +72,22 @@ var DiamondResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    DiamondResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.rx, basisHeight: this.ry };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / (this.rx * 2)) * 100, (this.maxHeight / (this.ry * 2)) * 100),
+                minScaleLimit: Math.max((this.minWidth / (this.rx * 2)) * 100, (this.minHeight / (this.ry * 2)) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return DiamondResizeModel;
 }(core_1.DiamondNodeModel));
 var DiamondResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/EllipseResize.js

@@ -59,6 +59,22 @@ var EllipseResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    EllipseResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.rx, basisHeight: this.ry };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / (this.rx * 2)) * 100, (this.maxHeight / (this.ry * 2)) * 100),
+                minScaleLimit: Math.max((this.minWidth / (this.rx * 2)) * 100, (this.minHeight / (this.ry * 2)) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return EllipseResizeModel;
 }(core_1.EllipseNodeModel));
 var EllipseResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/HtmlResize.js

@@ -59,6 +59,22 @@ var HtmlResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    HtmlResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.width, basisHeight: this.height };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / this.width) * 100, (this.maxHeight / this.height) * 100),
+                minScaleLimit: Math.max((this.minWidth / this.width) * 100, (this.minHeight / this.height) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return HtmlResizeModel;
 }(core_1.HtmlNodeModel));
 var HtmlResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/Node/RectResize.js

@@ -63,6 +63,22 @@ var RectResizeModel = /** @class */ (function (_super) {
     RectResizeModel.prototype.resize = function (deltaX, deltaY) {
         console.log(deltaX, deltaY);
     };
+    // 该方法需要在重设宽高和最大、最小限制后被调用，不建议在 initNodeData() 方法中使用
+    RectResizeModel.prototype.enableProportionResize = function (turnOn) {
+        if (turnOn === void 0) { turnOn = true; }
+        if (turnOn) {
+            var ResizePCT = { widthPCT: 100, hightPCT: 100 };
+            var ResizeBasis = { basisWidth: this.width, basisHeight: this.height };
+            var ScaleLimit = {
+                maxScaleLimit: Math.min((this.maxWidth / this.width) * 100, (this.maxHeight / this.height) * 100),
+                minScaleLimit: Math.max((this.minWidth / this.width) * 100, (this.minHeight / this.height) * 100),
+            };
+            this.PCTResizeInfo = { ResizePCT: ResizePCT, ResizeBasis: ResizeBasis, ScaleLimit: ScaleLimit };
+        }
+        else {
+            delete this.PCTResizeInfo;
+        }
+    };
     return RectResizeModel;
 }(core_1.RectNodeModel));
 var RectResizeView = /** @class */ (function (_super) {

package/cjs/materials/group/GroupNode.js

@@ -48,6 +48,7 @@ var core_1 = require("@logicflow/core");
 var NodeResize_1 = require("../../NodeResize");
 var defaultWidth = 500;
 var defaultHeight = 300;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
@@ -70,8 +71,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.height = defaultHeight;
         this.foldedWidth = 80;
         this.foldedHeight = 60;
-        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
-        this.zIndex = -1;
+        this.zIndex = DEFAULT_BOTTOM_Z_INDEX;
         this.radius = 0;
         this.text.editable = false;
         this.text.draggable = false;
@@ -276,6 +276,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.getHistoryData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        data.isGroup = true;
         var properties = data.properties;
         delete properties.groupAddable;
         if (properties.isFolded) { // 如果分组被折叠
@@ -290,6 +291,12 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.isAllowAppendIn = function (nodeData) {
         return true;
     };
+    /**
+     * 当groupA被添加到groupB中时，将groupB及groupB所属的group的zIndex减1
+     */
+    GroupNodeModel.prototype.toBack = function () {
+        this.zIndex--;
+    };
     return GroupNodeModel;
 }(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
@@ -301,7 +308,7 @@ var GroupNode = /** @class */ (function (_super) {
         var _a = this.props.model, resizable = _a.resizable, properties = _a.properties;
         return resizable && !properties.isFolded ? _super.prototype.getControlGroup.call(this) : null;
     };
-    GroupNode.prototype.getAddedableShape = function () {
+    GroupNode.prototype.getAddableShape = function () {
         var _a = this.props.model, width = _a.width, height = _a.height, x = _a.x, y = _a.y, radius = _a.radius, properties = _a.properties;
         if (!properties.groupAddable)
             return null;
@@ -347,7 +354,7 @@ var GroupNode = /** @class */ (function (_super) {
     };
     GroupNode.prototype.getResizeShape = function () {
         return core_1.h('g', {}, [
-            this.getAddedableShape(),
+            this.getAddableShape(),
             _super.prototype.getResizeShape.call(this),
             this.getFoldIcon(),
         ]);

package/cjs/materials/group/index.js

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupNode = exports.Group = void 0;
 var GroupNode_1 = require("./GroupNode");
 exports.GroupNode = GroupNode_1.default;
+var DEFAULT_TOP_Z_INDEX = -1000;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
+        this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         this.nodeGroupMap = new Map();
         this.graphRendered = function (data) {
             // 如果节点
@@ -31,8 +34,9 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            var group = _this.getGroup(bounds);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            var bounds = nodeModel.getBounds();
+            var group = _this.getGroup(bounds, data);
             if (!group)
                 return;
             var isAllowAppendIn = group.isAllowAppendIn(data);
@@ -43,20 +47,26 @@ var Group = /** @class */ (function () {
                 });
                 return;
             }
-            if (data.id !== group.id) {
-                group.addChild(data.id);
-                _this.nodeGroupMap.set(data.id, group.id);
-                group.setAllowAppendChild(false);
-            }
-            else if (data.children && data.children.length > 0) {
-                // 表示当前添加的节点是一个新增的group
+            group.addChild(data.id);
+            _this.nodeGroupMap.set(data.id, group.id);
+            group.setAllowAppendChild(false);
+            // 如果这个节点是分组，那么将其子节点也记录下来
+            if (nodeModel.isGroup) {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
+                _this.nodeSelected({ data: data });
             }
         };
         this.deleteGroupChild = function (_a) {
             var data = _a.data;
+            // 如果删除的是分组节点，则同时删除分组的子节点
+            if (data.children) {
+                data.children.forEach(function (nodeId) {
+                    _this.nodeGroupMap.delete(nodeId);
+                    _this.lf.deleteNode(nodeId);
+                });
+            }
             var groupId = _this.nodeGroupMap.get(data.id);
             if (groupId) {
                 var group = _this.lf.getNodeModelById(groupId);
@@ -68,7 +78,7 @@ var Group = /** @class */ (function () {
             var data = _a.data;
             var nodeModel = _this.lf.getNodeModelById(data.id);
             var bounds = nodeModel.getBounds();
-            var newGroup = _this.getGroup(bounds);
+            var newGroup = _this.getGroup(bounds, data);
             if (_this.activeGroup) {
                 _this.activeGroup.setAllowAppendChild(false);
             }
@@ -81,6 +91,46 @@ var Group = /** @class */ (function () {
             _this.activeGroup = newGroup;
             _this.activeGroup.setAllowAppendChild(true);
         };
+        /**
+         * 1. 分组节点默认在普通节点下面。
+         * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
+         * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
+         * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
+         */
+        this.nodeSelected = function (_a) {
+            var data = _a.data;
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            _this.toFrontGroup(nodeModel);
+            // 重置所有的group zIndex,防止group节点zIndex增长为正。
+            if (_this.topGroupZIndex > DEFAULT_TOP_Z_INDEX) {
+                _this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
+                var allGroups = _this.lf.graphModel.nodes
+                    .filter(function (node) { return node.isGroup; })
+                    .sort(function (a, b) { return a.zIndex - b.zIndex; });
+                var preZIndex = 0;
+                for (var i = 0; i < allGroups.length; i++) {
+                    var group = allGroups[i];
+                    if (group.zIndex !== preZIndex) {
+                        _this.topGroupZIndex++;
+                        preZIndex = group.zIndex;
+                    }
+                    group.setZIndex(_this.topGroupZIndex);
+                }
+            }
+        };
+        this.toFrontGroup = function (model) {
+            if (!model || !model.isGroup) {
+                return;
+            }
+            _this.topGroupZIndex++;
+            model.setZIndex(_this.topGroupZIndex);
+            if (model.children) {
+                model.children.forEach(function (nodeId) {
+                    var node = _this.lf.getNodeModelById(nodeId);
+                    _this.toFrontGroup(node);
+                });
+            }
+        };
         lf.register(GroupNode_1.default);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
@@ -103,11 +153,10 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGroup);
+        lf.on('node:add,node:drop', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
-        lf.on('node:drop', this.appendNodeToGroup);
-        lf.on('node:dnd-drag', this.setActiveGroup);
-        lf.on('node:drag', this.setActiveGroup);
+        lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
+        lf.on('node:click', this.nodeSelected);
         lf.on('graph:rendered', this.graphRendered);
     }
     /**
@@ -129,15 +178,22 @@ var Group = /** @class */ (function () {
     };
     /**
      * 获取自定位置其所属分组
+     * 当分组重合时，优先返回最上层的分组
      */
-    Group.prototype.getGroup = function (bounds) {
+    Group.prototype.getGroup = function (bounds, nodeData) {
         var nodes = this.lf.graphModel.nodes;
-        for (var i = 0; i < nodes.length; i++) {
-            var model = nodes[i];
-            if (model.isGroup && model.isInRange(bounds)) {
-                return model;
+        var groups = nodes.filter(function (node) { return node.isGroup && node.isInRange(bounds) && node.id !== nodeData.id; });
+        if (groups.length === 0)
+            return;
+        if (groups.length === 1)
+            return groups[0];
+        var topGroup = groups[groups.length - 1];
+        for (var i = groups.length - 2; i >= 0; i--) {
+            if (groups[i].zIndex > topGroup.zIndex) {
+                topGroup = groups[i];
             }
         }
+        return topGroup;
     };
     /**
      * 获取某个节点所属的groupModel

package/es/NodeResize/Control/Control.d.ts

@@ -22,16 +22,19 @@ declare class Control extends Component<IProps> {
         deltaX: any;
         deltaY: any;
     }) => void;
-    getResize: ({ index, deltaX, deltaY, width, height, pct }: {
+    getResize: ({ index, deltaX, deltaY, width, height, PCTResizeInfo, pct }: {
         index: any;
         deltaX: any;
         deltaY: any;
         width: any;
         height: any;
+        PCTResizeInfo: any;
         pct?: number;
     }) => {
         width: any;
         height: any;
+        deltaX: any;
+        deltaY: any;
     };
     updateRect: ({ deltaX, deltaY }: {
         deltaX: any;

package/es/NodeResize/Control/Control.js

@@ -57,8 +57,64 @@ var Control = /** @class */ (function (_super) {
         };
         // 计算control拖动后，节点的宽高
         _this.getResize = function (_a) {
-            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
-            var resize = { width: width, height: height };
+            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, PCTResizeInfo = _a.PCTResizeInfo, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
+            var resize = { width: width, height: height, deltaX: deltaX, deltaY: deltaY };
+            if (PCTResizeInfo) {
+                var sensitivity = 4; // 越低越灵敏
+                var deltaScale = 0;
+                var combineDleta = 0;
+                switch (index) {
+                    case 0:
+                        combineDleta = (deltaX * -1 - deltaY) / sensitivity;
+                        break;
+                    case 1:
+                        combineDleta = (deltaX - deltaY) / sensitivity;
+                        break;
+                    case 2:
+                        combineDleta = (deltaX + deltaY) / sensitivity;
+                        break;
+                    case 3:
+                        combineDleta = (deltaX * -1 + deltaY) / sensitivity;
+                        break;
+                    default:
+                        break;
+                }
+                if (combineDleta !== 0) {
+                    deltaScale = Math.round((combineDleta / PCTResizeInfo.ResizeBasis.basisHeight)
+                        * 100000) / 1000;
+                }
+                PCTResizeInfo.ResizePCT.widthPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.widthPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                PCTResizeInfo.ResizePCT.hightPCT = Math.max(Math.min(PCTResizeInfo.ResizePCT.hightPCT + deltaScale, PCTResizeInfo.ScaleLimit.maxScaleLimit), PCTResizeInfo.ScaleLimit.minScaleLimit);
+                var spcWidth = Math.round((PCTResizeInfo.ResizePCT.widthPCT
+                    * PCTResizeInfo.ResizeBasis.basisWidth) / 100);
+                var spcHeight = Math.round((PCTResizeInfo.ResizePCT.hightPCT
+                    * PCTResizeInfo.ResizeBasis.basisHeight) / 100);
+                switch (index) {
+                    case 0:
+                        deltaX = width - spcWidth;
+                        deltaY = height - spcHeight;
+                        break;
+                    case 1:
+                        deltaX = spcWidth - width;
+                        deltaY = height - spcHeight;
+                        break;
+                    case 2:
+                        deltaX = spcWidth - width;
+                        deltaY = spcHeight - height;
+                        break;
+                    case 3:
+                        deltaX = width - spcWidth;
+                        deltaY = spcHeight - height;
+                        break;
+                    default:
+                        break;
+                }
+                resize.width = spcWidth;
+                resize.height = spcHeight;
+                resize.deltaX = deltaX / pct;
+                resize.deltaY = deltaY / pct;
+                return resize;
+            }
             switch (index) {
                 case 0:
                     resize.width = width - deltaX * pct;
@@ -69,7 +125,7 @@ var Control = /** @class */ (function (_super) {
                     resize.height = height - deltaY * pct;
                     break;
                 case 2:
-                    resize.width = width + deltaX;
+                    resize.width = width + deltaX * pct;
                     resize.height = height + deltaY * pct;
                     break;
                 case 3:
@@ -84,7 +140,7 @@ var Control = /** @class */ (function (_super) {
         // 矩形更新
         _this.updateRect = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, x = _b.x, y = _b.y, width = _b.width, height = _b.height, radius = _b.radius;
+            var _b = _this.nodeModel, id = _b.id, x = _b.x, y = _b.y, width = _b.width, height = _b.height, radius = _b.radius, PCTResizeInfo = _b.PCTResizeInfo;
             // 更新中心点位置，更新文案位置
             var index = _this.index;
             var size = _this.getResize({
@@ -93,6 +149,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
             });
             // 限制放大缩小的最大最小范围
@@ -105,7 +162,7 @@ var Control = /** @class */ (function (_super) {
                 _this.dragHandler.cancelDrag();
                 return;
             }
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新宽高
             _this.nodeModel.width = size.width;
             _this.nodeModel.height = size.height;
@@ -152,7 +209,7 @@ var Control = /** @class */ (function (_super) {
         // 椭圆更新
         _this.updateEllipse = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y;
+            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
             var width = rx;
             var height = ry;
@@ -162,6 +219,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -174,12 +232,12 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -216,7 +274,7 @@ var Control = /** @class */ (function (_super) {
         // 菱形更新
         _this.updateDiamond = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y;
+            var _b = _this.nodeModel, id = _b.id, rx = _b.rx, ry = _b.ry, x = _b.x, y = _b.y, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
             var width = rx;
             var height = ry;
@@ -226,6 +284,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -238,12 +297,12 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
+            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,