@meta2d/core 1.0.61 → 1.0.63

package/package.json

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

@@ -14,6 +14,7 @@ import { Meta2d } from '../core';
 import { Dialog } from '../dialog';
 import { Title } from '../title';
 import { CanvasTemplate } from './canvasTemplate';
+import { Popconfirm } from '../popconfirm';
 export declare const movingSuffix: "-moving";
 export declare class Canvas {
     parent: Meta2d;
@@ -106,9 +107,9 @@ export declare class Canvas {
     };
     inputParent: HTMLDivElement;
     inputDiv: HTMLDivElement;
-    inputRight: HTMLDivElement;
     dropdown: HTMLUListElement;
     tooltip: Tooltip;
+    popconfirm: Popconfirm;
     title: Title;
     mousePos: Point;
     scroll: Scroll;
@@ -144,7 +145,7 @@ export declare class Canvas {
     ondrop: (event: DragEvent) => Promise<void>;
     dropPens(pens: Pen[], e: Point): Promise<void>;
     randomCombineId(pen: Pen, pens: Pen[], parentId?: string): Pen;
-    addPens(pens: Pen[], history?: boolean): Promise<Pen[]>;
+    addPens(pens: Pen[], history?: boolean, abs?: boolean): Promise<Pen[]>;
     ontouchstart: (e: TouchEvent) => void;
     ontouchmove: (event: TouchEvent) => void;
     ontouchend: (event: TouchEvent) => void;
@@ -238,7 +239,7 @@ export declare class Canvas {
     inAnchor(pt: Point, pen: Pen, anchor: Point): HoverType;
     resize(w?: number, h?: number): void;
     clearCanvas(): void;
-    addPen(pen: Pen, history?: boolean, emit?: boolean): Promise<Pen>;
+    addPen(pen: Pen, history?: boolean, emit?: boolean, abs?: boolean): Promise<Pen>;
     pushHistory(action: EditAction): void;
     undo(): void;
     redo(): void;

package/src/canvas/canvas.js

@@ -18,6 +18,7 @@ import { setter } from '../utils/object';
 import { Title } from '../title';
 import { CanvasTemplate } from './canvasTemplate';
 import { getLinePoints } from '../diagrams/line';
+import { Popconfirm } from '../popconfirm';
 export const movingSuffix = '-moving';
 export class Canvas {
     parent;
@@ -94,9 +95,10 @@ 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;
+    popconfirm;
     title;
     mousePos = { x: 0, y: 0 };
     scroll;
@@ -126,13 +128,13 @@ export class Canvas {
         this.canvasImage = new CanvasImage(parentElement, store);
         this.canvasImage.canvas.style.zIndex = '4';
         this.magnifierCanvas = new MagnifierCanvas(this, parentElement, store);
-        this.magnifierCanvas.canvas.style.zIndex = '100'; //放大镜盖过dom图元
+        this.magnifierCanvas.canvas.style.zIndex = '5';
         this.externalElements.style.position = 'absolute';
         this.externalElements.style.left = '0';
         this.externalElements.style.top = '0';
         this.externalElements.style.outline = 'none';
         this.externalElements.style.background = 'transparent';
-        this.externalElements.style.zIndex = '101';
+        this.externalElements.style.zIndex = '5';
         parentElement.style.position = 'relative';
         parentElement.appendChild(this.externalElements);
         this.createInput();
@@ -143,6 +145,7 @@ export class Canvas {
             let hover = this.store.data.pens.find((item) => item.calculative.hover === true);
             setHover(hover, false);
         };
+        this.popconfirm = new Popconfirm(parentElement, store);
         this.dialog = new Dialog(parentElement);
         this.title = new Title(parentElement);
         if (this.store.options.scroll) {
@@ -1229,7 +1232,7 @@ export class Canvas {
         pen.children = newChildren;
         return pen;
     }
-    async addPens(pens, history) {
+    async addPens(pens, history, abs) {
         if (this.beforeAddPens && (await this.beforeAddPens(pens)) != true) {
             return [];
         }
@@ -1238,6 +1241,12 @@ export class Canvas {
             if (this.beforeAddPen && this.beforeAddPen(pen) != true) {
                 continue;
             }
+            if (abs) {
+                pen.x = pen.x * this.store.data.scale + this.store.data.origin.x;
+                pen.y = pen.y * this.store.data.scale + this.store.data.origin.y;
+                pen.width = pen.width * this.store.data.scale;
+                pen.height = pen.height * this.store.data.scale;
+            }
             this.makePen(pen);
             list.push(pen);
         }
@@ -1462,6 +1471,7 @@ export class Canvas {
             this.mouseRight = MouseRight.Down;
         }
         this.hideInput();
+        this.popconfirm.hide();
         if (this.store.data.locked === LockState.Disable ||
             (e.buttons !== 1 && e.buttons !== 2)) {
             this.hoverType = HoverType.None;
@@ -3210,13 +3220,19 @@ export class Canvas {
         this.canvasImage.clear();
         this.canvasImageBottom.clear();
     }
-    async addPen(pen, history, emit) {
+    async addPen(pen, history, emit, abs) {
         if (this.beforeAddPens && (await this.beforeAddPens([pen])) != true) {
             return;
         }
         if (this.beforeAddPen && this.beforeAddPen(pen) != true) {
             return;
         }
+        if (abs) {
+            pen.x = pen.x * this.store.data.scale + this.store.data.origin.x;
+            pen.y = pen.y * this.store.data.scale + this.store.data.origin.y;
+            pen.width = pen.width * this.store.data.scale;
+            pen.height = pen.height * this.store.data.scale;
+        }
         this.makePen(pen);
         this.active([pen]);
         this.render();
@@ -6149,15 +6165,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();
@@ -6385,10 +6401,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;
         };
@@ -6397,9 +6413,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') {
@@ -6493,11 +6509,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);
         };
@@ -6538,15 +6554,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) {
@@ -6715,7 +6731,12 @@ export class Canvas {
             // 单属性
             if (k.indexOf('.') === -1) {
                 if (k === 'rotate') {
-                    oldRotate = pen.calculative.rotate || 0;
+                    if (pen.disableRotate) { //当图元禁止旋转时不重新设置旋转角度
+                        pen.rotate = pen.calculative.rotate || 0;
+                    }
+                    else {
+                        oldRotate = pen.calculative.rotate || 0;
+                    }
                 }
                 else if (k === 'canvasLayer' || k === 'isBottom' || k === 'showChild') {
                     containIsBottom = true;
@@ -6724,7 +6745,9 @@ export class Canvas {
                     willRenderImage = true;
                 }
                 if (typeof pen[k] !== 'object' || k === 'lineDash') {
-                    pen.calculative[k] = data[k];
+                    if (!pen.disableRotate || k !== 'rotate') { //当图元禁止旋转时不重新设置旋转角度
+                        pen.calculative[k] = data[k];
+                    }
                 }
                 if (needCalcTextRectProps.includes(k)) {
                     willCalcTextRect = true;
@@ -7221,12 +7244,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();
@@ -7603,6 +7630,7 @@ export class Canvas {
         this.tooltip?.destroy();
         this.dialog?.destroy();
         this.title?.destroy();
+        this.popconfirm?.destroy();
         // ios
         this.externalElements.removeEventListener('gesturestart', this.onGesturestart);
         this.externalElements.ondragover = (e) => e.preventDefault();