@inweb/viewer-visualize 25.5.4 → 25.6.1

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.5.4",
+  "version": "25.6.1",
   "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.10",
-    "@inweb/eventemitter2": "~25.4.10",
-    "@inweb/viewer-core": "~25.4.10"
+    "@inweb/client": "~25.6.1",
+    "@inweb/eventemitter2": "~25.6.1",
+    "@inweb/viewer-core": "~25.6.1"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

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

@@ -59,7 +59,7 @@ export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
     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());

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

@@ -95,25 +95,28 @@ export class KonvaCloud implements IMarkupCloud, IMarkupColorable {
     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);
 
-      const newWidth = this._ref.width() * attrs.scaleX;
-      const newHeight = this._ref.height() * attrs.scaleY;
+      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 (newWidth < minWidth) newWidth = minWidth;
+      if (newHeight < minHeight) newHeight = minHeight;
 
-      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-        this.setWidth(newWidth);
+      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 });

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

@@ -39,17 +39,30 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
     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 (Math.abs(attrs.scaleY - 1) > 10e-6) {
-        this.setRadiusY(newRadiusY);
+      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 });
+        }
+      } else {
+        this._ref.radius({ x: newRadiusX, y: newRadiusY });
       }
 
       this._ref.scale({ x: 1, y: 1 });

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

@@ -43,17 +43,31 @@ export class KonvaImage implements IMarkupImage {
     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 (Math.abs(attrs.scaleY - 1) > 10e-6) {
-        this.setHeight(newHeight);
+      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);
+        }
+      } else {
+        if (scaleByX) {
+          this._ref.width(newWidth);
+        }
+        if (scaleByY) {
+          this._ref.height(newHeight);
+        }
       }
 
       this._ref.scale({ x: 1, y: 1 });

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

@@ -41,7 +41,7 @@ export class KonvaLine implements IMarkupLine, IMarkupColorable {
     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());

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

@@ -40,17 +40,28 @@ export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
     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);
 
-      const newWidth = this._ref.width() * attrs.scaleX;
-      const newHeight = this._ref.height() * attrs.scaleY;
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
 
-      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-        this.setWidth(newWidth);
+      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 });

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

@@ -41,16 +41,26 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
     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);
 
-      const newWidth = this._ref.width() * attrs.scaleX;
-      const newHeight = this._ref.height() * attrs.scaleY;
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
 
-      if (Math.abs(attrs.scaleX - 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);
       }
 

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,8 @@ export class KonvaMarkup implements IMarkup {
 
     const transformer = new Konva.Transformer({
       shouldOverdrawWholeArea: false,
+      keepRatio: false,
+      flipEnabled: false,
     });
 
     this._konvaTransformer = transformer;
@@ -656,7 +668,7 @@ export class KonvaMarkup implements IMarkup {
         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);
@@ -674,7 +686,7 @@ export class KonvaMarkup implements IMarkup {
         }
       }
 
-      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);
@@ -765,9 +777,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,
       });
     });
 
@@ -1055,7 +1067,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,
@@ -1180,7 +1192,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;