@meta2d/core 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta2d/core",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
   "main": "index.js",
   "types": "index.d.ts",

package/src/canvas/canvas.d.ts

@@ -245,6 +245,7 @@ export declare class Canvas {
     resize(w?: number, h?: number): void;
     clearCanvas(): void;
     addPen(pen: Pen, history?: boolean, emit?: boolean, abs?: boolean): Promise<Pen>;
+    addPenSync(pen: Pen, history?: boolean, emit?: boolean, abs?: boolean): Pen;
     pushHistory(action: EditAction): void;
     undo(): void;
     redo(): void;
@@ -264,7 +265,8 @@ export declare class Canvas {
      */
     private firefoxLoadSvg;
     loadImage(pen: Pen): void;
-    __loadImage(src: string): Promise<unknown>;
+    __loadMap: Map<any, any>;
+    __loadImage(src: string, retryNum?: number): any;
     private imageTimer;
     imageLoaded(): void;
     private templateImageTimer;
@@ -409,6 +411,7 @@ export declare class Canvas {
      */
     changeNodeConnectedLine(oldId: string, line: Pen, pastePens: Pen[]): void;
     delete(pens?: Pen[], canDelLocked?: boolean, history?: boolean): Promise<void>;
+    deleteSync(pens?: Pen[], canDelLocked?: boolean, history?: boolean): void;
     private _del;
     getDelPens(pen: Pen, delPens: Pen[]): void;
     private getLockedParent;

package/src/canvas/canvas.js

@@ -394,6 +394,9 @@ export class Canvas {
                     data: this.dialog.data
                 }), '*');
             }
+            if (data.name === 'closeDialog') {
+                this.dialog.hide();
+            }
             this.parent.doMessageEvent(data.name, JSON.stringify(data.data));
         }
         else {
@@ -1206,6 +1209,15 @@ export class Canvas {
                     if (num % 2 === 0) {
                         lastH += pen.height + 10 * this.store.data.scale;
                     }
+                    delete pen.dataset;
+                }
+                if (pen.temOffsetX) {
+                    pen.x += pen.temOffsetX * this.store.data.scale;
+                    delete pen.temOffsetX;
+                }
+                if (pen.temOffsetY) {
+                    pen.y += pen.temOffsetY * this.store.data.scale;
+                    delete pen.temOffsetY;
                 }
             }
         }
