@inweb/markup 25.7.6 → 25.7.8

package/dist/markup.js

@@ -12389,7 +12389,7 @@
 	        this.fontSize = 34;
 	        this.changeActiveDragger = (event) => {
 	            const draggerName = event.data;
-	            this._markupContainer.className = this._canvasOriginal.className
+	            this._markupContainer.className = this._container.className
 	                .split(" ")
 	                .filter((x) => !x.startsWith("oda-cursor-"))
 	                .filter((x) => x)
@@ -12407,10 +12407,13 @@
 	                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, height } = entries[0].contentRect;
+	            if (!width || !height)
+	                return; // <- invisible container, or container with parent removed
+	            (_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;
@@ -12422,13 +12425,13 @@
 	                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";
@@ -12436,14 +12439,14 @@
 	        this._markupContainer.style.left = "0px";
 	        // to eliminate grey box during delete elements
 	        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);
 	        }
@@ -12455,13 +12458,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;
@@ -12689,8 +12693,8 @@
 	        // first we need Konva core things: stage and layer
 	        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({ pixelRation: window.devicePixelRatio });
@@ -13079,15 +13083,13 @@
 	        });
 	    }
 	    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);
 	        return tempCanvas.toDataURL("image/jpeg", 0.25);
 	    }