@meta2d/core 1.0.99 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta2d/core",
-  "version": "1.0.99",
+  "version": "1.1.1",
   "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

@@ -49,6 +49,7 @@ export declare class Canvas {
     touchScaling?: boolean;
     touchMoving?: boolean;
     startTouches?: TouchList;
+    lastTouchY?: number;
     lastOffsetX: number;
     lastOffsetY: number;
     drawingLineName?: string;
@@ -73,6 +74,7 @@ export declare class Canvas {
     touchStart: number;
     touchStartTimer: any;
     timer: any;
+    lastTapTime: number;
     private lastAnimateRender;
     animateRendering: boolean;
     renderTimer: number;
@@ -90,6 +92,7 @@ export declare class Canvas {
         metaKey?: boolean;
         F?: boolean;
     };
+    isMobile?: boolean;
     /**
      * @deprecated 改用 beforeAddPens
      */
@@ -261,7 +264,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;

package/src/canvas/canvas.js

@@ -51,6 +51,7 @@ export class Canvas {
     touchScaling;
     touchMoving;
     startTouches;
+    lastTouchY;
     lastOffsetX = 0;
     lastOffsetY = 0;
     drawingLineName;
@@ -73,6 +74,7 @@ export class Canvas {
     touchStart = 0;
     touchStartTimer;
     timer;
+    lastTapTime = 0;
     lastAnimateRender = 0;
     animateRendering = false;
     renderTimer;
@@ -84,6 +86,7 @@ export class Canvas {
     canMoveLine = false; //moveConnectedLine=false
     randomIdObj; //记录拖拽前后id变化
     keyOptions;
+    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     /**
      * @deprecated 改用 beforeAddPens
      */
@@ -138,6 +141,7 @@ export class Canvas {
         this.externalElements.style.background = 'transparent';
         this.externalElements.style.zIndex = '5';
         parentElement.style.position = 'relative';
+        parentElement.style['-webkit-tap-highlight-color'] = 'transparent';
         parentElement.appendChild(this.externalElements);
         this.createInput();
         this.tooltip = new Tooltip(parentElement, store);
@@ -181,6 +185,9 @@ export class Canvas {
         this.externalElements.ontouchmove = this.ontouchmove;
         this.externalElements.ontouchend = this.ontouchend;
         this.externalElements.onmousedown = (e) => {
+            if (this.isMobile) {
+                return;
+            }
             this.onMouseDown({
                 x: e.offsetX,
                 y: e.offsetY,
@@ -195,6 +202,9 @@ export class Canvas {
             });
         };
         this.externalElements.onmousemove = (e) => {
+            if (this.isMobile) {
+                return;
+            }
             if (e.target !== this.externalElements) {
                 return;
             }
@@ -212,6 +222,9 @@ export class Canvas {
             });
         };
         this.externalElements.onmouseup = (e) => {
+            if (this.isMobile) {
+                return;
+            }
             this.onMouseUp({
                 x: e.offsetX,
                 y: e.offsetY,
@@ -245,7 +258,12 @@ export class Canvas {
                 this.store.lastHover = undefined;
             }
         };
-        this.externalElements.ondblclick = this.ondblclick;
+        this.externalElements.ondblclick = (e) => {
+            if (this.isMobile) {
+                return;
+            }
+            this.ondblclick(e);
+        };
         this.externalElements.tabIndex = 0;
         this.externalElements.onblur = () => {
             this.mouseDown = undefined;
@@ -1319,9 +1337,17 @@ export class Canvas {
         return list;
     }
     ontouchstart = (e) => {
+        this.lastTouchY = e.touches[0].clientY;
         if (this.store.data.locked === LockState.Disable) {
             return;
         }
+        const currentTime = new Date().getTime();
+        const tapTime = currentTime - this.lastTapTime;
+        if (tapTime < 300 && tapTime > 0) {
+            //双击
+            this.ondblclick(e);
+        }
+        this.lastTapTime = currentTime;
         if (this.touchStartTimer) {
             clearTimeout(this.touchStartTimer);
         }
@@ -1392,6 +1418,12 @@ export class Canvas {
         const x = event.touches[0].pageX - this.clientRect.x;
         const y = event.touches[0].pageY - this.clientRect.y;
         if (len === 1) {
+            if (this.store.options.scroll && this.scroll && !this.store.options.scrollButScale) {
+                let diff = this.lastTouchY - event.touches[0].clientY;
+                this.scroll.wheel(diff < 0);
+                this.lastTouchY = event.touches[0].clientY;
+                return;
+            }
             this.onMouseMove({
                 x,
                 y,
@@ -1454,21 +1486,21 @@ export class Canvas {
         this.lastOffsetY = 0;
         const x = event.changedTouches[0].pageX - this.clientRect.x;
         const y = event.changedTouches[0].pageY - this.clientRect.y;
-        this.onMouseUp({
-            x,
-            y,
-            clientX: event.changedTouches[0].clientX,
-            clientY: event.changedTouches[0].clientY,
-            pageX: event.changedTouches[0].pageX,
-            pageY: event.changedTouches[0].pageY,
-            ctrlKey: event.ctrlKey || event.metaKey,
-            shiftKey: event.shiftKey,
-            altKey: event.altKey,
-            buttons: 1,
-        });
         setTimeout(() => {
+            this.onMouseUp({
+                x,
+                y,
+                clientX: event.changedTouches[0].clientX,
+                clientY: event.changedTouches[0].clientY,
+                pageX: event.changedTouches[0].pageX,
+                pageY: event.changedTouches[0].pageY,
+                ctrlKey: event.ctrlKey || event.metaKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                buttons: 1,
+            });
             this.render();
-        }, 20);
+        }, 60);
     };
     onGesturestart = (e) => {
         e.preventDefault();
@@ -2992,7 +3024,7 @@ export class Canvas {
                         }
                     }
                     else {
-                        this.externalElements.style.cursor = this.store.options.hoverCursor;
+                        this.externalElements.style.cursor = pen.hoverCursor || this.store.options.hoverCursor;
                     }
                     if (pen.calculative.disabled) {
                         this.externalElements.style.cursor = 'not-allowed';
@@ -3039,7 +3071,7 @@ export class Canvas {
                         }
                     }
                     else {
-                        this.externalElements.style.cursor = this.store.options.hoverCursor;
+                        this.externalElements.style.cursor = pen.hoverCursor || this.store.options.hoverCursor;
                     }
                     if (pen.calculative.disabled) {
                         this.externalElements.style.cursor = 'not-allowed';
@@ -3292,6 +3324,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);
@@ -3999,28 +4032,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，此处防抖
@@ -6526,7 +6581,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下所有子内容
@@ -6589,8 +6644,8 @@ export class Canvas {
         }
         if (pen.fontSize) {
             if (pen.fontSize * scale < 12) {
-                style += `font-size:${pen.fontSize}px;`;
-                style += `zoom:${(pen.fontSize / 12) * scale};`;
+                style += `font-size:${pen.calculative.fontSize}px;`;
+                // style += `zoom:${(pen.fontSize / 12) * scale};`;
             }
             else {
                 style += `font-size:${pen.fontSize * scale}px;`;
@@ -6605,18 +6660,20 @@ export class Canvas {
         }
         if (pen.textLeft) {
             style += `margin-left:${scale > 1
-                ? pen.textLeft * font_scale
-                : (pen.textLeft * font_scale) / scale}px;`;
+                ? pen.textLeft * scale
+                : (pen.textLeft * scale) // scale
+            }px;`;
         }
         if (pen.textTop) {
             style += `margin-top:${scale > 1
                 ? pen.textTop * font_scale
-                : (pen.textTop * font_scale) / scale}px;`;
+                : (pen.textTop * font_scale) // scale
+            }px;`;
         }
         if (pen.lineHeight) {
             style += `line-height:${scale > 1
                 ? pen.fontSize * pen.lineHeight * scale
-                : pen.fontSize * pen.lineHeight * font_scale}px;`;
+                : pen.calculative.fontSize * pen.lineHeight}px;`;
         }
         if (pen.textHeight) {
             style += `height:${scale > 1
@@ -6628,7 +6685,7 @@ export class Canvas {
             if (tem < 0) {
                 tem = 0;
             }
-            let height = pen.fontSize * scale < 12 ? tem * font_scale : tem * scale * font_scale;
+            let height = pen.fontSize * scale < 12 ? tem * scale * font_scale : tem * scale * font_scale;
             if (height < pen.fontSize * pen.lineHeight * scale) {
                 height = pen.fontSize * pen.lineHeight * scale;
                 style += `top:-${height / 2}px;`;
@@ -6640,17 +6697,18 @@ export class Canvas {
         }
         let _textWidth = null;
         if (pen.textWidth) {
-            _textWidth =
-                pen.textWidth < 1 && pen.textWidth > -1
-                    ? pen.textWidth * pen.calculative.worldRect.width
-                    : pen.textWidth;
+            // _textWidth =
+            //   pen.textWidth < 1 && pen.textWidth > -1
+            //     ? pen.textWidth * pen.calculative.worldRect.width
+            //     : pen.textWidth;
+            _textWidth = pen.calculative.textWidth;
             if (pen.whiteSpace !== 'pre-line') {
                 if (_textWidth < pen.fontSize) {
                     style += `width:${pen.fontSize * 1.2 * font_scale}px;`;
                 }
                 else {
                     style += `width:${scale > 1
-                        ? _textWidth * font_scale * scale
+                        ? _textWidth * font_scale
                         : _textWidth * font_scale}px;`;
                 }
             }
@@ -6661,7 +6719,7 @@ export class Canvas {
                 if (tem < 0) {
                     tem = 0;
                 }
-                style += `width:${pen.fontSize * scale < 12 ? tem * font_scale : tem * scale}px;`;
+                style += `width:${pen.fontSize * scale < 12 ? tem * scale : tem * scale}px;`;
             }
             // if (pen.whiteSpace === 'pre-line') {
             //   //回车换行