@logicflow/extension 2.0.9 → 2.0.11

package/es/bpmn-elements/presets/Pool/index.js

@@ -47,19 +47,19 @@ function poolEvent(lf) {
         }
     });
     lf.on('node:resize', function (_a) {
-        var oldNodeSize = _a.oldNodeSize, newNodeSize = _a.newNodeSize;
-        var id = oldNodeSize.id, type = oldNodeSize.type;
-        var deltaHeight = newNodeSize.height - oldNodeSize.height;
-        // const resizeDir = newNodeSize.y - oldNodeSize.y > 0 ? 'below': 'above'
+        var preData = _a.preData, data = _a.data;
+        var id = preData.id, type = preData.type;
+        var deltaHeight = data.height - preData.height;
+        // const resizeDir = data.y - preData.y > 0 ? 'below': 'above'
         // 节点高度变高，y下移， 方向为below
         // 节点高度变高， y上移， 方向为above
         // 节点高度变小， y下移， 方向为above
         // 节点高度变小， y上移，方向为below
         var resizeDir = 'below';
-        if (deltaHeight > 0 && newNodeSize.y - oldNodeSize.y < 0) {
+        if (deltaHeight > 0 && data.y - preData.y < 0) {
             resizeDir = 'above';
         }
-        else if (deltaHeight < 0 && newNodeSize.y - oldNodeSize.y > 0) {
+        else if (deltaHeight < 0 && data.y - preData.y > 0) {
             resizeDir = 'above';
         }
         if (type === 'pool') {
@@ -73,7 +73,7 @@ function poolEvent(lf) {
             // 泳道缩放， 调整泳池
             var groupId = lf.extension.group.nodeGroupMap.get(id);
             if (groupId) {
-                lf.getNodeModelById(groupId).resize(id, newNodeSize);
+                lf.getNodeModelById(groupId).resize(id, data);
             }
         }
     });

package/es/bpmn-elements/presets/Task/subProcess.js

@@ -62,8 +62,8 @@ export function SubProcessFactory() {
                     y: y - height / 2 + 5,
                     onClick: function (e) {
                         var _a, _b;
-                        (_b = (_a = e
-                            .stopPropagation()(model)).foldGroup) === null || _b === void 0 ? void 0 : _b.call(_a, !properties.isFolded);
+                        e.stopPropagation();
+                        (_b = (_a = model).foldGroup) === null || _b === void 0 ? void 0 : _b.call(_a, !properties.isFolded);
                     },
                 }),
                 iconIcon,

package/es/dynamic-group/index.d.ts

@@ -20,11 +20,6 @@ export declare class DynamicGroup {
     activeGroup?: DynamicGroupNodeModel;
     nodeGroupMap: Map<string, string>;
     constructor({ lf, options }: LogicFlow.IExtensionProps);
-    /**
-     * 获取分组内的节点
-     * @param groupModel
-     */
-    getNodesInGroup(groupModel: DynamicGroupNodeModel): string[];
     /**
      * 获取节点所属的分组
      * @param nodeId
@@ -66,6 +61,7 @@ export declare class DynamicGroup {
      * @param isSelected
      */
     onNodeSelect: ({ data: node, isMultiple, isSelected, }: Omit<CallbackArgs<'node:click'>, 'e' | 'position'>) => void;
+    onNodeMove: ({ deltaX, deltaY, data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
     onGraphRendered: ({ data }: CallbackArgs<'graph:rendered'>) => void;
     /**
      * 创建一个 Group 类型节点内部所有子节点的副本
@@ -79,6 +75,16 @@ export declare class DynamicGroup {
      * @param distance
      */
     createEdge(edge: EdgeConfig | EdgeData, nodeIdMap: Record<string, string>, distance: number): BaseEdgeModel<LogicFlow.PropertiesType>;
+    /**
+     * 检测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): boolean;
     /**
      * Group 插件的初始化方法
      * TODO：1. 待讨论，可能之前插件分类是有意义的 components, material, tools

package/es/dynamic-group/index.js

@@ -207,6 +207,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);
@@ -227,24 +283,6 @@ var DynamicGroup = /** @class */ (function () {
         // 初始化插件，从监听事件开始及设置规则开始
         this.init();
     }
-    /**
-     * 获取分组内的节点
-     * @param groupModel
-     */
-    DynamicGroup.prototype.getNodesInGroup = function (groupModel) {
-        var _this = this;
-        var nodeIds = [];
-        if (groupModel.isGroup) {
-            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
@@ -425,6 +463,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
@@ -446,16 +524,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 isAllowMoveTo(groupBounds, model, deltaX, deltaY);
+                if (groupModel.autoResize) {
+                    // 子节点在父节点中移动时，父节点会自动调整大小
+                    // 在node:mousemove中进行父节点的调整
+                    return true;
+                }
+                else {
+                    // 如果移动的节点存在于某个分组中，且这个分组禁止子节点移出去
+                    var 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(function (model, deltaX, deltaY, width, height) {
+            if (model.isGroup && model.isRestrict) {
+                return _this.checkGroupBoundsWithChildren(model, deltaX, deltaY, width, height);
             }
             return true;
         });
@@ -464,6 +564,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;
@@ -521,6 +622,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/es/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/es/dynamic-group/model.js

@@ -71,6 +71,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         _this.isGroup = true;
         // 是否限制组内节点的移动范围。默认不限制 TODO: 完善该功能
         _this.isRestrict = false;
+        // isRestrict 模式启用时，如果同时设置 autoResize 为 true，那么子节点在父节点中移动时，父节点会自动调整大小
+        _this.autoResize = false;
         // 分组节点是否可以折叠
         _this.collapsible = true;
         // 当前组是否收起状态
@@ -78,7 +80,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);
@@ -88,7 +90,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;
@@ -102,6 +104,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;
@@ -111,10 +114,6 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     };
     DynamicGroupNodeModel.prototype.setAttributes = function () {
         _super.prototype.setAttributes.call(this);
-        // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
-        if (this.isCollapsed) {
-            this.toggleCollapse(true);
-        }
     };
     DynamicGroupNodeModel.prototype.getData = function () {
         var _this = this;
@@ -142,8 +141,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;
     };
@@ -332,8 +338,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
      * TODO: 如何重写该方法呢？
      * @param _nodeData
      */
+    // eslint-disable-next-line
     DynamicGroupNodeModel.prototype.isAllowAppendIn = function (_nodeData) {
-        console.info('_nodeData', _nodeData);
         // TODO: 此处使用 this.properties.groupAddable 还是 this.groupAddable
         // this.groupAddable 是否存在更新不及时的问题
         return true;
@@ -408,7 +414,7 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     ], DynamicGroupNodeModel.prototype, "groupAddable", void 0);
     __decorate([
         observable
-    ], DynamicGroupNodeModel.prototype, "transformWidthContainer", void 0);
+    ], DynamicGroupNodeModel.prototype, "transformWithContainer", void 0);
     return DynamicGroupNodeModel;
 }(RectNodeModel));
 export { DynamicGroupNodeModel };

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

@@ -1,11 +1,23 @@
-import { GraphModel, h, RectNode } from '@logicflow/core';
+import LogicFlow, { GraphModel, h, RectNode, CallbackArgs } from '@logicflow/core';
 import { DynamicGroupNodeModel } from './model';
+import Position = LogicFlow.Position;
 export interface IDynamicGroupNodeProps {
     model: DynamicGroupNodeModel;
     graphModel: GraphModel;
 }
 export declare class DynamicGroupNode<P extends IDynamicGroupNodeProps = IDynamicGroupNodeProps> extends RectNode<P> {
+    childrenPositionMap: Map<string, Position>;
+    onNodeRotate: ({ model, }: Omit<CallbackArgs<'node:rotate'>, 'e' | 'position'>) => void;
+    onNodeResize: ({ deltaX, deltaY, index, model, preData, }: Omit<CallbackArgs<'node:resize'>, 'e' | 'position'>) => void;
+    onNodeMouseMove: ({ deltaX, deltaY, data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
+    graphRendered: () => void;
     componentDidMount(): void;
+    componentWillUnmount(): 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/es/dynamic-group/node.js

@@ -24,23 +24,53 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { h, RectNode } from '@logicflow/core';
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { h, RectNode, handleResize, } from '@logicflow/core';
 import { forEach } from 'lodash-es';
-import { handleResize } from '@logicflow/core/es/util/resize';
 import { rotatePointAroundCenter } from '../tools/label/utils';
 var DynamicGroupNode = /** @class */ (function (_super) {
     __extends(DynamicGroupNode, _super);
     function DynamicGroupNode() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DynamicGroupNode.prototype.componentDidMount = function () {
-        _super.prototype.componentDidMount.call(this);
-        var _a = this.props, curGroup = _a.model, graphModel = _a.graphModel;
-        var eventCenter = graphModel.eventCenter;
-        var childrenPositionMap = new Map();
-        // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
-        eventCenter.on('node:rotate', function (_a) {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.childrenPositionMap = new Map();
+        _this.onNodeRotate = function (_a) {
             var model = _a.model;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformWithContainer = curGroup.transformWithContainer, isRestrict = curGroup.isRestrict;
+            var childrenPositionMap = _this.childrenPositionMap;
+            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 };
@@ -65,19 +95,33 @@ 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 的比例值有问题，导致缩放时，节点会变形，需要修复
+        };
+        _this.onNodeResize = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, model = _a.model, preData = _a.preData;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformWithContainer = curGroup.transformWithContainer, isRestrict = curGroup.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;
                 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
                         handleResize({
-                            deltaX: deltaX,
-                            deltaY: deltaY,
+                            deltaX: childDx,
+                            deltaY: childDy,
                             index: index,
                             nodeModel: child,
                             graphModel: graphModel,
@@ -86,7 +130,79 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                     }
                 });
             }
-        });
+        };
+        _this.onNodeMouseMove = function (_a) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformModel = graphModel.transformModel;
+            var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y;
+            if (data.id === curGroup.id) {
+                var nodeIds = _this.getNodesInGroup(curGroup, graphModel);
+                // https://github.com/didi/LogicFlow/issues/1914
+                // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
+                // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
+                // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
+                // 因此这里需要增加SCALE的处理
+                graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true);
+            }
+        };
+        _this.graphRendered = function () {
+            var model = _this.props.model;
+            // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
+            if (model.isCollapsed) {
+                // https://github.com/didi/LogicFlow/issues/1918
+                // 当lf.render({nodes:[{分组节点}, {普通节点}]})时，由于是顺序遍历
+                // 会先触发分组Group节点的new Model => toggleCollapse()
+                // => 此时在graphModel.elementsModelMap找不到它的children，因为还没初始化，因此无法正确折叠子元素
+                // --------------------
+                // 当lf.render({nodes:[{普通节点}, {分组节点}]})时，
+                // 会先触发普通节点的new Model => graphModel.elementsModelMap.set(id, new Model())
+                // 然后再触发分组Group节点的new Model => toggleCollapse() =>
+                // 此时在graphModel.elementsModelMap能找到它的children了，因此可以正确折叠子元素
+                // --------------------
+                // 因此将整个初始化判断是否【主动触发一次折叠操作】放在"graph:rendered"全部渲染完成后再执行
+                model.toggleCollapse(true);
+            }
+        };
+        return _this;
+    }
+    DynamicGroupNode.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        var eventCenter = this.props.graphModel.eventCenter;
+        // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
+        eventCenter.on('node:rotate', this.onNodeRotate);
+        // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
+        eventCenter.on('node:resize', this.onNodeResize);
+        // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
+        eventCenter.on('node:mousemove', this.onNodeMouseMove);
+        // 全部渲染完成后，判断是否【主动触发一次折叠操作】
+        eventCenter.on('graph:rendered', this.graphRendered);
+    };
+    DynamicGroupNode.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        var eventCenter = this.props.graphModel.eventCenter;
+        eventCenter.off('node:rotate', this.onNodeRotate);
+        eventCenter.off('node:resize', this.onNodeResize);
+        eventCenter.off('node:mousemove', this.onNodeMouseMove);
+        eventCenter.off('graph:rendered', this.graphRendered);
+    };
+    /**
+     * 获取分组内的节点
+     * @param groupModel
+     */
+    DynamicGroupNode.prototype.getNodesInGroup = function (groupModel, graphModel) {
+        var _this = this;
+        var nodeIds = [];
+        if (groupModel.isGroup) {
+            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/es/tools/label/index.js

@@ -75,7 +75,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 的位置
@@ -233,7 +233,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/lib/bpmn-elements/presets/Pool/index.js

@@ -55,19 +55,19 @@ function poolEvent(lf) {
         }
     });
     lf.on('node:resize', function (_a) {
-        var oldNodeSize = _a.oldNodeSize, newNodeSize = _a.newNodeSize;
-        var id = oldNodeSize.id, type = oldNodeSize.type;
-        var deltaHeight = newNodeSize.height - oldNodeSize.height;
-        // const resizeDir = newNodeSize.y - oldNodeSize.y > 0 ? 'below': 'above'
+        var preData = _a.preData, data = _a.data;
+        var id = preData.id, type = preData.type;
+        var deltaHeight = data.height - preData.height;
+        // const resizeDir = data.y - preData.y > 0 ? 'below': 'above'
         // 节点高度变高，y下移， 方向为below
         // 节点高度变高， y上移， 方向为above
         // 节点高度变小， y下移， 方向为above
         // 节点高度变小， y上移，方向为below
         var resizeDir = 'below';
-        if (deltaHeight > 0 && newNodeSize.y - oldNodeSize.y < 0) {
+        if (deltaHeight > 0 && data.y - preData.y < 0) {
             resizeDir = 'above';
         }
-        else if (deltaHeight < 0 && newNodeSize.y - oldNodeSize.y > 0) {
+        else if (deltaHeight < 0 && data.y - preData.y > 0) {
             resizeDir = 'above';
         }
         if (type === 'pool') {
@@ -81,7 +81,7 @@ function poolEvent(lf) {
             // 泳道缩放， 调整泳池
             var groupId = lf.extension.group.nodeGroupMap.get(id);
             if (groupId) {
-                lf.getNodeModelById(groupId).resize(id, newNodeSize);
+                lf.getNodeModelById(groupId).resize(id, data);
             }
         }
     });