@inweb/viewer-visualize 25.7.7 → 25.7.8

package/dist/viewer-visualize.module.js

@@ -1623,10 +1623,12 @@ class KonvaMarkup {
                 this._konvaTransformer.nodes([]);
             }
         };
-        this.resize = () => {
+        this.resizeContainer = entries => {
             var _a, _b;
-            (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.width(this._container.clientWidth);
-            (_b = this._konvaStage) === null || _b === void 0 ? void 0 : _b.height(this._container.clientHeight);
+            const {width: width, height: height} = entries[0].contentRect;
+            if (!width || !height) return;
+            (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.width(width);
+            (_b = this._konvaStage) === null || _b === void 0 ? void 0 : _b.height(height);
         };
         this.pan = event => {
             const dX = event.dX / window.devicePixelRatio;
@@ -1654,12 +1656,12 @@ class KonvaMarkup {
         this._markupContainer.style.outline = "0px";
         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);
         }
@@ -1670,10 +1672,11 @@ class KonvaMarkup {
         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;
         this._container = undefined;