@meta2d/core 1.0.65 → 1.0.67

package/package.json

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

@@ -88,6 +88,7 @@ export declare class Canvas {
         altKey?: boolean;
         ctrlKey?: boolean;
         metaKey?: boolean;
+        F?: boolean;
     };
     /**
      * @deprecated 改用 beforeAddPens
@@ -274,6 +275,7 @@ export declare class Canvas {
     private renderPenContainChild;
     renderBorder: () => void;
     renderHoverPoint: () => void;
+    transTimeout: any;
     translate(x?: number, y?: number): void;
     onMovePens(): void;
     /**

package/src/canvas/canvas.js

@@ -514,6 +514,10 @@ export class Canvas {
         this.keyOptions.shiftKey = e.shiftKey;
         this.keyOptions.ctrlKey = e.ctrlKey;
         this.keyOptions.metaKey = e.metaKey;
+        this.keyOptions.F = false;
+        if (e.key === 'F' || e.key === 'f') {
+            this.keyOptions.F = true;
+        }
         let x = 10;
         let y = 10;
         let vRect = null;
@@ -908,6 +912,10 @@ export class Canvas {
                 break;
             case 'F':
             case 'f':
+                if (!this.store.data.locked && (e.ctrlKey || e.metaKey) && !this.store.options.disableClipboard) {
+                    //粘贴到被复制图元上一层
+                    this.paste();
+                }
                 this.setFollowers();
                 break;
         }
@@ -3528,7 +3536,13 @@ export class Canvas {
             this.updatePenRect(pen);
             return;
         }
-        this.store.data.pens.push(pen);
+        if (pen.copyIndex) {
+            this.store.data.pens.splice(pen.copyIndex + 1, 0, pen);
+            delete pen.copyIndex;
+        }
+        else {
+            this.store.data.pens.push(pen);
+        }
         this.store.pens[pen.id] = pen;
         // 集中存储path，避免数据冗余过大
         if (pen.path) {
@@ -4106,7 +4120,11 @@ export class Canvas {
         }
     };
     renderPenContainChild = (ctx, pen) => {
-        pen.calculative.inView && renderPen(ctx, pen); // 可见才绘制，组合为状态只显示其中一个
+        if (pen.calculative.inView) {
+            if (!(pen.name === 'combine' && !pen.draw)) {
+                renderPen(ctx, pen); // 可见才绘制，组合为状态只显示其中一个
+            }
+        }
         pen.children?.forEach((id) => {
             const child = this.store.pens[id];
             child && this.renderPenContainChild(ctx, child);
@@ -4327,6 +4345,7 @@ export class Canvas {
         }
         ctx.restore();
     };
+    transTimeout;
     translate(x = 0, y = 0) {
         this.store.data.x += x * this.store.data.scale;
         this.store.data.y += y * this.store.data.scale;
@@ -4371,10 +4390,21 @@ export class Canvas {
         }
         //TODO 当初为什么加异步
         // setTimeout(() => {
-        this.canvasTemplate.init();
-        this.canvasImage.init();
-        this.canvasImageBottom.init();
-        this.render();
+        if (this.store.data.asyncTranslate) {
+            clearTimeout(this.transTimeout);
+            this.transTimeout = setTimeout(() => {
+                this.canvasTemplate.init();
+                this.canvasImage.init();
+                this.canvasImageBottom.init();
+                this.render();
+            }, 300);
+        }
+        else {
+            this.canvasTemplate.init();
+            this.canvasImage.init();
+            this.canvasImageBottom.init();
+            this.render();
+        }
         // });
         this.store.emitter.emit('translate', {
             x: this.store.data.x,
@@ -5671,9 +5701,9 @@ export class Canvas {
         copyPens.sort((a, b) => {
             return a.copyIndex - b.copyIndex;
         });
-        copyPens.forEach((activePen) => {
-            delete activePen.copyIndex;
-        });
+        // copyPens.forEach((activePen: any) => {
+        //   delete activePen.copyIndex;
+        // });
         const clipboard = {
             meta2d: true,
             pens: copyPens,
@@ -5682,6 +5712,7 @@ export class Canvas {
             page,
             initRect: deepClone(this.activeRect),
             offset: 10,
+            mousePos: deepClone(this.mousePos),
         };
         if (navigator.clipboard &&
             !this.store.options.disableClipboard &&
@@ -5746,7 +5777,14 @@ export class Canvas {
         }
         this.store.clipboard = deepClone(clipboard);
         const curPage = sessionStorage.getItem('page');
-        if (curPage !== clipboard.page) {
+        const scale = this.store.data.scale;
+        if (this.store.clipboard.mousePos && (Math.abs(this.store.clipboard.mousePos.x - this.mousePos.x) > 100 * scale || Math.abs(this.store.clipboard.mousePos.y - this.mousePos.y) > 100 * scale)) {
+            const offsetX = (scale - this.store.clipboard.scale) * this.store.clipboard.initRect.width / 2;
+            const offsetY = (scale - this.store.clipboard.scale) * this.store.clipboard.initRect.height / 2;
+            this.store.clipboard.pos = { x: this.mousePos.x - offsetX, y: this.mousePos.y - offsetY };
+            this.store.clipboard.offset = 0;
+        }
+        else if (curPage !== clipboard.page) {
             this.store.clipboard.pos = { x: this.mousePos.x, y: this.mousePos.y };
             this.store.clipboard.offset = 0;
         }
@@ -5758,6 +5796,11 @@ export class Canvas {
             offset && (this.store.clipboard.offset = offset);
             pos && (this.store.clipboard.pos = pos);
         }
+        if (!this.keyOptions.F) {
+            this.store.clipboard.pens.forEach((pen) => {
+                delete pen.copyIndex;
+            });
+        }
         const rootPens = this.store.clipboard.pens.filter((pen) => !pen.parentId);
         for (const pen of rootPens) {
             this.pastePen(pen, undefined);
@@ -5855,7 +5898,7 @@ export class Canvas {
                 pen.x = -this.store.data.x + this.width / 2 - pen.width / 2;
                 pen.y = -this.store.data.y + this.height / 2 - pen.height / 2;
             }
-            else if (this.keyOptions && this.keyOptions.shiftKey && (this.keyOptions.ctrlKey || this.keyOptions.metaKey)) {
+            else if (this.keyOptions && this.keyOptions.shiftKey && (this.keyOptions.ctrlKey || this.keyOptions.metaKey || this.keyOptions.F)) {
             }
             else {
                 pen.x += this.store.clipboard.offset * this.store.data.scale;
@@ -6008,7 +6051,9 @@ export class Canvas {
         const i = this.store.data.pens.findIndex((item) => item.id === pen.id);
         if (i > -1) {
             const delPen = this.store.pens[pen.id];
-            delPen.calculative.active = undefined;
+            if (delPen && delPen.calculative) {
+                delPen.calculative.active = undefined;
+            }
             delPens.push(delPen);
         }
         if (pen.children) {
@@ -6394,7 +6439,7 @@ export class Canvas {
                 pen.text = this.inputDiv.dataset.value;
                 pen.calculative.text = pen.text;
                 this.inputDiv.dataset.penId = undefined;
-                if (pen.text && pen.textAutoAdjust) {
+                if (pen.text && pen.textAutoAdjust && !pen.parentId) {
                     calcTextAutoWidth(pen);
                 }
                 calcTextRect(pen);
@@ -6952,7 +6997,7 @@ export class Canvas {
         const oldRect = deepClone(rect);
         const storeData = this.store.data;
         // TODO: 目前背景颜色优先级更高
-        const isDrawBkImg = containBkImg && !storeData.background && this.store.bkImg;
+        const isDrawBkImg = containBkImg && this.store.bkImg;
         // 主体在背景的右侧，下侧
         let isRight = false, isBottom = false;
         if (isDrawBkImg) {
@@ -7023,16 +7068,11 @@ export class Canvas {
         ctx.textBaseline = 'middle'; // 默认垂直居中
         ctx.scale(scale, scale);
         const background = this.store.data.background || this.store.options.background;
-        if (background) {
+        if (background && isV) {
             // 绘制背景颜色
             ctx.save();
             ctx.fillStyle = background;
-            if (isV) {
-                ctx.fillRect(0, 0, vRect.width + (p[1] + p[3]) * _scale, vRect.height + (p[0] + p[2]) * _scale);
-            }
-            else {
-                ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
-            }
+            ctx.fillRect(0, 0, vRect.width + (p[1] + p[3]) * _scale, vRect.height + (p[0] + p[2]) * _scale);
             ctx.restore();
         }
         if (isDrawBkImg) {
@@ -7045,6 +7085,23 @@ export class Canvas {
                 ctx.drawImage(this.store.bkImg, x, y, this.canvasRect.width, this.canvasRect.height);
             }
         }
+        if (background && !isV) {
+            // 绘制背景颜色
+            if (isDrawBkImg) {
+                const x = rect.x < 0 ? -rect.x : 0;
+                const y = rect.y < 0 ? -rect.y : 0;
+                ctx.save();
+                ctx.fillStyle = background;
+                ctx.fillRect(x, y, this.canvasRect.width, this.canvasRect.height);
+                ctx.restore();
+            }
+            else {
+                ctx.save();
+                ctx.fillStyle = background;
+                ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]) * _scale, oldRect.height + (p[0] + p[2]) * _scale);
+                ctx.restore();
+            }
+        }
         if (!isDrawBkImg) {
             ctx.translate(-rect.x, -rect.y);
         }