@inweb/markup 25.8.15 → 25.8.19

package/dist/markup.js

@@ -12091,11 +12091,15 @@
 	    constructor(params, ref = null) {
 	        var _a, _b;
 	        this._ratio = 1;
+	        this.EPSILON = 10e-6;
 	        if (ref) {
 	            // if (ref.height() === 0 || ref.width() === 0) return;
 	            this._ref = ref;
 	            this._canvasImage = ref.image();
-	            this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
+	            this._ratio =
+	                this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
+	                    ? 1
+	                    : this._ref.height() / this._ref.width();
 	            return;
 	        }
 	        if (!params || !params.position || !params.src)
@@ -12111,11 +12115,30 @@
 	        });
 	        this._canvasImage.onload = () => {
 	            this._ref.image(this._canvasImage);
-	            if (this._ref.height() === 0)
+	            if (this._ref.height() <= this.EPSILON)
 	                this._ref.height(this._canvasImage.height);
-	            if (this._ref.width() === 0)
+	            if (this._ref.width() <= this.EPSILON)
 	                this._ref.width(this._canvasImage.width);
-	            this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
+	            this._ratio =
+	                this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
+	                    ? 1
+	                    : this._ref.height() / this._ref.width();
+	            // need to rescale only if input width and height are 0 - we do not loading Viewpoint with existing params
+	            if ((params.width <= this.EPSILON || params.height <= this.EPSILON) &&
+	                (params.maxWidth >= this.EPSILON || params.maxWidth >= this.EPSILON)) {
+	                const heightOutOfCanvas = params.maxHeight - this._canvasImage.height;
+	                const widthOutOfCanvas = params.maxWidth - this._canvasImage.width;
+	                if (heightOutOfCanvas <= this.EPSILON || widthOutOfCanvas <= this.EPSILON) {
+	                    if (widthOutOfCanvas <= this.EPSILON && widthOutOfCanvas < heightOutOfCanvas / this._ratio) {
+	                        this._ref.height(params.maxWidth * this._ratio);
+	                        this._ref.width(params.maxWidth);
+	                    }
+	                    else {
+	                        this._ref.width(params.maxHeight / this._ratio);
+	                        this._ref.height(params.maxHeight);
+	                    }
+	                }
+	            }
 	        };
 	        this._canvasImage.src = params.src;
 	        this._ref.on("transform", (e) => {
@@ -12885,7 +12908,10 @@
 	            for (let i = 0; i < linePoints.length; i += 2) {
 	                // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
 	                // https://stackoverflow.com/a/57641487 - check answer's comments
-	                const atPoint = absoluteTransform.point({ x: linePoints[i], y: linePoints[i + 1] });
+	                const atPoint = absoluteTransform.point({
+	                    x: linePoints[i],
+	                    y: linePoints[i + 1],
+	                });
 	                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
 	                worldPoints.push(worldPoint);
 	            }
@@ -12906,7 +12932,10 @@
 	        this.konvaLayerFind("Text").forEach((ref) => {
 	            const textSize = 0.02;
 	            const textScale = this._worldTransformer.getScale();
-	            const position = { x: ref.x(), y: ref.y() };
+	            const position = {
+	                x: ref.x(),
+	                y: ref.y(),
+	            };
 	            const worldPoint = this._worldTransformer.screenToWorld(position);
 	            const shape = new KonvaText(null, ref);
 	            const text = {
@@ -12962,9 +12991,15 @@
 	        this.konvaLayerFind("Arrow").forEach((ref) => {
 	            // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
 	            const absoluteTransform = ref.getAbsoluteTransform();
-	            const atStartPoint = absoluteTransform.point({ x: ref.points()[0], y: ref.points()[1] });
+	            const atStartPoint = absoluteTransform.point({
+	                x: ref.points()[0],
+	                y: ref.points()[1],
+	            });
 	            const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
-	            const atEndPoint = absoluteTransform.point({ x: ref.points()[2], y: ref.points()[3] });
+	            const atEndPoint = absoluteTransform.point({
+	                x: ref.points()[2],
+	                y: ref.points()[3],
+	            });
 	            const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
 	            const shape = new KonvaArrow(null, ref);
 	            const arrow = {
@@ -13217,6 +13252,8 @@
 	            src,
 	            width,
 	            height,
+	            maxWidth: this._konvaStage.width() - position.x,
+	            maxHeight: this._konvaStage.height() - position.y,
 	            id,
 	        });
 	        this.addObject(konvaImage);