@meta2d/core 1.0.27 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meta2d/core",
-    "version": "1.0.27",
+    "version": "1.0.28",
     "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
     "main": "index.js",
     "types": "index.d.ts",
@@ -36,4 +36,4 @@
         "access": "public"
     },
     "gitHead": "78f2a53ca1839c89b56e2e498d17ba4eb987ad14"
-}
+}

package/src/canvas/canvas.d.ts

@@ -13,6 +13,7 @@ import { MagnifierCanvas } from './magnifierCanvas';
 import { Meta2d } from '../core';
 import { Dialog } from '../dialog';
 import { Title } from '../title';
+import { CanvasTemplate } from './canvasTemplate';
 export declare const movingSuffix: "-moving";
 export declare class Canvas {
     parent: Meta2d;
@@ -104,6 +105,7 @@ export declare class Canvas {
     mousePos: Point;
     scroll: Scroll;
     movingAnchor: Point;
+    canvasTemplate: CanvasTemplate;
     canvasImage: CanvasImage;
     canvasImageBottom: CanvasImage;
     magnifierCanvas: MagnifierCanvas;
@@ -200,6 +202,7 @@ export declare class Canvas {
      * @param pens 本次改变的 pens
      */
     initImageCanvas(pens: Pen[]): void;
+    initTemplateCanvas(pens: Pen[]): void;
     private hasImage;
     private clearDock;
     inactive(drawing?: boolean): void;
@@ -238,6 +241,8 @@ export declare class Canvas {
     loadImage(pen: Pen): void;
     private imageTimer;
     imageLoaded(): void;
+    private templateImageTimer;
+    templateImageLoaded(): void;
     setCalculativeByScale(pen: Pen): void;
     updatePenRect(pen: Pen, { worldRectIsReady, playingAnimate, }?: {
         worldRectIsReady?: boolean;
@@ -260,6 +265,10 @@ export declare class Canvas {
         x: number;
         y: number;
     }): void;
+    templateScale(scale: number, center?: {
+        x: number;
+        y: number;
+    }): void;
     rotatePens(e: Point): void;
     resizePens(e: Point): void;
     movePens(e: {
@@ -315,6 +324,14 @@ export declare class Canvas {
      * @param doing 是否持续移动
      */
     translatePens(pens: Pen[], x: number, y: number, doing?: boolean): void;
+    /**
+     * 移动 画笔们
+     * @param pens 画笔们，不包含子节点
+     * @param x 偏移 x
+     * @param y 偏移 y
+     * @param doing 是否持续移动
+     */
+    templateTranslatePens(pens: Pen[], x: number, y: number): void;
     private calcAutoAnchor;
     restoreNodeAnimate(pen: Pen): void;
     updateLines(pen: Pen, change?: boolean): void;

package/src/canvas/canvas.js

@@ -99,6 +99,7 @@ import { lockedError } from '../utils/error';
 import { Dialog } from '../dialog';
 import { setter } from '../utils/object';
 import { Title } from '../title';
+import { CanvasTemplate } from './canvasTemplate';
 export var movingSuffix = '-moving';
 var Canvas = /** @class */ (function () {
     function Canvas(parent, parentElement, store) {
@@ -126,7 +127,7 @@ var Canvas = /** @class */ (function () {
         this.pointSize = 8;
         this.pasteOffset = true;
         this.opening = false;
-        this.maxZindex = 4;
+        this.maxZindex = 5;
         this.canMoveLine = false; //moveConnectedLine=false
         this.inputParent = document.createElement('div');
         // input = document.createElement('textarea');
@@ -1950,6 +1951,7 @@ var Canvas = /** @class */ (function () {
             var ctx = _this.canvas.getContext('2d');
             ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
             ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height);
+            _this.canvasTemplate.render();
             _this.canvasImageBottom.render();
             _this.canvasImage.render();
             _this.patchFlags = false;
@@ -1964,6 +1966,9 @@ var Canvas = /** @class */ (function () {
                     if (!isFinite(pen.x)) {
                         continue;
                     }
+                    if (pen.template) {
+                        continue;
+                    }
                     if (pen.calculative.inView) {
                         renderPen(ctx, pen);
                     }
@@ -2361,6 +2366,7 @@ var Canvas = /** @class */ (function () {
             _this.inputDiv.scrollTop = _this.inputDiv.scrollHeight;
             _this.inputDiv.scrollLeft = _this.inputDiv.scrollWidth;
             pen.calculative.text = undefined;
+            _this.initTemplateCanvas([pen]);
             _this.render();
         };
         this.setInputStyle = function (pen) {
@@ -2551,6 +2557,7 @@ var Canvas = /** @class */ (function () {
                     });
                     _this.store.emitter.emit('valueUpdate', pen);
                 }
+                _this.initTemplateCanvas([pen]);
             }
             _this.inputDiv.dataset.penId = undefined;
             _this.dropdown.style.display = 'none';
@@ -2653,23 +2660,25 @@ var Canvas = /** @class */ (function () {
             _this.render();
             _this.store.emitter.emit('valueUpdate', pen);
         };
+        this.canvasTemplate = new CanvasTemplate(parentElement, store);
+        this.canvasTemplate.canvas.style.zIndex = '1';
         this.canvasImageBottom = new CanvasImage(parentElement, store, true);
-        this.canvasImageBottom.canvas.style.zIndex = '1';
+        this.canvasImageBottom.canvas.style.zIndex = '2';
         parentElement.appendChild(this.canvas);
         this.canvas.style.position = 'absolute';
         this.canvas.style.backgroundRepeat = 'no-repeat';
         this.canvas.style.backgroundSize = '100% 100%';
-        this.canvas.style.zIndex = '2';
+        this.canvas.style.zIndex = '3';
         this.canvasImage = new CanvasImage(parentElement, store);
-        this.canvasImage.canvas.style.zIndex = '3';
+        this.canvasImage.canvas.style.zIndex = '4';
         this.magnifierCanvas = new MagnifierCanvas(this, parentElement, store);
-        this.magnifierCanvas.canvas.style.zIndex = '4';
+        this.magnifierCanvas.canvas.style.zIndex = '5';
         this.externalElements.style.position = 'absolute';
         this.externalElements.style.left = '0';
         this.externalElements.style.top = '0';
         this.externalElements.style.outline = 'none';
         this.externalElements.style.background = 'transparent';
-        this.externalElements.style.zIndex = '4';
+        this.externalElements.style.zIndex = '5';
         parentElement.style.position = 'relative';
         parentElement.appendChild(this.externalElements);
         this.createInput();
@@ -3241,6 +3250,7 @@ var Canvas = /** @class */ (function () {
         // active 消息表示拖拽结束
         // this.store.emitter.emit('active', this.store.active);
         this.initImageCanvas(this.store.active);
+        this.initTemplateCanvas(this.store.active);
         // 避免选中图元的出错情况，this.dock为undefined
         if (!this.dock)
             return;
@@ -3328,6 +3338,10 @@ var Canvas = /** @class */ (function () {
         pens.some(function (pen) { return _this.hasImage(pen, true); }) &&
             this.canvasImageBottom.init();
     };
+    Canvas.prototype.initTemplateCanvas = function (pens) {
+        pens.some(function (pen) { return pen.template !== undefined; }) &&
+            this.canvasTemplate.init();
+    };
     Canvas.prototype.hasImage = function (pen, isBottom) {
         var _this = this;
         var _a;
@@ -3576,6 +3590,7 @@ var Canvas = /** @class */ (function () {
         this.canvas.style.height = h + 'px';
         this.externalElements.style.width = w + 'px';
         this.externalElements.style.height = h + 'px';
+        this.canvasTemplate.resize(w, h);
         this.canvasImage.resize(w, h);
         this.canvasImageBottom.resize(w, h);
         this.magnifierCanvas.resize(w, h);
@@ -3618,6 +3633,9 @@ var Canvas = /** @class */ (function () {
         this.offscreen
             .getContext('2d')
             .clearRect(0, 0, this.offscreen.width, this.offscreen.height);
+        if (!this.store.data.template) {
+            this.canvasTemplate.clear();
+        }
         this.canvasImage.clear();
         this.canvasImageBottom.clear();
     };
@@ -3833,10 +3851,13 @@ var Canvas = /** @class */ (function () {
                 break;
         }
         if (action.type === EditType.Update) {
-            this.initImageCanvas(__spreadArray(__spreadArray([], __read(action.pens), false), __read(action.initPens), false));
+            var pens = __spreadArray(__spreadArray([], __read(action.pens), false), __read(action.initPens), false);
+            this.initImageCanvas(pens);
+            this.initTemplateCanvas(pens);
         }
         else {
             this.initImageCanvas(action.pens);
+            this.initTemplateCanvas(action.pens);
         }
         this.parent.onSizeUpdate();
         this.render();
@@ -3848,6 +3869,15 @@ var Canvas = /** @class */ (function () {
         if (!pen.id) {
             pen.id = s8();
         }
+        if (Math.abs(this.store.lastScale - this.store.data.scale) < 0.0001 &&
+            this.store.sameTemplate &&
+            this.store.templatePens[pen.id] &&
+            pen.template) {
+            pen = this.store.templatePens[pen.id];
+            this.store.data.pens.push(pen);
+            this.updatePenRect(pen);
+            return;
+        }
         this.store.data.pens.push(pen);
         this.store.pens[pen.id] = pen;
         // 集中存储path，避免数据冗余过大
@@ -4117,6 +4147,9 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.imgNaturalHeight = img.naturalHeight || pen.iconHeight;
                 globalStore.htmlElements[pen.image] = img;
                 _this.imageLoaded();
+                if (pen.template) {
+                    _this.templateImageLoaded();
+                }
             };
         };
         // send the request
@@ -4134,6 +4167,9 @@ var Canvas = /** @class */ (function () {
                     pen.calculative.imgNaturalHeight =
                         img.naturalHeight || pen.iconHeight;
                     this.imageLoaded(); // TODO: 重绘图片层 有延时器，可能卡顿
+                    if (pen.template) {
+                        this.templateImageLoaded();
+                    }
                 }
                 else {
                     if (navigator.userAgent.includes('Firefox') &&
@@ -4163,6 +4199,9 @@ var Canvas = /** @class */ (function () {
                                 img_1.naturalHeight || pen.iconHeight;
                             globalStore.htmlElements[pen.image] = img_1;
                             _this.imageLoaded();
+                            if (pen.template) {
+                                _this.templateImageLoaded();
+                            }
                         };
                     }
                 }
@@ -4190,6 +4229,9 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.backgroundImg = img_2;
                         globalStore.htmlElements[pen.backgroundImage] = img_2;
                         _this.imageLoaded();
+                        if (pen.template) {
+                            _this.templateImageLoaded();
+                        }
                     };
                 }
             }
@@ -4216,6 +4258,9 @@ var Canvas = /** @class */ (function () {
                         pen.calculative.strokeImg = img_3;
                         globalStore.htmlElements[pen.strokeImage] = img_3;
                         _this.imageLoaded();
+                        if (pen.template && pen.name !== 'gif') {
+                            _this.templateImageLoaded();
+                        }
                     };
                 }
             }
@@ -4233,6 +4278,16 @@ var Canvas = /** @class */ (function () {
             _this.render();
         }, 100);
     };
+    // 避免初始化图片加载重复调用 render，此处防抖
+    Canvas.prototype.templateImageLoaded = function () {
+        var _this = this;
+        this.templateImageTimer && clearTimeout(this.templateImageTimer);
+        this.templateImageTimer = setTimeout(function () {
+            // 加载完图片，重新渲染一次图片层
+            _this.canvasTemplate.init();
+            _this.render();
+        }, 100);
+    };
     Canvas.prototype.setCalculativeByScale = function (pen) {
         var scale = this.store.data.scale;
         pen.calculative.lineWidth = pen.lineWidth * scale;
@@ -4321,6 +4376,7 @@ var Canvas = /** @class */ (function () {
         this.store.data.x = Math.round(this.store.data.x);
         this.store.data.y = Math.round(this.store.data.y);
         setTimeout(function () {
+            _this.canvasTemplate.init();
             _this.canvasImage.init();
             _this.canvasImageBottom.init();
             _this.render();
@@ -4416,6 +4472,7 @@ var Canvas = /** @class */ (function () {
         });
         this.calcActiveRect();
         setTimeout(function () {
+            _this.canvasTemplate.init();
             _this.canvasImage.init();
             _this.canvasImageBottom.init();
             var map = _this.parent.map;
@@ -4426,6 +4483,42 @@ var Canvas = /** @class */ (function () {
             _this.store.emitter.emit('scale', _this.store.data.scale);
         });
     };
+    Canvas.prototype.templateScale = function (scale, center) {
+        var _this = this;
+        if (center === void 0) { center = { x: 0, y: 0 }; }
+        var _a = this.store.options, minScale = _a.minScale, maxScale = _a.maxScale;
+        if (!(scale >= minScale && scale <= maxScale)) {
+            return;
+        }
+        var s = scale / this.store.data.scale;
+        this.store.data.scale = scale;
+        this.store.data.center = { x: 0, y: 0 };
+        this.store.data.origin = { x: 0, y: 0 };
+        this.store.data.pens.forEach(function (pen) {
+            if (pen.parentId) {
+                return;
+            }
+            scalePen(pen, s, center);
+            pen.onScale && pen.onScale(pen);
+            if (pen.isRuleLine) {
+                // 扩大线的比例，若是放大，即不缩小，若是缩小，会放大
+                var lineScale = s > 1 ? 1 : 1 / s / s;
+                // 中心点即为线的中心
+                var lineCenter = pen.calculative.worldRect.center;
+                if (!pen.width) {
+                    // 垂直线
+                    scalePen(pen, lineScale, lineCenter);
+                }
+                else if (!pen.height) {
+                    // 水平线
+                    scalePen(pen, lineScale, lineCenter);
+                }
+            }
+            // this.updatePenRect(pen, { worldRectIsReady: true });
+            _this.execPenResize(pen);
+        });
+        this.calcActiveRect();
+    };
     Canvas.prototype.rotatePens = function (e) {
         var e_17, _a;
         var _this = this;
@@ -4464,6 +4557,7 @@ var Canvas = /** @class */ (function () {
         this.lastRotate = this.activeRect.rotate;
         this.getSizeCPs();
         this.initImageCanvas(this.store.active);
+        this.initTemplateCanvas(this.store.active);
         this.render();
         this.store.emitter.emit('rotatePens', this.store.active);
         if (this.timer) {
@@ -4548,6 +4642,7 @@ var Canvas = /** @class */ (function () {
         });
         this.getSizeCPs();
         this.initImageCanvas(this.store.active);
+        this.initTemplateCanvas(this.store.active);
         this.render();
         this.store.emitter.emit('resizePens', this.store.active);
         if (this.timer) {
@@ -5053,10 +5148,52 @@ var Canvas = /** @class */ (function () {
                 initPens: initPens,
             });
             this.initImageCanvas(pens);
+            this.initTemplateCanvas(pens);
             this.store.emitter.emit('translatePens', pens);
         }
         this.store.emitter.emit('translatingPens', pens);
     };
+    /**
+     * 移动 画笔们
+     * @param pens 画笔们，不包含子节点
+     * @param x 偏移 x
+     * @param y 偏移 y
+     * @param doing 是否持续移动
+     */
+    Canvas.prototype.templateTranslatePens = function (pens, x, y) {
+        var _this = this;
+        if (pens === void 0) { pens = this.store.active; }
+        if (!pens || !pens.length) {
+            return;
+        }
+        var containChildPens = this.getAllByPens(pens);
+        pens.forEach(function (pen) {
+            var _a;
+            if (pen.type === PenType.Line) {
+                if (!_this.store.options.moveConnectedLine && !_this.canMoveLine) {
+                    return;
+                }
+                translateLine(pen, x, y);
+                _this.checkDisconnect(pen, containChildPens);
+                _this.store.path2dMap.set(pen, globalStore.path2dDraws[pen.name](pen));
+            }
+            else {
+                translateRect(pen.calculative.worldRect, x, y);
+                _this.updatePenRect(pen, { worldRectIsReady: true });
+                pen.calculative.x = pen.x;
+                pen.calculative.y = pen.y;
+                if (pen.calculative.initRect) {
+                    pen.calculative.initRect.x = pen.calculative.x;
+                    pen.calculative.initRect.y = pen.calculative.y;
+                    pen.calculative.initRect.ex =
+                        pen.calculative.x + pen.calculative.width;
+                    pen.calculative.initRect.ey =
+                        pen.calculative.y + pen.calculative.height;
+                }
+            }
+            (_a = pen.onMove) === null || _a === void 0 ? void 0 : _a.call(pen, pen);
+        });
+    };
     Canvas.prototype.calcAutoAnchor = function (line, lineAnchor, pen, penConnection) {
         var from = getFromAnchor(line);
         var to = getToAnchor(line);
@@ -5759,6 +5896,7 @@ var Canvas = /** @class */ (function () {
                         deletePens = [];
                         this._del(pens, deletePens);
                         this.initImageCanvas(deletePens);
+                        this.initTemplateCanvas(deletePens);
                         this.inactive();
                         this.clearHover();
                         this.render();
@@ -6186,6 +6324,9 @@ var Canvas = /** @class */ (function () {
         else {
             this.initImageCanvas([pen]);
         }
+        if (data.template !== undefined || pen.template) {
+            this.initTemplateCanvas([pen]);
+        }
     };
     /**
      * 执行 pen ，以及 pen 的子孙节点的 onResize 生命周期函数
@@ -6502,6 +6643,7 @@ var Canvas = /** @class */ (function () {
         this.store.data.x = this.canvas.clientWidth / 2 - x * rect.width - rect.x;
         this.store.data.y = this.canvas.clientHeight / 2 - y * rect.height - rect.y;
         this.onMovePens();
+        this.canvasTemplate.init();
         this.canvasImage.init();
         this.canvasImageBottom.init();
         this.render();