@inweb/markup 25.10.1 → 25.11.1

package/dist/markup.js

@@ -12554,31 +12554,18 @@
 	            this._konvaStage.height(height);
 	        };
 	        this.pan = (event) => {
-	            const pointer = this._konvaStage.getPointerPosition();
-	            const pointTo = {
-	                x: (pointer.x - this._konvaStage.x()) / this._konvaStage.scaleX(),
-	                y: (pointer.y - this._konvaStage.y()) / this._konvaStage.scaleX(),
-	            };
 	            const newPos = {
-	                x: pointer.x - pointTo.x * this._konvaStage.scale().x + event.dX,
-	                y: pointer.y - pointTo.y * this._konvaStage.scale().x + event.dY,
+	                x: this._konvaStage.x() + event.dX,
+	                y: this._konvaStage.y() + event.dY,
 	            };
 	            this._konvaStage.position(newPos);
 	        };
 	        this.zoomAt = (event) => {
-	            const oldScale = this._konvaStage.scaleX();
-	            const pointer = this._konvaStage.getPointerPosition();
-	            const mousePointTo = {
-	                x: (pointer.x - this._konvaStage.x()) / oldScale,
-	                y: (pointer.y - this._konvaStage.y()) / oldScale,
-	            };
-	            // how to scale? Zoom in? Or zoom out?
-	            const direction = event.data > 0 ? 1 : -1;
-	            const newScale = direction > 0 ? oldScale * event.data : oldScale / event.data;
+	            const newScale = this._konvaStage.scaleX() * event.data;
 	            this._konvaStage.scale({ x: newScale, y: newScale });
 	            const newPos = {
-	                x: pointer.x - mousePointTo.x * newScale,
-	                y: pointer.y - mousePointTo.y * newScale,
+	                x: event.x - (event.x - this._konvaStage.x()) * event.data,
+	                y: event.y - (event.y - this._konvaStage.y()) * event.data,
 	            };
 	            this._konvaStage.position(newPos);
 	        };
@@ -12611,8 +12598,8 @@
 	        this._markupContainer.style.position = "absolute";
 	        this._markupContainer.style.top = "0px";
 	        this._markupContainer.style.left = "0px";
-	        // to eliminate grey box during delete elements
-	        this._markupContainer.style.outline = "0px";
+	        this._markupContainer.style.outline = "0px"; // <- to eliminate grey box during delete elements
+	        this._markupContainer.style.pointerEvents = "none";
 	        const parentDiv = this._container.parentElement;
 	        parentDiv.appendChild(this._markupContainer);
 	        this._resizeObserver = new ResizeObserver(this.resizeContainer);
@@ -12620,7 +12607,7 @@
 	        this._markupColor.setColor(255, 0, 0);
 	        this.initializeKonva();
 	        if (this._viewer) {
-	            this._containerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
+	            // this._containerEvents.forEach((x) => this._markupContainer.addEventListener(x, this.redirectToViewer));
 	            this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
 	            this._viewer.addEventListener("pan", this.pan);
 	            this._viewer.addEventListener("zoomat", this.zoomAt);
@@ -12632,7 +12619,7 @@
 	            this._viewer.removeEventListener("zoomat", this.zoomAt);
 	            this._viewer.removeEventListener("pan", this.pan);
 	            this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-	            this._containerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
+	            // this._containerEvents.forEach((x) => this._markupContainer.removeEventListener(x, this.redirectToViewer));
 	        }
 	        this.destroyKonva();
 	        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -12656,6 +12643,7 @@
 	    }
 	    setMarkupColor(r, g, b) {
 	        this._markupColor.setColor(r, g, b);
+	        this._viewer.emit({ type: "changemarkupcolor", data: { r, g, b } });
 	    }
 	    colorizeAllMarkup(r, g, b) {
 	        const hexColor = new MarkupColor(r, g, b).asHex();
@@ -12709,8 +12697,9 @@
 	            this.addImage(screenPoint, image.src, image.width, image.height, image.id);
 	        });
 	    }
-	    getViewpoint() {
-	        const viewpoint = {};
+	    getViewpoint(viewpoint) {
+	        if (!viewpoint)
+	            viewpoint = {};
 	        viewpoint.lines = this.getMarkupLines();
 	        viewpoint.texts = this.getMarkupTexts();
 	        viewpoint.arrows = this.getMarkupArrows();
@@ -12720,7 +12709,6 @@
 	        viewpoint.rectangles = this.getMarkupRectangles();
 	        viewpoint.custom_fields = { markup_color: this.getMarkupColor() };
 	        viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
-	        viewpoint.description = new Date().toDateString();
 	        return viewpoint;
 	    }
 	    enableEditMode(mode) {
@@ -12728,10 +12716,12 @@
 	            this.clearSelected();
 	            this.removeTextInput();
 	            this.removeImageInput();
+	            this._markupContainer.style.pointerEvents = "none";
 	            this._markupIsActive = false;
 	        }
 	        else {
 	            this._markupMode = mode;
+	            this._markupContainer.style.pointerEvents = "all";
 	            this._markupIsActive = true;
 	        }
 	        return this;