@logicflow/extension 2.2.0-alpha.4 → 2.2.0-alpha.6

package/es/components/control/index.js

@@ -132,14 +132,14 @@ var Control = /** @class */ (function () {
             else {
                 itemContainer.append(icon);
             }
-            switch (item.text) {
-                case '上一步':
+            switch (item.key) {
+                case 'undo':
                     _this.lf.on('history:change', function (_a) {
                         var undoAble = _a.data.undoAble;
                         itemContainer.className = undoAble ? NORMAL : DISABLED;
                     });
                     break;
-                case '下一步':
+                case 'redo':
                     _this.lf.on('history:change', function (_a) {
                         var redoAble = _a.data.redoAble;
                         itemContainer.className = redoAble ? NORMAL : DISABLED;

package/es/materials/curved-edge/index.js

@@ -41,6 +41,9 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { PolylineEdge, PolylineEdgeModel, h } from '@logicflow/core';
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 var directionMap = {
     tr: 'tl',
     lb: 'tl',
@@ -51,13 +54,17 @@ var directionMap = {
     bl: 'br',
     rt: 'br',
 };
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points) {
+    // 原地修改传入的数组
     var all = points;
+    // 从第二个点开始，检查三点是否共线
     var i = 1;
     while (i < all.length - 1) {
         var _a = __read(all[i - 1], 2), x = _a[0], y = _a[1];
         var _b = __read(all[i], 2), x1 = _b[0], y1 = _b[1];
         var _c = __read(all[i + 1], 2), x2 = _c[0], y2 = _c[1];
+        // 如果三点在同一条水平或垂直直线上，删除中间点
         if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
             all.splice(i, 1);
         }
@@ -65,6 +72,7 @@ function pointFilter(points) {
             i++;
         }
     }
+    // 返回精简后的点集
     return all;
 }
 function getMidPoints(cur, key, orientation, radius) {
@@ -119,34 +127,54 @@ function getMidPoints(cur, key, orientation, radius) {
             return [];
     }
 }
-function getPartialPath(prev, cur, next, radius) {
+/**
+ * 生成局部路径片段（包含圆角）
+ * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
+ * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
+ * @param prevPoint 上一个顶点
+ * @param cornerPoint 当前拐点（圆角所在拐点）
+ * @param nextPoint 下一个顶点
+ * @param cornerRadius 圆角半径上限
+ * @returns 局部 path 字符串（包含 L/Q 操作）
+ */
+function getPartialPath(prevPoint, cornerPoint, nextPoint, cornerRadius) {
     var _a;
-    var dir1 = '';
-    var dir2 = '';
-    if (prev[0] === cur[0]) {
-        dir1 = prev[1] > cur[1] ? 't' : 'b';
-    }
-    else if (prev[1] === cur[1]) {
-        dir1 = prev[0] > cur[0] ? 'l' : 'r';
-    }
-    if (cur[0] === next[0]) {
-        dir2 = cur[1] > next[1] ? 't' : 'b';
-    }
-    else if (cur[1] === next[1]) {
-        dir2 = cur[0] > next[0] ? 'l' : 'r';
-    }
-    var r = Math.min(Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2, Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2, radius) || (1 / 5) * radius;
+    // 轴对齐容差（像素），用于消除微小误差
+    var epsilon = 1;
+    var resolveDir = function (a, b) {
+        var dx = b[0] - a[0];
+        var dy = b[1] - a[1];
+        var adx = Math.abs(dx);
+        var ady = Math.abs(dy);
+        if (ady <= epsilon && adx > epsilon) {
+            return dx < 0 ? 'l' : 'r';
+        }
+        if (adx <= epsilon && ady > epsilon) {
+            return dy < 0 ? 't' : 'b';
+        }
+        if (adx <= epsilon && ady <= epsilon) {
+            return '';
+        }
+        // 非严格对齐时，选择更接近的轴
+        return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b';
+    };
+    var dir1 = resolveDir(prevPoint, cornerPoint);
+    var dir2 = resolveDir(cornerPoint, nextPoint);
+    var r = Math.min(Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
+        2, Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
+        2, cornerRadius) || (1 / 5) * cornerRadius;
     var key = "".concat(dir1).concat(dir2);
     var orientation = directionMap[key] || '-';
-    var path = "L ".concat(prev[0], " ").concat(prev[1]);
+    var path = '';
     if (orientation === '-') {
-        path += "L ".concat(cur[0], " ").concat(cur[1], " L ").concat(next[0], " ").concat(next[1]);
+        // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
+        path += "L ".concat(cornerPoint[0], " ").concat(cornerPoint[1]);
     }
     else {
-        var _b = __read(getMidPoints(cur, key, orientation, r), 2), mid1 = _b[0], mid2 = _b[1];
+        var _b = __read(getMidPoints(cornerPoint, key, orientation, r), 2), mid1 = _b[0], mid2 = _b[1];
         if (mid1 && mid2) {
-            path += "L ".concat(mid1[0], " ").concat(mid1[1], " Q ").concat(cur[0], " ").concat(cur[1], " ").concat(mid2[0], " ").concat(mid2[1]);
-            _a = __read(mid2, 2), cur[0] = _a[0], cur[1] = _a[1];
+            path += "L ".concat(mid1[0], " ").concat(mid1[1], " Q ").concat(cornerPoint[0], " ").concat(cornerPoint[1], " ").concat(mid2[0], " ").concat(mid2[1]);
+            _a = __read(mid2, 2), cornerPoint[0] = _a[0], cornerPoint[1] = _a[1];
         }
     }
     return path;

package/es/tools/snapshot/index.d.ts

@@ -110,10 +110,14 @@ export declare class Snapshot {
      */
     private getClassRules;
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    private getCanvasDimensionsByBrowser;
+    private getCanvasScaleRatio;
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素

package/es/tools/snapshot/index.js

@@ -345,24 +345,28 @@ var Snapshot = /** @class */ (function () {
         return rules;
     };
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    Snapshot.prototype.getCanvasDimensionsByBrowser = function () {
-        var userAgent = navigator.userAgent;
-        // 默认值
-        var maxCanvasDimension = 65535;
-        var otherMaxCanvasDimension = 4096;
-        if (userAgent.indexOf('Chrome') !== -1 ||
-            userAgent.indexOf('Edge') !== -1) {
-            maxCanvasDimension = 65535;
-            otherMaxCanvasDimension = 4096;
+    Snapshot.prototype.getCanvasScaleRatio = function (width, height) {
+        /* 单边最大像素 */
+        var maxCanvasSide = 32767;
+        /* 最大像素面积 */
+        var maxCanvasArea = 268435456;
+        var area = width * height;
+        if (width <= maxCanvasSide &&
+            height <= maxCanvasSide &&
+            area <= maxCanvasArea) {
+            return 1;
         }
-        else if (userAgent.indexOf('Firefox') !== -1) {
-            maxCanvasDimension = 32767;
-            otherMaxCanvasDimension = 3814;
-        }
-        return { maxCanvasDimension: maxCanvasDimension, otherMaxCanvasDimension: otherMaxCanvasDimension };
+        var widthScale = maxCanvasSide / width;
+        var heightScale = maxCanvasSide / height;
+        var areaScale = maxCanvasArea / area;
+        return Math.min(widthScale, heightScale, areaScale);
     };
     /**
      * 将 svg 转化为 canvas
@@ -372,14 +376,14 @@ var Snapshot = /** @class */ (function () {
      */
     Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
-            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, bboxWidth, bboxHeight, canvas, safetyMargin, _b, maxCanvasDimension, otherMaxCanvasDimension, MAX_CANVAS_DIMENSION, OTHER_MAX_CANVAS_DIMENSION, targetWidth, targetHeight, scaleWidth, scaleHeight, ctx, img, style, foreignObject;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, factorWidth, factorHeight, bboxWidth, bboxHeight, canvas, safetyMargin, targetWidth, targetHeight, scaleRatio, ctx, img, style, foreignObject;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         width = toImageOptions.width, height = toImageOptions.height, backgroundColor = toImageOptions.backgroundColor, _a = toImageOptions.padding, padding = _a === void 0 ? 40 : _a;
                         return [4 /*yield*/, this.cloneSvg(svg, false)];
                     case 1:
-                        copy = _c.sent();
+                        copy = _b.sent();
                         dpr = window.devicePixelRatio || 1;
                         if (dpr < 1) {
                             // https://github.com/didi/LogicFlow/issues/1222
@@ -404,62 +408,42 @@ var Snapshot = /** @class */ (function () {
                         graphModel = this.lf.graphModel;
                         transformModel = graphModel.transformModel;
                         SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-                        safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
+                        safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
                         ;
-                        actualWidth = (bbox.width / SCALE_X) * safetyFactor;
-                        actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
-                        bboxWidth = Math.ceil(actualWidth);
-                        bboxHeight = Math.ceil(actualHeight);
+                        actualWidth = bbox.width / SCALE_X;
+                        actualHeight = bbox.height / SCALE_Y;
+                        factorWidth = actualWidth * (safetyFactor - 1);
+                        factorHeight = actualHeight * (safetyFactor - 1);
+                        bboxWidth = Math.ceil(actualWidth + factorWidth);
+                        bboxHeight = Math.ceil(actualHeight + factorHeight);
                         canvas = document.createElement('canvas');
                         canvas.style.width = "".concat(bboxWidth, "px");
                         canvas.style.height = "".concat(bboxHeight, "px");
-                        safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
+                        safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
                         ;
-                        _b = this.getCanvasDimensionsByBrowser(), maxCanvasDimension = _b.maxCanvasDimension, otherMaxCanvasDimension = _b.otherMaxCanvasDimension;
-                        MAX_CANVAS_DIMENSION = maxCanvasDimension;
-                        OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension;
-                        targetWidth = bboxWidth * dpr + padding * 2 + safetyMargin;
-                        targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin;
-                        scaleWidth = 1 //宽 缩放
-                        ;
-                        scaleHeight = 1 //高 缩放
-                        ;
-                        // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-                        if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight > OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight < OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                        }
-                        else if (targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        if (scaleWidth < 1 || scaleHeight < 1) {
-                            targetWidth = Math.floor(targetWidth * scaleWidth);
-                            targetHeight = Math.floor(targetHeight * scaleHeight);
+                        targetWidth = bboxWidth * dpr;
+                        targetHeight = bboxHeight * dpr;
+                        scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight);
+                        if (scaleRatio < 1) {
+                            targetWidth = Math.floor(targetWidth * scaleRatio);
+                            targetHeight = Math.floor(targetHeight * scaleRatio);
                         }
                         // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
                         // 在transform矩阵中加入padding值，确保左侧元素不会被截断
                         // 对这个矩阵进行缩放，否则会导致截断
                         ;
                         copy.lastChild.style.transform =
-                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr, ")");
-                        canvas.width = targetWidth;
-                        canvas.height = targetHeight;
+                            "matrix(".concat(scaleRatio, ", 0, 0, ").concat(scaleRatio, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
+                                padding +
+                                factorWidth / 2 +
+                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin, ")");
+                        canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr;
+                        canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr;
                         ctx = canvas.getContext('2d');
                         if (ctx) {
                             // 清空canvas
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.scale(dpr * scaleWidth, dpr * scaleHeight);
+                            ctx.scale(dpr, dpr);
                             // 如果有背景色，设置流程图导出的背景色
                             if (backgroundColor) {
                                 ctx.fillStyle = backgroundColor;
@@ -717,9 +701,7 @@ var Snapshot = /** @class */ (function () {
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        console.log('getSnapshotBase64---------------', backgroundColor, fileType, toImageOptions);
-                        return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
+                    case 0: return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });

package/lib/components/control/index.js

@@ -135,14 +135,14 @@ var Control = /** @class */ (function () {
             else {
                 itemContainer.append(icon);
             }
-            switch (item.text) {
-                case '上一步':
+            switch (item.key) {
+                case 'undo':
                     _this.lf.on('history:change', function (_a) {
                         var undoAble = _a.data.undoAble;
                         itemContainer.className = undoAble ? NORMAL : DISABLED;
                     });
                     break;
-                case '下一步':
+                case 'redo':
                     _this.lf.on('history:change', function (_a) {
                         var redoAble = _a.data.redoAble;
                         itemContainer.className = redoAble ? NORMAL : DISABLED;

package/lib/materials/curved-edge/index.js

@@ -44,6 +44,9 @@ var __read = (this && this.__read) || function (o, n) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCurvedEdgePath = exports.CurvedEdgeModel = exports.CurvedEdge = void 0;
 var core_1 = require("@logicflow/core");
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 var directionMap = {
     tr: 'tl',
     lb: 'tl',
@@ -54,13 +57,17 @@ var directionMap = {
     bl: 'br',
     rt: 'br',
 };
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points) {
+    // 原地修改传入的数组
     var all = points;
+    // 从第二个点开始，检查三点是否共线
     var i = 1;
     while (i < all.length - 1) {
         var _a = __read(all[i - 1], 2), x = _a[0], y = _a[1];
         var _b = __read(all[i], 2), x1 = _b[0], y1 = _b[1];
         var _c = __read(all[i + 1], 2), x2 = _c[0], y2 = _c[1];
+        // 如果三点在同一条水平或垂直直线上，删除中间点
         if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
             all.splice(i, 1);
         }
@@ -68,6 +75,7 @@ function pointFilter(points) {
             i++;
         }
     }
+    // 返回精简后的点集
     return all;
 }
 function getMidPoints(cur, key, orientation, radius) {
@@ -122,34 +130,54 @@ function getMidPoints(cur, key, orientation, radius) {
             return [];
     }
 }
-function getPartialPath(prev, cur, next, radius) {
+/**
+ * 生成局部路径片段（包含圆角）
+ * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
+ * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
+ * @param prevPoint 上一个顶点
+ * @param cornerPoint 当前拐点（圆角所在拐点）
+ * @param nextPoint 下一个顶点
+ * @param cornerRadius 圆角半径上限
+ * @returns 局部 path 字符串（包含 L/Q 操作）
+ */
+function getPartialPath(prevPoint, cornerPoint, nextPoint, cornerRadius) {
     var _a;
-    var dir1 = '';
-    var dir2 = '';
-    if (prev[0] === cur[0]) {
-        dir1 = prev[1] > cur[1] ? 't' : 'b';
-    }
-    else if (prev[1] === cur[1]) {
-        dir1 = prev[0] > cur[0] ? 'l' : 'r';
-    }
-    if (cur[0] === next[0]) {
-        dir2 = cur[1] > next[1] ? 't' : 'b';
-    }
-    else if (cur[1] === next[1]) {
-        dir2 = cur[0] > next[0] ? 'l' : 'r';
-    }
-    var r = Math.min(Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2, Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2, radius) || (1 / 5) * radius;
+    // 轴对齐容差（像素），用于消除微小误差
+    var epsilon = 1;
+    var resolveDir = function (a, b) {
+        var dx = b[0] - a[0];
+        var dy = b[1] - a[1];
+        var adx = Math.abs(dx);
+        var ady = Math.abs(dy);
+        if (ady <= epsilon && adx > epsilon) {
+            return dx < 0 ? 'l' : 'r';
+        }
+        if (adx <= epsilon && ady > epsilon) {
+            return dy < 0 ? 't' : 'b';
+        }
+        if (adx <= epsilon && ady <= epsilon) {
+            return '';
+        }
+        // 非严格对齐时，选择更接近的轴
+        return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b';
+    };
+    var dir1 = resolveDir(prevPoint, cornerPoint);
+    var dir2 = resolveDir(cornerPoint, nextPoint);
+    var r = Math.min(Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
+        2, Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
+        2, cornerRadius) || (1 / 5) * cornerRadius;
     var key = "".concat(dir1).concat(dir2);
     var orientation = directionMap[key] || '-';
-    var path = "L ".concat(prev[0], " ").concat(prev[1]);
+    var path = '';
     if (orientation === '-') {
-        path += "L ".concat(cur[0], " ").concat(cur[1], " L ").concat(next[0], " ").concat(next[1]);
+        // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
+        path += "L ".concat(cornerPoint[0], " ").concat(cornerPoint[1]);
     }
     else {
-        var _b = __read(getMidPoints(cur, key, orientation, r), 2), mid1 = _b[0], mid2 = _b[1];
+        var _b = __read(getMidPoints(cornerPoint, key, orientation, r), 2), mid1 = _b[0], mid2 = _b[1];
         if (mid1 && mid2) {
-            path += "L ".concat(mid1[0], " ").concat(mid1[1], " Q ").concat(cur[0], " ").concat(cur[1], " ").concat(mid2[0], " ").concat(mid2[1]);
-            _a = __read(mid2, 2), cur[0] = _a[0], cur[1] = _a[1];
+            path += "L ".concat(mid1[0], " ").concat(mid1[1], " Q ").concat(cornerPoint[0], " ").concat(cornerPoint[1], " ").concat(mid2[0], " ").concat(mid2[1]);
+            _a = __read(mid2, 2), cornerPoint[0] = _a[0], cornerPoint[1] = _a[1];
         }
     }
     return path;

package/lib/tools/snapshot/index.d.ts

@@ -110,10 +110,14 @@ export declare class Snapshot {
      */
     private getClassRules;
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    private getCanvasDimensionsByBrowser;
+    private getCanvasScaleRatio;
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素

package/lib/tools/snapshot/index.js

@@ -348,24 +348,28 @@ var Snapshot = /** @class */ (function () {
         return rules;
     };
     /**
-     * 根据浏览器类型获取Canvas尺寸限制
-     * @returns 包含最大主维度和次维度的对象
+     * 根据浏览器对 canvas 的大小限制，计算等比缩放比例
+     * - 参考 MDN 最大的画布尺寸：
+     * https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/canvas#最大的画布尺寸
+     *
+     * @param width
+     * @param height
      */
-    Snapshot.prototype.getCanvasDimensionsByBrowser = function () {
-        var userAgent = navigator.userAgent;
-        // 默认值
-        var maxCanvasDimension = 65535;
-        var otherMaxCanvasDimension = 4096;
-        if (userAgent.indexOf('Chrome') !== -1 ||
-            userAgent.indexOf('Edge') !== -1) {
-            maxCanvasDimension = 65535;
-            otherMaxCanvasDimension = 4096;
+    Snapshot.prototype.getCanvasScaleRatio = function (width, height) {
+        /* 单边最大像素 */
+        var maxCanvasSide = 32767;
+        /* 最大像素面积 */
+        var maxCanvasArea = 268435456;
+        var area = width * height;
+        if (width <= maxCanvasSide &&
+            height <= maxCanvasSide &&
+            area <= maxCanvasArea) {
+            return 1;
         }
-        else if (userAgent.indexOf('Firefox') !== -1) {
-            maxCanvasDimension = 32767;
-            otherMaxCanvasDimension = 3814;
-        }
-        return { maxCanvasDimension: maxCanvasDimension, otherMaxCanvasDimension: otherMaxCanvasDimension };
+        var widthScale = maxCanvasSide / width;
+        var heightScale = maxCanvasSide / height;
+        var areaScale = maxCanvasArea / area;
+        return Math.min(widthScale, heightScale, areaScale);
     };
     /**
      * 将 svg 转化为 canvas
@@ -375,14 +379,14 @@ var Snapshot = /** @class */ (function () {
      */
     Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
-            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, bboxWidth, bboxHeight, canvas, safetyMargin, _b, maxCanvasDimension, otherMaxCanvasDimension, MAX_CANVAS_DIMENSION, OTHER_MAX_CANVAS_DIMENSION, targetWidth, targetHeight, scaleWidth, scaleHeight, ctx, img, style, foreignObject;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, factorWidth, factorHeight, bboxWidth, bboxHeight, canvas, safetyMargin, targetWidth, targetHeight, scaleRatio, ctx, img, style, foreignObject;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         width = toImageOptions.width, height = toImageOptions.height, backgroundColor = toImageOptions.backgroundColor, _a = toImageOptions.padding, padding = _a === void 0 ? 40 : _a;
                         return [4 /*yield*/, this.cloneSvg(svg, false)];
                     case 1:
-                        copy = _c.sent();
+                        copy = _b.sent();
                         dpr = window.devicePixelRatio || 1;
                         if (dpr < 1) {
                             // https://github.com/didi/LogicFlow/issues/1222
@@ -407,62 +411,42 @@ var Snapshot = /** @class */ (function () {
                         graphModel = this.lf.graphModel;
                         transformModel = graphModel.transformModel;
                         SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-                        safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
+                        safetyFactor = toImageOptions.safetyFactor || 1 // 安全系数，增加10%的空间
                         ;
-                        actualWidth = (bbox.width / SCALE_X) * safetyFactor;
-                        actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
-                        bboxWidth = Math.ceil(actualWidth);
-                        bboxHeight = Math.ceil(actualHeight);
+                        actualWidth = bbox.width / SCALE_X;
+                        actualHeight = bbox.height / SCALE_Y;
+                        factorWidth = actualWidth * (safetyFactor - 1);
+                        factorHeight = actualHeight * (safetyFactor - 1);
+                        bboxWidth = Math.ceil(actualWidth + factorWidth);
+                        bboxHeight = Math.ceil(actualHeight + factorHeight);
                         canvas = document.createElement('canvas');
                         canvas.style.width = "".concat(bboxWidth, "px");
                         canvas.style.height = "".concat(bboxHeight, "px");
-                        safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
+                        safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
                         ;
-                        _b = this.getCanvasDimensionsByBrowser(), maxCanvasDimension = _b.maxCanvasDimension, otherMaxCanvasDimension = _b.otherMaxCanvasDimension;
-                        MAX_CANVAS_DIMENSION = maxCanvasDimension;
-                        OTHER_MAX_CANVAS_DIMENSION = otherMaxCanvasDimension;
-                        targetWidth = bboxWidth * dpr + padding * 2 + safetyMargin;
-                        targetHeight = bboxHeight * dpr + padding * 2 + safetyMargin;
-                        scaleWidth = 1 //宽 缩放
-                        ;
-                        scaleHeight = 1 //高 缩放
-                        ;
-                        // 对宽和高分别进行缩放，如chrome，矩形单边最大宽度不超过65535，如宽超过65535，那么高不能超过4096，否则像素会超，也会显示不出。
-                        if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight > OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = OTHER_MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleWidth = OTHER_MAX_CANVAS_DIMENSION / targetWidth;
-                            scaleHeight = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        else if (targetWidth > MAX_CANVAS_DIMENSION &&
-                            targetHeight < OTHER_MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetWidth;
-                        }
-                        else if (targetWidth < OTHER_MAX_CANVAS_DIMENSION &&
-                            targetHeight > MAX_CANVAS_DIMENSION) {
-                            scaleHeight = scaleWidth = MAX_CANVAS_DIMENSION / targetHeight;
-                        }
-                        if (scaleWidth < 1 || scaleHeight < 1) {
-                            targetWidth = Math.floor(targetWidth * scaleWidth);
-                            targetHeight = Math.floor(targetHeight * scaleHeight);
+                        targetWidth = bboxWidth * dpr;
+                        targetHeight = bboxHeight * dpr;
+                        scaleRatio = this.getCanvasScaleRatio(targetWidth, targetHeight);
+                        if (scaleRatio < 1) {
+                            targetWidth = Math.floor(targetWidth * scaleRatio);
+                            targetHeight = Math.floor(targetHeight * scaleRatio);
                         }
                         // 将导出区域移动到左上角，canvas 绘制的时候是从左上角开始绘制的
                         // 在transform矩阵中加入padding值，确保左侧元素不会被截断
                         // 对这个矩阵进行缩放，否则会导致截断
                         ;
                         copy.lastChild.style.transform =
-                            "matrix(".concat(scaleWidth, ", 0, 0, ").concat(scaleHeight, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleWidth + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleHeight + padding / dpr, ")");
-                        canvas.width = targetWidth;
-                        canvas.height = targetHeight;
+                            "matrix(".concat(scaleRatio, ", 0, 0, ").concat(scaleRatio, ", ").concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) * scaleRatio +
+                                padding +
+                                factorWidth / 2 +
+                                safetyMargin, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) * scaleRatio + padding + factorHeight / 2 + safetyMargin, ")");
+                        canvas.width = targetWidth + (padding + safetyMargin) * 2 * dpr;
+                        canvas.height = targetHeight + (padding + safetyMargin) * 2 * dpr;
                         ctx = canvas.getContext('2d');
                         if (ctx) {
                             // 清空canvas
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.scale(dpr * scaleWidth, dpr * scaleHeight);
+                            ctx.scale(dpr, dpr);
                             // 如果有背景色，设置流程图导出的背景色
                             if (backgroundColor) {
                                 ctx.fillStyle = backgroundColor;
@@ -720,9 +704,7 @@ var Snapshot = /** @class */ (function () {
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        console.log('getSnapshotBase64---------------', backgroundColor, fileType, toImageOptions);
-                        return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
+                    case 0: return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });