@logicflow/extension 2.2.0 → 2.2.1

package/lib/tools/label/mediumEditor.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediumEditor = exports.ColorPickerButton = exports.defaultOptions = void 0;
+exports.MediumEditor = exports.createColorPickerButtonClass = exports.defaultOptions = void 0;
 var medium_editor_1 = __importDefault(require("medium-editor"));
 exports.MediumEditor = medium_editor_1.default;
 var vanilla_picker_1 = __importDefault(require("vanilla-picker"));
@@ -43,55 +43,93 @@ exports.defaultOptions = {
     },
     disableEditing: true,
 };
-exports.ColorPickerButton = medium_editor_1.default.extensions.button.extend({
-    name: 'colorpicker',
-    tagNames: ['mark'],
-    contentDefault: '<b>Color</b>',
-    aria: 'Color Picker',
-    action: 'colorPicker',
-    init: function () {
-        var _this = this;
-        rangy_1.default.init();
-        medium_editor_1.default.extensions.button.prototype.init.call(this);
-        this.colorPicker = new vanilla_picker_1.default({
-            parent: this.button,
-            color: '#000',
-            onDone: function (res) {
-                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
-                    _this.coloredText.undoToSelection();
-                }
-                _this.coloredText = rangy_1.default.createClassApplier('colored', {
-                    elementTagName: 'span',
-                    elementProperties: {
-                        style: {
-                            color: res.hex,
-                        },
-                    },
-                    normalize: true,
-                });
-                _this.coloredText.toggleSelection();
-                _this.base.checkContentChanged();
-                _this.setInactive();
-            },
-        });
-    },
-    getButton: function () {
-        return this.button;
-    },
-    handleClick: function () {
-        this.setActive();
-        this.colorPicker.show();
-    },
-    isAlreadyApplied: function (node) {
-        return node.nodeName.toLowerCase() === 'mark';
-    },
-    isActive: function () {
-        return this.button.classList.contains('medium-editor-button-active');
-    },
-    setInactive: function () {
-        this.button.classList.remove('medium-editor-button-active');
-    },
-    setActive: function () {
-        this.button.classList.add('medium-editor-button-active');
-    },
-});
+function createColorPickerButtonClass(MediumEditor) {
+    var _a, _b;
+    var ButtonBase = ((_a = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _a === void 0 ? void 0 : _a.button) || ((_b = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _b === void 0 ? void 0 : _b.button);
+    var ExtensionBase = (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension) || (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension);
+    // 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
+    var Base = ButtonBase || ExtensionBase;
+    if (!Base) {
+        console.warn('MediumEditor button/extension base not available; using noop extension');
+        return /** @class */ (function () {
+            function class_1() {
+            }
+            return class_1;
+        }());
+    }
+    return Base.extend({
+        name: 'colorpicker',
+        tagNames: ['mark'],
+        contentDefault: '<b>Color</b>',
+        aria: 'Color Picker',
+        action: 'colorPicker',
+        init: function () {
+            var _this = this;
+            var _a, _b;
+            try {
+                rangy_1.default.init();
+            }
+            catch (_c) {
+                console.error('rangy.init failed');
+            }
+            // 初始化按钮（ButtonBase 才有 prototype.init）
+            try {
+                ;
+                (_b = (_a = ButtonBase === null || ButtonBase === void 0 ? void 0 : ButtonBase.prototype) === null || _a === void 0 ? void 0 : _a.init) === null || _b === void 0 ? void 0 : _b.call(this);
+            }
+            catch (_d) {
+                console.error('ButtonBase.init failed');
+            }
+            this.colorPicker = new vanilla_picker_1.default({
+                parent: this.button || undefined,
+                color: '#000',
+                onDone: function (res) {
+                    var _a, _b, _c, _d, _e;
+                    try {
+                        if (_this.coloredText && ((_b = (_a = _this.coloredText).isAppliedToSelection) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                            _this.coloredText.undoToSelection();
+                        }
+                        _this.coloredText = rangy_1.default.createClassApplier('colored', {
+                            elementTagName: 'span',
+                            elementProperties: { style: { color: res.hex } },
+                            normalize: true,
+                        });
+                        _this.coloredText.toggleSelection();
+                        (_d = (_c = _this.base) === null || _c === void 0 ? void 0 : _c.checkContentChanged) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        (_e = _this.setInactive) === null || _e === void 0 ? void 0 : _e.call(_this);
+                    }
+                    catch (_f) {
+                        console.error('Picker.onDone failed');
+                    }
+                },
+            });
+        },
+        getButton: function () {
+            return this.button;
+        },
+        handleClick: function () {
+            var _a, _b, _c;
+            (_a = this.setActive) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_c = (_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b);
+        },
+        isAlreadyApplied: function (node) {
+            var _a, _b;
+            return ((_b = (_a = node === null || node === void 0 ? void 0 : node.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === 'mark';
+        },
+        isActive: function () {
+            var _a, _b;
+            return (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('medium-editor-button-active');
+        },
+        setInactive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('medium-editor-button-active');
+        },
+        setActive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('medium-editor-button-active');
+        },
+    });
+}
+exports.createColorPickerButtonClass = createColorPickerButtonClass;

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 // 额外的安全边距
-                        ;
-                        _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 //高 缩放
+                        safetyMargin = toImageOptions.safetyMargin || 0 // 额外的安全边距
                         ;
-                        // 对宽和高分别进行缩放，如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;
@@ -669,7 +653,7 @@ var Snapshot = /** @class */ (function () {
     // 内部方法处理blob转换
     Snapshot.prototype.snapshotBlob = function (toImageOptions, baseFileType, backgroundColor) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, fileType, svg;
+            var _a, fileType, svg, copy, svgString, blob;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -679,18 +663,31 @@ var Snapshot = /** @class */ (function () {
                         return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
                     case 1:
                         _b.sent();
-                        return [2 /*return*/, new Promise(function (resolve) {
-                                _this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
-                                    canvas.toBlob(function (blob) {
-                                        // 输出图片数据以及图片宽高
-                                        resolve({
-                                            data: blob,
-                                            width: canvas.width,
-                                            height: canvas.height,
-                                        });
-                                    }, "image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
-                                });
-                            })];
+                        if (!(fileType === 'svg')) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.cloneSvg(svg)];
+                    case 2:
+                        copy = _b.sent();
+                        svgString = new XMLSerializer().serializeToString(copy);
+                        blob = new Blob([svgString], {
+                            type: 'image/svg+xml;charset=utf-8',
+                        });
+                        return [2 /*return*/, {
+                                data: blob,
+                                width: 0,
+                                height: 0,
+                            }];
+                    case 3: return [2 /*return*/, new Promise(function (resolve) {
+                            _this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
+                                canvas.toBlob(function (blob) {
+                                    // 输出图片数据以及图片宽高
+                                    resolve({
+                                        data: blob,
+                                        width: canvas.width,
+                                        height: canvas.height,
+                                    });
+                                }, "image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
+                            });
+                        })];
                 }
             });
         });
@@ -707,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",
+  "version": "2.2.1",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/vue-node-registry": "1.2.0",
-    "@logicflow/core": "2.2.0"
+    "@logicflow/core": "2.2.1"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,16 +30,20 @@
     "mobx": "^5.15.7",
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
-    "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.2.0",
-    "@logicflow/vue-node-registry": "1.2.0"
+    "vanilla-picker": "^2.12.3"
   },
   "devDependencies": {
     "less": "^4.1.1",
     "postcss-url": "^10.1.3",
     "postcss-import": "^16.1.0",
-    "rollup-plugin-postcss": "^4.0.2"
+    "rollup-plugin-postcss": "^4.0.2",
+    "@logicflow/core": "2.2.1"
   },
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
   "scripts": {
     "clean:turbo": "rss",
     "clean:build": "rss",

package/.turbo/turbo-build.log

@@ -1,38 +0,0 @@
-
-> @logicflow/extension@2.1.6 prebuild /Users/didi/Desktop/github/LogicFlow/packages/extension
-> rss
-
-> [prebuild] run-s -s clean:build 
-> [clean:build] rimraf dist es lib 
-
-> @logicflow/extension@2.1.6 build /Users/didi/Desktop/github/LogicFlow/packages/extension
-> run-p -s build:dev build:umd
-
-
-src/index.less → dist/index.css, lib/index.css, lib/style/index.css, es/index.css, es/style/index.css...
-Browserslist: caniuse-lite is outdated. Please run:
-  npx update-browserslist-db@latest
-  Why you should do it regularly: https://github.com/browserslist/update-db#readme
-(!) The emitted file "index.css" overwrites a previously emitted file of the same name.
-(!) The emitted file "index.css" overwrites a previously emitted file of the same name.
-(!) The emitted file "index.css" overwrites a previously emitted file of the same name.
-(!) The emitted file "index.css" overwrites a previously emitted file of the same name.
-(!) The emitted file "index.css" overwrites a previously emitted file of the same name.
-created dist/index.css, lib/index.css, lib/style/index.css, es/index.css, es/style/index.css in 2.3s
-
-./src/index.ts → dist/index.min.js...
-+----------------------------------------------------+
-|                                                    |
-|   Bundle Format: umd                               |
-|   Bundle Name: Extension                           |
-|   External Globals:                                |
-|    @logicflow/core: Core                           |
-|    @logicflow/vue-node-registry: VueNodeRegistry   |
-|                                                    |
-|   Destination: dist/index.min.js                   |
-|   Bundle   Size: 465.59 KB                         |
-|   Minified Size: 463.8 KB                          |
-|   GZipped  Size: 132.84 KB                         |
-|                                                    |
-+----------------------------------------------------+
-created dist/index.min.js in 7.8s