@logicflow/extension 2.0.0-beta.4 → 2.0.0-beta.6

package/es/tools/label/utils.js

@@ -0,0 +1,336 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { getNodeOutline, getEdgeOutline, ModelType, isInSegment, getBezierPoints, points2PointsList, getBBoxOfPoints, } from '@logicflow/core';
+import { head, isEmpty, last, min } from 'lodash-es';
+import { calcTwoPointsDistance, getPointOnBezier } from './algorithm';
+// 工具函数：计算「缩放」后 某坐标点 相对中心位置比例不变的 新坐标点
+// 前提条件: 当缩放一个矩形时，如果你希望矩形中的某个点的位置相对于矩形保持不变
+//
+// 1.	原始矩形的左上角坐标为 (x1, y1)，宽度为 w1，高度为 h1。
+// 2.	缩放后的矩形的左上角坐标为 (x2, y2)，宽度为 w2，高度为 h2。
+// 3.	矩形中的某个点在原始矩形中的坐标为 (px1, py1)。
+//
+// 目标
+// 计算该点在缩放后矩形中的新坐标 (px2, py2)。
+//
+// 步骤
+// 1.	计算相对位置：首先计算点 (px1, py1) 在原始矩形中的相对位置。
+// relativeX = (px1 - x1) / w1
+// relativeY = (py1 - y1) / h1
+//
+// 2.	计算新坐标：然后，使用相对位置计算该点在缩放后矩形中的新坐标。
+// px2 = x2 + relativeX * w2
+// py2 = y2 + relativeY * h2
+export function calcPointAfterResize(origin, scaled, point) {
+    var x1 = origin.x, y1 = origin.y, w1 = origin.width, h1 = origin.height;
+    var x2 = scaled.x, y2 = scaled.y, w2 = scaled.width, h2 = scaled.height;
+    var px1 = point.x, py1 = point.y;
+    // 计算点在原始矩形中的相对位置
+    var relativeX = (px1 - x1) / w1;
+    var relativeY = (py1 - y1) / h1;
+    // 计算点在缩放后矩形中的新坐标
+    var px2 = x2 + relativeX * w2;
+    var py2 = y2 + relativeY * h2;
+    return { x: px2, y: py2 };
+}
+// 工具函数：计算「旋转」后 某坐标点 相对中心位置比例不变的 新坐标点
+// 要计算以点 x1 = (x1, y1) 为中心，点 x2 = (x2, y2) 旋转 θ 度后的坐标位置，可以使用旋转矩阵进行计算。
+//
+// 旋转公式如下：
+// 	1. 首先将点  x2  平移到以  x1  为原点的坐标系：
+//  x' = x2 - x1
+//  y' = y2 - y1
+// 2.	然后应用旋转矩阵进行旋转：
+//  x'' = x' * cos(θ) - y' * sin(θ)
+//  y'' = x' * sin(θ) + y' * cos(θ)
+// 3.	最后将结果平移回原来的坐标系：
+//  x_new = x'' + x1
+//  y_new = y'' + y1
+//
+// 综合起来，旋转后的新坐标  (x_new, y_new)  计算公式如下：
+//
+//  x_new = (x2 - x1) * cos(θ) - (y2 - y1) * sin(θ) + x1
+//  y_new = (x2 - x1) * sin(θ) + (y2 - y1) * cos(θ) + y1
+//
+// 其中，θ 需要用弧度表示，如果你有的是角度，可以用以下公式转换为弧度：
+//
+// rad = deg * π / 180
+export function rotatePointAroundCenter(target, center, radian) {
+    // Rotate point (x2, y2) around point (x1, y1) by theta degrees.
+    //
+    // Parameters:
+    //   x1, y1: Coordinates of the center point.
+    //   x2, y2: Coordinates of the point to rotate.
+    //   theta_degrees: Angle in degrees to rotate the point.
+    //
+    // Returns:
+    //   Tuple of new coordinates (x_new, y_new) after rotation.
+    var x1 = center.x, y1 = center.y;
+    var x2 = target.x, y2 = target.y;
+    // Translate point to origin
+    var xPrime = x2 - x1;
+    var yPrime = y2 - y1;
+    // Rotate point
+    var xDoublePrime = xPrime * Math.cos(radian) - yPrime * Math.sin(radian);
+    var yDoublePrime = xPrime * Math.sin(radian) + yPrime * Math.cos(radian);
+    // Translate point back
+    var xNew = xDoublePrime + x1;
+    var yNew = yDoublePrime + y1;
+    return {
+        x: xNew,
+        y: yNew,
+    };
+}
+/** Edge 相关工具方法 */
+/**
+ * 获取某点在一个矩形图形（节点 or 边的 outline）内的偏移量
+ * @param point 目标点（此处即 Label 的坐标信息）
+ * @param element 目标元素
+ */
+export var getPointOffsetOfElementOutline = function (point, element) {
+    var baseType = element.BaseType;
+    var bboxInfo = baseType === 'node' ? getNodeOutline(element) : getEdgeOutline(element);
+    if (bboxInfo) {
+        var x = point.x, y = point.y;
+        var minX = bboxInfo.x, minY = bboxInfo.y, maxX = bboxInfo.x1, maxY = bboxInfo.y1;
+        var xDeltaPercent = 0.5;
+        var yDeltaPercent = 0.5;
+        var xDeltaDistance = x - maxX;
+        var yDeltaDistance = y - maxY;
+        /**
+         * 文本在由路径点组成的凸包内，就记录偏移比例
+         * 文本在凸包外，记录绝对距离
+         * 用于边路径变化时计算文本新位置
+         */
+        if (minX && maxX && minX < x && x < maxX) {
+            xDeltaPercent = min([(x - minX) / (maxX - minX), 1]);
+        }
+        else if (x <= minX) {
+            xDeltaDistance = x - minX;
+        }
+        else {
+            xDeltaDistance = x - maxX;
+        }
+        if (minY && maxY && minY < y && y < maxY) {
+            yDeltaPercent = min([(y - minY) / (maxY - minY), 1]);
+        }
+        else if (y <= minY) {
+            yDeltaDistance = y - minY;
+        }
+        else {
+            yDeltaDistance = y - maxY;
+        }
+        return {
+            xDeltaPercent: xDeltaPercent,
+            yDeltaPercent: yDeltaPercent,
+            xDeltaDistance: xDeltaDistance,
+            yDeltaDistance: yDeltaDistance,
+        };
+    }
+};
+/**
+ * 判断节点是否在折线上
+ * @param point 目标点坐标
+ * @param points 折线上的点坐标
+ */
+var isPointOnPolyline = function (point, points) {
+    for (var i = 0; i < points.length - 1; i++) {
+        var start = points[i];
+        var end = points[i + 1];
+        if (isInSegment(point, start, end)) {
+            return true;
+        }
+    }
+    return false;
+};
+/**
+ * 给定一个点  P = (x_0, y_0)  和线段的两个端点  A = (x_1, y_1)  和  B = (x_2, y_2) ，可以使用以下步骤计算点到线段的距离：
+ * 1.	计算向量  AB  和  AP 。
+ * 2.	计算  AB  的平方长度。
+ * 3.	计算点  P  在直线  AB  上的投影点  Q 。
+ * 4.	判断  Q  是否在线段  AB  上。
+ * 5.	根据  Q  是否在线段上，计算点到线段的距离。
+ *
+ * 计算点到线段质检的距离
+ * @param point
+ * @param start
+ * @param end
+ */
+export var pointToSegmentDistance = function (point, start, end) {
+    var px = point.x, py = point.y;
+    var sx = start.x, sy = start.y;
+    var ex = end.x, ey = end.y;
+    var SEx = ex - sx;
+    var SEy = ey - sy;
+    var SPx = px - sx;
+    var SPy = py - sy;
+    var SE_SE = Math.pow(SEx, 2) + Math.pow(SEy, 2);
+    var SP_SE = SPx * SEx + SPy * SEy;
+    var t = SP_SE / SE_SE;
+    if (t < 0)
+        t = 0;
+    if (t > 1)
+        t = 1;
+    var qx = sx + t * SEx;
+    var qy = sy + t * SEy;
+    return Math.sqrt(Math.pow((px - qx), 2) + Math.pow((py - qy), 2));
+};
+export var calcPolylineTotalLength = function (points) {
+    var length = 0;
+    for (var i = 0; i < points.length - 1; i++) {
+        var start = points[i];
+        var end = points[i + 1];
+        length += calcTwoPointsDistance(start, end);
+    }
+    return length;
+};
+/**
+ * TODO: 确认该函数的意义，写完还是没看懂什么意思
+ * @param point
+ * @param points
+ */
+export var pointPositionRatio = function (point, points) {
+    var length = 0;
+    for (var i = 0; i < points.length - 1; i++) {
+        var start = points[i];
+        var end = points[i + 1];
+        var segmentLength = calcTwoPointsDistance(start, end);
+        if (pointToSegmentDistance(point, start, end) <= 20) {
+            var d1 = calcTwoPointsDistance(point, start);
+            length += d1;
+            var totalLength = calcPolylineTotalLength(points);
+            // 小数点后保留一位（四舍五入）
+            return Math.round((length / totalLength) * 10) / 10;
+        }
+        else {
+            length += segmentLength;
+        }
+    }
+    return 0;
+};
+/**
+ * 计算一个坐标在贝塞尔曲线上最近的一个点
+ * @param point
+ * @param edge
+ * @param step
+ */
+export var calcClosestPointOnBezierEdge = function (point, edge, step) {
+    if (step === void 0) { step = 5; }
+    var minDistance = Infinity;
+    var closestPoint = point;
+    var pointsList = getBezierPoints(edge.path);
+    if (isEmpty(pointsList))
+        return closestPoint;
+    var _a = __read(pointsList, 4), start = _a[0], sNext = _a[1], ePre = _a[2], end = _a[3];
+    for (var i = 0; i <= step; i++) {
+        var t = i / step;
+        var bezierPoint = getPointOnBezier(t, start, sNext, ePre, end);
+        var distance = calcTwoPointsDistance(point, bezierPoint);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closestPoint = bezierPoint;
+        }
+    }
+    return closestPoint;
+};
+export var getNewPointAtDistance = function (points, ratio) {
+    var totalLength = calcPolylineTotalLength(points);
+    var targetLength = totalLength * ratio;
+    var length = 0;
+    for (var i = 0; i < points.length - 1; i++) {
+        var start = points[i];
+        var end = points[i + 1];
+        var segmentLength = calcTwoPointsDistance(start, end);
+        if (length + segmentLength >= targetLength) {
+            var ratio_1 = (targetLength - length) / segmentLength;
+            return {
+                x: start.x + (end.x - start.x) * ratio_1,
+                y: start.y + (end.y - start.y) * ratio_1,
+            };
+        }
+        else {
+            length += segmentLength;
+        }
+    }
+    return last(points);
+};
+/**
+ * 计算一个坐标离折线（包括 PolylineEdge 和 LineEdge 直线）最近的一个点
+ * @param point
+ * @param edge
+ */
+export var calcLabelPositionOnPolyline = function (point, edge) {
+    var _a, _b;
+    var points = points2PointsList(edge.points);
+    if (points.length === 0) {
+        points = [edge.startPoint, edge.endPoint];
+    }
+    var _c = (_a = getPointOffsetOfElementOutline(point, edge)) !== null && _a !== void 0 ? _a : {}, xDeltaPercent = _c.xDeltaPercent, yDeltaPercent = _c.yDeltaPercent, yDeltaDistance = _c.yDeltaDistance, xDeltaDistance = _c.xDeltaDistance;
+    var isPointOnEdge = isPointOnPolyline(point, points);
+    var ratio = pointPositionRatio(point, points);
+    var start = head(points);
+    var end = last(points);
+    // 分别取路径中，x轴 和 y轴上的最大最小坐标值组合成一个矩形
+    var _d = getBBoxOfPoints(points, 10), minX = _d.minX, minY = _d.minY, maxX = _d.maxX, maxY = _d.maxY;
+    if (!start || !end)
+        return point;
+    if (xDeltaPercent && yDeltaPercent) {
+        var positByPercent = {
+            x: minX + (maxX - minX) * xDeltaPercent,
+            y: minY + (maxY - minY) * yDeltaPercent,
+        };
+        return isPointOnEdge
+            ? (_b = getNewPointAtDistance(points, ratio)) !== null && _b !== void 0 ? _b : point // 函数什么意思
+            : positByPercent;
+    }
+    // 如果文本在凸包的上方或者下方
+    if (xDeltaPercent && yDeltaDistance) {
+        return {
+            x: minX + (maxX - minX) * xDeltaPercent,
+            y: yDeltaDistance < 0 ? minY + yDeltaDistance : maxY + yDeltaDistance,
+        };
+    }
+    // 如果文本在凸包的左边或者右边
+    if (yDeltaPercent && xDeltaDistance) {
+        return {
+            x: xDeltaDistance < 0 ? minX + xDeltaDistance : maxX + xDeltaDistance,
+            y: minY + (maxY - minY) * yDeltaPercent,
+        };
+    }
+    // 如果文本在凸包左上/左下/右上/右下
+    if (xDeltaDistance && yDeltaDistance) {
+        return {
+            x: xDeltaDistance < 0 ? minX + xDeltaDistance : maxX + xDeltaDistance,
+            y: yDeltaDistance < 0 ? minY + yDeltaDistance : maxY + yDeltaDistance,
+        };
+    }
+    // 兜底
+    return point;
+};
+/**
+ * 计算 Label 离边最近的点的坐标，用于更新为 Label 的坐标
+ * @param label LabelConfig -> 当前 Label 的配置项
+ * @param edge
+ */
+export var getLabelPositionOfLine = function (label, edge) {
+    var x = label.x, y = label.y;
+    if (edge.modelType === ModelType.BEZIER_EDGE) {
+        return calcClosestPointOnBezierEdge({ x: x, y: y }, edge);
+    }
+    return calcLabelPositionOnPolyline({ x: x, y: y }, edge);
+};
+//# sourceMappingURL=utils.js.map

