@meta2d/core 1.0.63 → 1.0.65

package/package.json

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

@@ -129,7 +129,7 @@ export declare class Canvas {
     listen(): void;
     onCopy: (event: ClipboardEvent) => void;
     onCut: (event: ClipboardEvent) => void;
-    onPaste: (event: ClipboardEvent) => void;
+    onPaste: (event: ClipboardEvent) => Promise<void>;
     onMessage: (e: MessageEvent) => void;
     onwheel: (e: WheelEvent) => void;
     onkeydown: (e: KeyboardEvent) => void;

package/src/canvas/canvas.js

@@ -146,7 +146,7 @@ export class Canvas {
             setHover(hover, false);
         };
         this.popconfirm = new Popconfirm(parentElement, store);
-        this.dialog = new Dialog(parentElement);
+        this.dialog = new Dialog(parentElement, store);
         this.title = new Title(parentElement);
         if (this.store.options.scroll) {
             this.scroll = new Scroll(this);
@@ -285,7 +285,7 @@ export class Canvas {
         }
         this.cut();
     };
-    onPaste = (event) => {
+    onPaste = async (event) => {
         if (this.store.data.locked || this.store.options.disableClipboard) {
             return;
         }
@@ -316,29 +316,39 @@ export class Canvas {
                         const blob = items[i].getAsFile();
                         let name = items[i].type.slice(6) === 'gif' ? 'gif' : 'image';
                         if (blob !== null) {
-                            let base64_str;
-                            const reader = new FileReader();
-                            reader.onload = (e) => {
-                                base64_str = e.target.result;
-                                const image = new Image();
-                                image.src = base64_str;
-                                image.onload = () => {
-                                    const { width, height } = image;
-                                    const pen = {
-                                        name,
-                                        x: x - 50 / 2,
-                                        y: y - (height / width) * 50,
-                                        externElement: name === 'gif',
-                                        width: 100,
-                                        height: (height / width) * 100,
-                                        image: base64_str,
-                                    };
-                                    this.addPens([pen]);
-                                    this.active([pen]);
-                                    this.copy([pen]);
-                                };
-                            };
-                            reader.readAsDataURL(blob);
+                            const isGif = name === 'gif';
+                            const pen = await this.fileToPen(blob, isGif);
+                            pen.height = (pen.height / pen.width) * 100,
+                                pen.width = 100;
+                            pen.x = x - 50 / 2,
+                                pen.y = y - (pen.height / pen.width) * 50,
+                                pen.externElement = isGif,
+                                this.addPens([pen]);
+                            this.active([pen]);
+                            this.copy([pen]);
+                            // let base64_str: any;
+                            // const reader = new FileReader();
+                            // reader.onload = (e) => {
+                            //   base64_str = e.target.result;
+                            //   const image = new Image();
+                            //   image.src = base64_str;
+                            //   image.onload = () => {
+                            //     const { width, height } = image;
+                            //     const pen = {
+                            //       name,
+                            //       x: x - 50 / 2,
+                            //       y: y - (height / width) * 50,
+                            //       externElement: name === 'gif',
+                            //       width: 100,
+                            //       height: (height / width) * 100,
+                            //       image: base64_str as any,
+                            //     };
+                            //     this.addPens([pen]);
+                            //     this.active([pen]);
+                            //     this.copy([pen]);
+                            //   };
+                            // };
+                            // reader.readAsDataURL(blob);
                         }
                     }
                 }
@@ -356,7 +366,7 @@ export class Canvas {
         }
         let data = JSON.parse(e.data);
         if (typeof data === 'object') {
-            this.parent.doMessageEvent(data.name, data.value);
+            this.parent.doMessageEvent(data.name, JSON.stringify(data.data));
         }
         else {
             this.parent.doMessageEvent(data);
@@ -2198,7 +2208,12 @@ export class Canvas {
         if (e.button !== 2) {
             if (distance(this.mouseDown, e) < 2) {
                 if (this.store.hover && this.store.hover.input) {
-                    this.showInput(this.store.hover);
+                    if (this.store.hover.onShowInput) {
+                        this.store.hover.onShowInput(this.store.hover, e);
+                    }
+                    else {
+                        this.showInput(this.store.hover);
+                    }
                 }
                 this.store.emitter.emit('click', {
                     x: e.x,
@@ -6146,9 +6161,9 @@ export class Canvas {
         // this.inputDiv.style.fontSize = pen.calculative.fontSize + 'px';
         // this.inputDiv.style.color = getTextColor(pen, this.store);
         this.inputParent.style.left =
-            textRect.x + this.store.data.x - (pen.textLeft || 0) + 'px'; //+ 5
+            textRect.x + this.store.data.x - (pen.calculative.textLeft || 0) + 'px'; //+ 5
         this.inputParent.style.top =
-            textRect.y + this.store.data.y - (pen.textTop || 0) + 'px'; //+ 5
+            textRect.y + this.store.data.y - (pen.calculative.textTop || 0) + 'px'; //+ 5
         let _width = textRect.width; //+ (pen.textLeft || 0);
         this.inputParent.style.width = (_width < 0 ? 12 : _width) + 'px'; //(textRect.width < pen.width ? 0 : 10)
         this.inputParent.style.height = textRect.height + (pen.textTop || 0) + 'px'; //   (textRect.height < pen.height ? 0 : 10)
@@ -6170,7 +6185,10 @@ export class Canvas {
             // }
             this.dropdown.style.background = pen.dropdownBackground || '#fff';
             this.dropdown.style.color = pen.dropdownColor || '#bdc7db';
+            this.dropdown.style.width = this.inputParent.style.width;
+            this.dropdown.style.fontSize = (pen.fontSize || 12) + 'px';
             this.setDropdownList();
+            this.externalElements.style.zIndex = '9999';
         }
         else {
             // this.inputRight.style.display = 'none';
@@ -6353,6 +6371,7 @@ export class Canvas {
         });
     }
     hideInput = () => {
+        this.externalElements.style.zIndex = '5';
         if (this.inputParent.style.display === 'flex') {
             this.inputParent.style.display = 'none';
             const pen = this.store.pens[this.inputDiv.dataset.penId];
@@ -6430,7 +6449,7 @@ export class Canvas {
             sheet.insertRule('.meta2d-input{display:none;position:absolute;outline:none;align-items: center;}');
             sheet.insertRule('.meta2d-input textarea{resize:none;border:none;outline:none;background:transparent;flex-grow:1;height:100%;left:0;top:0}');
             sheet.insertRule('.meta2d-input .right{width:10px;height:10px;flex-shrink:0;border-top: 1px solid;border-right: 1px solid;margin-right: 5px;transition: all .3s cubic-bezier(.645,.045,.355,1);position:absolute;right:1px;}');
-            sheet.insertRule('.meta2d-input ul{position:absolute;top:100%;left:-5px;width:calc(100% + 10px);min-height:30px;border-radius: 2px;box-shadow: 0 2px 8px #00000026;list-style-type: none;background-color: #fff;padding: 4px 0;max-height: 105px;overflow-y: auto;}');
+            sheet.insertRule('.meta2d-input ul{position:absolute;top:100%;margin-top:4px; width:calc(100% + 10px);min-height:30px;border-radius: 2px;box-shadow: 0 2px 8px #00000026;list-style-type: none;background-color: #fff;padding: 4px 0;max-height: 105px;overflow-y: auto;}');
             sheet.insertRule('.meta2d-input ul li{padding: 5px 12px;line-height: 22px;white-space: nowrap;cursor: pointer;}');
             sheet.insertRule('.meta2d-input ul li:hover{background: #eeeeee;}');
             sheet.insertRule(`.input-div::-webkit-scrollbar {display:none}`);
@@ -7043,6 +7062,9 @@ export class Canvas {
             if (!isShowChild(pen, this.store) || pen.visible == false) {
                 continue;
             }
+            if (pen.name === 'combine' && !pen.draw) {
+                continue;
+            }
             // TODO: hover 待考虑，若出现再补上
             const { active } = pen.calculative;
             pen.calculative.active = false;