@inweb/markup 25.9.0 → 25.9.2

package/dist/markup.js

@@ -11466,6 +11466,40 @@
 	var libExports = lib$1.exports;
 	var Konva = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
+	///////////////////////////////////////////////////////////////////////////////
+	// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+	// All rights reserved.
+	//
+	// This software and its documentation and related materials are owned by
+	// the Alliance. The software may only be incorporated into application
+	// programs owned by members of the Alliance, subject to a signed
+	// Membership Agreement and Supplemental Software License Agreement with the
+	// Alliance. The structure and organization of this software are the valuable
+	// trade secrets of the Alliance and its suppliers. The software is also
+	// protected by copyright law and international treaty provisions. Application
+	// programs incorporating this software must include the following statement
+	// with their copyright notices:
+	//
+	//   This application incorporates Open Design Alliance software pursuant to a
+	//   license agreement with Open Design Alliance.
+	//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+	//   All rights reserved.
+	//
+	// By use of this software, its documentation or related materials, you
+	// acknowledge and accept the above terms.
+	///////////////////////////////////////////////////////////////////////////////
+	class WorldTransform {
+	    screenToWorld(position) {
+	        return { x: position.x, y: position.y, z: 0 };
+	    }
+	    worldToScreen(position) {
+	        return { x: position.x, y: position.y };
+	    }
+	    getScale() {
+	        return { x: 1, y: 1, z: 1 };
+	    }
+	}
+
 	///////////////////////////////////////////////////////////////////////////////
 	// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
 	// All rights reserved.
@@ -11537,40 +11571,6 @@
 	    }
 	}
 
-	///////////////////////////////////////////////////////////////////////////////
-	// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
-	// All rights reserved.
-	//
-	// This software and its documentation and related materials are owned by
-	// the Alliance. The software may only be incorporated into application
-	// programs owned by members of the Alliance, subject to a signed
-	// Membership Agreement and Supplemental Software License Agreement with the
-	// Alliance. The structure and organization of this software are the valuable
-	// trade secrets of the Alliance and its suppliers. The software is also
-	// protected by copyright law and international treaty provisions. Application
-	// programs incorporating this software must include the following statement
-	// with their copyright notices:
-	//
-	//   This application incorporates Open Design Alliance software pursuant to a
-	//   license agreement with Open Design Alliance.
-	//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
-	//   All rights reserved.
-	//
-	// By use of this software, its documentation or related materials, you
-	// acknowledge and accept the above terms.
-	///////////////////////////////////////////////////////////////////////////////
-	class WorldTransform {
-	    screenToWorld(position) {
-	        return { x: position.x, y: position.y, z: 0 };
-	    }
-	    worldToScreen(position) {
-	        return { x: position.x, y: position.y };
-	    }
-	    getScale() {
-	        return { x: 1, y: 1, z: 1 };
-	    }
-	}
-
 	const LineTypeSpecs = new Map([
 	    ["solid", []],
 	    ["dot", [30, 30, 0.001, 30]],
@@ -12554,14 +12554,50 @@
 	            this._konvaStage.height(height);
 	        };
 	        this.pan = (event) => {
-	            const dX = event.dX / window.devicePixelRatio;
-	            const dY = event.dY / window.devicePixelRatio;
-	            this.getObjects().forEach((obj) => obj.ref().move({ x: dX, y: dY }));
+	            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,
+	            };
+	            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?
+	            let direction = event.data > 0 ? 1 : -1;
+	            const newScale = direction > 0 ? oldScale * event.data : oldScale / event.data;
+	            this._konvaStage.scale({ x: newScale, y: newScale });
+	            const newPos = {
+	                x: pointer.x - mousePointTo.x * newScale,
+	                y: pointer.y - mousePointTo.y * newScale,
+	            };
+	            this._konvaStage.position(newPos);
 	        };
 	        this.redirectToViewer = (event) => {
 	            if (this._viewer)
 	                this._viewer.emit(event);
 	        };
+	        this.getRelativePointPosition = (point, node) => {
+	            // the function will return pointer position relative to the passed node
+	            const transform = node.getAbsoluteTransform().copy();
+	            // to detect relative position we need to invert transform
+	            transform.invert();
+	            // get pointer (say mouse or touch) position
+	            // now we find relative point
+	            return transform.point(point);
+	        };
+	        this.getRelativePointerPosition = (node) => {
+	            return this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
+	        };
 	    }
 	    initialize(container, containerEvents, viewer, worldTransformer) {
 	        if (!Konva)
@@ -12587,11 +12623,13 @@
 	            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);
 	        }
 	    }
 	    dispose() {
 	        var _a, _b;
 	        if (this._viewer) {
+	            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));
@@ -12632,6 +12670,8 @@
 	        this.clearSelected();
 	        this.removeTextInput();
 	        this.removeImageInput();
+	        this._konvaStage.scale({ x: 1, y: 1 });
+	        this._konvaStage.position({ x: 0, y: 0 });
 	        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || { r: 255, g: 0, b: 0 };
 	        this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
 	        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
@@ -12792,7 +12832,7 @@
 	                transformer.nodes([]);
 	                return;
 	            }
