@inweb/viewer-visualize 25.5.4 → 25.6.1

package/dist/viewer-visualize.module.js

@@ -2999,6 +2999,7 @@ var MarkupType;
 var MarkupMode;
 
 (function(MarkupMode) {
+    MarkupMode["SelectMarkup"] = "SelectMarkup";
     MarkupMode["Line"] = "Line";
     MarkupMode["Text"] = "Text";
     MarkupMode["Rectangle"] = "Rectangle";
@@ -3062,7 +3063,7 @@ class KonvaLine {
         });
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
         }));
         this._ref.id(this._ref._id.toString());
     }
@@ -3163,13 +3164,20 @@ class KonvaText {
         this._ref.width(this._ref.getTextWidth());
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
-            const newWidth = this._ref.width() * attrs.scaleX;
-            const newHeight = this._ref.height() * attrs.scaleY;
-            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 50;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
+            if (scaleByX) {
                 this._ref.width(newWidth);
             }
-            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
+            if (scaleByY) {
                 this._ref.height(newHeight);
             }
             this._ref.scale({
@@ -3259,14 +3267,22 @@ class KonvaRectangle {
         });
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
-            const newWidth = this._ref.width() * attrs.scaleX;
-            const newHeight = this._ref.height() * attrs.scaleY;
-            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
-                this.setWidth(newWidth);
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 50;
+            const minHeight = 50;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < minHeight) newHeight = minHeight;
+            if (scaleByX) {
+                this._ref.width(newWidth);
             }
-            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
-                this.setHeight(newHeight);
+            if (scaleByY) {
+                this._ref.height(newHeight);
             }
             this._ref.scale({
                 x: 1,
@@ -3361,14 +3377,34 @@ class KonvaEllipse {
         });
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
-            const newRadiusX = this._ref.radiusX() * attrs.scaleX;
-            const newRadiusY = this._ref.radiusY() * attrs.scaleY;
-            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
-                this.setRadiusX(newRadiusX);
-            }
-            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
-                this.setRadiusY(newRadiusY);
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newRadiusX = this._ref.radiusX();
+            if (scaleByX) newRadiusX *= attrs.scaleX;
+            let newRadiusY = this._ref.radiusY();
+            if (scaleByY) newRadiusY *= attrs.scaleY;
+            const minRadiusX = 25;
+            const minRadiusY = 25;
+            if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
+            if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
+            if (e.evt.ctrlKey || e.evt.shiftKey) {
+                if (scaleByX) {
+                    this._ref.radius({
+                        x: newRadiusX,
+                        y: newRadiusX
+                    });
+                } else {
+                    this._ref.radius({
+                        x: newRadiusY,
+                        y: newRadiusY
+                    });
+                }
+            } else {
+                this._ref.radius({
+                    x: newRadiusX,
+                    y: newRadiusY
+                });
             }
             this._ref.scale({
                 x: 1,
@@ -3461,7 +3497,7 @@ class KonvaArrow {
         });
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
         }));
         this._ref.id(this._ref._id.toString());
     }
@@ -3568,14 +3604,28 @@ class KonvaImage {
         this._canvasImage.src = params.src;
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
-            const newWidth = this._ref.width() * attrs.scaleX;
-            const newHeight = this._ref.height() * attrs.scaleY;
-            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
-                this.setWidth(newWidth);
-            }
-            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
-                this.setHeight(newHeight);
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            if (e.evt.ctrlKey || e.evt.shiftKey) {
+                if (scaleByX) {
+                    this._ref.width(newWidth);
+                    this._ref.height(newWidth * this._ratio);
+                } else {
+                    this._ref.width(newHeight / this._ratio);
+                    this._ref.height(newHeight);
+                }
+            } else {
+                if (scaleByX) {
+                    this._ref.width(newWidth);
+                }
+                if (scaleByY) {
+                    this._ref.height(newHeight);
+                }
             }
             this._ref.scale({
                 x: 1,
@@ -3725,23 +3775,22 @@ class KonvaCloud {
         this._ref.className = "Cloud";
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
-            const newWidth = this._ref.width() * attrs.scaleX;
-            const newHeight = this._ref.height() * attrs.scaleY;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
             const minWidth = 100;
             const minHeight = 100;
-            if (newWidth < minWidth || newHeight < minHeight) {
-                this._ref.scale({
-                    x: 1,
-                    y: 1
-                });
-                return;
-            }
-            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
-                this.setWidth(newWidth);
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < minHeight) newHeight = minHeight;
+            if (scaleByX) {
+                this._ref.width(newWidth);
             }
-            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
-                this.setHeight(newHeight);
+            if (scaleByY) {
+                this._ref.height(newHeight);
             }
             this._ref.scale({
                 x: 1,
@@ -3819,7 +3868,10 @@ class KonvaCloud {
     }
 }
 
-const MarkupMode2Konva = new Map([ [ MarkupMode.Line, {
+const MarkupMode2Konva = new Map([ [ MarkupMode.SelectMarkup, {
+    name: "SelectMarkup",
+    initializer: () => {}
+} ], [ MarkupMode.Line, {
     name: "Line",
     initializer: ref => new KonvaLine(null, ref)
 } ], [ MarkupMode.Text, {
@@ -3848,6 +3900,8 @@ class KonvaMarkup {
         this._zIndex = 1;
         this._markupContainerName = "markupContainer";
         this.lineWidth = 4;
+        this.lineType = "solid";
+        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(" ");
@@ -3935,8 +3989,9 @@ class KonvaMarkup {
         const hex = new MarkupColor(r, g, b).HexColor;
         Object.values(MarkupMode).forEach((mode => {
             this.konvaLayerFind(mode).forEach((x => {
-                const konvaObj = MarkupMode2Konva.get(mode).initializer(x);
-                if (konvaObj.setColor) konvaObj.setColor(hex);
+                var _a;
+                const konvaObj = (_a = MarkupMode2Konva.get(mode)) === null || _a === void 0 ? void 0 : _a.initializer(x);
+                if (konvaObj && konvaObj.setColor) konvaObj.setColor(hex);
             }));
         }));
         this._konvaLayer.draw();
@@ -4152,6 +4207,7 @@ class KonvaMarkup {
             const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x => x.parent instanceof Konva.Layer));
             return konvaShapes;
         }
+        return [];
     }
     initializeKonva() {
         this._konvaStage = new Konva.Stage({
@@ -4166,7 +4222,9 @@ class KonvaMarkup {
         stage.add(layer);
         this._konvaLayer = layer;
         const transformer = new Konva.Transformer({
-            shouldOverdrawWholeArea: false
+            shouldOverdrawWholeArea: false,
+            keepRatio: false,
+            flipEnabled: false
         });
         this._konvaTransformer = transformer;
         layer.add(transformer);
@@ -4305,7 +4363,7 @@ class KonvaMarkup {
                 transformer.nodes([]);
                 return;
             }
-            if (this._markupMode === MarkupMode.Text) {
+            if (this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.SelectMarkup) {
                 if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
                     if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
                         x: e.target.attrs.x,
@@ -4316,7 +4374,7 @@ class KonvaMarkup {
                     this.removeTextInput();
                 }
             }
-            if (this._markupMode === MarkupMode.Image) {
+            if (this._markupMode === MarkupMode.Image || this._markupMode === MarkupMode.SelectMarkup) {
                 if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
                     if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
                         x: e.target.attrs.x,
@@ -4388,9 +4446,9 @@ class KonvaMarkup {
             lines.push({
                 id: konvaLine.id(),
                 points: worldPoints.map((p => this.getPoint3dFromArray(p))),
-                color: konvaLine.getColor() || "ff0000",
-                type: konvaLine.getLineType() || "solid",
-                width: konvaLine.getLineWidth() || 3
+                color: konvaLine.getColor() || "#ff0000",
+                type: konvaLine.getLineType() || this.lineType,
+                width: konvaLine.getLineWidth() || this.lineWidth
             });
         }));
         return lines;
@@ -4598,7 +4656,7 @@ class KonvaMarkup {
         }
         const konvaLine = new KonvaLine({
             points: points,
-            type: type || "solid",
+            type: type || this.lineType,
             width: width || this.lineWidth,
             color: color || this._markupColor.HexColor,
             id: id
@@ -4705,7 +4763,7 @@ class KonvaMarkup {
                 },
                 text: specifiedText,
                 rotation: angle,
-                fontSize: fontSize,
+                fontSize: fontSize || this.fontSize,
                 color: color || this._markupColor.HexColor,
                 id: id
             });
@@ -4925,7 +4983,8 @@ class VisualizeMarkup {
             g: 0,
             b: 0
         };
-        this.lineWidth = 0;
+        this.lineWidth = 4;
+        this.fontSize = 34;
     }
     initialize(viewer, canvas, canvasEvents) {
         this._viewer = viewer;