package/es/tools/label/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/tools/label/utils.ts"],"names":[],"mappings":"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"}

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

@@ -54,18 +54,18 @@ export declare class Snapshot {
     });
     /**
      * 获取svgRoot对象dom: 画布元素（不包含grid背景）
-     * @param lf LogicFlow
+     * @param lf
      * @returns
      */
-    getSvgRootElement(lf: LogicFlow): Element;
+    private getSvgRootElement;
     /**
      * 通过 imgUrl 下载图片
      * @param imgUrl
      */
-    triggerDownload(imgUrl: string): void;
+    private triggerDownload;
     /**
      * 删除锚点
-     * @param element ChildNode
+     * @param element
      */
     private removeAnchor;
     /**
@@ -73,41 +73,47 @@ export declare class Snapshot {
      * @param element
      */
     private removeRotateControl;
+    /**
+     * 下载前的处理画布工作：局部渲染模式处理、静默模式处理
+     * @param fileName
+     * @param toImageOptions
+     */
+    getSnapshot(fileName?: string, toImageOptions?: ToImageOptions): Promise<void>;
     /**
      * 下载图片
-     * @param fileName string
+     * @param fileName
      * @param toImageOptions
      */
-    private getSnapshot;
+    private snapshot;
     /**
      * 获取base64对象
-     * @param backgroundColor string | undefined
-     * @param fileType string | undefined
-     * @returns Promise<SnapshotResponse>
+     * @param backgroundColor
+     * @param fileType
+     * @returns
      */
     private getSnapshotBase64;
     /**
      * 获取Blob对象
-     * @param backgroundColor string | undefined
-     * @param fileType string | undefined
+     * @param backgroundColor
+     * @param fileType
      * @returns
      */
     private getSnapshotBlob;
     /**
      * 获取脚本css样式
-     * @returns rules string
+     * @returns
      */
     private getClassRules;
     /**
      * 获取图片生成中间产物canvas对象，用户转换为其他需要的格式
-     * @param svg Element
-     * @param toImageOptions ToImageOptions
-     * @returns Promise<HTMLCanvasElement>
+     * @param svg
+     * @param toImageOptions
+     * @returns
      */
     private getCanvasData;
     /**
      * 克隆并处理画布节点
-     * @param svg Node
+     * @param svg
      * @returns
      */
     private cloneSvg;

