@meta2d/core 1.0.30 → 1.0.32

package/src/core.d.ts

@@ -54,7 +54,7 @@ export declare class Meta2d {
     initEventFns(): void;
     navigatorTo(id: string): void;
     doSendDataEvent(value: any, topics?: string): void;
-    sendDataToNetWork(value: any, network: Network): Promise<void>;
+    sendDataToNetWork(value: any, _network: Network): Promise<void>;
     resize(width?: number, height?: number): void;
     /**
      *
@@ -63,7 +63,7 @@ export declare class Meta2d {
     addPen(pen: Pen, history?: boolean, emit?: boolean): Promise<Pen>;
     addPens(pens: Pen[], history?: boolean): Promise<Pen[]>;
     render(patchFlags?: boolean | number): void;
-    setBackgroundImage(url: string): Promise<void>;
+    setBackgroundImage(url: string, data?: any): Promise<void>;
     setBackgroundColor(color?: string): void;
     setGrid({ grid, gridColor, gridSize, gridRotate, }?: {
         grid?: boolean;
@@ -341,6 +341,11 @@ export declare class Meta2d {
      * @param pens 本次改变的 pens
      */
     initImageCanvas(pens: Pen[]): void;
+    /**
+     * 模版图元图层改变
+     * @param pens 本次改变的 pens
+     */
+    initTemplateCanvas(pens: Pen[]): void;
     /**
      * 该画笔置底，即放到数组最前，最后绘制即在底部
      * @param pens 画笔们，注意 pen 必须在该数组内才有效

package/src/core.js

@@ -347,6 +347,21 @@ var Meta2d = /** @class */ (function () {
     });
     Meta2d.prototype.setOptions = function (opts) {
         if (opts === void 0) { opts = {}; }
+        if (opts.grid !== undefined ||
+            opts.gridColor !== undefined ||
+            opts.gridSize !== undefined) {
+            this.setGrid({
+                grid: opts.grid,
+                gridColor: opts.gridColor,
+                gridSize: opts.gridSize,
+            });
+        }
+        if (opts.rule !== undefined || opts.ruleColor !== undefined) {
+            this.setRule({
+                rule: opts.rule,
+                ruleColor: opts.ruleColor,
+            });
+        }
         this.store.options = Object.assign(this.store.options, opts);
         if (this.canvas && opts.scroll !== undefined) {
             if (opts.scroll) {
@@ -403,7 +418,7 @@ var Meta2d = /** @class */ (function () {
             // TODO: 若频繁地触发，重复 render 可能带来性能问题，待考虑
             var value = e.value;
             if (value && typeof value === 'object') {
-                var pens = e.params ? _this.find(e.params) : [pen];
+                var pens = e.params ? _this.find(e.params) : _this.find(pen.id);
                 pens.forEach(function (pen) {
                     if (value.hasOwnProperty('visible')) {
                         _this.setVisible(pen, value.visible);
@@ -636,12 +651,13 @@ var Meta2d = /** @class */ (function () {
         }
         this.store.emitter.emit('sendData', data);
     };
-    Meta2d.prototype.sendDataToNetWork = function (value, network) {
+    Meta2d.prototype.sendDataToNetWork = function (value, _network) {
         return __awaiter(this, void 0, void 0, function () {
-            var i, keys, params, res, clients_1, mqttClient_1, websockets, websocket_1;
+            var network, i, keys, params, res, clients_1, mqttClient_1, websockets, websocket_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        network = deepClone(_network);
                         if (!network.url) {
                             return [2 /*return*/];
                         }
@@ -755,7 +771,8 @@ var Meta2d = /** @class */ (function () {
         var _a;
         (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.render(patchFlags);
     };
-    Meta2d.prototype.setBackgroundImage = function (url) {
+    Meta2d.prototype.setBackgroundImage = function (url, data) {
+        var _a, _b, _c, _e;
         return __awaiter(this, void 0, void 0, function () {
             function loadImage(url) {
                 return __awaiter(this, void 0, void 0, function () {
@@ -778,13 +795,13 @@ var Meta2d = /** @class */ (function () {
                 });
             }
             var that, width, height, img;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_f) {
+                switch (_f.label) {
                     case 0:
                         that = this;
                         this.store.data.bkImage = url;
-                        width = this.store.data.width || this.store.options.width;
-                        height = this.store.data.height || this.store.options.height;
+                        width = (data === null || data === void 0 ? void 0 : data.width) || ((_a = this.store.data) === null || _a === void 0 ? void 0 : _a.width) || ((_b = this.store.options) === null || _b === void 0 ? void 0 : _b.width);
+                        height = (data === null || data === void 0 ? void 0 : data.height) || ((_c = this.store.data) === null || _c === void 0 ? void 0 : _c.height) || ((_e = this.store.options) === null || _e === void 0 ? void 0 : _e.height);
                         if (width && height) {
                             this.canvas.canvasTemplate.canvas.style.backgroundImage = null;
                             this.canvas && (this.canvas.canvasTemplate.bgPatchFlags = true);
@@ -797,13 +814,19 @@ var Meta2d = /** @class */ (function () {
                         if (!url) return [3 /*break*/, 2];
                         return [4 /*yield*/, loadImage(url)];
                     case 1:
-                        img = _a.sent();
+                        img = _f.sent();
                         // 用作 toPng 的绘制
                         this.store.bkImg = img;
+                        if (width && height) {
+                            if (this.canvas) {
+                                this.canvas.canvasTemplate.init();
+                                this.render();
+                            }
+                        }
                         return [3 /*break*/, 3];
                     case 2:
                         this.store.bkImg = null;
-                        _a.label = 3;
+                        _f.label = 3;
                     case 3: return [2 /*return*/];
                 }
             });
@@ -837,7 +860,7 @@ var Meta2d = /** @class */ (function () {
         this.clear(false, data.template);
         this.canvas.autoPolylineFlag = true;
         if (data) {
-            this.setBackgroundImage(data.bkImage);
+            this.setBackgroundImage(data.bkImage, data);
             Object.assign(this.store.data, data);
             this.store.data.pens = [];
             try {
@@ -2043,11 +2066,12 @@ var Meta2d = /** @class */ (function () {
                 _this.store.data.pens.forEach(function (pen) {
                     _this.penMock(pen);
                 });
-            https.forEach(function (item) { return __awaiter(_this, void 0, void 0, function () {
-                var i, keys, i, keys, res, data;
+            https.forEach(function (_item) { return __awaiter(_this, void 0, void 0, function () {
+                var item, i, keys, i, keys, res, data;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
+                            item = deepClone(_item);
                             if (!item.url) return [3 /*break*/, 3];
                             if (typeof item.headers === 'object') {
                                 for (i in item.headers) {
@@ -2937,15 +2961,36 @@ var Meta2d = /** @class */ (function () {
     };
     Meta2d.prototype.clearFormatPainter = function () {
         var _this = this;
-        var attrs = {};
+        var pens = this.store.active;
+        var initPens = deepClone(pens);
         formatAttrs.forEach(function (attr) {
-            attrs[attr] =
-                _this.store.options.defaultFormat[attr] ||
-                    _this.store.options[attr] ||
-                    undefined;
+            for (var i = 0; i < pens.length; i++) {
+                var pen = pens[i];
+                var _a = _this.store.options, fontSize = _a.fontSize, lineHeight = _a.lineHeight;
+                if (attr === 'lineWidth') {
+                    pen.lineWidth = 1;
+                    pen.calculative.lineWidth = 1;
+                }
+                else if (attr === 'fontSize') {
+                    pen.fontSize = fontSize;
+                    pen.calculative.fontSize = fontSize;
+                }
+                else if (attr === 'lineHeight') {
+                    pen.lineHeight = lineHeight;
+                    pen.calculative.lineHeight = lineHeight;
+                }
+                else {
+                    delete pen[attr];
+                    delete pen.calculative[attr];
+                }
+            }
+        });
+        this.render();
+        this.pushHistory({
+            type: EditType.Update,
+            initPens: initPens,
+            pens: pens,
         });
-        localStorage.setItem('meta2d-formatPainter', JSON.stringify(attrs));
-        this.formatPainter();
     };
     Meta2d.prototype.alignNodes = function (align, pens, rect) {
         var e_8, _a;
@@ -3256,6 +3301,7 @@ var Meta2d = /** @class */ (function () {
                 if (index > -1) {
                     _pens.push(_pens[index]);
                     _pens.splice(index, 1);
+                    _this.initTemplateCanvas([pen]);
                     _this.initImageCanvas([pen]);
                 }
                 _this.specificLayerMove(pen, 'top');
@@ -3284,6 +3330,13 @@ var Meta2d = /** @class */ (function () {
     Meta2d.prototype.initImageCanvas = function (pens) {
         this.canvas.initImageCanvas(pens);
     };
+    /**
+     * 模版图元图层改变
+     * @param pens 本次改变的 pens
+     */
+    Meta2d.prototype.initTemplateCanvas = function (pens) {
+        this.canvas.initTemplateCanvas(pens);
+    };
     /**
      * 该画笔置底，即放到数组最前，最后绘制即在底部
      * @param pens 画笔们，注意 pen 必须在该数组内才有效
@@ -3304,6 +3357,7 @@ var Meta2d = /** @class */ (function () {
                 if (index > -1) {
                     _pens.unshift(_pens[index]);
                     _pens.splice(index + 1, 1);
+                    this_2.initTemplateCanvas([pen_1]);
                     this_2.initImageCanvas([pen_1]);
                 }
                 this_2.specificLayerMove(pen_1, 'bottom');
@@ -3464,6 +3518,7 @@ var Meta2d = /** @class */ (function () {
                     _this.specificLayerMove(_pen, 'up');
                 });
                 _pens.splice.apply(_pens, __spreadArray([lastIndex_1 + 1, 0], __read(orderPens), false));
+                this_4.initTemplateCanvas(orderPens);
                 this_4.initImageCanvas(orderPens);
             }
             else {
@@ -3471,6 +3526,7 @@ var Meta2d = /** @class */ (function () {
                 if (index > -1 && index !== _pens.length - 1) {
                     _pens.splice(index + 2, 0, _pens[index]);
                     _pens.splice(index, 1);
+                    this_4.initTemplateCanvas([pen]);
                     this_4.initImageCanvas([pen]);
                 }
                 this_4.specificLayerMove(pen, 'up');
@@ -3532,6 +3588,7 @@ var Meta2d = /** @class */ (function () {
                     _this.specificLayerMove(_pen, 'down');
                 });
                 _pens.splice.apply(_pens, __spreadArray([firstIndex_1 - 1, 0], __read(orderPens), false));
+                this_5.initTemplateCanvas(orderPens);
                 this_5.initImageCanvas(orderPens);
             }
             else {
@@ -3539,6 +3596,7 @@ var Meta2d = /** @class */ (function () {
                 if (index > -1 && index !== 0) {
                     _pens.splice(index - 1, 0, _pens[index]);
                     _pens.splice(index + 1, 1);
+                    this_5.initTemplateCanvas([pen]);
                     this_5.initImageCanvas([pen]);
                 }
                 this_5.specificLayerMove(pen, 'down');