@inweb/markup 25.9.8 → 25.11.0

package/lib/markup/IMarkup.d.ts

@@ -58,7 +58,7 @@ export interface IMarkup {
      */
     clearOverlay(): void;
     /**
-     * Sets the color of new markup objects.
+     * Sets the default color of new markup objects.
      *
      * @param r - The `red` component of the color, as a number between 0 and 255.
      * @param g - The `green` component of the color, as a number between 0 and 255.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.9.8",
+  "version": "25.11.0",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,8 +26,8 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~25.9.8",
-    "@inweb/viewer-core": "~25.9.8"
+    "@inweb/eventemitter2": "~25.11.0",
+    "@inweb/viewer-core": "~25.11.0"
   },
   "devDependencies": {
     "konva": "^9.3.14"

package/src/markup/IMarkup.ts

@@ -95,7 +95,7 @@ export interface IMarkup {
   clearOverlay(): void;
 
   /**
-   * Sets the color of new markup objects.
+   * Sets the default color of new markup objects.
    *
    * @param r - The `red` component of the color, as a number between 0 and 255.
    * @param g - The `green` component of the color, as a number between 0 and 255.

package/src/markup/Konva/KonvaMarkup.ts

@@ -137,8 +137,8 @@ export class KonvaMarkup implements IMarkup {
     this._markupContainer.style.position = "absolute";
     this._markupContainer.style.top = "0px";
     this._markupContainer.style.left = "0px";
-    // to eliminate grey box during delete elements
-    this._markupContainer.style.outline = "0px";
+    this._markupContainer.style.outline = "0px"; // <- to eliminate grey box during delete elements
+    this._markupContainer.style.pointerEvents = "none";
 
     const parentDiv = this._container.parentElement;
     parentDiv.appendChild(this._markupContainer);
@@ -151,7 +151,7 @@ export class KonvaMarkup implements IMarkup {
     this.initializeKonva();
 
     if (this._viewer) {
-      this._containerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
+      // 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);
@@ -163,7 +163,7 @@ export class KonvaMarkup implements IMarkup {
       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._containerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
     }
 
     this.destroyKonva();
@@ -208,40 +208,20 @@ export class KonvaMarkup implements IMarkup {
   };
 
   pan = (event: PanEvent) => {
-    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);
   };
 
   zoomAt = (event: ZoomAtEvent) => {
-    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,
-    };
-
-    // how to scale? Zoom in? Or zoom out?
-    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);
   };
@@ -265,6 +245,7 @@ export class KonvaMarkup implements IMarkup {
 
   setMarkupColor(r: number, g: number, b: number): void {
     this._markupColor.setColor(r, g, b);
+    this._viewer.emit({ type: "changemarkupcolor", data: { r, g, b } });
   }
 
   colorizeAllMarkup(r: number, g: number, b: number): void {
@@ -352,9 +333,11 @@ export class KonvaMarkup implements IMarkup {
       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;