@logicflow/extension 1.2.8 → 1.2.10

package/cjs/NodeResize/Control/Control.js

@@ -139,6 +139,35 @@ var Control = /** @class */ (function (_super) {
             }
             return resize;
         };
+        _this.updateEdgePointByAnchors = function () {
+            // https://github.com/didi/LogicFlow/issues/807
+            // https://github.com/didi/LogicFlow/issues/875
+            // 之前的做法，比如Rect是使用getRectResizeEdgePoint()计算边的point缩放后的位置
+            // getRectResizeEdgePoint()考虑了瞄点在四条边以及在4个圆角的情况
+            // 使用的是一种等比例缩放的模式，比如：
+            // const pct = (y - beforeNode.y) / (beforeNode.height / 2 - radius)
+            // afterPoint.y = afterNode.y + (afterNode.height / 2 - radius) * pct
+            // 但是用户自定义的getDefaultAnchor()不一定是按照比例编写的
+            // 它可能是 x: x + 20：每次缩放都会保持在x右边20的位置，因此用户自定义瞄点时，然后产生无法跟随的问题
+            // 现在的做法是：直接获取用户自定义瞄点的位置，然后用这个位置作为边的新的起点，而不是自己进行计算
+            var _a = _this.nodeModel, id = _a.id, anchors = _a.anchors;
+            var edges = _this.getNodeEdges(id);
+            // 更新边
+            edges.sourceEdges.forEach(function (item) {
+                var anchorItem = anchors.find(function (anchor) { return anchor.id === item.sourceAnchorId; });
+                item.updateStartPoint({
+                    x: anchorItem.x,
+                    y: anchorItem.y,
+                });
+            });
+            edges.targetEdges.forEach(function (item) {
+                var anchorItem = anchors.find(function (anchor) { return anchor.id === item.targetAnchorId; });
+                item.updateEndPoint({
+                    x: anchorItem.x,
+                    y: anchorItem.y,
+                });
+            });
+        };
         // 矩形更新
         _this.updateRect = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
@@ -189,23 +218,8 @@ var Control = /** @class */ (function (_super) {
                 height: _this.nodeModel.height,
                 radius: radius,
             };
-            var params = {
-                point: '',
-                beforeNode: beforeNode,
-                afterNode: afterNode,
-            };
             // 更新边
-            var afterPoint;
-            edges.sourceEdges.forEach(function (item) {
-                params.point = item.startPoint;
-                afterPoint = Util_1.getRectResizeEdgePoint(params);
-                item.updateStartPoint(afterPoint);
-            });
-            edges.targetEdges.forEach(function (item) {
-                params.point = item.endPoint;
-                afterPoint = Util_1.getRectResizeEdgePoint(params);
-                item.updateEndPoint(afterPoint);
-            });
+            _this.updateEdgePointByAnchors();
             _this.eventEmit({ beforeNode: beforeNode, afterNode: afterNode });
         };
         // 椭圆更新
@@ -254,23 +268,8 @@ var Control = /** @class */ (function (_super) {
                 x: _this.nodeModel.x,
                 y: _this.nodeModel.y,
             };
-            var params = {
-                point: {},
-                beforeNode: beforeNode,
-                afterNode: afterNode,
-            };
             // 更新边
-            var afterPoint;
-            edges.sourceEdges.forEach(function (item) {
-                params.point = item.startPoint;
-                afterPoint = Util_1.getEllipseResizeEdgePoint(params);
-                item.updateStartPoint(afterPoint);
-            });
-            edges.targetEdges.forEach(function (item) {
-                params.point = item.endPoint;
-                afterPoint = Util_1.getEllipseResizeEdgePoint(params);
-                item.updateEndPoint(afterPoint);
-            });
+            _this.updateEdgePointByAnchors();
             _this.eventEmit({ beforeNode: __assign(__assign({}, beforeNode), { rx: rx, ry: ry }), afterNode: afterNode });
         };
         // 菱形更新
