@meta2d/core 1.0.60 → 1.0.62

package/package.json

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

@@ -106,7 +106,6 @@ export declare class Canvas {
     };
     inputParent: HTMLDivElement;
     inputDiv: HTMLDivElement;
-    inputRight: HTMLDivElement;
     dropdown: HTMLUListElement;
     tooltip: Tooltip;
     title: Title;

package/src/canvas/canvas.js

@@ -94,7 +94,7 @@ export class Canvas {
     inputParent = document.createElement('div');
     // input = document.createElement('textarea');
     inputDiv = document.createElement('div');
-    inputRight = document.createElement('div');
+    // inputRight = document.createElement('div');
     dropdown = document.createElement('ul');
     tooltip;
     title;
@@ -353,7 +353,7 @@ export class Canvas {
         }
         let data = JSON.parse(e.data);
         if (typeof data === 'object') {
-            this.parent.doMessageEvent(data.name);
+            this.parent.doMessageEvent(data.name, data.value);
         }
         else {
             this.parent.doMessageEvent(data);
@@ -6133,7 +6133,7 @@ export class Canvas {
             textRect.x + this.store.data.x - (pen.textLeft || 0) + 'px'; //+ 5
         this.inputParent.style.top =
             textRect.y + this.store.data.y - (pen.textTop || 0) + 'px'; //+ 5
-        let _width = textRect.width + (pen.textLeft || 0);
+        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)
         this.inputParent.style.zIndex = '9999';
@@ -6149,13 +6149,15 @@ export class Canvas {
         this.inputDiv.contentEditable =
             pen.disableInput == undefined ? 'true' : pen.disableInput.toString();
         if (pen.dropdownList && this.dropdown.style.display !== 'block') {
-            if (!this.store.data.locked) {
-                this.inputRight.style.display = 'none';
-            }
+            // if (!this.store.data.locked) {
+            //   this.inputRight.style.display = 'none';
+            // }
+            this.dropdown.style.background = pen.dropdownBackground || '#fff';
+            this.dropdown.style.color = pen.dropdownColor || '#bdc7db';
             this.setDropdownList();
         }
         else {
-            this.inputRight.style.display = 'none';
+            // this.inputRight.style.display = 'none';
         }
         this.inputDiv.contentEditable = 'true';
         this.inputDiv.focus();
@@ -6357,7 +6359,7 @@ export class Canvas {
                 pen.text = this.inputDiv.dataset.value;
                 pen.calculative.text = pen.text;
                 this.inputDiv.dataset.penId = undefined;
-                if (pen.name === 'text' && pen.textAutoAdjust) {
+                if (pen.text && pen.textAutoAdjust) {
                     calcTextAutoWidth(pen);
                 }
                 calcTextRect(pen);
@@ -6383,10 +6385,10 @@ export class Canvas {
     };
     createInput() {
         this.inputParent.classList.add('meta2d-input');
-        this.inputRight.classList.add('right');
+        // this.inputRight.classList.add('right');
         this.inputDiv.classList.add('input-div');
         this.inputParent.appendChild(this.inputDiv);
-        this.inputParent.appendChild(this.inputRight);
+        // this.inputParent.appendChild(this.inputRight);
         this.dropdown.onmouseleave = () => {
             this.store.hover = null;
         };
@@ -6395,9 +6397,9 @@ export class Canvas {
         this.inputParent.onmousedown = this.stopPropagation;
         this.inputDiv.onmousedown = this.stopPropagation;
         this.inputDiv.contentEditable = 'false';
-        this.inputRight.onmousedown = this.stopPropagation;
+        // this.inputRight.onmousedown = this.stopPropagation;
         this.dropdown.onmousedown = this.stopPropagation;
-        this.inputRight.style.transform = 'rotate(135deg)';
+        // this.inputRight.style.transform = 'rotate(135deg)';
         let sheet;
         for (let i = 0; i < document.styleSheets.length; i++) {
             if (document.styleSheets[i].title === 'le5le.com') {
@@ -6491,11 +6493,11 @@ export class Canvas {
             const pen = this.store.pens[this.inputDiv.dataset.penId];
             if (this.dropdown.style.display === 'block') {
                 this.dropdown.style.display = 'none';
-                this.inputRight.style.transform = 'rotate(135deg)';
+                // this.inputRight.style.transform = 'rotate(135deg)';
             }
             else if (pen?.dropdownList && this.store.data.locked) {
                 this.dropdown.style.display = 'block';
-                this.inputRight.style.transform = 'rotate(315deg)';
+                // this.inputRight.style.transform = 'rotate(315deg)';
             }
             this.store.emitter.emit('clickInput', pen);
         };
@@ -6536,15 +6538,15 @@ export class Canvas {
             return;
         }
         this.dropdown.style.display = 'block';
-        this.inputRight.style.display = 'block';
-        setTimeout(() => {
-            this.inputRight.style.transform = 'rotate(315deg)';
-            this.inputRight.style.zoom = this.store.data.scale;
-        });
+        // this.inputRight.style.display = 'block';
+        // setTimeout(() => {
+        //   this.inputRight.style.transform = 'rotate(315deg)';
+        //   (this.inputRight.style as any).zoom = this.store.data.scale;
+        // });
         if (!pen || !pen.dropdownList) {
             this.dropdown.style.display = 'none';
-            this.inputRight.style.display = 'none';
-            this.inputRight.style.transform = 'rotate(135deg)';
+            // this.inputRight.style.display = 'none';
+            // this.inputRight.style.transform = 'rotate(135deg)';
             return;
         }
         if (!pen.dropdownList.length) {
@@ -6597,6 +6599,15 @@ export class Canvas {
         li.onmousedown = this.stopPropagation;
         li.dataset.i = index + '';
         li.onclick = this.selectDropdown;
+        const pen = this.store.pens[this.inputDiv.dataset.penId];
+        li.onmouseenter = () => {
+            li.style.background = pen.dropdownHoverBackground || '#eee';
+            li.style.color = pen.dropdownHoverColor || '#bdc7db';
+        };
+        li.onmouseleave = () => {
+            li.style.background = pen.dropdownBackground || '#fff';
+            li.style.color = pen.dropdownColor || '#bdc7db';
+        };
         this.dropdown.appendChild(li);
     }
     selectDropdown = (e) => {
@@ -7210,11 +7221,16 @@ export class Canvas {
         this.render();
     }
     showMagnifier() {
+        this.magnifierCanvas.canvas.style.zIndex = '100';
+        this.externalElements.style.zIndex = '101';
         this.magnifierCanvas.magnifier = true;
+        this.magnifierCanvas.updateDomOffscreen();
         this.externalElements.style.cursor = 'default';
         this.render();
     }
     hideMagnifier() {
+        this.magnifierCanvas.canvas.style.zIndex = '5';
+        this.externalElements.style.zIndex = '5';
         this.magnifierCanvas.magnifier = false;
         this.externalElements.style.cursor = 'default';
         this.render();