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

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) {
@@ -121,18 +129,22 @@ function getMidPoints(cur, key, orientation, radius) {
 }
 function getPartialPath(prev, cur, next, radius) {
     var _a;
+    // 定义误差容错变量
+    var tolerance = 1;
     var dir1 = '';
     var dir2 = '';
-    if (prev[0] === cur[0]) {
+    if (Math.abs(prev[0] - cur[0]) <= tolerance) {
+        // 垂直方向
         dir1 = prev[1] > cur[1] ? 't' : 'b';
     }
-    else if (prev[1] === cur[1]) {
+    else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
+        // 水平方向
         dir1 = prev[0] > cur[0] ? 'l' : 'r';
     }
-    if (cur[0] === next[0]) {
+    if (Math.abs(cur[0] - next[0]) <= tolerance) {
         dir2 = cur[1] > next[1] ? 't' : 'b';
     }
-    else if (cur[1] === next[1]) {
+    else if (Math.abs(cur[1] - next[1]) <= tolerance) {
         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;

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/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) {
@@ -124,18 +132,22 @@ function getMidPoints(cur, key, orientation, radius) {
 }
 function getPartialPath(prev, cur, next, radius) {
     var _a;
+    // 定义误差容错变量
+    var tolerance = 1;
     var dir1 = '';
     var dir2 = '';
-    if (prev[0] === cur[0]) {
+    if (Math.abs(prev[0] - cur[0]) <= tolerance) {
+        // 垂直方向
         dir1 = prev[1] > cur[1] ? 't' : 'b';
     }
-    else if (prev[1] === cur[1]) {
+    else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
+        // 水平方向
         dir1 = prev[0] > cur[0] ? 'l' : 'r';
     }
-    if (cur[0] === next[0]) {
+    if (Math.abs(cur[0] - next[0]) <= tolerance) {
         dir2 = cur[1] > next[1] ? 't' : 'b';
     }
-    else if (cur[1] === next[1]) {
+    else if (Math.abs(cur[1] - next[1]) <= tolerance) {
         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;

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()];
                 }
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.2.0-alpha.4",
+  "version": "2.2.0-alpha.5",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.2.0-alpha.4",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.4"
+    "@logicflow/core": "2.2.0-alpha.5",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.5"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.2.0-alpha.4",
-    "@logicflow/vue-node-registry": "1.2.0-alpha.4"
+    "@logicflow/core": "2.2.0-alpha.5",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.5"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/materials/curved-edge/index.ts

@@ -1,9 +1,14 @@
 import { PolylineEdge, PolylineEdgeModel, h, LogicFlow } from '@logicflow/core'
 import PointTuple = LogicFlow.PointTuple
 
+// 方向类型：t=上(top), b=下(bottom), l=左(left), r=右(right)，'' 表示未确定
 type DirectionType = 't' | 'b' | 'l' | 'r' | ''
+// 圆弧所在象限：tl=左上，tr=右上，bl=左下，br=右下，'-' 表示不需要圆弧
 type ArcQuadrantType = 'tl' | 'tr' | 'bl' | 'br' | '-'
 
+// 方向组合到圆弧象限的映射。
+// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
+// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
 const directionMap: {
   [key: string]: ArcQuadrantType
 } = {
@@ -17,19 +22,24 @@ const directionMap: {
   rt: 'br',
 }
 
+// 过滤折线中的共线中间点，减少不必要的顶点
 function pointFilter(points: number[][]) {
+  // 原地修改传入的数组
   const all = points
+  // 从第二个点开始，检查三点是否共线
   let i = 1
   while (i < all.length - 1) {
     const [x, y] = all[i - 1]
     const [x1, y1] = all[i]
     const [x2, y2] = all[i + 1]
+    // 如果三点在同一条水平或垂直直线上，删除中间点
     if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
       all.splice(i, 1)
     } else {
       i++
     }
   }
+  // 返回精简后的点集
   return all
 }
 
@@ -93,18 +103,23 @@ function getPartialPath(
   next: PointTuple,
   radius: number,
 ): string {
+  // 定义误差容错变量
+  const tolerance = 1
+
   let dir1: DirectionType = ''
   let dir2: DirectionType = ''
 
-  if (prev[0] === cur[0]) {
+  if (Math.abs(prev[0] - cur[0]) <= tolerance) {
+    // 垂直方向
     dir1 = prev[1] > cur[1] ? 't' : 'b'
-  } else if (prev[1] === cur[1]) {
+  } else if (Math.abs(prev[1] - cur[1]) <= tolerance) {
+    // 水平方向
     dir1 = prev[0] > cur[0] ? 'l' : 'r'
   }
 
-  if (cur[0] === next[0]) {
+  if (Math.abs(cur[0] - next[0]) <= tolerance) {
     dir2 = cur[1] > next[1] ? 't' : 'b'
-  } else if (cur[1] === next[1]) {
+  } else if (Math.abs(cur[1] - next[1]) <= tolerance) {
     dir2 = cur[0] > next[0] ? 'l' : 'r'
   }