@@ -318,24 +317,8 @@ var Control = /** @class */ (function (_super) {
                 x: _this.nodeModel.x,
                 y: _this.nodeModel.y,
             };
-            var params = {
-                point: {},
-                beforeNode: beforeNode,
-                afterNode: afterNode,
-            };
             // 更新边
-            var afterPoint;
-            var edges = _this.getNodeEdges(id);
-            edges.sourceEdges.forEach(function (item) {
-                params.point = item.startPoint;
-                afterPoint = Util_1.getDiamondResizeEdgePoint(params);
-                item.updateStartPoint(afterPoint);
-            });
-            edges.targetEdges.forEach(function (item) {
-                params.point = item.endPoint;
-                afterPoint = Util_1.getDiamondResizeEdgePoint(params);
-                item.updateEndPoint(afterPoint);
-            });
+            _this.updateEdgePointByAnchors();
             _this.eventEmit({ beforeNode: beforeNode, afterNode: afterNode });
         };
         _this.eventEmit = function (_a) {
@@ -367,6 +350,9 @@ 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);

package/cjs/components/control/index.js

@@ -91,7 +91,7 @@ var Control = /** @class */ (function () {
     };
     Control.prototype.removeItem = function (key) {
         var index = this.controlItems.findIndex(function (item) { return item.key === key; });
-        return this.controlItems.splice(index, 1)[0];
+        return index == -1 ? null : this.controlItems.splice(index, 1)[0];
     };
     Control.prototype.getControlTool = function () {
         var _this = this;

package/cjs/components/menu/index.js

@@ -128,7 +128,7 @@ var Menu = /** @class */ (function () {
         }, true);
         // 通过事件控制菜单的显示和隐藏
         this.lf.on('node:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position;
+            var data = _a.data, position = _a.position, e = _a.e;
             var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
             var id = data.id;
             var model = _this.lf.graphModel.getNodeModelById(id);
@@ -145,10 +145,15 @@ var Menu = /** @class */ (function () {
                 menuList = _this.menuTypeMap.get(DefaultNodeMenuKey);
             }
             _this.__currentData = data;
-            _this.showMenu(x, y, menuList);
+            _this.showMenu(x, y, menuList, {
+                width: model.width,
+                height: model.height,
+                clientX: e.clientX,
+                clientY: e.clientY,
+            });
         });
         this.lf.on('edge:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position;
+            var data = _a.data, position = _a.position, e = _a.e;
             var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
             var id = data.id;
             var model = _this.lf.graphModel.getEdgeModelById(id);
@@ -165,7 +170,12 @@ var Menu = /** @class */ (function () {
                 menuList = _this.menuTypeMap.get(DefaultEdgeMenuKey);
             }
             _this.__currentData = data;
-            _this.showMenu(x, y, menuList);
+            _this.showMenu(x, y, menuList, {
+                width: model.width,
+                height: model.height,
+                clientX: e.clientX,
+                clientY: e.clientY,
+            });
         });
         this.lf.on('blank:contextmenu', function (_a) {
             var position = _a.position;
@@ -195,7 +205,7 @@ var Menu = /** @class */ (function () {
         (_a = this === null || this === void 0 ? void 0 : this.__container) === null || _a === void 0 ? void 0 : _a.removeChild(this.__menuDOM);
         this.__menuDOM = null;
     };
-    Menu.prototype.showMenu = function (x, y, menuList) {
+    Menu.prototype.showMenu = function (x, y, menuList, options) {
         if (!menuList || !menuList.length)
             return;
         var menu = this.__menuDOM;
@@ -206,8 +216,67 @@ var Menu = /** @class */ (function () {
         if (!menu.children.length)
             return;
         menu.style.display = 'block';
-        menu.style.top = y + "px";
-        menu.style.left = x + "px";
+        if (!options) {
+            menu.style.top = y + "px";
+            menu.style.left = x + "px";
+            return;
+        }
+        // https://github.com/didi/LogicFlow/issues/1019
+        // 根据边界判断菜单的left 和 top
+        var width = options.width, height = options.height, clientX = options.clientX, clientY = options.clientY;
+        var graphModel = this.lf.graphModel;
+        var menuWidth = menu.offsetWidth;
+        var menuIsRightShow = true;
+        // ======先进行可视屏幕范围的判断=======
+        // 浏览器窗口可视区域兼容性写法
+        // eslint-disable-next-line max-len
+        var windowMaxX = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        var rightDistance = windowMaxX - clientX;
+        // ======先进行可视屏幕范围的判断=======
+        // ========再进行画布范围的判断========
+        var graphRect = graphModel.rootEl.getBoundingClientRect();
+        var graphMaxX = graphRect.left + graphRect.width;
+        if (graphMaxX < windowMaxX) {
+            // 画布右边小于可视屏幕范围的最右边，取画布右边作为极限值，计算出当前触摸点距离右边极限值的距离
+            rightDistance = graphMaxX - clientX;
+        }
+        // ========再进行画布范围的判断========
+        // 根据当前触摸点距离右边的距离 跟 menuWidth进行比较
+        if (rightDistance < menuWidth) {
+            // 空间不足够，显示在左边
+            menuIsRightShow = false;
+        }
+        if (menuIsRightShow) {
+            menu.style.left = x + "px";
+        }
+        else {
+            menu.style.left = (x - width) + "px";
+        }
+        var menuHeight = menu.offsetHeight;
+        var menuIsBottomShow = true;
+        // ======先进行可视屏幕范围的判断=======
+        // 浏览器窗口可视区域兼容性写法
+        // eslint-disable-next-line max-len
+        var windowMaxY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        var bottomDistance = windowMaxY - clientY;
+        // ======先进行可视屏幕范围的判断=======
+        // ========再进行画布范围的判断========
+        var graphMaxY = graphRect.top + graphRect.height;
+        if (graphMaxY < windowMaxY) {
+            // 画布底部小于可视屏幕范围的最底边，取画布底部作为极限值，计算出当前触摸点距离底部极限值的距离
+            bottomDistance = graphMaxY - clientY;
+        }
+        // ========再进行画布范围的判断========
+        if (bottomDistance < menuHeight) {
+            // 如果下边距离太小，无法显示menu，则向上显示
+            menuIsBottomShow = false;
+        }
+        if (menuIsBottomShow) {
+            menu.style.top = y + "px";
+        }
+        else {
+            menu.style.top = (y - height) + "px";
+        }
     };
     /**
      * 设置指定类型元素的菜单

package/cjs/materials/group/GroupNode.js

@@ -56,6 +56,10 @@ var GroupNodeModel = /** @class */ (function (_super) {
         _this.isGroup = true;
         _this.unfoldedWidth = defaultWidth;
         _this.unfoldedHight = defaultHeight;
+        /**
+         * children元素上一次折叠的状态缓存
+         */
+        _this.childrenLastFoldStatus = {};
         return _this;
     }
     GroupNodeModel.prototype.initNodeData = function (data) {
@@ -103,6 +107,11 @@ var GroupNodeModel = /** @class */ (function (_super) {
      */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
         var _this = this;
+        if (isFolded === this.isFolded) {
+            // 防止多次调用同样的状态设置
+            // 如果this.isFolded=false，同时触发foldGroup(false)，会导致下面的childrenLastFoldStatus状态错乱
+            return;
+        }
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
         // step 1
@@ -124,10 +133,26 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
+            var foldStatus = nodeModel.isFolded;
             // FIX: https://github.com/didi/LogicFlow/issues/1007
             if (nodeModel.isGroup && !nodeModel.isFolded) {
+                // 正常情况下，parent折叠后，children应该折叠
+                // 因此当parent准备展开时，children的值目前肯定是折叠状态，也就是nodeModel.isFolded=true，这个代码块不会触发
+                // 只有当parent准备折叠时，children目前状态才有可能是展开，即nodeModel.isFolded=false，这个代码块触发，此时isFolded=true，触发children也进行折叠
                 nodeModel.foldGroup(isFolded);
             }
+            if (nodeModel.isGroup && !isFolded) {
+                // 当parent准备展开时，children的值应该恢复到折叠前的状态
+                var lastFoldStatus = _this.childrenLastFoldStatus[elementId];
+                if (lastFoldStatus !== undefined && lastFoldStatus !== nodeModel.isFolded) {
+                    // https://github.com/didi/LogicFlow/issues/1145
+                    // 当parent准备展开时，children的值肯定是折叠，也就是nodeModel.isFolded=true
+                    // 当parent准备展开时，如果children之前的状态是展开，则恢复展开状态
+                    nodeModel.foldGroup(lastFoldStatus);
+                }
+            }
+            // 存储parent触发children改变折叠状态前的状态
+            _this.childrenLastFoldStatus[elementId] = foldStatus;
             nodeModel.visible = !isFolded;
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });

package/cjs/tools/snapshot/index.js

@@ -154,7 +154,7 @@ var Snapshot = /** @class */ (function () {
         var transformModel = graphModel.transformModel;
         var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         // offset值加10，保证图形不会紧贴着下载图片的左边和上边
-        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + (-offsetX + 10 + TRANSLATE_X) + ", " + (-offsetY + 10 + TRANSLATE_Y) + ")";
+        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + ((-offsetX + TRANSLATE_X) * (1 / SCALE_X) + 10) + ", " + ((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + 10) + ")";
         var bboxWidth = Math.ceil(bbox.width / SCALE_X);
         var bboxHeight = Math.ceil(bbox.height / SCALE_Y);
         // width,height 值加40，保证图形不会紧贴着下载图片的右边和下边

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

@@ -36,6 +36,7 @@ declare class Control extends Component<IProps> {
         deltaX: any;
         deltaY: any;
     };
+    updateEdgePointByAnchors: () => void;
     updateRect: ({ deltaX, deltaY }: {
         deltaX: any;
         deltaY: any;

package/es/NodeResize/Control/Control.js

@@ -41,7 +41,7 @@ var __read = (this && this.__read) || function (o, n) {
 import { h, Component } from 'preact';
 import { LogicFlowUtil } from '@logicflow/core';
 import Rect from '../BasicShape/Rect';
-import { getDiamondResizeEdgePoint, getEllipseResizeEdgePoint, getRectResizeEdgePoint, ModelType } from './Util';
+import { ModelType } from './Util';
 var StepDrag = LogicFlowUtil.StepDrag;
 var Control = /** @class */ (function (_super) {
     __extends(Control, _super);
@@ -137,6 +137,35 @@ var Control = /** @class */ (function (_super) {
             }
             return resize;
         };
+        _this.updateEdgePointByAnchors = function () {
+            // https://github.com/didi/LogicFlow/issues/807
+            // https://github.com/didi/LogicFlow/issues/875
+            // 之前的做法，比如Rect是使用getRectResizeEdgePoint()计算边的point缩放后的位置
+            // getRectResizeEdgePoint()考虑了瞄点在四条边以及在4个圆角的情况
+            // 使用的是一种等比例缩放的模式，比如：
+            // const pct = (y - beforeNode.y) / (beforeNode.height / 2 - radius)
+            // afterPoint.y = afterNode.y + (afterNode.height / 2 - radius) * pct
+            // 但是用户自定义的getDefaultAnchor()不一定是按照比例编写的
+            // 它可能是 x: x + 20：每次缩放都会保持在x右边20的位置，因此用户自定义瞄点时，然后产生无法跟随的问题
+            // 现在的做法是：直接获取用户自定义瞄点的位置，然后用这个位置作为边的新的起点，而不是自己进行计算
+            var _a = _this.nodeModel, id = _a.id, anchors = _a.anchors;
+            var edges = _this.getNodeEdges(id);
+            // 更新边
+            edges.sourceEdges.forEach(function (item) {
+                var anchorItem = anchors.find(function (anchor) { return anchor.id === item.sourceAnchorId; });
+                item.updateStartPoint({
+                    x: anchorItem.x,
+                    y: anchorItem.y,
+                });
+            });
+            edges.targetEdges.forEach(function (item) {
+                var anchorItem = anchors.find(function (anchor) { return anchor.id === item.targetAnchorId; });
+                item.updateEndPoint({
+                    x: anchorItem.x,
+                    y: anchorItem.y,
+                });
+            });
+        };
         // 矩形更新
         _this.updateRect = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
@@ -187,23 +216,8 @@ var Control = /** @class */ (function (_super) {
                 height: _this.nodeModel.height,
                 radius: radius,
             };
-            var params = {
-                point: '',
-                beforeNode: beforeNode,
-                afterNode: afterNode,
-            };
             // 更新边
-            var afterPoint;
-            edges.sourceEdges.forEach(function (item) {
-                params.point = item.startPoint;
-                afterPoint = getRectResizeEdgePoint(params);
-                item.updateStartPoint(afterPoint);
-            });
-            edges.targetEdges.forEach(function (item) {
-                params.point = item.endPoint;
-                afterPoint = getRectResizeEdgePoint(params);
-                item.updateEndPoint(afterPoint);
-            });
+            _this.updateEdgePointByAnchors();
             _this.eventEmit({ beforeNode: beforeNode, afterNode: afterNode });
         };
         // 椭圆更新
@@ -252,23 +266,8 @@ var Control = /** @class */ (function (_super) {
                 x: _this.nodeModel.x,
                 y: _this.nodeModel.y,
             };
-            var params = {
-                point: {},
-                beforeNode: beforeNode,
-                afterNode: afterNode,
-            };
             // 更新边
-            var afterPoint;
-            edges.sourceEdges.forEach(function (item) {
-                params.point = item.startPoint;
-                afterPoint = getEllipseResizeEdgePoint(params);
-                item.updateStartPoint(afterPoint);
-            });
-            edges.targetEdges.forEach(function (item) {
-                params.point = item.endPoint;
-                afterPoint = getEllipseResizeEdgePoint(params);
-                item.updateEndPoint(afterPoint);
-            });
+            _this.updateEdgePointByAnchors();
             _this.eventEmit({ beforeNode: __assign(__assign({}, beforeNode), { rx: rx, ry: ry }), afterNode: afterNode });
         };
         // 菱形更新
@@ -316,24 +315,8 @@ var Control = /** @class */ (function (_super) {
                 x: _this.nodeModel.x,
                 y: _this.nodeModel.y,
             };
-            var params = {
-                point: {},
-                beforeNode: beforeNode,
-                afterNode: afterNode,
-            };
             // 更新边
-            var afterPoint;
-            var edges = _this.getNodeEdges(id);
-            edges.sourceEdges.forEach(function (item) {
-                params.point = item.startPoint;
-                afterPoint = getDiamondResizeEdgePoint(params);
-                item.updateStartPoint(afterPoint);
-            });
-            edges.targetEdges.forEach(function (item) {
-                params.point = item.endPoint;
-                afterPoint = getDiamondResizeEdgePoint(params);
-                item.updateEndPoint(afterPoint);
-            });
+            _this.updateEdgePointByAnchors();
             _this.eventEmit({ beforeNode: beforeNode, afterNode: afterNode });
         };
         _this.eventEmit = function (_a) {
@@ -365,6 +348,9 @@ 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);

package/es/components/control/index.js

@@ -88,7 +88,7 @@ var Control = /** @class */ (function () {
     };
     Control.prototype.removeItem = function (key) {
         var index = this.controlItems.findIndex(function (item) { return item.key === key; });
-        return this.controlItems.splice(index, 1)[0];
+        return index == -1 ? null : this.controlItems.splice(index, 1)[0];
     };
     Control.prototype.getControlTool = function () {
         var _this = this;

package/es/components/menu/index.js

@@ -125,7 +125,7 @@ var Menu = /** @class */ (function () {
         }, true);
         // 通过事件控制菜单的显示和隐藏
         this.lf.on('node:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position;
+            var data = _a.data, position = _a.position, e = _a.e;
             var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
             var id = data.id;
             var model = _this.lf.graphModel.getNodeModelById(id);
@@ -142,10 +142,15 @@ var Menu = /** @class */ (function () {
                 menuList = _this.menuTypeMap.get(DefaultNodeMenuKey);
             }
             _this.__currentData = data;
-            _this.showMenu(x, y, menuList);
+            _this.showMenu(x, y, menuList, {
+                width: model.width,
+                height: model.height,
+                clientX: e.clientX,
+                clientY: e.clientY,
+            });
         });
         this.lf.on('edge:contextmenu', function (_a) {
-            var data = _a.data, position = _a.position;
+            var data = _a.data, position = _a.position, e = _a.e;
             var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
             var id = data.id;
             var model = _this.lf.graphModel.getEdgeModelById(id);
@@ -162,7 +167,12 @@ var Menu = /** @class */ (function () {
                 menuList = _this.menuTypeMap.get(DefaultEdgeMenuKey);
             }
             _this.__currentData = data;
-            _this.showMenu(x, y, menuList);
+            _this.showMenu(x, y, menuList, {
+                width: model.width,
+                height: model.height,
+                clientX: e.clientX,
+                clientY: e.clientY,
+            });
         });
         this.lf.on('blank:contextmenu', function (_a) {
             var position = _a.position;
@@ -192,7 +202,7 @@ var Menu = /** @class */ (function () {
         (_a = this === null || this === void 0 ? void 0 : this.__container) === null || _a === void 0 ? void 0 : _a.removeChild(this.__menuDOM);
         this.__menuDOM = null;
     };
-    Menu.prototype.showMenu = function (x, y, menuList) {
+    Menu.prototype.showMenu = function (x, y, menuList, options) {
         if (!menuList || !menuList.length)
             return;
         var menu = this.__menuDOM;
@@ -203,8 +213,67 @@ var Menu = /** @class */ (function () {
         if (!menu.children.length)
             return;
         menu.style.display = 'block';
-        menu.style.top = y + "px";
-        menu.style.left = x + "px";
+        if (!options) {
+            menu.style.top = y + "px";
+            menu.style.left = x + "px";
+            return;
+        }
+        // https://github.com/didi/LogicFlow/issues/1019
+        // 根据边界判断菜单的left 和 top
+        var width = options.width, height = options.height, clientX = options.clientX, clientY = options.clientY;
+        var graphModel = this.lf.graphModel;
+        var menuWidth = menu.offsetWidth;
+        var menuIsRightShow = true;
+        // ======先进行可视屏幕范围的判断=======
+        // 浏览器窗口可视区域兼容性写法
+        // eslint-disable-next-line max-len
+        var windowMaxX = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        var rightDistance = windowMaxX - clientX;
+        // ======先进行可视屏幕范围的判断=======
+        // ========再进行画布范围的判断========
+        var graphRect = graphModel.rootEl.getBoundingClientRect();
+        var graphMaxX = graphRect.left + graphRect.width;
+        if (graphMaxX < windowMaxX) {
+            // 画布右边小于可视屏幕范围的最右边，取画布右边作为极限值，计算出当前触摸点距离右边极限值的距离
+            rightDistance = graphMaxX - clientX;
+        }
+        // ========再进行画布范围的判断========
+        // 根据当前触摸点距离右边的距离 跟 menuWidth进行比较
+        if (rightDistance < menuWidth) {
+            // 空间不足够，显示在左边
+            menuIsRightShow = false;
+        }
+        if (menuIsRightShow) {
+            menu.style.left = x + "px";
+        }
+        else {
+            menu.style.left = (x - width) + "px";
+        }
+        var menuHeight = menu.offsetHeight;
+        var menuIsBottomShow = true;
+        // ======先进行可视屏幕范围的判断=======
+        // 浏览器窗口可视区域兼容性写法
+        // eslint-disable-next-line max-len
+        var windowMaxY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        var bottomDistance = windowMaxY - clientY;
+        // ======先进行可视屏幕范围的判断=======
+        // ========再进行画布范围的判断========
+        var graphMaxY = graphRect.top + graphRect.height;
+        if (graphMaxY < windowMaxY) {
+            // 画布底部小于可视屏幕范围的最底边，取画布底部作为极限值，计算出当前触摸点距离底部极限值的距离
+            bottomDistance = graphMaxY - clientY;
+        }
+        // ========再进行画布范围的判断========
+        if (bottomDistance < menuHeight) {
+            // 如果下边距离太小，无法显示menu，则向上显示
+            menuIsBottomShow = false;
+        }
+        if (menuIsBottomShow) {
+            menu.style.top = y + "px";
+        }
+        else {
+            menu.style.top = (y - height) + "px";
+        }
     };
     /**
      * 设置指定类型元素的菜单

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

@@ -32,6 +32,10 @@ declare class GroupNodeModel extends RectResize.model {
     isFolded: boolean;
     unfoldedWidth: number;
     unfoldedHight: number;
+    /**
+     * children元素上一次折叠的状态缓存
+     */
+    childrenLastFoldStatus: Record<string, boolean>;
     initNodeData(data: any): void;
     getResizeOutlineStyle(): {
         fill: string;

package/es/materials/group/GroupNode.js

@@ -54,6 +54,10 @@ var GroupNodeModel = /** @class */ (function (_super) {
         _this.isGroup = true;
         _this.unfoldedWidth = defaultWidth;
         _this.unfoldedHight = defaultHeight;
+        /**
+         * children元素上一次折叠的状态缓存
+         */
+        _this.childrenLastFoldStatus = {};
         return _this;
     }
     GroupNodeModel.prototype.initNodeData = function (data) {
@@ -101,6 +105,11 @@ var GroupNodeModel = /** @class */ (function (_super) {
      */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
         var _this = this;
+        if (isFolded === this.isFolded) {
+            // 防止多次调用同样的状态设置
+            // 如果this.isFolded=false，同时触发foldGroup(false)，会导致下面的childrenLastFoldStatus状态错乱
+            return;
+        }
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
         // step 1
@@ -122,10 +131,26 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
+            var foldStatus = nodeModel.isFolded;
             // FIX: https://github.com/didi/LogicFlow/issues/1007
             if (nodeModel.isGroup && !nodeModel.isFolded) {
+                // 正常情况下，parent折叠后，children应该折叠
+                // 因此当parent准备展开时，children的值目前肯定是折叠状态，也就是nodeModel.isFolded=true，这个代码块不会触发
+                // 只有当parent准备折叠时，children目前状态才有可能是展开，即nodeModel.isFolded=false，这个代码块触发，此时isFolded=true，触发children也进行折叠
                 nodeModel.foldGroup(isFolded);
             }
+            if (nodeModel.isGroup && !isFolded) {
+                // 当parent准备展开时，children的值应该恢复到折叠前的状态
+                var lastFoldStatus = _this.childrenLastFoldStatus[elementId];
+                if (lastFoldStatus !== undefined && lastFoldStatus !== nodeModel.isFolded) {
+                    // https://github.com/didi/LogicFlow/issues/1145
+                    // 当parent准备展开时，children的值肯定是折叠，也就是nodeModel.isFolded=true
+                    // 当parent准备展开时，如果children之前的状态是展开，则恢复展开状态
+                    nodeModel.foldGroup(lastFoldStatus);
+                }
+            }
+            // 存储parent触发children改变折叠状态前的状态
+            _this.childrenLastFoldStatus[elementId] = foldStatus;
             nodeModel.visible = !isFolded;
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });

package/es/tools/snapshot/index.js

@@ -151,7 +151,7 @@ var Snapshot = /** @class */ (function () {
         var transformModel = graphModel.transformModel;
         var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         // offset值加10，保证图形不会紧贴着下载图片的左边和上边
-        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + (-offsetX + 10 + TRANSLATE_X) + ", " + (-offsetY + 10 + TRANSLATE_Y) + ")";
+        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + ((-offsetX + TRANSLATE_X) * (1 / SCALE_X) + 10) + ", " + ((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + 10) + ")";
         var bboxWidth = Math.ceil(bbox.width / SCALE_X);
         var bboxHeight = Math.ceil(bbox.height / SCALE_Y);
         // width,height 值加40，保证图形不会紧贴着下载图片的右边和下边