@logicflow/extension 1.2.25 → 1.2.26

package/cjs/NodeResize/Control/Control.js

@@ -350,13 +350,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.js

@@ -348,13 +348,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. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。