@@ -3324,6 +3336,7 @@ export class Canvas {
     clearCanvas() {
         this.activeRect = undefined;
         this.sizeCPs = undefined;
+        this.__loadMap = new Map();
         this.canvas
             .getContext('2d')
             .clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -3358,6 +3371,25 @@ export class Canvas {
         }
         return pen;
     }
+    addPenSync(pen, history, emit, abs) {
+        if (this.beforeAddPen && this.beforeAddPen(pen) != true) {
+            return;
+        }
+        if (abs) {
+            pen.x = pen.x * this.store.data.scale + this.store.data.origin.x;
+            pen.y = pen.y * this.store.data.scale + this.store.data.origin.y;
+            pen.width = pen.width * this.store.data.scale;
+            pen.height = pen.height * this.store.data.scale;
+        }
+        this.makePen(pen);
+        this.active([pen]);
+        this.render();
+        emit && this.store.emitter.emit('add', [pen]);
+        if (history) {
+            this.pushHistory({ type: EditType.Add, pens: [pen] });
+        }
+        return pen;
+    }
     pushHistory(action) {
         if (this.store.data.locked) {
             return;
@@ -4031,28 +4063,50 @@ export class Canvas {
             pen.calculative.strokeImage = pen.strokeImage;
         }
     }
+    __loadMap = new Map();
     // 加载图片到全局缓存
-    __loadImage(src) {
-        return new Promise(resolve => {
+    __loadImage(src, retryNum = 5) {
+        if (this.__loadMap.has(src))
+            return this.__loadMap.get(src); // promise
+        const promise = new Promise((resolve, reject) => {
             if (!globalStore.htmlElements[src]) {
                 const img = new Image();
                 img.crossOrigin = 'anonymous';
-                img.src = src;
+                // 处理 CDN 路径
                 if (this.store.options.cdn &&
                     !(src.startsWith('http') ||
                         src.startsWith('//') ||
                         src.startsWith('data:image'))) {
                     img.src = this.store.options.cdn + src;
                 }
+                else {
+                    img.src = src;
+                }
                 img.onload = () => {
                     globalStore.htmlElements[src] = img;
+                    this.__loadMap.delete(src); // 成功后清理
                     resolve(img);
                 };
+                img.onerror = () => {
+                    if (retryNum > 0) {
+                        console.warn(`Image ${src} load failed, retrying... (${retryNum})`);
+                        setTimeout(() => {
+                            this.__loadMap.delete(src);
+                            this.__loadImage(src, retryNum - 1).then(resolve).catch(reject);
+                        }, 1000);
+                    }
+                    else {
+                        this.__loadMap.set(src, 0);
+                        reject(new Error(`Failed to load image: ${src}`));
+                    }
+                };
             }
             else {
                 resolve(globalStore.htmlElements[src]);
             }
         });
+        this.__loadMap.set(src, promise);
+        return promise;
     }
     imageTimer;
     // 避免初始化图片加载重复调用 render，此处防抖
@@ -4952,7 +5006,7 @@ export class Canvas {
             calcRightBottom(pen.calculative.worldRect);
             calcCenter(pen.calculative.worldRect);
             this.updatePenRect(pen, { worldRectIsReady: true });
-            this.execPenResize(pen);
+            this.execPenResize(pen, true);
             this.updateLines(pen);
         });
         this.getSizeCPs();
@@ -6298,6 +6352,31 @@ export class Canvas {
         }
         this.store.emitter.emit('delete', pens);
     }
+    deleteSync(pens = this.store.active, canDelLocked = false, history = true) {
+        if (!pens || !pens.length) {
+            return;
+        }
+        if (!canDelLocked) {
+            pens = pens.filter((pen) => !pen.locked);
+        }
+        if (!pens || !pens.length) {
+            return;
+        }
+        const deletePens = [];
+        this._del(pens, deletePens, canDelLocked);
+        this.initImageCanvas(deletePens);
+        this.initTemplateCanvas(deletePens);
+        this.inactive();
+        this.clearHover();
+        this.render();
+        // TODO: 连线的删除 ，连接的 node 的 connectLines 会变化（删除 node ，line 的 anchors 类似），未记历史记录
+        if (history) {
+            if (deletePens.length === 0)
+                return;
+            this.pushHistory({ type: EditType.Delete, pens: deletePens });
+        }
+        this.store.emitter.emit('delete', pens);
+    }
     _del(pens, delPens, canDelLocked) {
         if (!pens) {
             return;
@@ -6558,7 +6637,7 @@ export class Canvas {
         else {
             // this.inputRight.style.display = 'none';
         }
-        this.inputDiv.contentEditable = 'true';
+        this.inputDiv.contentEditable = pen.readonly ? 'false' : 'true';
         this.inputDiv.focus();
         const range = window.getSelection(); //创建range
         range.selectAllChildren(this.inputDiv); //range 选择obj下所有子内容
@@ -7278,11 +7357,11 @@ export class Canvas {
     /**
      * 执行 pen ，以及 pen 的子孙节点的 onResize 生命周期函数
      */
-    execPenResize(pen) {
-        pen.onResize?.(pen);
+    execPenResize(pen, raw) {
+        pen.onResize?.(pen, raw);
         pen.children?.forEach((chlidId) => {
             const child = this.store.pens[chlidId];
-            child && this.execPenResize(child);
+            child && this.execPenResize(child, raw);
         });
     }
     setPenRect(pen, rect, render = true) {
@@ -7298,7 +7377,7 @@ export class Canvas {
             pen.height = rect.height * scale;
         }
         this.updatePenRect(pen);
-        this.execPenResize(pen);
+        this.execPenResize(pen, true);
         render && this.render();
     }
     getPenRect(pen, origin = this.store.data.origin, scale = this.store.data.scale) {
@@ -7775,45 +7854,49 @@ export class Canvas {
         if (rect.width > 0.5) {
             rect.left = true;
             rect.right = true;
-            rect.leftValue = (rect.x - 0) * scale * width;
-            rect.rightValue = (1 - (rect.x + rect.width)) * scale * width;
+            rect.leftValue = rect.x;
+            rect.rightValue = 1 - (rect.x + rect.width);
         }
         else {
             if (rect.x < 0.5) {
                 rect.left = true;
-                rect.leftValue = (rect.x - 0) * scale * width;
+                rect.leftValue = rect.x;
+                if (rect.x > 0.2 && (rect.x + rect.width) > 0.5) {
+                    rect.right = true;
+                    rect.rightValue = 1 - (rect.x + rect.width);
+                }
             }
             else {
                 rect.right = true;
-                rect.rightValue = (1 - (rect.x + rect.width)) * scale * width;
+                rect.rightValue = 1 - (rect.x + rect.width);
             }
         }
-        if (rect.leftValue < 1) {
+        if (rect.leftValue < 0.05) {
             rect.leftValue = 0;
         }
-        if (rect.rightValue < 1) {
+        if (rect.rightValue < 0.05) {
             rect.rightValue = 0;
         }
         if (rect.height > 0.5) {
             rect.top = true;
             rect.bottom = true;
-            rect.topValue = (rect.y - 0) * scale * height;
-            rect.bottomValue = (1 - (rect.y + rect.height)) * scale * height;
+            rect.topValue = rect.y;
+            rect.bottomValue = 1 - (rect.y + rect.height);
         }
         else {
             if (rect.y < 0.5) {
                 rect.top = true;
-                rect.topValue = (rect.y - 0) * scale * height;
+                rect.topValue = rect.y;
             }
             else {
                 rect.bottom = true;
-                rect.bottomValue = (1 - (rect.y + rect.height)) * scale * height;
+                rect.bottomValue = 1 - (rect.y + rect.height);
             }
         }
-        if (rect.topValue < 1) {
+        if (rect.topValue < 0.05) {
             rect.topValue = 0;
         }
-        if (rect.bottomValue < 1) {
+        if (rect.bottomValue < 0.05) {
             rect.bottomValue = 0;
         }
         if (!this.store.data.fits) {
@@ -7907,45 +7990,49 @@ export class Canvas {
             if (fit.width > 0.5) {
                 fit.left = true;
                 fit.right = true;
-                fit.leftValue = (fit.x - 0) * scale * width;
-                fit.rightValue = ((1 - (fit.x + fit.width)) * scale * width);
+                fit.leftValue = fit.x;
+                fit.rightValue = 1 - (fit.x + fit.width);
             }
             else {
                 if (fit.x < 0.5) {
                     fit.left = true;
-                    fit.leftValue = (fit.x - 0) * scale * width;
+                    fit.leftValue = fit.x;
+                    if (fit.x > 0.2 && (fit.x + fit.width) > 0.5) {
+                        fit.right = true;
+                        fit.rightValue = 1 - (fit.x + fit.width);
+                    }
                 }
                 else {
                     fit.right = true;
-                    fit.rightValue = ((1 - (fit.x + fit.width)) * scale * width);
+                    fit.rightValue = 1 - (fit.x + fit.width);
                 }
             }
-            if (Math.abs(fit.leftValue) < 1) {
+            if (Math.abs(fit.leftValue) < 0.05) {
                 fit.leftValue = 0;
             }
-            if (Math.abs(fit.rightValue) < 1) {
+            if (Math.abs(fit.rightValue) < 0.05) {
                 fit.rightValue = 0;
             }
             if (fit.height > 0.5) {
                 fit.top = true;
                 fit.bottom = true;
-                fit.topValue = (fit.y - 0) * scale * height;
-                fit.bottomValue = (1 - (fit.y + fit.height)) * scale * height;
+                fit.topValue = fit.y;
+                fit.bottomValue = 1 - (fit.y + fit.height);
             }
             else {
                 if (fit.y < 0.5) {
                     fit.top = true;
-                    fit.topValue = (fit.y - 0) * scale * height;
+                    fit.topValue = fit.y - 0;
                 }
                 else {
                     fit.bottom = true;
-                    fit.bottomValue = (1 - (fit.y + fit.height)) * scale * height;
+                    fit.bottomValue = 1 - (fit.y + fit.height);
                 }
             }
-            if (Math.abs(fit.topValue) < 1) {
+            if (Math.abs(fit.topValue) < 0.05) {
                 fit.topValue = 0;
             }
-            if (Math.abs(fit.bottomValue) < 1) {
+            if (Math.abs(fit.bottomValue) < 0.05) {
                 fit.bottomValue = 0;
             }
             fit.children = pens.map(pen => pen.id);