@inweb/viewer-visualize 25.4.4 → 25.4.7

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

@@ -36,6 +36,25 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
       strokeScaleEnabled: false,
     });
 
+    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);
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 
@@ -52,7 +71,7 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
   }
 
   setRadiusX(r: number) {
-    this._ref.radius({ x: r, y: this._ref.radiusY() });
+    this._ref.radiusX(r);
   }
 
   getRadiusY(): number {
@@ -60,7 +79,7 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
   }
 
   setRadiusY(r: number) {
-    this._ref.radius({ x: this._ref.radiusX(), y: r });
+    this._ref.radiusY(r);
   }
 
   getLineWidth(): number {

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

@@ -40,6 +40,25 @@ export class KonvaImage implements IMarkupImage {
 
     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 (Math.abs(attrs.scaleY - 1) > 10e-6) {
+        this.setHeight(newHeight);
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 
@@ -85,15 +104,6 @@ export class KonvaImage implements IMarkupImage {
     return "image";
   }
 
-  // we can break Liskov Substitution Principle, need to use separate IColorable
-  // getColor(): string {
-  //   return this._ref.fill();
-  // }
-
-  // setColor(hex: string) {
-  //   this._ref.fill(hex);
-  // }
-
   getRotation(): number {
     return this._ref.rotation();
   }

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

@@ -38,6 +38,12 @@ export class KonvaLine implements IMarkupLine, IMarkupColorable {
       dash: LineTypeSpecs.get(params.type) || [],
     });
 
+    this._ref.on("transform", (e) => {
+      const attrs = e.target.attrs;
+
+      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 

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

@@ -37,6 +37,25 @@ export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
       strokeScaleEnabled: false,
     });
 
+    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);
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 

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

@@ -36,6 +36,25 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
       rotation: params.rotation ?? 0,
     });
 
+    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.setFontSize(Math.round((this.getFontSize() * newWidth) / this._ref.width()));
+      }
+
+      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+        this.setFontSize(Math.round((this.getFontSize() * newHeight) / this._ref.height()));
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
     this._ref.id(this._ref._id.toString());
   }
 

package/src/Viewer/Markup/IMarkup.ts

@@ -1,15 +1,45 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
 import { IViewpoint } from "@inweb/viewer-core";
 
 import { OdBaseDragger } from "../Draggers/Common/OdBaseDragger";
 import { Viewer } from "../Viewer";
 import { IMarkupObject } from "./Api/IMarkupObject";
 
+/**
+ * Version of the markup support. Old = "Visualize", New = "Konva"
+ */
 export enum MarkupType {
   Unknown,
   Konva = "Konva",
   Visualize = "Visualize",
 }
 
+/**
+ * Defines type of markup object. For old Visualize markup ({@link MarkupType}) only "Line" and
+ * "Text" markup objects are supported.
+ */
 export enum MarkupMode {
   Line = "Line",
   Text = "Text",
@@ -20,24 +50,114 @@ export enum MarkupMode {
   Cloud = "Cloud",
 }
 
+/**
+ * Specifies parameters and methods of the Markup object
+ */
 export interface IMarkup {
+  /**
+   * Width of the markup object line
+   */
   lineWidth: number;
 
+  /**
+   * Start method to init Markup support for the Viewer instance.
+   *
+   * @param {Viewer} viewer - current {@link Viewer} object
+   * @param canvas - {@link HTMLCanvasElement} of the Viewer
+   * @param canvasEvents - list of used events of the Viewer
+   */
   initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[]): void;
+
+  /**
+   * Releases all resources allocated by this `Markup` instance. Call this method before
+   * release the `Markup` instance.
+   */
   dispose(): void;
 
+  /**
+   * Provide Javascript Map with all {@link OdBaseDragger} draggers used by Markup. We need this
+   * map to register in {@link Viewer.registerDragger}
+   */
   getDraggers(): Map<string, typeof OdBaseDragger>;
+
+  /**
+   * Remove markup overlay.
+   */
   clearOverlay(): void;
+
+  /**
+   * Set markup color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
   setMarkupColor(r: number, g: number, b: number): void;
+
+  /**
+   * Get markup color.
+   *
+   * @returns Color with `RGB` values.
+   */
   getMarkupColor(): { r: number; g: number; b: number };
+
+  /**
+   * Colorize all markup entities with the specified color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
   colorizeAllMarkup(r: number, g: number, b: number): void;
+
+  /**
+   * Colorize all selected markup entities with the specified color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
   colorizeSelectedMarkups(r: number, g: number, b: number): void;
+
+  /**
+   * Draw a viewpoint. To get a list of available model viewpoints, use the
+   *
+   * @param viewpoint - Viewpoint data.
+   */
   setViewpoint(viewpoint: IViewpoint): void;
+
+  /**
+   * Create a {@link IViewpoint} viewpoint
+   */
   getViewpoint(): IViewpoint;
 
+  /**
+   * Create a Markup object
+   *
+   * @param type - string identificator of Markup type
+   * @param params - object with parameters of Markup
+   */
   createObject(type: string, params: any): IMarkupObject;
+
+  /**
+   * Get array of all existed Markup objects
+   */
   getObjects(): IMarkupObject[];
+
+  /**
+   * Get array of currently selected Markup objects
+   */
   getSelectedObjects(): IMarkupObject[];
+
+  /**
+   * Select list of Markup objects
+   *
+   * @param objects
+   */
   selectObjects(objects: IMarkupObject[]): void;
+
+  /**
+   * Clear list of currently selected Markup objects
+   */
   clearSelected(): void;
 }

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

