@meta2d/core 1.0.99 → 1.1.0

package/package.json

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

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';
@@ -6589,8 +6621,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 +6637,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 +6662,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 +6674,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 +6696,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') {
             //   //回车换行