@inweb/markup 25.7.7 → 25.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.7.7",
+  "version": "25.7.8",
   "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.7.7",
-    "@inweb/viewer-core": "~25.7.7"
+    "@inweb/eventemitter2": "~25.7.8",
+    "@inweb/viewer-core": "~25.7.8"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

package/src/markup/Konva/KonvaMarkup.ts

@@ -102,6 +102,7 @@ export class KonvaMarkup implements IMarkup {
   private _imageInputRef: HTMLInputElement;
   private _imageInputPos: Konva.Vector2d;
   private _markupContainer: HTMLDivElement;
+  private _resizeObserver: ResizeObserver;
   private _zIndex = 1;
 
   private readonly _markupContainerName = "markupContainer";
@@ -137,15 +138,15 @@ export class KonvaMarkup implements IMarkup {
     const parentDiv = this._container.parentElement;
     parentDiv.appendChild(this._markupContainer);
 
+    this._resizeObserver = new ResizeObserver(this.resizeContainer);
+    this._resizeObserver.observe(parentDiv);
+
     this._markupColor.setColor(255, 0, 0);
 
     this.initializeKonva();
-    this.resize();
 
     if (this._viewer) {
       this._pointerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
-
-      this._viewer.addEventListener("resize", this.resize);
       this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
       this._viewer.addEventListener("pan", this.pan);
     }
@@ -159,13 +160,15 @@ export class KonvaMarkup implements IMarkup {
     if (this._viewer) {
       this._viewer.removeEventListener("pan", this.pan);
       this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-      this._viewer.removeEventListener("resize", this.resize);
     }
 
     this._pointerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
 
     this.destroyKonva();
 
+    this._resizeObserver.disconnect();
+    this._resizeObserver = undefined;
+
     this._markupContainer.remove();
     this._markupContainer = undefined;
 
@@ -200,9 +203,13 @@ export class KonvaMarkup implements IMarkup {
     }
   };
 
-  resize = () => {
-    this._konvaStage?.width(this._container.clientWidth);
-    this._konvaStage?.height(this._container.clientHeight);
+  resizeContainer = (entries: ResizeObserverEntry[]) => {
+    const { width, height } = entries[0].contentRect;
+
+    if (!width || !height) return; // <- invisible container, or container with parent removed
+
+    this._konvaStage?.width(width);
+    this._konvaStage?.height(height);
   };
 
   pan = (event: PanEvent) => {