@inweb/markup 25.7.6 → 25.7.8

package/dist/markup.module.js

@@ -906,7 +906,7 @@ class KonvaMarkup {
         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];
@@ -918,10 +918,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._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;
@@ -935,26 +937,26 @@ class KonvaMarkup {
             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);
         }
@@ -965,13 +967,14 @@ class KonvaMarkup {
         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;
@@ -1215,8 +1218,8 @@ class KonvaMarkup {
     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({
@@ -1610,15 +1613,12 @@ class KonvaMarkup {
         }));
     }
     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);