@inweb/viewer-visualize 25.5.4 → 25.6.1

package/dist/viewer-visualize.js

@@ -3060,6 +3060,7 @@
      */
     var MarkupMode;
     (function (MarkupMode) {
+        MarkupMode["SelectMarkup"] = "SelectMarkup";
         MarkupMode["Line"] = "Line";
         MarkupMode["Text"] = "Text";
         MarkupMode["Rectangle"] = "Rectangle";
@@ -14590,8 +14591,8 @@
             });
             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());
         }
@@ -14692,14 +14693,25 @@
             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) > 10e-6) {
+                if (attrs.rotation !== this._ref.rotation())
+                    this._ref.rotation(attrs.rotation);
+                const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+                const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+                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) > 10e-6) {
+                if (scaleByY) {
                     this._ref.height(newHeight);
                 }
                 this._ref.scale({ x: 1, y: 1 });
@@ -14784,15 +14796,27 @@
             });
             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) > 10e-6) {
-                    this.setWidth(newWidth);
+                if (attrs.rotation !== this._ref.rotation())
+                    this._ref.rotation(attrs.rotation);
+                const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+                const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+                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) > 10e-6) {
-                    this.setHeight(newHeight);
+                if (scaleByY) {
+                    this._ref.height(newHeight);
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -14882,15 +14906,32 @@
             });
             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) > 10e-6) {
-                    this.setRadiusX(newRadiusX);
+                if (attrs.rotation !== this._ref.rotation())
+                    this._ref.rotation(attrs.rotation);
+                const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+                const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+                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 });
+                    }
                 }
-                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-                    this.setRadiusY(newRadiusY);
+                else {
+                    this._ref.radius({ x: newRadiusX, y: newRadiusY });
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -14979,8 +15020,8 @@
             });
             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());
         }
@@ -15082,15 +15123,33 @@
             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) > 10e-6) {
-                    this.setWidth(newWidth);
+                if (attrs.rotation !== this._ref.rotation())
+                    this._ref.rotation(attrs.rotation);
+                const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+                const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+                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);
+                    }
                 }
-                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-                    this.setHeight(newHeight);
+                else {
+                    if (scaleByX) {
+                        this._ref.width(newWidth);
+                    }
+                    if (scaleByY) {
+                        this._ref.height(newHeight);
+                    }
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -15223,21 +15282,27 @@
             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) > 10e-6;
+                const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+                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) > 10e-6) {
-                    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) > 10e-6) {
-                    this.setHeight(newHeight);
+                if (scaleByY) {
+                    this._ref.height(newHeight);
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -15314,6 +15379,13 @@
     ///////////////////////////////////////////////////////////////////////////////
     // move to separate class and create factory with enum?
     const MarkupMode2Konva = new Map([
+        [
+            MarkupMode.SelectMarkup,
+            {
+                name: "SelectMarkup",
+                initializer: () => { },
+            },
+        ],
         [
             MarkupMode.Line,
             {
@@ -15384,6 +15456,8 @@
             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
@@ -15477,8 +15551,9 @@
             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)
+                    var _a;
+                    const konvaObj = (_a = MarkupMode2Konva.get(mode)) === null || _a === void 0 ? void 0 : _a.initializer(x);
+                    if (konvaObj && konvaObj.setColor)
                         konvaObj.setColor(hex);
                 });
             });
@@ -15679,6 +15754,7 @@
                 const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x) => x.parent instanceof Konva.Layer);
                 return konvaShapes;
             }
+            return [];
         }
         initializeKonva() {
             // first we need Konva core things: stage and layer
@@ -15693,6 +15769,8 @@
             this._konvaLayer = layer;
             const transformer = new Konva.Transformer({
                 shouldOverdrawWholeArea: false,
+                keepRatio: false,
+                flipEnabled: false,
             });
             this._konvaTransformer = transformer;
             layer.add(transformer);
@@ -15823,7 +15901,7 @@
                     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);
@@ -15835,7 +15913,7 @@
                         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);
@@ -15923,9 +16001,9 @@
                 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;
@@ -16115,7 +16193,7 @@
             }
             const konvaLine = new KonvaLine({
                 points,
-                type: type || "solid",
+                type: type || this.lineType,
                 width: width || this.lineWidth,
                 color: color || this._markupColor.HexColor,
                 id,
@@ -16222,7 +16300,7 @@
                     position: { x: position.x, y: position.y },
                     text: specifiedText,
                     rotation: angle,
-                    fontSize,
+                    fontSize: fontSize || this.fontSize,
                     color: color || this._markupColor.HexColor,
                     id,
                 });
@@ -16444,7 +16522,8 @@
     class VisualizeMarkup {
         constructor() {
             this._markupColor = { r: 255, g: 0, b: 0 };
-            this.lineWidth = 0;
+            this.lineWidth = 4;
+            this.fontSize = 34;
         }
         initialize(viewer, canvas, canvasEvents) {
             this._viewer = viewer;