@logicflow/extension 2.0.8 → 2.0.10

package/lib/dynamic-group/index.js

@@ -224,6 +224,62 @@ var DynamicGroup = /** @class */ (function () {
                 }
             }
         };
+        this.onNodeMove = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
+            var id = data.id, x = data.x, y = data.y, properties = data.properties;
+            if (!properties) {
+                return;
+            }
+            var width = properties.width, height = properties.height;
+            var groupId = _this.nodeGroupMap.get(id);
+            if (!groupId) {
+                return;
+            }
+            var groupModel = _this.lf.getNodeModelById(groupId);
+            if (!groupModel || !groupModel.isRestrict || !groupModel.autoResize) {
+                return;
+            }
+            // 当父节点isRestrict=true & autoResize=true
+            // 子节点在父节点中移动时，父节点会自动调整大小
+            // step1: 计算出当前child的bounds
+            var newX = x + deltaX / 2;
+            var newY = y + deltaY / 2;
+            var minX = newX - width / 2;
+            var minY = newY - height / 2;
+            var maxX = newX + width / 2;
+            var maxY = newY + height / 2;
+            // step2：比较当前child.bounds与parent.bounds的差异，比如child.minX<parent.minX，那么parent.minX=child.minX
+            var hasChange = false;
+            var groupBounds = groupModel.getBounds();
+            var newGroupBounds = Object.assign({}, groupBounds);
+            if (minX < newGroupBounds.minX) {
+                newGroupBounds.minX = minX;
+                hasChange = true;
+            }
+            if (minY < newGroupBounds.minY) {
+                newGroupBounds.minY = minY;
+                hasChange = true;
+            }
+            if (maxX > newGroupBounds.maxX) {
+                newGroupBounds.maxX = maxX;
+                hasChange = true;
+            }
+            if (maxY > newGroupBounds.maxY) {
+                newGroupBounds.maxY = maxY;
+                hasChange = true;
+            }
+            if (!hasChange) {
+                return;
+            }
+            // step3: 根据当前parent.bounds去计算出最新的x、y、width、height
+            var newGroupX = newGroupBounds.minX + (newGroupBounds.maxX - newGroupBounds.minX) / 2;
+            var newGroupY = newGroupBounds.minY + (newGroupBounds.maxY - newGroupBounds.minY) / 2;
+            var newGroupWidth = newGroupBounds.maxX - newGroupBounds.minX;
+            var newGroupHeight = newGroupBounds.maxY - newGroupBounds.minY;
+            groupModel.moveTo(newGroupX, newGroupY);
+            groupModel.width = newGroupWidth;
+            groupModel.height = newGroupHeight;
+        };
         this.onGraphRendered = function (_a) {
             var data = _a.data;
             console.log('data', data);
@@ -244,24 +300,6 @@ var DynamicGroup = /** @class */ (function () {
         // 初始化插件，从监听事件开始及设置规则开始
         this.init();
     }
-    /**
-     * 获取分组内的节点
-     * @param groupModel
-     */
-    DynamicGroup.prototype.getNodesInGroup = function (groupModel) {
-        var _this = this;
-        var nodeIds = [];
-        if (groupModel.isGroup) {
-            (0, lodash_es_1.forEach)(Array.from(groupModel.children), function (nodeId) {
-                nodeIds.push(nodeId);
-                var nodeModel = _this.lf.getNodeModelById(nodeId);
-                if (nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.isGroup) {
-                    nodeIds = nodeIds.concat(_this.getNodesInGroup(nodeModel));
-                }
-            });
-        }
-        return nodeIds;
-    };
     /**
      * 获取节点所属的分组
      * @param nodeId
@@ -442,6 +480,46 @@ var DynamicGroup = /** @class */ (function () {
         }
         return this.lf.graphModel.addEdge(__assign(__assign({}, newEdgeConfig), { sourceNodeId: sourceId, targetNodeId: targetId }));
     };
+    /**
+     * 检测group:resize后的bounds是否会小于children的bounds
+     * 限制group进行resize时不能小于内部的占地面积
+     * @param groupModel
+     * @param deltaX
+     * @param deltaY
+     * @param newWidth
+     * @param newHeight
+     */
+    DynamicGroup.prototype.checkGroupBoundsWithChildren = function (groupModel, deltaX, deltaY, newWidth, newHeight) {
+        if (groupModel.children) {
+            var children = groupModel.children, x = groupModel.x, y = groupModel.y;
+            // 根据deltaX和deltaY计算出当前model的bounds
+            var newX = x + deltaX / 2;
+            var newY = y + deltaY / 2;
+            var groupMinX = newX - newWidth / 2;
+            var groupMinY = newY - newHeight / 2;
+            var groupMaxX = newX + newWidth / 2;
+            var groupMaxY = newY + newHeight / 2;
+            var childrenArray = Array.from(children);
+            for (var i = 0; i < childrenArray.length; i++) {
+                var childId = childrenArray[i];
+                var child = this.lf.getNodeModelById(childId);
+                if (!child) {
+                    continue;
+                }
+                var childBounds = child.getBounds();
+                var minX = childBounds.minX, minY = childBounds.minY, maxX = childBounds.maxX, maxY = childBounds.maxY;
+                // parent:resize后的bounds不能小于child:bounds，否则阻止其resize
+                var canResize = groupMinX <= minX &&
+                    groupMinY <= minY &&
+                    groupMaxX >= maxX &&
+                    groupMaxY >= maxY;
+                if (!canResize) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    };
     /**
      * Group 插件的初始化方法
      * TODO：1. 待讨论，可能之前插件分类是有意义的 components, material, tools
@@ -463,16 +541,38 @@ var DynamicGroup = /** @class */ (function () {
         graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
             // 判断如果是 group，移动时需要同时移动组内的所有节点
             if (model.isGroup) {
-                var nodeIds = _this.getNodesInGroup(model);
-                graphModel.moveNodes(nodeIds, deltaX, deltaY, true);
+                // https://github.com/didi/LogicFlow/issues/1826
+                // 这里不应该触发移动子节点的逻辑，这里是判断是否可以移动，而不是触发移动逻辑
+                // 而且这里触发移动，会导致resize操作的this.x变动也会触发子item的this.x变动
+                // resize时的deltaX跟正常移动的deltaX是不同的
+                // const nodeIds = this.getNodesInGroup(model as DynamicGroupNodeModel)
+                // graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
                 return true;
             }
             var groupId = _this.nodeGroupMap.get(model.id);
             var groupModel = _this.lf.getNodeModelById(groupId);
             if (groupModel && groupModel.isRestrict) {
-                // 如果移动的节点存在与分组中，且这个分组禁止子节点移出去
-                var groupBounds = groupModel.getBounds();
-                return (0, utils_1.isAllowMoveTo)(groupBounds, model, deltaX, deltaY);
+                if (groupModel.autoResize) {
+                    // 子节点在父节点中移动时，父节点会自动调整大小
+                    // 在node:mousemove中进行父节点的调整
+                    return true;
+                }
+                else {
+                    // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
+                    var groupBounds = groupModel.getBounds();
+                    return (0, utils_1.isAllowMoveTo)(groupBounds, model, deltaX, deltaY);
+                }
+            }
+            return true;
+        });
+        // https://github.com/didi/LogicFlow/issues/1442
+        // https://github.com/didi/LogicFlow/issues/937
+        // 添加分组节点resize规则
+        // isRestrict限制模式下，当前model resize时不能小于children的占地面积
+        // 并且在isRestrict限制模式下，transformWidthContainer即使设置为true，也无效
+        graphModel.addNodeResizeRules(function (model, deltaX, deltaY, width, height) {
+            if (model.isGroup && model.isRestrict) {
+                return _this.checkGroupBoundsWithChildren(model, deltaX, deltaY, width, height);
             }
             return true;
         });
@@ -481,6 +581,7 @@ var DynamicGroup = /** @class */ (function () {
         lf.on('node:delete', this.removeNodeFromGroup);
         lf.on('node:drag,node:dnd-drag', this.setActiveGroup);
         lf.on('node:click', this.onNodeSelect);
+        lf.on('node:mousemove', this.onNodeMove);
         lf.on('graph:rendered', this.onGraphRendered);
         lf.on('graph:updated', function (_a) {
             var data = _a.data;
@@ -538,6 +639,7 @@ var DynamicGroup = /** @class */ (function () {
         this.lf.off('node:delete', this.removeNodeFromGroup);
         this.lf.off('node:drag,node:dnd-drag', this.setActiveGroup);
         this.lf.off('node:click', this.onNodeSelect);
+        this.lf.off('node:mousemove', this.onNodeMove);
         this.lf.off('graph:rendered', this.onGraphRendered);
         // 还原 lf.addElements 方法？
         // 移除 graphModel 上重写的 addNodeMoveRules 方法？

package/lib/dynamic-group/model.d.ts

@@ -31,6 +31,10 @@ export type IGroupNodeProperties = {
      */
     collapsedWidth?: number;
     collapsedHeight?: number;
+    /**
+     * 缩放或旋转容器时，是否缩放或旋转组内节点
+     */
+    transformWithContainer?: boolean;
     /**
      * 当前分组元素的 zIndex
      */
@@ -45,6 +49,7 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
     readonly isGroup = true;
     children: Set<string>;
     isRestrict: boolean;
+    autoResize: boolean;
     collapsible: boolean;
     expandWidth: number;
     expandHeight: number;
@@ -52,7 +57,7 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
     collapsedHeight: number;
     isCollapsed: boolean;
     groupAddable: boolean;
-    transformWidthContainer: boolean;
+    transformWithContainer: boolean;
     childrenLastCollapseStateDict: Map<string, boolean>;
     constructor(data: NodeConfig<IGroupNodeProperties>, graphModel: GraphModel);
     initNodeData(data: LogicFlow.NodeConfig<IGroupNodeProperties>): void;

package/lib/dynamic-group/model.js

@@ -74,6 +74,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         _this.isGroup = true;
         // 是否限制组内节点的移动范围。默认不限制 TODO: 完善该功能
         _this.isRestrict = false;
+        // isRestrict 模式启用时，如果同时设置 autoResize 为 true，那么子节点在父节点中移动时，父节点会自动调整大小
+        _this.autoResize = false;
         // 分组节点是否可以折叠
         _this.collapsible = true;
         // 当前组是否收起状态
@@ -81,7 +83,7 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         // 当前分组是否在可添加状态 - 实时状态
         _this.groupAddable = false;
         // 缩放或旋转容器时，是否缩放或旋转组内节点
-        _this.transformWidthContainer = true;
+        _this.transformWithContainer = false;
         _this.childrenLastCollapseStateDict = new Map();
         _this.childrenLastCollapseStateDict = new Map();
         _this.initNodeData(data);
@@ -91,7 +93,7 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     DynamicGroupNodeModel.prototype.initNodeData = function (data) {
         var _a;
         _super.prototype.initNodeData.call(this, data);
-        var _b = (_a = data.properties) !== null && _a !== void 0 ? _a : {}, children = _b.children, width = _b.width, height = _b.height, collapsedWidth = _b.collapsedWidth, collapsedHeight = _b.collapsedHeight, collapsible = _b.collapsible, isCollapsed = _b.isCollapsed, zIndex = _b.zIndex, isRestrict = _b.isRestrict, autoResize = _b.autoResize, autoToFront = _b.autoToFront;
+        var _b = (_a = data.properties) !== null && _a !== void 0 ? _a : {}, children = _b.children, width = _b.width, height = _b.height, collapsedWidth = _b.collapsedWidth, collapsedHeight = _b.collapsedHeight, collapsible = _b.collapsible, isCollapsed = _b.isCollapsed, zIndex = _b.zIndex, isRestrict = _b.isRestrict, autoResize = _b.autoResize, autoToFront = _b.autoToFront, transformWithContainer = _b.transformWithContainer;
         this.children = children ? new Set(children) : new Set();
         this.zIndex = zIndex !== null && zIndex !== void 0 ? zIndex : DEFAULT_BOTTOM_Z_INDEX;
         this.isCollapsed = isCollapsed !== null && isCollapsed !== void 0 ? isCollapsed : false;
@@ -105,6 +107,7 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         this.collapsedWidth = collapsedWidth !== null && collapsedWidth !== void 0 ? collapsedWidth : DEFAULT_GROUP_COLLAPSE_WIDTH;
         this.collapsedHeight = collapsedHeight !== null && collapsedHeight !== void 0 ? collapsedHeight : DEFAULT_GROUP_COLLAPSE_HEIGHT;
         this.isRestrict = isRestrict !== null && isRestrict !== void 0 ? isRestrict : false;
+        this.transformWithContainer = transformWithContainer !== null && transformWithContainer !== void 0 ? transformWithContainer : false;
         this.autoResize = autoResize !== null && autoResize !== void 0 ? autoResize : false;
         this.collapsible = collapsible !== null && collapsible !== void 0 ? collapsible : true;
         this.autoToFront = autoToFront !== null && autoToFront !== void 0 ? autoToFront : false;
@@ -145,8 +148,15 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         data.isGroup = true;
         var _a = this, x = _a.x, y = _a.y, collapsedWidth = _a.collapsedWidth, collapsedHeight = _a.collapsedHeight, expandWidth = _a.expandWidth, expandHeight = _a.expandHeight, isCollapsed = _a.isCollapsed;
         if (isCollapsed) {
+            // 如果当前是折叠模式
+            // 存入history的时候，将坐标恢复到未折叠前的坐标数据
+            // 因为拿出history数据的时候，会触发collapse()进行坐标的折叠计算
             data.x = x + expandWidth / 2 - collapsedWidth / 2;
             data.y = y + expandHeight / 2 - collapsedHeight / 2;
+            if (data.text) {
+                data.text.x = data.text.x + expandWidth / 2 - collapsedWidth / 2;
+                data.text.y = data.text.y + expandHeight / 2 - collapsedHeight / 2;
+            }
         }
         return data;
     };
@@ -411,7 +421,7 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     ], DynamicGroupNodeModel.prototype, "groupAddable", void 0);
     __decorate([
         core_1.observable
-    ], DynamicGroupNodeModel.prototype, "transformWidthContainer", void 0);
+    ], DynamicGroupNodeModel.prototype, "transformWithContainer", void 0);
     return DynamicGroupNodeModel;
 }(core_1.RectNodeModel));
 exports.DynamicGroupNodeModel = DynamicGroupNodeModel;

package/lib/dynamic-group/node.d.ts

@@ -6,6 +6,11 @@ export interface IDynamicGroupNodeProps {
 }
 export declare class DynamicGroupNode<P extends IDynamicGroupNodeProps = IDynamicGroupNodeProps> extends RectNode<P> {
     componentDidMount(): void;
+    /**
+     * 获取分组内的节点
+     * @param groupModel
+     */
+    getNodesInGroup(groupModel: DynamicGroupNodeModel, graphModel: GraphModel): string[];
     getResizeControl(): h.JSX.Element | null;
     getAppendAreaShape(): h.JSX.Element | null;
     getCollapseIcon(sx: number, sy: number): string;

package/lib/dynamic-group/node.js

@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicGroupNode = void 0;
 var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("lodash-es");
-var resize_1 = require("@logicflow/core/es/util/resize");
 var utils_1 = require("../tools/label/utils");
 var DynamicGroupNode = /** @class */ (function (_super) {
     __extends(DynamicGroupNode, _super);
@@ -37,6 +36,7 @@ var DynamicGroupNode = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DynamicGroupNode.prototype.componentDidMount = function () {
+        var _this = this;
         _super.prototype.componentDidMount.call(this);
         var _a = this.props, curGroup = _a.model, graphModel = _a.graphModel;
         var eventCenter = graphModel.eventCenter;
@@ -44,6 +44,16 @@ var DynamicGroupNode = /** @class */ (function (_super) {
         // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
         eventCenter.on('node:rotate', function (_a) {
             var model = _a.model;
+            var _b = _this.props.model, transformWithContainer = _b.transformWithContainer, isRestrict = _b.isRestrict;
+            if (!transformWithContainer || isRestrict) {
+                // isRestrict限制模式下，当前model resize时不能小于占地面积
+                // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
+                // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
+                // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
+                // 由于transformWidthContainer是控制rotate+resize，为保持transformWidthContainer本来的含义
+                // parent:resize=>child:resize不支持，那么parent:rotate=>child:rotate也不支持
+                return;
+            }
             // DONE: 目前操作是对分组内节点以节点中心旋转节点本身，而按照正常逻辑，应该是以分组中心，旋转节点（跟 Label 旋转操作逻辑一致）
             if (model.id === curGroup.id) {
                 var center_1 = { x: curGroup.x, y: curGroup.y };
@@ -71,16 +81,30 @@ var DynamicGroupNode = /** @class */ (function (_super) {
         });
         // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
         eventCenter.on('node:resize', function (_a) {
-            var deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, model = _a.model;
-            // TODO: 目前 Resize 的比例值有问题，导致缩放时，节点会变形，需要修复
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, model = _a.model, preData = _a.preData;
+            var _b = _this.props.model, transformWithContainer = _b.transformWithContainer, isRestrict = _b.isRestrict;
+            if (!transformWithContainer || isRestrict) {
+                // isRestrict限制模式下，当前model resize时不能小于占地面积
+                // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
+                // 不符合目前 parent:resize成功后emit事件 -> 触发child:resize 的代码交互模式
+                // 因此isRestrict限制模式下不支持联动(parent:resize=>child:resize)
+                return;
+            }
             if (model.id === curGroup.id) {
+                // node:resize是group已经改变width和height后的回调
+                // 因此这里一定得用preData（没resize改变width之前的值），而不是data/model
+                var properties = preData.properties;
+                var _c = properties || {}, groupWidth_1 = _c.width, groupHeight_1 = _c.height;
                 (0, lodash_es_1.forEach)(Array.from(curGroup.children), function (childId) {
                     var child = graphModel.getNodeModelById(childId);
                     if (child) {
+                        // 根据比例去控制缩放dx和dy
+                        var childDx = (child.width / groupWidth_1) * deltaX;
+                        var childDy = (child.height / groupHeight_1) * deltaY;
                         // child.rotate = model.rotate
-                        (0, resize_1.handleResize)({
-                            deltaX: deltaX,
-                            deltaY: deltaY,
+                        (0, core_1.handleResize)({
+                            deltaX: childDx,
+                            deltaY: childDy,
                             index: index,
                             nodeModel: child,
                             graphModel: graphModel,
@@ -90,6 +114,33 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                 });
             }
         });
+        // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
+        eventCenter.on('node:mousemove', function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
+            if (data.id === curGroup.id) {
+                var _b = _this.props, curGroup_1 = _b.model, graphModel_1 = _b.graphModel;
+                var nodeIds = _this.getNodesInGroup(curGroup_1, graphModel_1);
+                graphModel_1.moveNodes(nodeIds, deltaX, deltaY, true);
+            }
+        });
+    };
+    /**
+     * 获取分组内的节点
+     * @param groupModel
+     */
+    DynamicGroupNode.prototype.getNodesInGroup = function (groupModel, graphModel) {
+        var _this = this;
+        var nodeIds = [];
+        if (groupModel.isGroup) {
+            (0, lodash_es_1.forEach)(Array.from(groupModel.children), function (nodeId) {
+                nodeIds.push(nodeId);
+                var nodeModel = graphModel.getNodeModelById(nodeId);
+                if (nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.isGroup) {
+                    nodeIds = nodeIds.concat(_this.getNodesInGroup(nodeModel, graphModel));
+                }
+            });
+        }
+        return nodeIds;
     };
     DynamicGroupNode.prototype.getResizeControl = function () {
         var _a = this.props.model, resizable = _a.resizable, isCollapsed = _a.isCollapsed;

package/lib/tools/label/index.js

@@ -81,7 +81,7 @@ var Label = /** @class */ (function () {
         }
         else if (typeof curLabelConfig === 'string' || !curLabelConfig) {
             // 3. 字符串或者为空的话就是 string 类型，基于 text 的数据合成 LabelConfig 信息（主要复用 text 的 x,y 信息）
-            var config = __assign(__assign({}, text), { content: curLabelConfig || text.value, draggable: element.BaseType === 'edge' ? edgeTextDraggable : nodeTextDraggable });
+            var config = __assign(__assign({}, text), { content: curLabelConfig || (text === null || text === void 0 ? void 0 : text.value), draggable: element.BaseType === 'edge' ? edgeTextDraggable : nodeTextDraggable });
             formatConfig = config.value ? [config] : [];
         }
         // TODO: 针对 Edge，在 edge 更新时 重新计算 Label 的位置
@@ -239,7 +239,7 @@ var Label = /** @class */ (function () {
             model.setProperty('_label', newLabelConfig);
         });
         // 监听元素新增事件，元素label格式化
-        eventCenter.on('node:add,edge:add', function (_a) {
+        eventCenter.on('node:dnd-add,node:add,edge:add', function (_a) {
             var data = _a.data;
             var element = graphModel.getElement(data.id);
             if (element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.4"
+    "@logicflow/core": "2.0.6"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,7 +31,7 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.0.4"
+    "@logicflow/core": "2.0.6"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/dynamic-group/index.ts

@@ -50,27 +50,6 @@ export class DynamicGroup {
     this.init()
   }
 
-  /**
-   * 获取分组内的节点
-   * @param groupModel
-   */
-  getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] {
-    let nodeIds: string[] = []
-    if (groupModel.isGroup) {
-      forEach(Array.from(groupModel.children), (nodeId: string) => {
-        nodeIds.push(nodeId)
-
-        const nodeModel = this.lf.getNodeModelById(nodeId)
-        if (nodeModel?.isGroup) {
-          nodeIds = nodeIds.concat(
-            this.getNodesInGroup(nodeModel as DynamicGroupNodeModel),
-          )
-        }
-      })
-    }
-    return nodeIds
-  }
-
   /**
    * 获取节点所属的分组
    * @param nodeId
@@ -360,6 +339,72 @@ export class DynamicGroup {
     }
   }
 
+  onNodeMove = ({
+    deltaX,
+    deltaY,
+    data,
+  }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => {
+    const { id, x, y, properties } = data
+    if (!properties) {
+      return
+    }
+    const { width, height } = properties
+    const groupId = this.nodeGroupMap.get(id)
+    if (!groupId) {
+      return
+    }
+    const groupModel = this.lf.getNodeModelById(
+      groupId,
+    ) as DynamicGroupNodeModel
+
+    if (!groupModel || !groupModel.isRestrict || !groupModel.autoResize) {
+      return
+    }
+    // 当父节点isRestrict=true & autoResize=true
+    // 子节点在父节点中移动时，父节点会自动调整大小
+
+    // step1: 计算出当前child的bounds
+    const newX = x + deltaX / 2
+    const newY = y + deltaY / 2
+    const minX = newX - width! / 2
+    const minY = newY - height! / 2
+    const maxX = newX + width! / 2
+    const maxY = newY + height! / 2
+    // step2：比较当前child.bounds与parent.bounds的差异，比如child.minX<parent.minX，那么parent.minX=child.minX
+    let hasChange = false
+    const groupBounds = groupModel.getBounds()
+    const newGroupBounds = Object.assign({}, groupBounds)
+    if (minX < newGroupBounds.minX) {
+      newGroupBounds.minX = minX
+      hasChange = true
+    }
+    if (minY < newGroupBounds.minY) {
+      newGroupBounds.minY = minY
+      hasChange = true
+    }
+    if (maxX > newGroupBounds.maxX) {
+      newGroupBounds.maxX = maxX
+      hasChange = true
+    }
+    if (maxY > newGroupBounds.maxY) {
+      newGroupBounds.maxY = maxY
+      hasChange = true
+    }
+    if (!hasChange) {
+      return
+    }
+    // step3: 根据当前parent.bounds去计算出最新的x、y、width、height
+    const newGroupX =
+      newGroupBounds.minX + (newGroupBounds.maxX - newGroupBounds.minX) / 2
+    const newGroupY =
+      newGroupBounds.minY + (newGroupBounds.maxY - newGroupBounds.minY) / 2
+    const newGroupWidth = newGroupBounds.maxX - newGroupBounds.minX
+    const newGroupHeight = newGroupBounds.maxY - newGroupBounds.minY
+    groupModel.moveTo(newGroupX, newGroupY)
+    groupModel.width = newGroupWidth
+    groupModel.height = newGroupHeight
+  }
+
   onGraphRendered = ({ data }: CallbackArgs<'graph:rendered'>) => {
     console.log('data', data)
     forEach(data.nodes, (node) => {
@@ -472,6 +517,56 @@ export class DynamicGroup {
     })
   }
 
+  /**
+   * 检测group:resize后的bounds是否会小于children的bounds
+   * 限制group进行resize时不能小于内部的占地面积
+   * @param groupModel
+   * @param deltaX
+   * @param deltaY
+   * @param newWidth
+   * @param newHeight
+   */
+  checkGroupBoundsWithChildren(
+    groupModel: DynamicGroupNodeModel,
+    deltaX: number,
+    deltaY: number,
+    newWidth: number,
+    newHeight: number,
+  ) {
+    if (groupModel.children) {
+      const { children, x, y } = groupModel
+      // 根据deltaX和deltaY计算出当前model的bounds
+      const newX = x + deltaX / 2
+      const newY = y + deltaY / 2
+      const groupMinX = newX - newWidth / 2
+      const groupMinY = newY - newHeight / 2
+      const groupMaxX = newX + newWidth / 2
+      const groupMaxY = newY + newHeight / 2
+
+      const childrenArray = Array.from(children)
+      for (let i = 0; i < childrenArray.length; i++) {
+        const childId = childrenArray[i]
+        const child = this.lf.getNodeModelById(childId)
+        if (!child) {
+          continue
+        }
+        const childBounds = child.getBounds()
+        const { minX, minY, maxX, maxY } = childBounds
+        // parent:resize后的bounds不能小于child:bounds，否则阻止其resize
+        const canResize =
+          groupMinX <= minX &&
+          groupMinY <= minY &&
+          groupMaxX >= maxX &&
+          groupMaxY >= maxY
+        if (!canResize) {
+          return false
+        }
+      }
+    }
+
+    return true
+  }
+
   /**
    * Group 插件的初始化方法
    * TODO：1. 待讨论，可能之前插件分类是有意义的 components, material, tools
@@ -492,8 +587,13 @@ export class DynamicGroup {
     graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
       // 判断如果是 group，移动时需要同时移动组内的所有节点
       if (model.isGroup) {
-        const nodeIds = this.getNodesInGroup(model as DynamicGroupNodeModel)
-        graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
+        // https://github.com/didi/LogicFlow/issues/1826
+        // 这里不应该触发移动子节点的逻辑，这里是判断是否可以移动，而不是触发移动逻辑
+        // 而且这里触发移动，会导致resize操作的this.x变动也会触发子item的this.x变动
+        // resize时的deltaX跟正常移动的deltaX是不同的
+
+        // const nodeIds = this.getNodesInGroup(model as DynamicGroupNodeModel)
+        // graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
         return true
       }
 
@@ -503,19 +603,45 @@ export class DynamicGroup {
       ) as DynamicGroupNodeModel
 
       if (groupModel && groupModel.isRestrict) {
-        // 如果移动的节点存在与分组中，且这个分组禁止子节点移出去
-        const groupBounds = groupModel.getBounds()
-        return isAllowMoveTo(groupBounds, model, deltaX, deltaY)
+        if (groupModel.autoResize) {
+          // 子节点在父节点中移动时，父节点会自动调整大小
+          // 在node:mousemove中进行父节点的调整
+          return true
+        } else {
+          // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
+          const groupBounds = groupModel.getBounds()
+          return isAllowMoveTo(groupBounds, model, deltaX, deltaY)
+        }
       }
 
       return true
     })
+
+    // https://github.com/didi/LogicFlow/issues/1442
+    // https://github.com/didi/LogicFlow/issues/937
+    // 添加分组节点resize规则
+    // isRestrict限制模式下，当前model resize时不能小于children的占地面积
+    // 并且在isRestrict限制模式下，transformWidthContainer即使设置为true，也无效
+    graphModel.addNodeResizeRules((model, deltaX, deltaY, width, height) => {
+      if (model.isGroup && model.isRestrict) {
+        return this.checkGroupBoundsWithChildren(
+          model as DynamicGroupNodeModel,
+          deltaX,
+          deltaY,
+          width,
+          height,
+        )
+      }
+      return true
+    })
+
     graphModel.dynamicGroup = this
 
     lf.on('node:add,node:drop,node:dnd-add', this.addNodeToGroup)
     lf.on('node:delete', this.removeNodeFromGroup)
     lf.on('node:drag,node:dnd-drag', this.setActiveGroup)
     lf.on('node:click', this.onNodeSelect)
+    lf.on('node:mousemove', this.onNodeMove)
     lf.on('graph:rendered', this.onGraphRendered)
 
     lf.on('graph:updated', ({ data }) => console.log('data', data))
@@ -584,6 +710,7 @@ export class DynamicGroup {
     this.lf.off('node:delete', this.removeNodeFromGroup)
     this.lf.off('node:drag,node:dnd-drag', this.setActiveGroup)
     this.lf.off('node:click', this.onNodeSelect)
+    this.lf.off('node:mousemove', this.onNodeMove)
     this.lf.off('graph:rendered', this.onGraphRendered)
 
     // 还原 lf.addElements 方法？