@inweb/markup 26.10.4 → 26.10.5

package/lib/markup/Konva/KonvaMarkup.d.ts

@@ -1,5 +1,5 @@
 import { IEventEmitter } from "@inweb/eventemitter2";
-import { ChangeActiveDraggerEvent, IViewpoint, ResizeEvent } from "@inweb/viewer-core";
+import { ChangeActiveDraggerEvent, IViewpoint } from "@inweb/viewer-core";
 import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
@@ -33,8 +33,7 @@ export declare class KonvaMarkup implements IMarkup {
     initialize(container: HTMLElement, containerEvents?: string[], viewer?: IEventEmitter, worldTransformer?: IWorldTransform): void;
     dispose(): void;
     changeActiveDragger: (event: ChangeActiveDraggerEvent) => void;
-    resizeContainer: (entries: ResizeObserverEntry[]) => void;
-    resizeViewer: (event: ResizeEvent) => void;
+    resizeContainer: () => void;
     pan: () => void;
     zoomAt: () => void;
     redirectToViewer: (event: any) => void;

package/package.json

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

package/src/markup/Konva/KonvaMarkup.ts

@@ -33,7 +33,6 @@ import {
   IRectangle,
   IText,
   IViewpoint,
-  ResizeEvent,
 } from "@inweb/viewer-core";
 
 import { IMarkup, MarkupMode } from "../IMarkup";
@@ -85,19 +84,6 @@ const MarkupMode2Konva = {
   },
 };
 
-function debounce(func, wait: number) {
-  let timeout = null;
-  return (...args) => {
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    timeout = setTimeout(() => {
-      timeout = null;
-      func(...args);
-    }, wait);
-  };
-}
-
 /**
  * 2D markup core.
  */
@@ -133,11 +119,6 @@ export class KonvaMarkup implements IMarkup {
     viewer?: IEventEmitter,
     worldTransformer?: IWorldTransform
   ): void {
-    if (!Konva)
-      throw new Error(
-        'Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"></script> to your page?'
-      );
-
     this._viewer = viewer;
     this._worldTransformer = worldTransformer ?? new WorldTransform();
     this._container = container;
@@ -151,17 +132,13 @@ export class KonvaMarkup implements IMarkup {
     const parentDiv = this._container.parentElement;
     parentDiv.appendChild(this._markupContainer);
 
-    if (viewer) {
-      this._viewer.addEventListener("resize", this.resizeViewer);
-    } else {
-      this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
-      this._resizeObserver.observe(parentDiv);
-    }
-
     this._markupColor.setColor(255, 0, 0);
 
     this.initializeKonva();
 
+    this._resizeObserver = new ResizeObserver(this.resizeContainer);
+    this._resizeObserver.observe(container);
+
     if (this._viewer) {
       this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
       this._viewer.addEventListener("pan", this.pan);
@@ -176,11 +153,11 @@ export class KonvaMarkup implements IMarkup {
       this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
     }
 
-    this.destroyKonva();
-
     this._resizeObserver?.disconnect();
     this._resizeObserver = undefined;
 
+    this.destroyKonva();
+
     this._markupContainer?.remove();
     this._markupContainer = undefined;
 
@@ -207,29 +184,16 @@ export class KonvaMarkup implements IMarkup {
     this.enableEditMode(draggerName as MarkupMode);
   };
 
-  resizeContainer = (entries: ResizeObserverEntry[]) => {
-    if (!entries || !entries[0] || !entries[0].contentRect) return;
-    const { width, height } = entries[0].contentRect;
-
-    if (!width || !height) return; // <- invisible container, or container with parent removed
-    if (!this._konvaStage) return;
-
-    this._konvaStage.width(width);
-    this._konvaStage.height(height);
-
-    this.getObjects().forEach((markupObject) => {
-      markupObject.updateScreenCoordinates();
-    });
-  };
+  resizeContainer = () => {
+    const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this._container;
 
-  resizeViewer = (event: ResizeEvent) => {
-    const { width, height } = event;
+    if (!offsetWidth || !offsetHeight) return; // <- invisible container, or container with parent removed
 
-    if (!width || !height) return; // <- invisible container, or container with parent removed
-    if (!this._konvaStage) return;
+    this._markupContainer.style.left = `${offsetLeft}px`;
+    this._markupContainer.style.top = `${offsetTop}px`;
 
-    this._konvaStage.width(width);
-    this._konvaStage.height(height);
+    this._konvaStage.width(offsetWidth);
+    this._konvaStage.height(offsetHeight);
 
     this.getObjects().forEach((markupObject) => {
       markupObject.updateScreenCoordinates();