package/es/tools/snapshot/index.js

@@ -45,40 +45,19 @@ var Snapshot = /** @class */ (function () {
         this.lf = lf;
         this.customCssRules = '';
         this.useGlobalRules = true;
+        // TODO: 设置fileType为gif但是下载下来的还是png
+        // TODO: 完善静默模式不允许添加、操作元素能力
         /* 下载快照 */
-        lf.getSnapshot = function (fileName, toImageOptions) { return __awaiter(_this, void 0, void 0, function () {
-            var curPartial, _a, partial;
-            var _this = this;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        curPartial = this.lf.graphModel.getPartial();
-                        _a = (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}).partial, partial = _a === void 0 ? curPartial : _a;
-                        if (!(curPartial !== partial)) return [3 /*break*/, 1];
-                        this.lf.graphModel.setPartial(partial);
-                        this.lf.graphModel.eventCenter.once('graph:updated', function () { return __awaiter(_this, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, this.getSnapshot(fileName, toImageOptions)
-                                        // 恢复原来渲染模式
-                                    ];
-                                    case 1:
-                                        _a.sent();
-                                        // 恢复原来渲染模式
-                                        this.lf.graphModel.setPartial(curPartial);
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); });
-                        return [3 /*break*/, 3];
-                    case 1: return [4 /*yield*/, this.getSnapshot(fileName, toImageOptions)];
-                    case 2:
-                        _b.sent();
-                        _b.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
+        lf.getSnapshot = function (fileName, toImageOptions) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, this.getSnapshot(fileName, toImageOptions)
+                    /* 获取Blob对象，用户图片上传 */
+                ];
+                case 1: return [2 /*return*/, _a.sent()
+                    /* 获取Blob对象，用户图片上传 */
+                ];
+            }
+        }); }); };
         /* 获取Blob对象，用户图片上传 */
         lf.getSnapshotBlob = function (backgroundColor, fileType) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
             switch (_a.label) {
@@ -100,7 +79,7 @@ var Snapshot = /** @class */ (function () {
     }
     /**
      * 获取svgRoot对象dom: 画布元素（不包含grid背景）
-     * @param lf LogicFlow
+     * @param lf
      * @returns
      */
     Snapshot.prototype.getSvgRootElement = function (lf) {
@@ -125,7 +104,7 @@ var Snapshot = /** @class */ (function () {
     };
     /**
      * 删除锚点
-     * @param element ChildNode
+     * @param element
      */
     Snapshot.prototype.removeAnchor = function (element) {
         var childNodes = element.childNodes;
@@ -158,11 +137,61 @@ var Snapshot = /** @class */ (function () {
         }
     };
     /**
-     * 下载图片
-     * @param fileName string
+     * 下载前的处理画布工作：局部渲染模式处理、静默模式处理
+     * @param fileName
      * @param toImageOptions
      */
     Snapshot.prototype.getSnapshot = function (fileName, toImageOptions) {
+        return __awaiter(this, void 0, void 0, function () {
+            var curPartial, _a, partial, editConfig;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        curPartial = this.lf.graphModel.getPartial();
+                        _a = (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}).partial, partial = _a === void 0 ? curPartial : _a;
+                        editConfig = this.lf.getEditConfig();
+                        // 开启静默模式：如果元素多的话 避免用户交互 感知卡顿
+                        this.lf.updateEditConfig({
+                            isSilentMode: true,
+                            stopScrollGraph: true,
+                            stopMoveGraph: true,
+                        });
+                        if (!(curPartial !== partial)) return [3 /*break*/, 1];
+                        this.lf.graphModel.setPartial(partial);
+                        this.lf.graphModel.eventCenter.once('graph:updated', function () { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, this.snapshot(fileName, toImageOptions)
+                                        // 恢复原来渲染模式
+                                    ];
+                                    case 1:
+                                        _a.sent();
+                                        // 恢复原来渲染模式
+                                        this.lf.graphModel.setPartial(curPartial);
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); });
+                        return [3 /*break*/, 3];
+                    case 1: return [4 /*yield*/, this.snapshot(fileName, toImageOptions)];
+                    case 2:
+                        _b.sent();
+                        _b.label = 3;
+                    case 3:
+                        // 恢复原来配置
+                        this.lf.updateEditConfig(editConfig);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 下载图片
+     * @param fileName
+     * @param toImageOptions
+     */
+    Snapshot.prototype.snapshot = function (fileName, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
             var _a, _b, fileType, quality, svg, copy, svgString, blob, url;
             var _this = this;
@@ -200,9 +229,9 @@ var Snapshot = /** @class */ (function () {
     };
     /**
      * 获取base64对象
-     * @param backgroundColor string | undefined
-     * @param fileType string | undefined
-     * @returns Promise<SnapshotResponse>
+     * @param backgroundColor
+     * @param fileType
+     * @returns
      */
     Snapshot.prototype.getSnapshotBase64 = function (backgroundColor, fileType) {
         return __awaiter(this, void 0, void 0, function () {
@@ -232,8 +261,8 @@ var Snapshot = /** @class */ (function () {
     };
     /**
      * 获取Blob对象
-     * @param backgroundColor string | undefined
-     * @param fileType string | undefined
+     * @param backgroundColor
+     * @param fileType
      * @returns
      */
     Snapshot.prototype.getSnapshotBlob = function (backgroundColor, fileType) {
@@ -265,7 +294,7 @@ var Snapshot = /** @class */ (function () {
     };
     /**
      * 获取脚本css样式
-     * @returns rules string
+     * @returns
      */
     Snapshot.prototype.getClassRules = function () {
         var rules = '';
@@ -273,8 +302,14 @@ var Snapshot = /** @class */ (function () {
             var styleSheets = document.styleSheets;
             for (var i = 0; i < styleSheets.length; i++) {
                 var sheet = styleSheets[i];
-                for (var j = 0; j < sheet.cssRules.length; j++) {
-                    rules += sheet.cssRules[j].cssText;
+                // 这里是为了过滤掉不同源css脚本
+                try {
+                    for (var j = 0; j < sheet.cssRules.length; j++) {
+                        rules += sheet.cssRules[j].cssText;
+                    }
+                }
+                catch (error) {
+                    console.log('CSS scripts from different sources have been filtered out');
                 }
             }
         }
@@ -285,9 +320,9 @@ var Snapshot = /** @class */ (function () {
     };
     /**
      * 获取图片生成中间产物canvas对象，用户转换为其他需要的格式
-     * @param svg Element
-     * @param toImageOptions ToImageOptions
-     * @returns Promise<HTMLCanvasElement>
+     * @param svg
+     * @param toImageOptions
+     * @returns
      */
     Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
@@ -369,8 +404,6 @@ var Snapshot = /** @class */ (function () {
                                     ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, padding / dpr, padding / dpr);
                                     resolve(width && height ? copyCanvas(canvas, width, height) : canvas);
                                 }
-                                // 如果局部渲染本来是开启的，继续开启
-                                // partial && this.lf.graphModel.setPartial(true)
                             }
                             catch (e) {
                                 ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, padding / dpr, padding / dpr);
@@ -394,7 +427,7 @@ var Snapshot = /** @class */ (function () {
     };
     /**
      * 克隆并处理画布节点
-     * @param svg Node
+     * @param svg
      * @returns
      */
     Snapshot.prototype.cloneSvg = function (svg, addStyle) {