@logicflow/extension 1.2.25 → 1.2.27

package/cjs/NodeResize/Control/Control.js

@@ -59,7 +59,7 @@ var Control = /** @class */ (function (_super) {
         };
         // 计算control拖动后，节点的宽高
         _this.getResize = function (_a) {
-            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, PCTResizeInfo = _a.PCTResizeInfo, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
+            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, _c = _a.freezeWidth, freezeWidth = _c === void 0 ? false : _c, _d = _a.freezeHeight, freezeHeight = _d === void 0 ? false : _d;
             var resize = { width: width, height: height, deltaX: deltaX, deltaY: deltaY };
             if (PCTResizeInfo) {
                 var sensitivity = 4; // 越低越灵敏
@@ -117,22 +117,23 @@ var Control = /** @class */ (function (_super) {
                 resize.deltaY = deltaY / pct;
                 return resize;
             }
+            // 如果限制了宽/高不变，对应的width/height保持一致
             switch (index) {
                 case 0:
-                    resize.width = width - deltaX * pct;
-                    resize.height = height - deltaY * pct;
+                    resize.width = freezeWidth ? width : width - deltaX * pct;
+                    resize.height = freezeHeight ? height : height - deltaY * pct;
                     break;
                 case 1:
-                    resize.width = width + deltaX * pct;
-                    resize.height = height - deltaY * pct;
+                    resize.width = freezeWidth ? width : width + deltaX * pct;
+                    resize.height = freezeHeight ? height : height - deltaY * pct;
                     break;
                 case 2:
-                    resize.width = width + deltaX * pct;
-                    resize.height = height + deltaY * pct;
+                    resize.width = freezeWidth ? width : width + deltaX * pct;
+                    resize.height = freezeHeight ? height : height + deltaY * pct;
                     break;
                 case 3:
-                    resize.width = width - deltaX * pct;
-                    resize.height = height + deltaY * pct;
+                    resize.width = freezeWidth ? width : width - deltaX * pct;
+                    resize.height = freezeHeight ? height : height + deltaY * pct;
                     break;
                 default:
                     break;
@@ -172,8 +173,11 @@ 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, PCTResizeInfo = _b.PCTResizeInfo;
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             // 更新中心点位置，更新文案位置
             var index = _this.index;
+            var freezeWidth = (minWidth === maxWidth);
+            var freezeHeight = (minHeight === maxHeight);
             var size = _this.getResize({
                 index: index,
                 deltaX: deltaX,
@@ -182,9 +186,10 @@ var Control = /** @class */ (function (_super) {
                 height: height,
                 PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
+                freezeWidth: freezeWidth,
+                freezeHeight: freezeHeight,
             });
             // 限制放大缩小的最大最小范围
-            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             if (size.width < minWidth
                 || size.width > maxWidth
                 || size.height < minHeight
@@ -193,7 +198,11 @@ var Control = /** @class */ (function (_super) {
                 _this.dragHandler.cancelDrag();
                 return;
             }
-            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
+            // 如果限制了宽/高不变，对应的x/y不产生位移
+            _this.updatePosition({
+                deltaX: freezeWidth ? 0 : size.deltaX,
+                deltaY: freezeHeight ? 0 : size.deltaY,
+            });
             // 更新宽高
             _this.nodeModel.width = size.width;
             _this.nodeModel.height = size.height;
@@ -227,6 +236,9 @@ var Control = /** @class */ (function (_super) {
             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, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
+            var freezeWidth = (minWidth === maxWidth);
+            var freezeHeight = (minHeight === maxHeight);
             var width = rx;
             var height = ry;
             var size = _this.getResize({
@@ -237,9 +249,10 @@ var Control = /** @class */ (function (_super) {
                 height: height,
                 PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
+                freezeWidth: freezeWidth,
+                freezeHeight: freezeHeight,
             });
             // 限制放大缩小的最大最小范围
-            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             if (size.width < (minWidth / 2)
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
@@ -248,7 +261,11 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
+            // 如果限制了宽/高不变，对应的x/y不产生位移
+            _this.updatePosition({
+                deltaX: freezeWidth ? 0 : size.deltaX,
+                deltaY: freezeHeight ? 0 : size.deltaY,
+            });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
             _this.nodeModel.rx = size.width;
@@ -277,6 +294,9 @@ var Control = /** @class */ (function (_super) {
             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, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
+            var freezeWidth = (minWidth === maxWidth);
+            var freezeHeight = (minHeight === maxHeight);
             var width = rx;
             var height = ry;
             var size = _this.getResize({
@@ -287,9 +307,10 @@ var Control = /** @class */ (function (_super) {
                 height: height,
                 PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
+                freezeWidth: freezeWidth,
+                freezeHeight: freezeHeight,
             });
             // 限制放大缩小的最大最小范围
-            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             if (size.width < (minWidth / 2)
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
@@ -298,7 +319,11 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
+            // 如果限制了宽/高不变，对应的x/y不产生位移
+            _this.updatePosition({
+                deltaX: freezeWidth ? 0 : size.deltaX,
+                deltaY: freezeHeight ? 0 : size.deltaY,
+            });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
             _this.nodeModel.rx = size.width;
@@ -350,13 +375,13 @@ var Control = /** @class */ (function (_super) {
          * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
          */
         _this.onDragEnd = function () {
-            // 先触发onDragging()->更新边->再触发用户自定义的getDefaultAnchor()，所以onDragging()拿到的anchors是滞后的
-            // 为了正确设置最终的位置，应该在拖拽结束的时候，再设置一次边的Point位置，此时拿到的anchors是最新的
-            _this.updateEdgePointByAnchors();
             var _a = _this.graphModel.gridSize, gridSize = _a === void 0 ? 1 : _a;
             var x = gridSize * Math.round(_this.nodeModel.x / gridSize);
             var y = gridSize * Math.round(_this.nodeModel.y / gridSize);
             _this.nodeModel.moveTo(x, y);
+            // 先触发onDragging()->更新边->再触发用户自定义的getDefaultAnchor()，所以onDragging()拿到的anchors是滞后的
+            // 为了正确设置最终的位置，应该在拖拽结束的时候，再设置一次边的Point位置，此时拿到的anchors是最新的
+            _this.updateEdgePointByAnchors();
         };
         _this.index = props.index;
         _this.nodeModel = props.model;

package/cjs/materials/group/index.js

@@ -65,6 +65,8 @@ var Group = /** @class */ (function () {
                         });
                     }
                 });
+                // 初始化nodes时进行this.topGroupZIndex的校准更新
+                _this.checkAndCorrectTopGroupZIndex(data.nodes);
             }
         };
         this.appendNodeToGroup = function (_a) {
@@ -95,6 +97,8 @@ var Group = /** @class */ (function () {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
+                // 新增node时进行this.topGroupZIndex的校准更新
+                _this.checkAndCorrectTopGroupZIndex([data]);
                 _this.nodeSelected({ data: data, isSelected: false, isMultiple: false });
             }
             if (!group)
@@ -144,6 +148,59 @@ var Group = /** @class */ (function () {
             _this.activeGroup = newGroup;
             _this.activeGroup.setAllowAppendChild(true);
         };
+        this.findNodeAndChildMaxZIndex = function (nodeModel) {
+            var maxZIndex = DEFAULT_BOTTOM_Z_INDEX;
+            if (nodeModel.isGroup) {
+                maxZIndex = nodeModel.zIndex > maxZIndex ? nodeModel.zIndex : maxZIndex;
+            }
+            if (nodeModel.children) {
+                nodeModel.children.forEach(function (nodeId) {
+                    if (typeof nodeId === 'object') {
+                        // 正常情况下, GroupNodeModel.children是一个id数组，这里只是做个兼容
+                        // @ts-ignore
+                        nodeId = nodeId.id;
+                    }
+                    var child = _this.lf.getNodeModelById(nodeId);
+                    if (child.isGroup) {
+                        var childMaxZIndex = _this.findNodeAndChildMaxZIndex(child);
+                        maxZIndex = childMaxZIndex > maxZIndex ? childMaxZIndex : maxZIndex;
+                    }
+                });
+            }
+            return maxZIndex;
+        };
+        this.checkAndCorrectTopGroupZIndex = function (nodes) {
+            // 初始化时/增加新节点时，找出新增nodes的最大zIndex
+            var maxZIndex = DEFAULT_BOTTOM_Z_INDEX;
+            nodes.forEach(function (node) {
+                var nodeModel = _this.lf.getNodeModelById(node.id);
+                var currentNodeMaxZIndex = _this.findNodeAndChildMaxZIndex(nodeModel);
+                if (currentNodeMaxZIndex > maxZIndex) {
+                    maxZIndex = currentNodeMaxZIndex;
+                }
+            });
+            if (_this.topGroupZIndex >= maxZIndex) {
+                // 一般是初始化时/增加新节点时发生，因为外部强行设置了一个很大的zIndex
+                // 删除节点不会影响目前最高zIndex的赋值
+                return;
+            }
+            // 新增nodes中如果存在zIndex比this.topGroupZIndex大
+            // 说明this.topGroupZIndex已经失去意义，代表不了目前最高zIndex的group，需要重新校准
+            // https://github.com/didi/LogicFlow/issues/1535
+            // 当外部直接设置多个BaseNode.zIndex=1时
+            // 当点击某一个node时，由于这个this.topGroupZIndex是从-10000开始计算的，this.topGroupZIndex+1也就是-9999
+            // 这就造成当前点击的node的zIndex远远比其它node的zIndex小，因此造成zIndex错乱问题
+            var allGroupNodes = _this.lf.graphModel.nodes
+                .filter(function (node) { return node.isGroup; });
+            var max = _this.topGroupZIndex;
+            for (var i = 0; i < allGroupNodes.length; i++) {
+                var groupNode = allGroupNodes[i];
+                if (groupNode.zIndex > max) {
+                    max = groupNode.zIndex;
+                }
+            }
+            _this.topGroupZIndex = max;
+        };
         /**
          * 1. 分组节点默认在普通节点下面。
          * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。

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

@@ -22,7 +22,7 @@ declare class Control extends Component<IProps> {
         deltaX: any;
         deltaY: any;
     }) => void;
-    getResize: ({ index, deltaX, deltaY, width, height, PCTResizeInfo, pct }: {
+    getResize: ({ index, deltaX, deltaY, width, height, PCTResizeInfo, pct, freezeWidth, freezeHeight, }: {
         index: any;
         deltaX: any;
         deltaY: any;
@@ -30,6 +30,8 @@ declare class Control extends Component<IProps> {
         height: any;
         PCTResizeInfo: any;
         pct?: number;
+        freezeWidth?: boolean;
+        freezeHeight?: boolean;
     }) => {
         width: any;
         height: any;

package/es/NodeResize/Control/Control.js

@@ -57,7 +57,7 @@ var Control = /** @class */ (function (_super) {
         };
         // 计算control拖动后，节点的宽高
         _this.getResize = function (_a) {
-            var index = _a.index, deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, PCTResizeInfo = _a.PCTResizeInfo, _b = _a.pct, pct = _b === void 0 ? 1 : _b;
+            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, _c = _a.freezeWidth, freezeWidth = _c === void 0 ? false : _c, _d = _a.freezeHeight, freezeHeight = _d === void 0 ? false : _d;
             var resize = { width: width, height: height, deltaX: deltaX, deltaY: deltaY };
             if (PCTResizeInfo) {
                 var sensitivity = 4; // 越低越灵敏
@@ -115,22 +115,23 @@ var Control = /** @class */ (function (_super) {
                 resize.deltaY = deltaY / pct;
                 return resize;
             }
+            // 如果限制了宽/高不变，对应的width/height保持一致
             switch (index) {
                 case 0:
-                    resize.width = width - deltaX * pct;
-                    resize.height = height - deltaY * pct;
+                    resize.width = freezeWidth ? width : width - deltaX * pct;
+                    resize.height = freezeHeight ? height : height - deltaY * pct;
                     break;
                 case 1:
-                    resize.width = width + deltaX * pct;
-                    resize.height = height - deltaY * pct;
+                    resize.width = freezeWidth ? width : width + deltaX * pct;
+                    resize.height = freezeHeight ? height : height - deltaY * pct;
                     break;
                 case 2:
-                    resize.width = width + deltaX * pct;
-                    resize.height = height + deltaY * pct;
+                    resize.width = freezeWidth ? width : width + deltaX * pct;
+                    resize.height = freezeHeight ? height : height + deltaY * pct;
                     break;
                 case 3:
-                    resize.width = width - deltaX * pct;
-                    resize.height = height + deltaY * pct;
+                    resize.width = freezeWidth ? width : width - deltaX * pct;
+                    resize.height = freezeHeight ? height : height + deltaY * pct;
                     break;
                 default:
                     break;
@@ -170,8 +171,11 @@ 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, PCTResizeInfo = _b.PCTResizeInfo;
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             // 更新中心点位置，更新文案位置
             var index = _this.index;
+            var freezeWidth = (minWidth === maxWidth);
+            var freezeHeight = (minHeight === maxHeight);
             var size = _this.getResize({
                 index: index,
                 deltaX: deltaX,
@@ -180,9 +184,10 @@ var Control = /** @class */ (function (_super) {
                 height: height,
                 PCTResizeInfo: PCTResizeInfo,
                 pct: 1,
+                freezeWidth: freezeWidth,
+                freezeHeight: freezeHeight,
             });
             // 限制放大缩小的最大最小范围
-            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             if (size.width < minWidth
                 || size.width > maxWidth
                 || size.height < minHeight
@@ -191,7 +196,11 @@ var Control = /** @class */ (function (_super) {
                 _this.dragHandler.cancelDrag();
                 return;
             }
-            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
+            // 如果限制了宽/高不变，对应的x/y不产生位移
+            _this.updatePosition({
+                deltaX: freezeWidth ? 0 : size.deltaX,
+                deltaY: freezeHeight ? 0 : size.deltaY,
+            });
             // 更新宽高
             _this.nodeModel.width = size.width;
             _this.nodeModel.height = size.height;
@@ -225,6 +234,9 @@ var Control = /** @class */ (function (_super) {
             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, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
+            var freezeWidth = (minWidth === maxWidth);
+            var freezeHeight = (minHeight === maxHeight);
             var width = rx;
             var height = ry;
             var size = _this.getResize({
@@ -235,9 +247,10 @@ var Control = /** @class */ (function (_super) {
                 height: height,
                 PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
+                freezeWidth: freezeWidth,
+                freezeHeight: freezeHeight,
             });
             // 限制放大缩小的最大最小范围
-            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             if (size.width < (minWidth / 2)
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
@@ -246,7 +259,11 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
+            // 如果限制了宽/高不变，对应的x/y不产生位移
+            _this.updatePosition({
+                deltaX: freezeWidth ? 0 : size.deltaX,
+                deltaY: freezeHeight ? 0 : size.deltaY,
+            });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
             _this.nodeModel.rx = size.width;
@@ -275,6 +292,9 @@ var Control = /** @class */ (function (_super) {
             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, PCTResizeInfo = _b.PCTResizeInfo;
             var index = _this.index;
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
+            var freezeWidth = (minWidth === maxWidth);
+            var freezeHeight = (minHeight === maxHeight);
             var width = rx;
             var height = ry;
             var size = _this.getResize({
@@ -285,9 +305,10 @@ var Control = /** @class */ (function (_super) {
                 height: height,
                 PCTResizeInfo: PCTResizeInfo,
                 pct: 1 / 2,
+                freezeWidth: freezeWidth,
+                freezeHeight: freezeHeight,
             });
             // 限制放大缩小的最大最小范围
-            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
             if (size.width < (minWidth / 2)
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
@@ -296,7 +317,11 @@ var Control = /** @class */ (function (_super) {
                 return;
             }
             // 更新中心点位置，更新文案位置
-            _this.updatePosition({ deltaX: size.deltaX, deltaY: size.deltaY });
+            // 如果限制了宽/高不变，对应的x/y不产生位移
+            _this.updatePosition({
+                deltaX: freezeWidth ? 0 : size.deltaX,
+                deltaY: freezeHeight ? 0 : size.deltaY,
+            });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
             _this.nodeModel.rx = size.width;
@@ -348,13 +373,13 @@ var Control = /** @class */ (function (_super) {
          * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
          */
         _this.onDragEnd = function () {
-            // 先触发onDragging()->更新边->再触发用户自定义的getDefaultAnchor()，所以onDragging()拿到的anchors是滞后的
-            // 为了正确设置最终的位置，应该在拖拽结束的时候，再设置一次边的Point位置，此时拿到的anchors是最新的
-            _this.updateEdgePointByAnchors();
             var _a = _this.graphModel.gridSize, gridSize = _a === void 0 ? 1 : _a;
             var x = gridSize * Math.round(_this.nodeModel.x / gridSize);
             var y = gridSize * Math.round(_this.nodeModel.y / gridSize);
             _this.nodeModel.moveTo(x, y);
+            // 先触发onDragging()->更新边->再触发用户自定义的getDefaultAnchor()，所以onDragging()拿到的anchors是滞后的
+            // 为了正确设置最终的位置，应该在拖拽结束的时候，再设置一次边的Point位置，此时拿到的anchors是最新的
+            _this.updateEdgePointByAnchors();
         };
         _this.index = props.index;
         _this.nodeModel = props.model;

package/es/materials/group/index.d.ts

@@ -1,4 +1,4 @@
-import LogicFlow, { BaseEdgeModel, BaseNodeModel, EdgeConfig } from '@logicflow/core';
+import LogicFlow, { BaseEdgeModel, BaseNodeModel, EdgeConfig, NodeData } from '@logicflow/core';
 import GroupNode from './GroupNode';
 declare type BaseNodeId = string;
 declare type GroupId = string;
@@ -40,6 +40,8 @@ declare class Group {
     setActiveGroup: ({ data }: {
         data: any;
     }) => void;
+    findNodeAndChildMaxZIndex: (nodeModel: BaseNodeModel) => number;
+    checkAndCorrectTopGroupZIndex: (nodes: NodeData[]) => void;
     /**
      * 1. 分组节点默认在普通节点下面。
      * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。

package/es/materials/group/index.js

@@ -61,6 +61,8 @@ var Group = /** @class */ (function () {
                         });
                     }
                 });
+                // 初始化nodes时进行this.topGroupZIndex的校准更新
+                _this.checkAndCorrectTopGroupZIndex(data.nodes);
             }
         };
         this.appendNodeToGroup = function (_a) {
@@ -91,6 +93,8 @@ var Group = /** @class */ (function () {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
+                // 新增node时进行this.topGroupZIndex的校准更新
+                _this.checkAndCorrectTopGroupZIndex([data]);
                 _this.nodeSelected({ data: data, isSelected: false, isMultiple: false });
             }
             if (!group)
@@ -140,6 +144,59 @@ var Group = /** @class */ (function () {
             _this.activeGroup = newGroup;
             _this.activeGroup.setAllowAppendChild(true);
         };
+        this.findNodeAndChildMaxZIndex = function (nodeModel) {
+            var maxZIndex = DEFAULT_BOTTOM_Z_INDEX;
+            if (nodeModel.isGroup) {
+                maxZIndex = nodeModel.zIndex > maxZIndex ? nodeModel.zIndex : maxZIndex;
+            }
+            if (nodeModel.children) {
+                nodeModel.children.forEach(function (nodeId) {
+                    if (typeof nodeId === 'object') {
+                        // 正常情况下, GroupNodeModel.children是一个id数组，这里只是做个兼容
+                        // @ts-ignore
+                        nodeId = nodeId.id;
+                    }
+                    var child = _this.lf.getNodeModelById(nodeId);
+                    if (child.isGroup) {
+                        var childMaxZIndex = _this.findNodeAndChildMaxZIndex(child);
+                        maxZIndex = childMaxZIndex > maxZIndex ? childMaxZIndex : maxZIndex;
+                    }
+                });
+            }
+            return maxZIndex;
+        };
+        this.checkAndCorrectTopGroupZIndex = function (nodes) {
+            // 初始化时/增加新节点时，找出新增nodes的最大zIndex
+            var maxZIndex = DEFAULT_BOTTOM_Z_INDEX;
+            nodes.forEach(function (node) {
+                var nodeModel = _this.lf.getNodeModelById(node.id);
+                var currentNodeMaxZIndex = _this.findNodeAndChildMaxZIndex(nodeModel);
+                if (currentNodeMaxZIndex > maxZIndex) {
+                    maxZIndex = currentNodeMaxZIndex;
+                }
+            });
+            if (_this.topGroupZIndex >= maxZIndex) {
+                // 一般是初始化时/增加新节点时发生，因为外部强行设置了一个很大的zIndex
+                // 删除节点不会影响目前最高zIndex的赋值
+                return;
+            }
+            // 新增nodes中如果存在zIndex比this.topGroupZIndex大
+            // 说明this.topGroupZIndex已经失去意义，代表不了目前最高zIndex的group，需要重新校准
+            // https://github.com/didi/LogicFlow/issues/1535
+            // 当外部直接设置多个BaseNode.zIndex=1时
+            // 当点击某一个node时，由于这个this.topGroupZIndex是从-10000开始计算的，this.topGroupZIndex+1也就是-9999
+            // 这就造成当前点击的node的zIndex远远比其它node的zIndex小，因此造成zIndex错乱问题
+            var allGroupNodes = _this.lf.graphModel.nodes
+                .filter(function (node) { return node.isGroup; });
+            var max = _this.topGroupZIndex;
+            for (var i = 0; i < allGroupNodes.length; i++) {
+                var groupNode = allGroupNodes[i];
+                if (groupNode.zIndex > max) {
+                    max = groupNode.zIndex;
+                }
+            }
+            _this.topGroupZIndex = max;
+        };
         /**
          * 1. 分组节点默认在普通节点下面。
          * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。