@logicflow/extension 2.0.21 → 2.1.0

package/es/components/mini-map/index.js

@@ -9,6 +9,7 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
+import { createTeleportContainer } from '@logicflow/vue-node-registry';
 var MiniMap = /** @class */ (function () {
     function MiniMap(_a) {
         var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
@@ -275,6 +276,8 @@ var MiniMap = /** @class */ (function () {
         // minimap中禁用adapter。
         // this.lfMap.adapterIn = (a) => a
         // this.lfMap.adapterOut = (a) => a
+        // 创建teleport容器（vue3中生效）
+        createTeleportContainer(miniMapWrap, this.lfMap.graphModel.flowId);
         this.miniMapWrap = miniMapWrap;
         this.createViewPort();
         miniMapWrap.addEventListener('click', this.mapClick);

package/es/tools/label/index.js

@@ -95,7 +95,7 @@ var Label = /** @class */ (function () {
             var value = config.value, content = config.content, vertical = config.vertical, editable = config.editable, draggable = config.draggable, labelTextOverflowMode = config.textOverflowMode;
             var textEdit = element.BaseType === 'node' ? nodeTextEdit : edgeTextEdit;
             var textDraggable = element.BaseType === 'node' ? nodeTextDraggable : edgeTextDraggable;
-            return __assign(__assign({}, config), { zIndex: zIndex, labelWidth: labelWidth, content: content !== null && content !== void 0 ? content : value, vertical: vertical !== null && vertical !== void 0 ? vertical : false, editable: textEdit && editable, draggable: textDraggable && draggable, textOverflowMode: labelTextOverflowMode !== null && labelTextOverflowMode !== void 0 ? labelTextOverflowMode : textOverflowMode });
+            return __assign(__assign({}, config), { zIndex: zIndex, labelWidth: labelWidth, content: content !== null && content !== void 0 ? content : value, vertical: vertical !== null && vertical !== void 0 ? vertical : false, editable: Boolean(textEdit) && editable, draggable: Boolean(textDraggable) && draggable, textOverflowMode: labelTextOverflowMode !== null && labelTextOverflowMode !== void 0 ? labelTextOverflowMode : textOverflowMode });
         });
     };
     /**
@@ -241,8 +241,15 @@ var Label = /** @class */ (function () {
             var element = graphModel.getElement(data.id);
             if (element) {
                 _this.rewriteInnerMethods(element);
-                var formatedLabel = _this.formatConfig(graphModel, data);
-                element.setProperty('_label', formatedLabel);
+                // 检查_label是否已经是格式化后的数组格式，如果是则跳过格式化
+                // 这样可以避免在复制粘贴时重复处理已经格式化好的label数据
+                var currentLabel = element.properties._label;
+                if (!isArray(currentLabel) ||
+                    currentLabel.length === 0 ||
+                    !currentLabel[0].id) {
+                    var formatedLabel = _this.formatConfig(graphModel, data);
+                    element.setProperty('_label', formatedLabel);
+                }
             }
         });
     };

package/es/tools/proximity-connect/index.js

@@ -79,7 +79,7 @@ var ProximityConnect = /** @class */ (function () {
                 var targetNodeId = edgeModel.targetNodeId;
                 var targetNodeModel = _this.lf.graphModel.getNodeModelById(targetNodeId);
                 if (targetNodeModel &&
-                    isInNode({ x: eventX, y: eventY }, targetNodeModel)) {
+                    isInNode({ x: eventX, y: eventY }, targetNodeModel, 10)) {
                     // 如果当前拖拽点在锚点上，就不触发插件的连线
                     _this.lf.deleteEdge(virtualEdgeId);
                     return;

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

@@ -101,6 +101,11 @@ export declare class Snapshot {
      * @returns
      */
     private getClassRules;
+    /**
+     * 根据浏览器类型获取Canvas尺寸限制
+     * @returns 包含最大主维度和次维度的对象
+     */
+    private getCanvasDimensionsByBrowser;
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素

package/es/tools/snapshot/index.js

@@ -344,6 +344,26 @@ var Snapshot = /** @class */ (function () {
         }
         return rules;
     };
+    /**
+     * 根据浏览器类型获取Canvas尺寸限制
+     * @returns 包含最大主维度和次维度的对象
+     */
+    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;
+        }
+        else if (userAgent.indexOf('Firefox') !== -1) {
+            maxCanvasDimension = 32767;
+            otherMaxCanvasDimension = 3814;
+        }
+        return { maxCanvasDimension: maxCanvasDimension, otherMaxCanvasDimension: otherMaxCanvasDimension };
+    };
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素
@@ -352,14 +372,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, ctx, img, style, foreignObject;
-            return __generator(this, function (_b) {
-                switch (_b.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, 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) {
                     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 = _b.sent();
+                        copy = _c.sent();
                         dpr = window.devicePixelRatio || 1;
                         if (dpr < 1) {
                             // https://github.com/didi/LogicFlow/issues/1222
@@ -388,7 +408,6 @@ var Snapshot = /** @class */ (function () {
                         ;
                         actualWidth = (bbox.width / SCALE_X) * safetyFactor;
                         actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
-                        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, ".concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + padding / dpr, ")");
                         bboxWidth = Math.ceil(actualWidth);
                         bboxHeight = Math.ceil(actualHeight);
                         canvas = document.createElement('canvas');
@@ -396,13 +415,51 @@ var Snapshot = /** @class */ (function () {
                         canvas.style.height = "".concat(bboxHeight, "px");
                         safetyMargin = 40 // 额外的安全边距
                         ;
-                        canvas.width = bboxWidth * dpr + padding * 2 + safetyMargin;
-                        canvas.height = bboxHeight * dpr + padding * 2 + safetyMargin;
+                        _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);
+                        }
+                        // 将导出区域移动到左上角，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;
                         ctx = canvas.getContext('2d');
                         if (ctx) {
                             // 清空canvas
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.scale(dpr, dpr);
+                            ctx.scale(dpr * scaleWidth, dpr * scaleHeight);
                             // 如果有背景色，设置流程图导出的背景色
                             if (backgroundColor) {
                                 ctx.fillStyle = backgroundColor;

package/lib/components/mini-map/index.js

@@ -12,6 +12,7 @@ var __values = (this && this.__values) || function(o) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiniMap = void 0;
+var vue_node_registry_1 = require("@logicflow/vue-node-registry");
 var MiniMap = /** @class */ (function () {
     function MiniMap(_a) {
         var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
@@ -278,6 +279,8 @@ var MiniMap = /** @class */ (function () {
         // minimap中禁用adapter。
         // this.lfMap.adapterIn = (a) => a
         // this.lfMap.adapterOut = (a) => a
+        // 创建teleport容器（vue3中生效）
+        (0, vue_node_registry_1.createTeleportContainer)(miniMapWrap, this.lfMap.graphModel.flowId);
         this.miniMapWrap = miniMapWrap;
         this.createViewPort();
         miniMapWrap.addEventListener('click', this.mapClick);

package/lib/tools/label/index.js

@@ -101,7 +101,7 @@ var Label = /** @class */ (function () {
             var value = config.value, content = config.content, vertical = config.vertical, editable = config.editable, draggable = config.draggable, labelTextOverflowMode = config.textOverflowMode;
             var textEdit = element.BaseType === 'node' ? nodeTextEdit : edgeTextEdit;
             var textDraggable = element.BaseType === 'node' ? nodeTextDraggable : edgeTextDraggable;
-            return __assign(__assign({}, config), { zIndex: zIndex, labelWidth: labelWidth, content: content !== null && content !== void 0 ? content : value, vertical: vertical !== null && vertical !== void 0 ? vertical : false, editable: textEdit && editable, draggable: textDraggable && draggable, textOverflowMode: labelTextOverflowMode !== null && labelTextOverflowMode !== void 0 ? labelTextOverflowMode : textOverflowMode });
+            return __assign(__assign({}, config), { zIndex: zIndex, labelWidth: labelWidth, content: content !== null && content !== void 0 ? content : value, vertical: vertical !== null && vertical !== void 0 ? vertical : false, editable: Boolean(textEdit) && editable, draggable: Boolean(textDraggable) && draggable, textOverflowMode: labelTextOverflowMode !== null && labelTextOverflowMode !== void 0 ? labelTextOverflowMode : textOverflowMode });
         });
     };
     /**
@@ -247,8 +247,15 @@ var Label = /** @class */ (function () {
             var element = graphModel.getElement(data.id);
             if (element) {
                 _this.rewriteInnerMethods(element);
-                var formatedLabel = _this.formatConfig(graphModel, data);
-                element.setProperty('_label', formatedLabel);
+                // 检查_label是否已经是格式化后的数组格式，如果是则跳过格式化
+                // 这样可以避免在复制粘贴时重复处理已经格式化好的label数据
+                var currentLabel = element.properties._label;
+                if (!(0, lodash_es_1.isArray)(currentLabel) ||
+                    currentLabel.length === 0 ||
+                    !currentLabel[0].id) {
+                    var formatedLabel = _this.formatConfig(graphModel, data);
+                    element.setProperty('_label', formatedLabel);
+                }
             }
         });
     };

package/lib/tools/proximity-connect/index.js

@@ -82,7 +82,7 @@ var ProximityConnect = /** @class */ (function () {
                 var targetNodeId = edgeModel.targetNodeId;
                 var targetNodeModel = _this.lf.graphModel.getNodeModelById(targetNodeId);
                 if (targetNodeModel &&
-                    (0, core_1.isInNode)({ x: eventX, y: eventY }, targetNodeModel)) {
+                    (0, core_1.isInNode)({ x: eventX, y: eventY }, targetNodeModel, 10)) {
                     // 如果当前拖拽点在锚点上，就不触发插件的连线
                     _this.lf.deleteEdge(virtualEdgeId);
                     return;

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

@@ -101,6 +101,11 @@ export declare class Snapshot {
      * @returns
      */
     private getClassRules;
+    /**
+     * 根据浏览器类型获取Canvas尺寸限制
+     * @returns 包含最大主维度和次维度的对象
+     */
+    private getCanvasDimensionsByBrowser;
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素

package/lib/tools/snapshot/index.js

@@ -347,6 +347,26 @@ var Snapshot = /** @class */ (function () {
         }
         return rules;
     };
+    /**
+     * 根据浏览器类型获取Canvas尺寸限制
+     * @returns 包含最大主维度和次维度的对象
+     */
+    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;
+        }
+        else if (userAgent.indexOf('Firefox') !== -1) {
+            maxCanvasDimension = 32767;
+            otherMaxCanvasDimension = 3814;
+        }
+        return { maxCanvasDimension: maxCanvasDimension, otherMaxCanvasDimension: otherMaxCanvasDimension };
+    };
     /**
      * 将 svg 转化为 canvas
      * @param svg - svg 元素
@@ -355,14 +375,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, ctx, img, style, foreignObject;
-            return __generator(this, function (_b) {
-                switch (_b.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, 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) {
                     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 = _b.sent();
+                        copy = _c.sent();
                         dpr = window.devicePixelRatio || 1;
                         if (dpr < 1) {
                             // https://github.com/didi/LogicFlow/issues/1222
@@ -391,7 +411,6 @@ var Snapshot = /** @class */ (function () {
                         ;
                         actualWidth = (bbox.width / SCALE_X) * safetyFactor;
                         actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
-                        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, ".concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + padding / dpr, ")");
                         bboxWidth = Math.ceil(actualWidth);
                         bboxHeight = Math.ceil(actualHeight);
                         canvas = document.createElement('canvas');
@@ -399,13 +418,51 @@ var Snapshot = /** @class */ (function () {
                         canvas.style.height = "".concat(bboxHeight, "px");
                         safetyMargin = 40 // 额外的安全边距
                         ;
-                        canvas.width = bboxWidth * dpr + padding * 2 + safetyMargin;
-                        canvas.height = bboxHeight * dpr + padding * 2 + safetyMargin;
+                        _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);
+                        }
+                        // 将导出区域移动到左上角，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;
                         ctx = canvas.getContext('2d');
                         if (ctx) {
                             // 清空canvas
                             ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.scale(dpr, dpr);
+                            ctx.scale(dpr * scaleWidth, dpr * scaleHeight);
                             // 如果有背景色，设置流程图导出的背景色
                             if (backgroundColor) {
                                 ctx.fillStyle = backgroundColor;

package/package.json

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