@@ -1,3 +1,26 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
 import Konva from "konva";
 import { ChangeActiveDraggerEvent, IViewpoint, LineType, PanEvent } from "@inweb/viewer-core";
 
@@ -295,7 +318,7 @@ export class KonvaMarkup implements IMarkup {
     let zIndex = this._zIndex;
 
     // TODO: factory?
-    switch (type) {
+    switch (type.toLocaleLowerCase()) {
       case "line":
         object = new KonvaLine(params);
         zIndex = 1;
@@ -1269,11 +1292,13 @@ export class KonvaMarkup implements IMarkup {
     width?: number,
     height?: number,
     id?: string
-  ): void {
+  ): IMarkupImage | void {
     if (!position) return;
 
+    let konvaImage: IMarkupImage;
+
     if (src) {
-      const konvaImage = new KonvaImage({
+      konvaImage = new KonvaImage({
         position,
         src,
         width,
@@ -1294,6 +1319,6 @@ export class KonvaMarkup implements IMarkup {
 
     this.removeImageInput();
 
-    return;
+    return konvaImage;
   }
 }

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

@@ -1,3 +1,26 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
 export class MarkupColor {
   public R: number;
   public G: number;
@@ -12,14 +35,31 @@ export class MarkupColor {
     return "#" + this._hex;
   }
 
+  /**
+   * Color as object with r,g,b properties
+   */
   get RGB(): { r: number; g: number; b: number } {
     return { r: this.R, g: this.G, b: this.B };
   }
 
+  /**
+   * Create an instance of Color
+   *
+   * @param r - Red color in [0,255] range
+   * @param g - Green color in [0,255] range
+   * @param b - Blue color in [0,255] range
+   */
   constructor(r: number, g: number, b: number) {
     this.setColor(r, g, b);
   }
 
+  /**
+   * Set Color for current instance
+   *
+   * @param r - Red color in [0,255] range
+   * @param g - Green color in [0,255] range
+   * @param b - Blue color in [0,255] range
+   */
   public setColor(r: number, g: number, b: number): void {
     this.R = r;
     this.G = g;

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

@@ -207,10 +207,6 @@ export class VisualizeMarkup implements IMarkup {
     return viewpoint;
   }
 
-  getLayer(): any {
-    throw new Error("Not implemented yet");
-  }
-
   createObject(type: string, params: any): IMarkupObject {
     throw new Error("Not implemented yet");
   }

package/src/Viewer/Markup/MarkupFactory.ts

@@ -1,8 +1,37 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
 import { IMarkup, MarkupType } from "./IMarkup";
 import { KonvaMarkup } from "./Impl/Konva/KonvaMarkup";
 import { VisualizeMarkup } from "./Impl/Visualize/VisualizeMarkup";
 
 export class MarkupFactory {
+  /**
+   * Initialize {@link IMarkup} instance
+   *
+   * @param markupType - Specifies version of the markup support. Two variants of markup
+   *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
+   */
   public static createMarkup(markupType: MarkupType): IMarkup {
     let markup;
     switch (markupType) {

package/src/Viewer/Viewer.ts

@@ -1,5 +1,5 @@
 ///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
 // All rights reserved.
 //
 // This software and its documentation and related materials are owned by
@@ -14,7 +14,7 @@
 //
 //   This application incorporates Open Design Alliance software pursuant to a
 //   license agreement with Open Design Alliance.
-//   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
 //   All rights reserved.
 //
 // By use of this software, its documentation or related materials, you
@@ -104,6 +104,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If
    *   the auto-update is disabled, you need to update the `VisualizeJS` viewer and the active
    *   dragger manually using the `update` event. Default is `true`.
+   * @param params.markupType - Specifies version of the markup support. Two variants of markup
+   *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
    */
   constructor(
     client?: Client,