@inweb/markup 25.9.8 → 25.11.0

package/dist/markup.module.js

@@ -1004,33 +1004,21 @@ class KonvaMarkup {
             this._konvaStage.height(height);
         };
         this.pan = event => {
-            const pointer = this._konvaStage.getPointerPosition();
-            const pointTo = {
-                x: (pointer.x - this._konvaStage.x()) / this._konvaStage.scaleX(),
-                y: (pointer.y - this._konvaStage.y()) / this._konvaStage.scaleX()
-            };
             const newPos = {
-                x: pointer.x - pointTo.x * this._konvaStage.scale().x + event.dX,
-                y: pointer.y - pointTo.y * this._konvaStage.scale().x + event.dY
+                x: this._konvaStage.x() + event.dX,
+                y: this._konvaStage.y() + event.dY
             };
             this._konvaStage.position(newPos);
         };
         this.zoomAt = event => {
-            const oldScale = this._konvaStage.scaleX();
-            const pointer = this._konvaStage.getPointerPosition();
-            const mousePointTo = {
-                x: (pointer.x - this._konvaStage.x()) / oldScale,
-                y: (pointer.y - this._konvaStage.y()) / oldScale
-            };
-            const direction = event.data > 0 ? 1 : -1;
-            const newScale = direction > 0 ? oldScale * event.data : oldScale / event.data;
+            const newScale = this._konvaStage.scaleX() * event.data;
             this._konvaStage.scale({
                 x: newScale,
                 y: newScale
             });
             const newPos = {
-                x: pointer.x - mousePointTo.x * newScale,
-                y: pointer.y - mousePointTo.y * newScale
+                x: event.x - (event.x - this._konvaStage.x()) * event.data,
+                y: event.y - (event.y - this._konvaStage.y()) * event.data
             };
             this._konvaStage.position(newPos);
         };
@@ -1056,6 +1044,7 @@ class KonvaMarkup {
         this._markupContainer.style.top = "0px";
         this._markupContainer.style.left = "0px";
         this._markupContainer.style.outline = "0px";
+        this._markupContainer.style.pointerEvents = "none";
         const parentDiv = this._container.parentElement;
         parentDiv.appendChild(this._markupContainer);
         this._resizeObserver = new ResizeObserver(this.resizeContainer);
@@ -1063,7 +1052,6 @@ class KonvaMarkup {
         this._markupColor.setColor(255, 0, 0);
         this.initializeKonva();
         if (this._viewer) {
-            this._containerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
             this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
             this._viewer.addEventListener("pan", this.pan);
             this._viewer.addEventListener("zoomat", this.zoomAt);
@@ -1075,7 +1063,6 @@ class KonvaMarkup {
             this._viewer.removeEventListener("zoomat", this.zoomAt);
             this._viewer.removeEventListener("pan", this.pan);
             this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-            this._containerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
         }
         this.destroyKonva();
         (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -1099,6 +1086,14 @@ class KonvaMarkup {
     }
     setMarkupColor(r, g, b) {
         this._markupColor.setColor(r, g, b);
+        this._viewer.emit({
+            type: "changemarkupcolor",
+            data: {
+                r: r,
+                g: g,
+                b: b
+            }
+        });
     }
     colorizeAllMarkup(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).asHex();
@@ -1191,9 +1186,11 @@ class KonvaMarkup {
             this.clearSelected();
             this.removeTextInput();
             this.removeImageInput();
+            this._markupContainer.style.pointerEvents = "none";
             this._markupIsActive = false;
         } else {
             this._markupMode = mode;
+            this._markupContainer.style.pointerEvents = "all";
             this._markupIsActive = true;
         }
         return this;