-	            const pos = stage.getPointerPosition();
+	            const pos = this.getRelativePointerPosition(stage);
 	            mouseDownPos = pos;
 	            isPaint = ["Arrow", "Cloud", "Ellipse", "Line", "Rectangle"].some((m) => m === this._markupMode);
 	            if (this._markupMode === "Line") {
@@ -12804,7 +12844,7 @@
 	            if (!this._markupIsActive)
 	                return;
 	            if (isPaint) {
-	                const pos = stage.getPointerPosition();
+	                const pos = this.getRelativePointerPosition(stage);
 	                const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
 	                const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
 	                const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
@@ -12836,7 +12876,7 @@
 	            }
 	            // prevent scrolling on touch devices
 	            //e.evt.preventDefault();
-	            const pos = stage.getPointerPosition();
+	            const pos = this.getRelativePointerPosition(stage);
 	            const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
 	            const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
 	            const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
@@ -12889,7 +12929,7 @@
 	                    if (this._textInputRef && this._textInputRef.value)
 	                        this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
 	                    else if (transformer.nodes().length === 0) {
-	                        const pos = stage.getPointerPosition();
+	                        const pos = this.getRelativePointerPosition(stage);
 	                        this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
 	                    }
 	                }
@@ -12897,7 +12937,7 @@
 	                    if (this._imageInputRef && this._imageInputRef.value)
 	                        this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
 	                    else if (transformer.nodes().length === 0) {
-	                        const pos = stage.getPointerPosition();
+	                        const pos = this.getRelativePointerPosition(stage);
 	                        this.createImageInput(pos);
 	                    }
 	                }
@@ -13022,11 +13062,10 @@
 	        this.konvaLayerFind("Text").forEach((ref) => {
 	            const textSize = 0.02;
 	            const textScale = this._worldTransformer.getScale();
-	            const position = {
-	                x: ref.x(),
-	                y: ref.y(),
-	            };
-	            const worldPoint = this._worldTransformer.screenToWorld(position);
+	            const position = ref.position();
+	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
+	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
 	            const shape = new KonvaText(null, ref);
 	            const text = {
 	                id: shape.id(),
@@ -13035,7 +13074,7 @@
 	                text_size: textSize * textScale.y,
 	                angle: shape.getRotation(),
 	                color: shape.getColor(),
-	                font_size: shape.getFontSize(),
+	                font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0],
 	            };
 	            texts.push(text);
 	        });
@@ -13045,13 +13084,16 @@
 	        const rectangles = [];
 	        this.konvaLayerFind("Rectangle").forEach((ref) => {
 	            const position = ref.position();
-	            const worldPoint = this._worldTransformer.screenToWorld(position);
+	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
+	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+	            const scale = stageAbsoluteTransform.getMatrix()[0];
 	            const shape = new KonvaRectangle(null, ref);
 	            const rectangle = {
 	                id: shape.id(),
 	                position: worldPoint,
-	                width: shape.getWidth(),
-	                height: shape.getHeigth(),
+	                width: shape.getWidth() * scale,
+	                height: shape.getHeigth() * scale,
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };
@@ -13063,12 +13105,18 @@
 	        const ellipses = [];
 	        this.konvaLayerFind("Ellipse").forEach((ref) => {
 	            const position = ref.position();
-	            const worldPoint = this._worldTransformer.screenToWorld(position);
+	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
+	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+	            const scale = stageAbsoluteTransform.getMatrix()[0];
 	            const shape = new KonvaEllipse(null, ref);
 	            const ellipse = {
 	                id: shape.id(),
 	                position: worldPoint,
-	                radius: { x: ref.getRadiusX(), y: ref.getRadiusY() },
+	                radius: {
+	                    x: ref.getRadiusX() * scale,
+	                    y: ref.getRadiusY() * scale,
+	                },
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };
@@ -13106,14 +13154,17 @@
 	        const images = [];
 	        this.konvaLayerFind("Image").forEach((ref) => {
 	            const position = ref.position();
-	            const worldPoint = this._worldTransformer.screenToWorld(position);
+	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
+	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+	            const scale = stageAbsoluteTransform.getMatrix()[0];
 	            const shape = new KonvaImage(null, ref);
 	            const image = {
 	                id: shape.id(),
 	                position: worldPoint,
 	                src: shape.getSrc(),
-	                width: shape.getWidth(),
-	                height: shape.getHeight(),
+	                width: shape.getWidth() * scale,
+	                height: shape.getHeight() * scale,
 	            };
 	            images.push(image);
 	        });
@@ -13123,13 +13174,16 @@
 	        const clouds = [];
 	        this.konvaLayerFind("Cloud").forEach((ref) => {
 	            const position = ref.position();
-	            const worldPoint = this._worldTransformer.screenToWorld(position);
+	            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+	            const atPoint = stageAbsoluteTransform.point({ x: position.x, y: position.y });
+	            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+	            const scale = stageAbsoluteTransform.getMatrix()[0];
 	            const shape = new KonvaCloud(null, ref);
 	            const cloud = {
 	                id: shape.id(),
 	                position: worldPoint,
-	                width: shape.getWidth(),
-	                height: shape.getHeigth(),
+	                width: shape.getWidth() * scale,
+	                height: shape.getHeigth() * scale,
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
 	            };