@logicflow/extension 1.2.0-next.1 → 1.2.0-next.3

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;
@@ -79,8 +79,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.resizable = false;
         this.autoToFront = false;
         this.foldable = false;
-        // 是否可以被嵌套
-        this.nestable = false;
         if (this.properties.isFolded === undefined) {
             this.properties.isFolded = false;
         }
@@ -104,59 +102,41 @@ var GroupNodeModel = /** @class */ (function (_super) {
      * 3. 处理连线
      */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
+        var _this = this;
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
         // step 1
-        this.foldRect(isFolded);
-        // step 2
-        var allEdges = this.foldChildren(isFolded);
-        // step 3
-        this.foldEdge(isFolded, allEdges);
-    };
-    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
-        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
-        style.stroke = 'transparent';
-        style.fill = 'transparent';
-        style.hover.fill = 'transparent';
-        style.hover.stroke = 'transparent';
-        return style;
-    };
-    GroupNodeModel.prototype.foldRect = function (isFolded) {
         if (isFolded) {
+            this.x = this.x - this.width / 2 + this.foldedWidth / 2;
+            this.y = this.y - this.height / 2 + this.foldedHeight / 2;
             this.unfoldedWidth = this.width;
             this.unfoldedHight = this.height;
-            this.updateAttributes({
-                x: this.x - this.width / 2 + this.foldedWidth / 2,
-                y: this.y - this.height / 2 + this.foldedHeight / 2,
-                width: this.foldedWidth,
-                height: this.foldedHeight,
-            });
+            this.width = this.foldedWidth;
+            this.height = this.foldedHeight;
         }
         else {
-            this.updateAttributes({
-                width: this.unfoldedWidth,
-                height: this.unfoldedHight,
-                x: this.x + this.unfoldedWidth / 2 - this.foldedWidth / 2,
-                y: this.y + this.unfoldedHight / 2 - this.foldedHeight / 2,
-            });
+            this.width = this.unfoldedWidth;
+            this.height = this.unfoldedHight;
+            this.x = this.x + this.width / 2 - this.foldedWidth / 2;
+            this.y = this.y + this.height / 2 - this.foldedHeight / 2;
         }
-    };
-    GroupNodeModel.prototype.foldChildren = function (isFolded) {
-        var _this = this;
+        // step 2
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
-            if (nodeModel.isGroup) {
-                var childEdges = nodeModel.foldChildren(isFolded || nodeModel.isFolded);
-                allEdges = allEdges.concat(childEdges);
-                nodeModel.foldEdge(isFolded, childEdges);
-            }
+            nodeModel.visible = !isFolded;
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
-            nodeModel.updateAttributes({
-                visible: !isFolded,
-            });
         });
-        return allEdges;
+        // step 3
+        this.foldEdge(isFolded, allEdges);
+    };
+    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
+        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
+        style.stroke = 'transparent';
+        style.fill = 'transparent';
+        style.hover.fill = 'transparent';
+        style.hover.stroke = 'transparent';
+        return style;
     };
     /**
      * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
@@ -216,9 +196,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
                 if (targetNodeIdGroup.id !== _this.id || sourceNodeIdGroup.id !== _this.id) {
                     _this.createVirtualEdge(data);
                 }
-                edgeModel.updateAttributes({
-                    visible: false,
-                });
+                edgeModel.visible = false;
             }
             // 展开时，处理被隐藏的边的逻辑
             if (!isFolded && edgeModel.visible === false) {
@@ -234,9 +212,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
                     _this.createVirtualEdge(data);
                 }
                 else {
-                    edgeModel.updateAttributes({
-                        visible: true,
-                    });
+                    edgeModel.visible = true;
                 }
             }
         });
@@ -281,19 +257,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
-    /**
-     * 获得包含嵌套组的所有子节点
-     */
-    GroupNodeModel.prototype.getChildren = function () {
-        var _this = this;
-        return __spread(this.children).flatMap(function (child) {
-            var model = _this.graphModel.getElement(child);
-            if (model.isGroup) {
-                return __spread([child], model.getChildren());
-            }
-            return child;
-        });
-    };
     GroupNodeModel.prototype.getAddableOutlineStyle = function () {
         return {
             stroke: '#FEB663',
@@ -313,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) { // 如果分组被折叠
@@ -327,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) {
@@ -338,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.getAddAbleShape = 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;
@@ -384,7 +354,7 @@ var GroupNode = /** @class */ (function (_super) {
     };
     GroupNode.prototype.getResizeShape = function () {
         return core_1.h('g', {}, [
-            this.getAddAbleShape(),
+            this.getAddableShape(),
             _super.prototype.getResizeShape.call(this),
             this.getFoldIcon(),
         ]);

package/cjs/materials/group/index.js

@@ -1,32 +1,15 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
-};
 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) {
             // 如果节点
@@ -51,7 +34,9 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var group = _this.getGroup(_this.lf.getNodeModelById(data.id));
+            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);
@@ -62,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, isSelected: false, isMultiple: false });
             }
         };
         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);
