@logicflow/extension 1.1.7 → 1.1.9-alpha.0

package/cjs/NodeResize/Control/Control.js

@@ -28,7 +28,7 @@ var preact_1 = require("preact");
 var core_1 = require("@logicflow/core");
 var Rect_1 = require("../BasicShape/Rect");
 var Util_1 = require("./Util");
-var createDrag = core_1.LogicFlowUtil.createDrag;
+var StepDrag = core_1.LogicFlowUtil.StepDrag;
 var Control = /** @class */ (function (_super) {
     __extends(Control, _super);
     function Control(props) {
@@ -87,6 +87,8 @@ var Control = /** @class */ (function (_super) {
                 || size.width > maxWidth
                 || size.height < minHeight
                 || size.height > maxHeight) {
+                // 为了避免放到和缩小位置和鼠标不一致的问题
+                _this.dragHandler.cancelDrag();
                 return;
             }
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
@@ -154,15 +156,16 @@ var Control = /** @class */ (function (_super) {
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
                 || size.height > (maxHeight / 2)) {
+                _this.dragHandler.cancelDrag();
                 return;
             }
             // 更新中心点位置，更新文案位置
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = size.width;
+            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
             // @ts-ignore
-            _this.nodeModel.ry = size.height;
+            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -217,15 +220,16 @@ var Control = /** @class */ (function (_super) {
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
                 || size.height > (maxHeight / 2)) {
+                _this.dragHandler.cancelDrag();
                 return;
             }
             // 更新中心点位置，更新文案位置
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = size.width;
+            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
             // @ts-ignore
-            _this.nodeModel.ry = size.height;
+            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -291,8 +295,11 @@ var Control = /** @class */ (function (_super) {
         if (gridSize > 1) {
             step = 2 * gridSize;
         }
+        if (_this.nodeModel.gridSize) {
+            step = 2 * _this.nodeModel.gridSize;
+        }
         _this.state = {};
-        _this.dragHandler = createDrag({
+        _this.dragHandler = new StepDrag({
             onDraging: _this.onDraging,
             step: step,
         });
@@ -318,7 +325,7 @@ var Control = /** @class */ (function (_super) {
         var _a = this.props, x = _a.x, y = _a.y, index = _a.index, model = _a.model;
         var style = model.getControlPointStyle();
         return (preact_1.h("g", { className: "lf-resize-control-" + index },
-            preact_1.h(Rect_1.default, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler }))));
+            preact_1.h(Rect_1.default, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler.handleMouseDown }))));
     };
     return Control;
 }(preact_1.Component));

package/cjs/NodeResize/Node/DiamondResize.js

@@ -31,10 +31,6 @@ var DiamondResizeModel = /** @class */ (function (_super) {
     __extends(DiamondResizeModel, _super);
     function DiamondResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.rx = nodeSize.rx;
@@ -42,6 +38,14 @@ var DiamondResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    DiamondResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+        this.gridSize = 1;
+    };
     DiamondResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';

package/cjs/NodeResize/Node/EllipseResize.js

@@ -19,10 +19,6 @@ var EllipseResizeModel = /** @class */ (function (_super) {
     __extends(EllipseResizeModel, _super);
     function EllipseResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.rx = nodeSize.rx;
@@ -30,6 +26,13 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    EllipseResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     EllipseResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';

package/cjs/NodeResize/Node/HtmlResize.js

@@ -19,10 +19,6 @@ var HtmlResizeModel = /** @class */ (function (_super) {
     __extends(HtmlResizeModel, _super);
     function HtmlResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.width = nodeSize.width;
@@ -30,6 +26,13 @@ var HtmlResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    HtmlResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     HtmlResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';

package/cjs/NodeResize/Node/RectResize.js

@@ -19,10 +19,6 @@ var RectResizeModel = /** @class */ (function (_super) {
     __extends(RectResizeModel, _super);
     function RectResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
         var nodeSize = _this.properties.nodeSize;
         if (nodeSize) {
             _this.width = nodeSize.width;
@@ -30,6 +26,13 @@ var RectResizeModel = /** @class */ (function (_super) {
         }
         return _this;
     }
+    RectResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     RectResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';
@@ -41,7 +44,7 @@ var RectResizeModel = /** @class */ (function (_super) {
     RectResizeModel.prototype.getResizeOutlineStyle = function () {
         return {
             fill: 'none',
-            stroke: '#000000',
+            stroke: 'transparent',
             strokeWidth: 1,
             strokeDasharray: '3,3',
         };

package/cjs/insert-node-in-polyline/index.js

@@ -22,26 +22,25 @@ var __spread = (this && this.__spread) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsertNodeInPolyline = void 0;
 var edge_1 = require("./edge");
-var InsertNodeInPolyline = {
-    pluginName: 'insertNodeInPolyline',
-    _lf: null,
-    dndAdd: true,
-    dropAdd: true,
-    install: function (lf) {
-        InsertNodeInPolyline._lf = lf;
+var InsertNodeInPolyline = /** @class */ (function () {
+    function InsertNodeInPolyline(_a) {
+        var lf = _a.lf;
+        this._lf = lf;
+        this.dndAdd = true;
+        this.dropAdd = true;
         this.eventHandler();
-    },
-    eventHandler: function () {
+    }
+    InsertNodeInPolyline.prototype.eventHandler = function () {
         var _this = this;
         // 监听事件
-        if (InsertNodeInPolyline.dndAdd) {
-            InsertNodeInPolyline._lf.on('node:dnd-add', function (_a) {
+        if (this.dndAdd) {
+            this._lf.on('node:dnd-add', function (_a) {
                 var data = _a.data;
-                InsertNodeInPolyline.insetNode(data);
+                _this.insetNode(data);
             });
         }
-        if (InsertNodeInPolyline.dropAdd) {
-            InsertNodeInPolyline._lf.on('node:drop', function (_a) {
+        if (this.dropAdd) {
+            this._lf.on('node:drop', function (_a) {
                 var data = _a.data;
                 var edges = _this._lf.graphModel.edges;
                 var id = data.id;
@@ -53,12 +52,12 @@ var InsertNodeInPolyline = {
                     }
                 }
                 if (pureNode) {
-                    InsertNodeInPolyline.insetNode(data);
+                    _this.insetNode(data);
                 }
             });
         }
-    },
-    insetNode: function (nodeData) {
+    };
+    InsertNodeInPolyline.prototype.insetNode = function (nodeData) {
         var edges = this._lf.graphModel.edges;
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
@@ -82,7 +81,9 @@ var InsertNodeInPolyline = {
                 break;
             }
         }
-    },
-};
+    };
+    InsertNodeInPolyline.pluginName = 'insertNodeInPolyline';
+    return InsertNodeInPolyline;
+}());
 exports.InsertNodeInPolyline = InsertNodeInPolyline;
 exports.default = InsertNodeInPolyline;

package/cjs/materials/group/GroupNode.js

@@ -58,6 +58,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         return _this;
     }
     GroupNodeModel.prototype.initNodeData = function (data) {
+        var _this = this;
         _super.prototype.initNodeData.call(this, data);
         var children = [];
         if (Array.isArray(data.children)) {
@@ -78,18 +79,34 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.resizable = false;
         this.autoToFront = false;
         this.foldable = false;
-        this.properties.isFolded = false;
+        if (this.properties.isFolded === undefined) {
+            this.properties.isFolded = false;
+        }
         this.isFolded = this.properties.isFolded;
+        // fixme: 虽然默认保存的分组不会收起，但是如果重写保存数据分组了，
+        // 此处代码会导致多一个history记录
+        setTimeout(function () {
+            _this.isFolded && _this.foldGroup(_this.isFolded);
+        });
+        // this.foldGroup(this.isFolded);
     };
     GroupNodeModel.prototype.getResizeOutlineStyle = function () {
         var style = _super.prototype.getResizeOutlineStyle.call(this);
         style.stroke = 'none';
         return style;
     };
+    /**
+     * 折叠分组
+     * 1. 折叠分组的宽高
+     * 2. 处理分组子节点
+     * 3. 处理连线
+     */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
         var _this = this;
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
+        console.log(44);
+        // step 1
         if (isFolded) {
             this.x = this.x - this.width / 2 + this.foldedWidth / 2;
             this.y = this.y - this.height / 2 + this.foldedHeight / 2;
@@ -104,70 +121,112 @@ var GroupNodeModel = /** @class */ (function (_super) {
             this.x = this.x + this.width / 2 - this.foldedWidth / 2;
             this.y = this.y + this.height / 2 - this.foldedHeight / 2;
         }
-        // 移动分组上的连线
-        var inCommingEdges = this.graphModel.getNodeIncomingEdge(this.id);
-        var outgoingEdges = this.graphModel.getNodeOutgoingEdge(this.id);
-        inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel) {
-            _this.graphModel.deleteEdgeById(edgeModel.id);
-            if (!edgeModel.isFoldedEdge) {
-                var isCommingEdge = edgeModel.targetNodeId === _this.id;
-                var data = edgeModel.getData();
-                if (isCommingEdge) {
-                    data.endPoint = undefined;
-                }
-                else {
-                    data.startPoint = undefined;
-                }
-                data.pointsList = undefined;
-                _this.graphModel.addEdge(data);
-            }
-        });
+        // step 2
+        var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
             nodeModel.visible = !isFolded;
-            _this.foldEdge(elementId, isFolded);
+            allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });
+        // 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;
     };
     /**
-     * 折叠分组的时候，处理分组内部子节点上的连线
-     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
-     * 2. 重新创建一个属性一样的边。
-     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
+     * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
+     * 边的分类：
+     *   - 虚拟边：分组被收起时，表示分组本身与外部节点关系的边。
+     *   - 真实边：分组本身或者分组内部节点与外部节点节点（非收起分组）关系的边。
+     * 如果一个分组，本身与外部节点有M条连线，且内部N个子节点与外部节点有连线，那么这个分组收起时会生成M+N条连线。
+     * 折叠分组时：
+     *   - 原有的虚拟边删除；
+     *   - 创建一个虚拟边；
+     *   - 真实边则隐藏；
+     * 展开分组是：
+     *   - 原有的虚拟边删除；
+     *   - 如果目外部点是收起的分组，则创建虚拟边；
+     *   - 如果外部节点是普通节点，则显示真实边；
      */
-    GroupNodeModel.prototype.foldEdge = function (nodeId, isFolded) {
+    GroupNodeModel.prototype.foldEdge = function (isFolded, allEdges) {
         var _this = this;
-        var inCommingEdges = this.graphModel.getNodeIncomingEdge(nodeId);
-        var outgoingEdges = this.graphModel.getNodeOutgoingEdge(nodeId);
-        inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel, index) {
-            var _a;
-            edgeModel.visible = !isFolded;
-            if (isFolded
-                && (!_this.children.has(edgeModel.targetNodeId)
-                    || !_this.children.has(edgeModel.sourceNodeId))) {
-                var isCommingEdge = edgeModel.targetNodeId === nodeId;
-                if (isFolded) {
-                    var data = edgeModel.getData();
-                    data.id = data.id + "__" + index;
-                    if (isCommingEdge) {
-                        data.endPoint = undefined;
-                        data.targetNodeId = _this.id;
-                    }
-                    else {
-                        data.startPoint = undefined;
-                        data.sourceNodeId = _this.id;
-                    }
-                    data.text = (_a = data.text) === null || _a === void 0 ? void 0 : _a.value;
-                    data.pointsList = undefined;
-                    var model = _this.graphModel.addEdge(data);
-                    model.virtual = true;
-                    // 强制不保存group连线数据
-                    model.getData = function () { return null; };
-                    model.text.editable = false;
-                    model.isFoldedEdge = true;
+        allEdges.forEach(function (edgeModel, index) {
+            var id = edgeModel.id, sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, type = edgeModel.type, properties = edgeModel.properties, text = edgeModel.text;
+            var data = {
+                id: id + "__" + index,
+                sourceNodeId: sourceNodeId,
+                targetNodeId: targetNodeId,
+                startPoint: startPoint,
+                endPoint: endPoint,
+                type: type,
+                properties: properties,
+                text: text === null || text === void 0 ? void 0 : text.value,
+            };
+            if (edgeModel.virtual) {
+                _this.graphModel.deleteEdgeById(edgeModel.id);
+            }
+            var targetNodeIdGroup = _this.graphModel.group.getNodeGroup(targetNodeId);
+            // 考虑目标节点本来就是分组的情况
+            if (!targetNodeIdGroup) {
+                targetNodeIdGroup = _this.graphModel.getNodeModelById(targetNodeId);
+            }
+            var sourceNodeIdGroup = _this.graphModel.group.getNodeGroup(sourceNodeId);
+            if (!sourceNodeIdGroup) {
+                sourceNodeIdGroup = _this.graphModel.getNodeModelById(sourceNodeId);
+            }
+            // 折叠时，处理未被隐藏的边的逻辑
+            if (isFolded && edgeModel.visible !== false) {
+                // 需要确认此分组节点是新连线的起点还是终点
+                // 创建一个虚拟边，虚拟边相对真实边，起点或者终点从一起分组内部的节点成为了分组，
+                // 如果需要被隐藏的边的起点在需要折叠的分组中，那么设置虚拟边的开始节点为此分组
+                if (_this.children.has(sourceNodeId) || _this.id === sourceNodeId) {
+                    data.startPoint = undefined;
+                    data.sourceNodeId = _this.id;
+                }
+                else {
+                    data.endPoint = undefined;
+                    data.targetNodeId = _this.id;
+                }
+                // 如果边的起点和终点都在分组内部，则不创建新的虚拟边
+                if (targetNodeIdGroup.id !== _this.id || sourceNodeIdGroup.id !== _this.id) {
+                    _this.createVirtualEdge(data);
+                }
+                edgeModel.visible = false;
+            }
+            // 展开时，处理被隐藏的边的逻辑
+            if (!isFolded && edgeModel.visible === false) {
+                // 展开分组时：判断真实边的起点和终点是否有任一节点在已折叠分组中，如果不是，则显示真实边。如果是，这修改这个边的对应目标节点id来创建虚拟边。
+                if (targetNodeIdGroup && targetNodeIdGroup.isGroup && targetNodeIdGroup.isFolded) {
+                    data.targetNodeId = targetNodeIdGroup.id;
+                    data.endPoint = undefined;
+                    _this.createVirtualEdge(data);
+                }
+                else if (sourceNodeIdGroup && sourceNodeIdGroup.isGroup && sourceNodeIdGroup.isFolded) {
+                    data.sourceNodeId = sourceNodeIdGroup.id;
+                    data.startPoint = undefined;
+                    _this.createVirtualEdge(data);
+                }
+                else {
+                    edgeModel.visible = true;
                 }
             }
         });
     };
+    GroupNodeModel.prototype.createVirtualEdge = function (edgeData) {
+        edgeData.pointsList = undefined;
+        var model = this.graphModel.addEdge(edgeData);
+        model.virtual = true;
+        // 强制不保存group连线数据
+        model.getData = function () { return null; };
+        model.text.editable = false;
+        model.isFoldedEdge = true;
+    };
     GroupNodeModel.prototype.isInRange = function (_a) {
         var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
         return x1 >= (this.x - this.width / 2)
@@ -208,6 +267,17 @@ var GroupNodeModel = /** @class */ (function (_super) {
         delete properties.isFolded;
         return data;
     };
+    GroupNodeModel.prototype.getHistoryData = function () {
+        var data = _super.prototype.getData.call(this);
+        data.children = __spread(this.children);
+        var properties = data.properties;
+        delete properties.groupAddable;
+        if (properties.isFolded) { // 如果分组被折叠
+            data.x = data.x + this.unfoldedWidth / 2 - this.foldedWidth / 2;
+            data.y = data.y + this.unfoldedHight / 2 - this.foldedHeight / 2;
+        }
+        return data;
+    };
     return GroupNodeModel;
 }(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {

package/cjs/materials/group/index.js

@@ -53,11 +53,28 @@ var Group = /** @class */ (function () {
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
             var bounds = _this.lf.getNodeModelById(data.id).getBounds();
             var group = _this.getGroup(bounds);
-            if (group && data.id !== group.id) {
+            if (!group)
+                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
+                data.children.forEach(function (nodeId) {
+                    _this.nodeGroupMap.set(nodeId, data.id);
+                });
+            }
+        };
+        this.deleteGroupChild = function (_a) {
+            var data = _a.data;
+            var groupId = _this.nodeGroupMap.get(data.id);
+            if (groupId) {
+                var group = _this.lf.getNodeModelById(groupId);
+                group.removeChild(data.id);
+                _this.nodeGroupMap.delete(data.id);
+            }
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
@@ -96,20 +113,14 @@ var Group = /** @class */ (function () {
             }
             return true;
         });
+        lf.graphModel.group = this;
         lf.on('node:add', this.appendNodeToGrop);
+        lf.on('node:delete', this.deleteGroupChild);
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-drag', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);
     }
-    Group.prototype.getGroups = function () {
-        var groups = [];
-        this.lf.graphModel.nodes.forEach(function (nodeModel) {
-            if (nodeModel.isGroup) {
-                groups.push(nodeModel);
-            }
-        });
-    };
     /**
      * 获取自定位置其所属分组
      */
@@ -122,6 +133,15 @@ var Group = /** @class */ (function () {
             }
         }
     };
+    /**
+     * 获取某个节点所属的groupModel
+     */
+    Group.prototype.getNodeGroup = function (nodeId) {
+        var groupId = this.nodeGroupMap.get(nodeId);
+        if (groupId) {
+            return this.lf.getNodeModelById(groupId);
+        }
+    };
     Group.pluginName = 'group';
     return Group;
 }());

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

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { BaseNodeModel, GraphModel } from '@logicflow/core';
+import { BaseNodeModel, GraphModel, LogicFlowUtil } from '@logicflow/core';
 interface IProps {
     index: number;
     x: number;
@@ -9,10 +9,10 @@ interface IProps {
     style?: CSSStyleDeclaration;
 }
 declare class Control extends Component<IProps> {
-    dragHandler: Function;
     index: number;
     nodeModel: BaseNodeModel;
     graphModel: GraphModel;
+    dragHandler: LogicFlowUtil.StepDrag;
     constructor(props: any);
     getNodeEdges(nodeId: any): {
         sourceEdges: any[];

package/es/NodeResize/Control/Control.js

@@ -26,7 +26,7 @@ import { h, Component } from 'preact';
 import { LogicFlowUtil } from '@logicflow/core';
 import Rect from '../BasicShape/Rect';
 import { getDiamondReizeEdgePoint, getEllipseReizeEdgePoint, getRectReizeEdgePoint, ModelType } from './Util';
-var createDrag = LogicFlowUtil.createDrag;
+var StepDrag = LogicFlowUtil.StepDrag;
 var Control = /** @class */ (function (_super) {
     __extends(Control, _super);
     function Control(props) {
@@ -85,6 +85,8 @@ var Control = /** @class */ (function (_super) {
                 || size.width > maxWidth
                 || size.height < minHeight
                 || size.height > maxHeight) {
+                // 为了避免放到和缩小位置和鼠标不一致的问题
+                _this.dragHandler.cancelDrag();
                 return;
             }
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
@@ -152,15 +154,16 @@ var Control = /** @class */ (function (_super) {
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
                 || size.height > (maxHeight / 2)) {
+                _this.dragHandler.cancelDrag();
                 return;
             }
             // 更新中心点位置，更新文案位置
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = size.width;
+            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
             // @ts-ignore
-            _this.nodeModel.ry = size.height;
+            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -215,15 +218,16 @@ var Control = /** @class */ (function (_super) {
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
                 || size.height > (maxHeight / 2)) {
+                _this.dragHandler.cancelDrag();
                 return;
             }
             // 更新中心点位置，更新文案位置
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = size.width;
+            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
             // @ts-ignore
-            _this.nodeModel.ry = size.height;
+            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -289,8 +293,11 @@ var Control = /** @class */ (function (_super) {
         if (gridSize > 1) {
             step = 2 * gridSize;
         }
+        if (_this.nodeModel.gridSize) {
+            step = 2 * _this.nodeModel.gridSize;
+        }
         _this.state = {};
-        _this.dragHandler = createDrag({
+        _this.dragHandler = new StepDrag({
             onDraging: _this.onDraging,
             step: step,
         });
@@ -316,7 +323,7 @@ var Control = /** @class */ (function (_super) {
         var _a = this.props, x = _a.x, y = _a.y, index = _a.index, model = _a.model;
         var style = model.getControlPointStyle();
         return (h("g", { className: "lf-resize-control-" + index },
-            h(Rect, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler }))));
+            h(Rect, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler.handleMouseDown }))));
     };
     return Control;
 }(Component));

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

@@ -1,10 +1,7 @@
 import { h, DiamondNode, DiamondNodeModel } from '@logicflow/core';
 declare class DiamondResizeModel extends DiamondNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
     constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;