@inweb/viewer-visualize 25.4.11 → 25.5.0

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";
@@ -14689,17 +14690,23 @@
                 draggable: true,
                 rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0,
             });
+            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;
+                const minWidth = 50;
+                if (newWidth < minWidth || newHeight < Math.round(this.getFontSize())) {
+                    this._ref.scale({ x: 1, y: 1 });
+                    return;
+                }
                 if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-                    this.setFontSize(Math.round((this.getFontSize() * newWidth) / this._ref.width()));
+                    this._ref.width(newWidth);
                 }
                 if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-                    this.setFontSize(Math.round((this.getFontSize() * newHeight) / this._ref.height()));
+                    this._ref.height(newHeight);
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -14785,8 +14792,14 @@
                 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;
+                let newWidth = this._ref.width() * attrs.scaleX;
+                let newHeight = this._ref.height() * attrs.scaleY;
+                const minWidth = 50;
+                const minHeight = 50;
+                if (newWidth < minWidth || newHeight < minHeight) {
+                    this._ref.scale({ x: 1, y: 1 });
+                    return;
+                }
                 if (Math.abs(attrs.scaleX - 1) > 10e-6) {
                     this.setWidth(newWidth);
                 }
@@ -14885,6 +14898,12 @@
                     this.setRotation(attrs.rotation);
                 const newRadiusX = this._ref.radiusX() * attrs.scaleX;
                 const newRadiusY = this._ref.radiusY() * attrs.scaleY;
+                const minRadiusX = 25;
+                const minRadiusY = 25;
+                if (newRadiusX < minRadiusX || newRadiusY < minRadiusY) {
+                    this._ref.scale({ x: 1, y: 1 });
+                    return;
+                }
                 if (Math.abs(attrs.scaleX - 1) > 10e-6) {
                     this.setRadiusX(newRadiusX);
                 }
@@ -15313,6 +15332,13 @@
     ///////////////////////////////////////////////////////////////////////////////
     // move to separate class and create factory with enum?
     const MarkupMode2Konva = new Map([
+        [
+            MarkupMode.SelectMarkup,
+            {
+                name: "SelectMarkup",
+                initializer: () => { },
+            },
+        ],
         [
             MarkupMode.Line,
             {
@@ -15383,6 +15409,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
@@ -15476,8 +15504,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);
                 });
             });
@@ -15678,6 +15707,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
@@ -15692,6 +15722,7 @@
             this._konvaLayer = layer;
             const transformer = new Konva.Transformer({
                 shouldOverdrawWholeArea: false,
+                keepRatio: false,
             });
             this._konvaTransformer = transformer;
             layer.add(transformer);
@@ -15822,25 +15853,29 @@
                     transformer.nodes([]);
                     return;
                 }
-                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, y: e.target.attrs.y }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
-                    return;
-                }
-                else {
-                    this.removeTextInput();
-                }
-                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, y: e.target.attrs.y });
-                    return;
+                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, y: e.target.attrs.y }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
+                        return;
+                    }
+                    else {
+                        this.removeTextInput();
+                    }
                 }
-                else {
-                    this.removeImageInput();
+                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, y: e.target.attrs.y });
+                        return;
+                    }
+                    else {
+                        this.removeImageInput();
+                    }
                 }
                 if (transformer.nodes().filter((x) => x.className === "Cloud").length > 0 || e.target.className === "Cloud") {
                     transformer.rotateEnabled(false);
@@ -15918,9 +15953,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;
@@ -16110,7 +16145,7 @@
             }
             const konvaLine = new KonvaLine({
                 points,
-                type: type || "solid",
+                type: type || this.lineType,
                 width: width || this.lineWidth,
                 color: color || this._markupColor.HexColor,
                 id,
@@ -16130,7 +16165,7 @@
                 this._textInputRef.style.top = inputY + "px";
                 this._textInputRef.style.left = inputX + "px";
                 this._textInputRef.onkeydown = (event) => {
-                    if (event.key === "Enter") {
+                    if (event.key === "Enter" && !event.shiftKey) {
                         event.preventDefault();
                         this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
                     }
@@ -16217,7 +16252,7 @@
                     position: { x: position.x, y: position.y },
                     text: specifiedText,
                     rotation: angle,
-                    fontSize,
+                    fontSize: fontSize || this.fontSize,
                     color: color || this._markupColor.HexColor,
                     id,
                 });
@@ -16439,7 +16474,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;
@@ -16724,7 +16760,7 @@
          *   library instance or leave it blank to use the default URL defined by `Client.js`.
          */
         configure(params) {
-            this._visualizeJsUrl = params.visualizeJsUrl || "https://opencloud.azureedge.net/libs/visualizejs/25.4/Visualize.js";
+            this._visualizeJsUrl = params.visualizeJsUrl || "https://opencloud.azureedge.net/libs/visualizejs/master/Visualize.js";
             return this;
         }
         /**