@inweb/viewer-visualize 25.7.6 → 25.7.8

package/dist/viewer-visualize.js

@@ -13049,7 +13049,7 @@
             this.fontSize = 34;
             this.changeActiveDragger = event => {
                 const draggerName = event.data;
-                this._markupContainer.className = this._canvasOriginal.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
+                this._markupContainer.className = this._container.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
                 this.removeTextInput();
                 this.removeImageInput();
                 const konvaShape = MarkupMode2Konva[draggerName];
@@ -13061,10 +13061,12 @@
                     this._konvaTransformer.nodes([]);
                 }
             };
-            this.resize = () => {
+            this.resizeContainer = entries => {
                 var _a, _b;
-                (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.width(this._canvasOriginal.clientWidth);
-                (_b = this._konvaStage) === null || _b === void 0 ? void 0 : _b.height(this._canvasOriginal.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;
@@ -13078,26 +13080,26 @@
                 if (this._viewer) this._viewer.emit(event);
             };
         }
-        initialize(canvas, canvasEvents, viewer, worldTransformer) {
+        initialize(container, pointerEvents, viewer, worldTransformer) {
             if (!Konva) throw new Error('Markup: Error during initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
             this._viewer = viewer;
             this._worldTransformer = worldTransformer;
-            this._canvasOriginal = canvas;
-            this._canvasEvents = canvasEvents !== null && canvasEvents !== void 0 ? canvasEvents : [];
+            this._container = container;
+            this._pointerEvents = pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : [];
             this._markupContainer = document.createElement("div");
             this._markupContainer.id = this._markupContainerName;
             this._markupContainer.style.position = "absolute";
             this._markupContainer.style.top = "0px";
             this._markupContainer.style.left = "0px";
             this._markupContainer.style.outline = "0px";
-            const parentDiv = this._canvasOriginal.parentElement;
+            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();
-            this._canvasEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
             if (this._viewer) {
-                this._viewer.addEventListener("resize", this.resize);
+                this._pointerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
                 this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
                 this._viewer.addEventListener("pan", this.pan);
             }
@@ -13108,13 +13110,14 @@
             if (this._viewer) {
                 this._viewer.removeEventListener("pan", this.pan);
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-                this._viewer.removeEventListener("resize", this.resize);
             }
-            this._canvasEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
+            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._canvasOriginal = undefined;
+            this._container = undefined;
             this._viewer = undefined;
             this._worldTransformer = undefined;
             this._markupIsActive = false;
@@ -13358,8 +13361,8 @@
         initializeKonva() {
             this._konvaStage = new Konva.Stage({
                 container: this._markupContainerName,
-                width: this._canvasOriginal.clientWidth,
-                height: this._canvasOriginal.clientHeight
+                width: this._container.clientWidth,
+                height: this._container.clientHeight
             });
             const stage = this._konvaStage;
             const layer = new Konva.Layer({
@@ -13753,15 +13756,12 @@
             }));
         }
         combineMarkupWithDrawing() {
-            const trNodes = this._konvaTransformer.nodes();
-            if (trNodes.length > 0) {
-                this._konvaTransformer.nodes([]);
-            }
+            this.clearSelected();
             const tempCanvas = document.createElement("canvas");
-            tempCanvas.height = this._canvasOriginal.height;
-            tempCanvas.width = this._canvasOriginal.width;
+            tempCanvas.width = this._konvaStage.width();
+            tempCanvas.height = this._konvaStage.height();
             const ctx = tempCanvas.getContext("2d");
-            ctx.drawImage(this._canvasOriginal, 0, 0);
+            if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
             ctx.drawImage(this._konvaStage.toCanvas({
                 pixelRatio: window.devicePixelRatio
             }), 0, 0);