@inweb/viewer-visualize 25.4.11 → 25.5.3

package/lib/Viewer/Markup/IMarkup.d.ts

@@ -15,6 +15,7 @@ export declare enum MarkupType {
  * "Text" markup objects are supported.
  */
 export declare enum MarkupMode {
+    SelectMarkup = "SelectMarkup",
     Line = "Line",
     Text = "Text",
     Rectangle = "Rectangle",
@@ -28,9 +29,17 @@ export declare enum MarkupMode {
  */
 export interface IMarkup {
     /**
-     * Width of the markup object line
+     * Width of the markup object line. Default is 4.
      */
     lineWidth: number;
+    /**
+     * Type of the Line markup object. Available types: "solid", "dot", "dash". Default is "solid".
+     */
+    lineType: string;
+    /**
+     * Font size of the markup text. Default is 34.
+     */
+    fontSize: number;
     /**
      * Start method to init Markup support for the Viewer instance.
      *

package/lib/Viewer/Markup/Impl/Konva/KonvaMarkup.d.ts

@@ -1,4 +1,4 @@
-import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
+import { ChangeActiveDraggerEvent, IViewpoint, LineType, PanEvent } from "@inweb/viewer-core";
 import { IMarkup } from "../../IMarkup";
 import { Viewer } from "../../../Viewer";
 import { OdBaseDragger } from "../../../Draggers/Common/OdBaseDragger";
@@ -23,6 +23,8 @@ export declare class KonvaMarkup implements IMarkup {
     private _zIndex;
     private readonly _markupContainerName;
     lineWidth: number;
+    lineType: LineType;
+    fontSize: number;
     initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents?: string[]): void;
     dispose(): void;
     changeActiveDragger: (event: ChangeActiveDraggerEvent) => void;

package/lib/Viewer/Markup/Impl/Visualize/VisualizeMarkup.d.ts

@@ -11,6 +11,8 @@ export declare class VisualizeMarkup implements IMarkup {
         b: number;
     };
     lineWidth: number;
+    lineType: "solid";
+    fontSize: number;
     initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[]): void;
     dispose(): void;
     getDraggers(): Map<string, typeof OdBaseDragger>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "25.4.11",
+  "version": "25.5.3",
   "description": "3D CAD and BIM data Viewer powered by Visualize",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,9 +29,9 @@
     "ts-docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.4.7",
-    "@inweb/eventemitter2": "~25.4.7",
-    "@inweb/viewer-core": "~25.4.7"
+    "@inweb/client": "~25.4.11",
+    "@inweb/eventemitter2": "~25.4.11",
+    "@inweb/viewer-core": "~25.4.11"
   },
   "devDependencies": {
     "canvas": "^2.11.2",
@@ -41,5 +41,5 @@
     "canvas": "^2.11.2",
     "konva": "^9.2.0"
   },
-  "visualizeJS": "https://opencloud.azureedge.net/libs/visualizejs/25.4/Visualize.js"
+  "visualizeJS": "https://opencloud.azureedge.net/libs/visualizejs/25.5/Visualize.js"
 }

package/src/Viewer/Markup/Api/Impl/Konva/KonvaEllipse.ts

@@ -44,6 +44,14 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
       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);
       }

package/src/Viewer/Markup/Api/Impl/Konva/KonvaRectangle.ts

@@ -42,8 +42,16 @@ export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
 
       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);

package/src/Viewer/Markup/Api/Impl/Konva/KonvaText.ts

@@ -36,6 +36,8 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
       rotation: params.rotation ?? 0,
     });
 
+    this._ref.width(this._ref.getTextWidth());
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
@@ -44,12 +46,19 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
       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 });

package/src/Viewer/Markup/IMarkup.ts

@@ -41,6 +41,7 @@ export enum MarkupType {
  * "Text" markup objects are supported.
  */
 export enum MarkupMode {
+  SelectMarkup = "SelectMarkup",
   Line = "Line",
   Text = "Text",
   Rectangle = "Rectangle",
@@ -55,10 +56,20 @@ export enum MarkupMode {
  */
 export interface IMarkup {
   /**
-   * Width of the markup object line
+   * Width of the markup object line. Default is 4.
    */
   lineWidth: number;
 
+  /**
+   * Type of the Line markup object. Available types: "solid", "dot", "dash". Default is "solid".
+   */
+  lineType: string;
+
+  /**
+   * Font size of the markup text. Default is 34.
+   */
+  fontSize: number;
+
   /**
    * Start method to init Markup support for the Viewer instance.
    *

package/src/Viewer/Markup/Impl/Konva/KonvaMarkup.ts

@@ -52,6 +52,13 @@ class KonvaShape {
 
 // move to separate class and create factory with enum?
 const MarkupMode2Konva = new Map<MarkupMode, KonvaShape>([
+  [
+    MarkupMode.SelectMarkup,
+    {
+      name: "SelectMarkup",
+      initializer: () => {},
+    },
+  ],
   [
     MarkupMode.Line,
     {
@@ -140,6 +147,8 @@ export class KonvaMarkup implements IMarkup {
   private readonly _markupContainerName = "markupContainer";
 
   public lineWidth = 4;
+  public lineType: LineType = "solid";
+  public fontSize = 34;
 
   initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[] = []): void {
     if (!Konva)
@@ -261,8 +270,8 @@ export class KonvaMarkup implements IMarkup {
     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);
+        const konvaObj = MarkupMode2Konva.get(mode)?.initializer(x);
+        if (konvaObj && konvaObj.setColor) konvaObj.setColor(hex);
       });
     });
 
@@ -500,6 +509,7 @@ export class KonvaMarkup implements IMarkup {
       const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x) => x.parent instanceof Konva.Layer);
       return konvaShapes;
     }
+    return [];
   }
 
   private initializeKonva(): any {
@@ -516,6 +526,7 @@ export class KonvaMarkup implements IMarkup {
 
     const transformer = new Konva.Transformer({
       shouldOverdrawWholeArea: false,
+      keepRatio: false,
     });
 
     this._konvaTransformer = transformer;
@@ -656,29 +667,33 @@ export class KonvaMarkup implements IMarkup {
         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 (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();
+        }
       }
 
-      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 (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") {
@@ -761,9 +776,9 @@ export class KonvaMarkup implements IMarkup {
       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,
       });
     });
 
@@ -1051,7 +1066,7 @@ export class KonvaMarkup implements IMarkup {
 
     const konvaLine = new KonvaLine({
       points,
-      type: type || "solid",
+      type: type || this.lineType,
       width: width || this.lineWidth,
       color: color || this._markupColor.HexColor,
       id,
@@ -1073,7 +1088,7 @@ export class KonvaMarkup implements IMarkup {
       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);
         }
@@ -1176,7 +1191,7 @@ export class KonvaMarkup implements IMarkup {
         position: { x: position.x, y: position.y },
         text: specifiedText,
         rotation: angle,
-        fontSize,
+        fontSize: fontSize || this.fontSize,
         color: color || this._markupColor.HexColor,
         id,
       });

package/src/Viewer/Markup/Impl/Visualize/VisualizeMarkup.ts

@@ -11,7 +11,9 @@ export class VisualizeMarkup implements IMarkup {
   private _viewer: Viewer;
   protected _markupColor = { r: 255, g: 0, b: 0 };
 
-  public lineWidth = 0;
+  public lineWidth = 4;
+  public lineType: "solid";
+  public fontSize = 34;
 
   initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[]): void {
     this._viewer = viewer;