@@ -86,7 +77,8 @@ var Group = /** @class */ (function () {
         this.setActiveGroup = function (_a) {
             var data = _a.data;
             var nodeModel = _this.lf.getNodeModelById(data.id);
-            var newGroup = _this.getGroup(nodeModel);
+            var bounds = nodeModel.getBounds();
+            var newGroup = _this.getGroup(bounds, data);
             if (_this.activeGroup) {
                 _this.activeGroup.setAllowAppendChild(false);
             }
@@ -99,6 +91,65 @@ 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, isMultiple = _a.isMultiple, isSelected = _a.isSelected;
+            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);
+                }
+            }
+            // FIX #1004
+            // 如果节点被多选，
+            // 这个节点是分组，则将分组的所有子节点取消选中
+            // 这个节点是分组的子节点，且其所属分组节点已选，则取消选中
+            if (isMultiple && isSelected) {
+                if (nodeModel.isGroup) {
+                    nodeModel.children.forEach(function (child) {
+                        var childModel = _this.lf.graphModel.getElement(child);
+                        childModel.setSelected(false);
+                    });
+                }
+                else {
+                    var groupId = _this.nodeGroupMap.get(data.id);
+                    if (groupId) {
+                        var groupModel = _this.lf.getNodeModelById(groupId);
+                        groupModel.isSelected && nodeModel.setSelected(false);
+                    }
+                }
+            }
+        };
+        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) {
@@ -108,34 +159,23 @@ var Group = /** @class */ (function () {
                 return true;
             }
             var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
-            var allowMove = true;
-            if (groupModel && groupModel.isRestrict) {
-                // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+            if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
                 var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-                allowMove = groupModel.isAllowMoveTo({
+                var r = groupModel.isAllowMoveTo({
                     x1: x1 + deltaX,
                     y1: y1 + deltaY,
                     x2: x2 + deltaX,
                     y2: y2 + deltaY,
                 });
+                return r;
             }
-            if (model.isGroup) {
-                // 如果移动的是分组，那么分组的子节点也跟着移动。
-                if (allowMove === true) {
-                    lf.graphModel.moveNodes(__spread(model.getChildren()), deltaX, deltaY, true);
-                }
-                else if (typeof allowMove !== 'boolean') {
-                    lf.graphModel.moveNodes(__spread(model.getChildren()), allowMove.x ? deltaX : 0, allowMove.y ? deltaY : 0, true);
-                }
-            }
-            return allowMove;
+            return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGroup);
+        lf.on('node:add,node:drop,node:dnd-add', 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);
     }
     /**
@@ -157,33 +197,22 @@ var Group = /** @class */ (function () {
     };
     /**
      * 获取自定位置其所属分组
+     * 当分组重合时，优先返回最上层的分组
      */
-    Group.prototype.getGroup = function (nodeModel) {
-        if (nodeModel.nestable === false) {
-            return null;
-        }
-        var bounds = nodeModel.getBounds();
+    Group.prototype.getGroup = function (bounds, nodeData) {
         var nodes = this.lf.graphModel.nodes;
-        var selectedModel = null;
-        for (var i = 0; i < nodes.length; i++) {
-            var model = nodes[i];
-            if (model !== nodeModel && model.isGroup && model.isInRange(bounds)) {
-                if (selectedModel) {
-                    if (selectedModel.zIndex > model.zIndex) {
-                        selectedModel = model;
-                    }
-                    else if (selectedModel.zIndex === model.zIndex) {
-                        if (!model.isInRange(selectedModel.getBounds())) {
-                            selectedModel = model;
-                        }
-                    }
-                }
-                else {
-                    selectedModel = 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 selectedModel;
+        return topGroup;
     };
     /**
      * 获取某个节点所属的groupModel

package/cjs/style/index.css

@@ -164,6 +164,16 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACL0lEQVRoQ+1YT2vUQBT/vS+Smc3u0ZtfwA+hUKEttIIVbMEWrGAL3UItqKCCCipooS3Ynu29ePfqLcnO5Nov0NsrWbc0myxtJpNmGZw9LZk37/3+vCTzQnD8R47jhycwbQe9A94BSwV8C1kKaL3dO2AtoWWC/8+BMJB9ItwHcM6MX0mqtm1EzOU7Y8bvJFV9k3zGDnSFPAVw76oIb8ZavzIpehnbE+Ilg/J7/8Za3THJVYfAHwB3x4owXsSpemNSuCs6zwEu7rl9AmEgt4hQspkIa5FS76uQCKV8RoxSLDP6pi1p7EAGsCvEBkA7ZbC0EuvBp+tI9IR4yqBSDIE3Iq13qwiQj6lFYEgikOsgvC4VJDyJlfo6CUg3kI9BmLBG67EevDUFn8XXJpBt7km5yox3xcIMfpRo/SN/PZRygRhj17J1JqwmSn2oA96awL926iwD/LEIgJjmo3RwMCQadGaZePh/3H5ejrT+XBd8IwSGJKRcAuPLhHZ6mIkMxlFpjbEUp+qbDfjGCGSJQiEWCfS9CiAmLCZK7VWJvSnG6h4oJu8FnTkm3r+uKDHNReng8CZgVdcbJTBqpxkwfk4EQJiJlTquCq5KnCeQV8npFnL6Jnb6Mer0i8zpo4TThzmnj9OjGXardDBrZqDZbmMmdnukdH6oL3xWOTG1vNh6oxn7AYB2PqtUOWC1GdP4Ya5N8I0ONG0Dv6znHZiW8t6BaSvvHfAONKSAf4w2JGTtNBey0xBAkjSEzwAAAABJRU5ErkJggg==');
 }
 
+.lf-mini-map-no-header {
+  padding-top: 0;
+}
+.lf-mini-map-no-header .lf-mini-map-header {
+  display: none;
+}
+.lf-mini-map-no-close-icon .lf-mini-map-close{
+  display: none;
+}
+
 /* 节点调整 */
 
 .lf-resize-control-0{

package/cjs/tools/auto-layout/index.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
  * 自动布局插件
- * 依赖flow-path插件
+ * 依赖flowPath插件
  * 未完善
  */
 var __assign = (this && this.__assign) || function () {

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

@@ -51,16 +51,70 @@ var Control = /** @class */ (function (_super) {
         _this.updatePosition = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var _b = _this.nodeModel, x = _b.x, y = _b.y;
+            _this.nodeModel.x = x + deltaX / 2;
+            _this.nodeModel.y = y + deltaY / 2;
             _this.nodeModel.moveText(deltaX / 2, deltaY / 2);
-            _this.nodeModel.updateAttributes({
-                x: x + deltaX / 2,
-                y: y + deltaY / 2,
-            });
         };
         // 计算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 combineDelta = 0;
+                switch (index) {
+                    case 0:
+                        combineDelta = (deltaX * -1 - deltaY) / sensitivity;
+                        break;
+                    case 1:
+                        combineDelta = (deltaX - deltaY) / sensitivity;
+                        break;
+                    case 2:
+                        combineDelta = (deltaX + deltaY) / sensitivity;
+                        break;
+                    case 3:
+                        combineDelta = (deltaX * -1 + deltaY) / sensitivity;
+                        break;
+                    default:
+                        break;
+                }
+                if (combineDelta !== 0) {
+                    deltaScale = Math.round((combineDelta / 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;
@@ -86,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({
@@ -95,6 +149,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
             });
             // 限制放大缩小的最大最小范围
@@ -107,18 +162,16 @@ 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;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     width: size.width,
                     height: size.height,
                 },
             });
-            _this.nodeModel.updateAttributes({
-                width: size.width,
-                height: size.height,
-            });
             var edges = _this.getNodeEdges(id);
             var beforeNode = {
                 x: x,
@@ -156,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;
@@ -166,6 +219,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -178,7 +232,7 @@ 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 = size.width;
@@ -220,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;
@@ -230,6 +284,7 @@ var Control = /** @class */ (function (_super) {
                 deltaY: deltaY,
                 width: width,
                 height: height,
+                PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
@@ -242,7 +297,7 @@ 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 = size.width;

package/es/NodeResize/Node/DiamondResize.d.ts

@@ -1,7 +1,8 @@
 import { h, DiamondNode, DiamondNodeModel } from '@logicflow/core';
 declare class DiamondResizeModel extends DiamondNodeModel {
+    private PCTResizeInfo;
+    constructor(data: any, graphModel: any);
     initNodeData(data: any): void;
-    init(): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;
@@ -14,6 +15,7 @@ declare class DiamondResizeModel extends DiamondNodeModel {
         fill: string;
         stroke: string;
     };
+    enableProportionResize(turnOn?: boolean): void;
 }
 declare class DiamondResizeView extends DiamondNode {
     getControlGroup(): h.JSX.Element;