@inweb/viewer-visualize 25.6.7 → 25.7.1

package/src/Viewer/Viewer.ts

@@ -25,18 +25,20 @@ import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, File, Model } from "@inweb/client";
 import {
   CANVAS_EVENTS,
+  CanvasEventMap,
   commands,
+  Dragger,
   IClippingPlane,
-  IOptions,
+  IDragger,
   IOrthogonalCamera,
-  IViewpoint,
+  IOptions,
   IViewer,
+  IViewpoint,
   Options,
   OptionsEventMap,
   ViewerEventMap,
 } from "@inweb/viewer-core";
 
-import { OdBaseDragger } from "./Draggers/Common/OdBaseDragger";
 import { MeasureLineDragger } from "./Draggers/MeasureLineDragger/index";
 import { OdaWalkDragger } from "./Draggers/OdaWalkDragger";
 import { OdCuttingPlaneXAxisDragger } from "./Draggers/OdCuttingPlaneXAxisDragger";
@@ -52,20 +54,22 @@ import { GestureManager } from "./Draggers/Common/GestureManager";
 
 import { loadVisualizeJs } from "./utils";
 import { LoaderFactory } from "./Loaders/LoaderFactory";
-import { MarkupFactory } from "./Markup/MarkupFactory";
-import { IMarkup, MarkupType } from "./Markup/IMarkup";
-
-const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
+import { IMarkup } from "./Markup/IMarkup";
+import { IWorldTransform } from "./Markup/IWorldTransform";
+import { MarkupFactory, MarkupType } from "./Markup/MarkupFactory";
 
 const isExist = (value) => value !== undefined && value !== null;
 
 /**
  * The `Client.js` library class that provides methods to integrate with the
- * [VisualizeJS](https://cloud.opendesign.com/docs/index.html#/visualizejs) library.
+ * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs | VisualizeJS} library.
  */
 
-export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> implements IViewer {
-  private _activeDragger: OdBaseDragger | null;
+export class Viewer
+  extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap>
+  implements IViewer, IWorldTransform
+{
+  private _activeDragger: IDragger | null;
   private _zoomWheelDragger: OdZoomWheelDragger | null;
   private _gestureManager: GestureManager | null;
   private _enableAutoUpdate: boolean;
@@ -79,12 +83,12 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
 
   private canvaseventlistener: (event: Event) => void;
 
-  public draggerFactory: Map<string, typeof OdBaseDragger>;
+  public draggerFactory: Map<string, typeof Dragger>;
   public canvasEvents: string[];
   private frameId = 0;
   private _resizeObserver: ResizeObserver | undefined;
+  private _markup: IMarkup;
   public canvas: HTMLCanvasElement | undefined;
-  public markup: IMarkup;
 
   public _abortController: AbortController | undefined;
   public _abortControllerForRequestMap: Map<string, AbortController> | undefined;
@@ -102,10 +106,10 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    *   _Note: Your own `VisualizeJS` library version must match the version of the `Client.js`
    *   you are using._
    * @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}
+   *   the auto-update is disabled, you need to register the `update` event handler and update
+   *   the viewer and the active dragger manually. Default is `true`.
+   * @param params.markupType - Specifies type of the markup core: `Visualize` (deprecated) or
+   *   `Konva`. Default is `Konva`.
    */
   constructor(
     client?: Client,
@@ -123,9 +127,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     this._gestureManager = null;
     this._renderTime = 0;
 
-    this.markup = MarkupFactory.createMarkup(params.markupType ?? MarkupType.Konva);
-
-    this.draggerFactory = new Map<string, typeof OdBaseDragger>();
+    this.draggerFactory = new Map<string, typeof Dragger>();
     this.registerDragger("Pan", OdPanDragger);
     this.registerDragger("Orbit", OdOrbitDragger);
     this.registerDragger("Zoom", OdZoomDragger);
@@ -137,11 +139,6 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     this.registerDragger("CuttingPlaneZAxis", OdCuttingPlaneZAxisDragger);
     this.registerDragger("Walk", OdaWalkDragger);
 
-    const markupDraggers = this.markup.getDraggers();
-    markupDraggers?.forEach((value, key) => {
-      this.registerDragger(key, value);
-    });
-
     this.canvasEvents = CANVAS_EVENTS.slice();
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
@@ -151,17 +148,19 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
 
     this.render = this.render.bind(this);
     this.resize = this.resize.bind(this);
+
+    this._markup = MarkupFactory.createMarkup(params.markupType);
   }
 
   /**
-   * `VisualizeJS` parameters.
+   * Viewer options.
    */
   get options(): Options {
     return this._options;
   }
 
   /**
-   * `VisualizeJS` library URL. Use {@link Viewer#configure | configure()} to change library URL.
+   * `VisualizeJS` library URL. Use {@link configure | configure()} to change library URL.
    *
    * @readonly
    */
@@ -169,6 +168,15 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     return this._visualizeJsUrl;
   }
 
+  /**
+   * 2D markup core.
+   *
+   * @readonly
+   */
+  get markup(): IMarkup {
+    return this._markup;
+  }
+
   /**
    * Change the viewer configuration parameters.
    *
@@ -181,26 +189,19 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     return this;
   }
 
-  /**
-   * A [Viewer]{@link Viewer} event measuring progress of loading a `VisualizeJS` library.
-   *
-   * @property {string} type - `visualizeprogress`
-   * @property {number} loaded - A 64-bit unsigned integer value indicating the amount of work
-   *   already performed by the underlying process. The ratio of work done can be calculated by
-   *   dividing total by the value of this property.
-   * @property {number} total - A 64-bit unsigned integer representing the total amount of work
-   *   that the underlying process is in the progress of performing.
-   * @event visualizeprogress
-   */
-
   /**
    * Load `VisualizeJS` module and initialize it with the specified canvas. Call
-   * {@link Viewer#dispose | dispose()} to release allocated resources.
+   * {@link dispose | dispose()} to release allocated resources.
    *
-   * @async
-   * @param canvas - HTML `<canvas>` element for `VisualizeJS`.
+   * Fires:
+   *
+   * - {@link InitializeProgressEvent | initializeprogress}
+   *
+   * @param canvas -
+   *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement}
+   *   for `VisualizeJS`.
    * @param onProgress - A callback function that handles events measuring progress of loading
-   *   of the `VisualizeJS` library. Retrieves {@link event:visualizeprogress | visualizeprogress} event.
+   *   of the `VisualizeJS` library.
    */
   async initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this> {
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
@@ -228,7 +229,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
 
-    this.markup.initialize(this, canvas, this.canvasEvents);
+    this._markup.initialize(this.canvas, this.canvasEvents, this, this);
 
     this._resizeObserver = new ResizeObserver(this.resize);
     this._resizeObserver.observe(canvas.parentElement);
@@ -275,7 +276,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     if (this._resizeObserver) this._resizeObserver.disconnect();
     this._resizeObserver = undefined;
 
-    this.markup.dispose();
+    this._markup.dispose();
 
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
@@ -626,29 +627,28 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * @param name - Dragger name.
    * @param dragger - Dragger class.
    */
-  public registerDragger(name: string, dragger: typeof OdBaseDragger): void {
+  public registerDragger(name: string, dragger: typeof Dragger): void {
     this.draggerFactory.set(name, dragger);
   }
 
   /**
    * Returns active dragger instance or `null` if there is no active dragger.
    */
-  activeDragger(): any | null {
+  activeDragger(): IDragger | null {
     return this._activeDragger;
   }
 
   /**
-   * Set active dragger. `Viewer` must be {@link Viewer#initialize | initialized} before enable
-   * dragger or exception is thrown.
+   * Set active dragger. `Viewer` must be initialized before enable dragger or exception is thrown.
    *
    * Fires:
    *
    * - {@link ChangeActiveDraggerEvent | changeactivedragger}
    *
-   * @param name - Dragger name. Can be one of the {@link Viewer#draggers | draggers} list.
+   * @param name - Dragger name. Can be one of the {@link draggers} list.
    * @returns Returns active dragger instance or `null` if there is no dragger with the given name.
    */
-  setActiveDragger(name: string): OdBaseDragger | null {
+  setActiveDragger(name: string): IDragger | null {
     if (this._activeDragger?.name !== name) {
       if (this._activeDragger) {
         this._activeDragger.dispose();
@@ -703,43 +703,14 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * Remove markup overlay.
    */
   clearOverlay(): void {
-    this.markup.clearOverlay();
+    this._markup.clearOverlay();
   }
 
   /**
    * Synchronize markup overlay.
    */
   syncOverlay(): any {
-    if (!this.visualizeJs) return;
-
-    const visViewer = this.visViewer();
-    const activeView = visViewer.activeView;
-
-    let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
-    if (!overlayView) {
-      const overlayModel = visViewer.getMarkupModel();
-      const pDevice = visViewer.getActiveDevice();
-
-      overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
-      overlayView.addModel(overlayModel);
-
-      activeView.addSibling(overlayView);
-      pDevice.addView(overlayView);
-    }
-
-    overlayView.viewPosition = activeView.viewPosition;
-    overlayView.viewTarget = activeView.viewTarget;
-    overlayView.upVector = activeView.upVector;
-    overlayView.viewFieldWidth = activeView.viewFieldWidth;
-    overlayView.viewFieldHeight = activeView.viewFieldHeight;
-
-    const viewPort = overlayView.getViewport();
-    overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
-    overlayView.vportRect = activeView.vportRect;
-
-    this.update();
-
-    return overlayView;
+    return this._markup.syncOverlay();
   }
 
   /**
@@ -758,6 +729,46 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
     //return visViewer.activeView.upVector[1] >= 0.95;
   }
 
+  screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
+    return this.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+  }
+
+  worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
+    if (!this.visualizeJs) return position;
+
+    const activeView = this.visViewer().activeView;
+    const worldMatrix = activeView.worldToDeviceMatrix;
+    const worldPoint = this.visLib().Point3d.createFromArray([position.x, position.y, position.z]);
+
+    const devicePoint = worldPoint.transformBy(worldMatrix);
+    const result = { x: devicePoint.x / window.devicePixelRatio, y: devicePoint.y / window.devicePixelRatio };
+
+    devicePoint.delete();
+    worldPoint.delete();
+    worldMatrix.delete();
+    activeView.delete();
+
+    return result;
+  }
+
+  getScale(): { x: number; y: number; z: number } {
+    const result = { x: 1.0, y: 1.0, z: 1.0 };
+
+    const projMatrix = this.visViewer().activeView.projectionMatrix;
+    const tolerance = 1.0e-6;
+
+    const x = projMatrix.get(1, 1);
+    if (x > tolerance || x < -tolerance) result.x = 1 / result.x;
+
+    const y = projMatrix.get(1, 1);
+    if (y > tolerance || y < -tolerance) result.y = 1 / result.y;
+
+    const z = projMatrix.get(2, 2);
+    if (z > tolerance || z < -tolerance) result.z = 1 / result.z;
+
+    return result;
+  }
+
   /**
    * Returns a list of original handles for the selected entities.
    */
@@ -784,7 +795,6 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * Load model references into the viewer. References are images, fonts, or any other files to
    * correct rendering of the model.
    *
-   * @async
    * @param model - Instance of model with references. If a `File` instance is specified
    *   instead of a model, the file references will be loaded.
    */
@@ -839,9 +849,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
   /**
    * Loads a model of a file or assembly into the viewer.
    *
-   * This method requires a [Client]{@link Client | Client} instance to work. For standalone
-   * viewer instance use {@link Viewer#openVsfFile | openVsfFile()} or
-   * {@link Viewer#openVsfxFile | openVsfxFile()}.
+   * This method requires a {@link Client} instance to work. For standalone viewer instance use
+   * {@link openVsfFile | openVsfFile()} or {@link openVsfxFile | openVsfxFile()}.
    *
    * Fires:
    *
@@ -853,7 +862,6 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * - {@link GeometryEndEvent | geometryend}
    * - {@link GeometryErrorEvent | geometryerror}
    *
-   * @async
    * @param file - File or Assembly or Model instance to load. If a `File` instance with
    *   multiple models is specified, the default model will be loaded. If there is no default
    *   model, first availiable model will be loaded.
@@ -987,7 +995,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
   }
 
   /**
-   * Cancels asynchronous model loading started by {@link Viewer#open | open()}.
+   * Cancels asynchronous model loading started by {@link open | open()}.
    */
   cancel(): this {
     this._abortControllerForReferences?.abort();
@@ -1033,7 +1041,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * @returns Color with `RGB` values.
    */
   getMarkupColor(): { r: number; g: number; b: number } {
-    return this.markup.getMarkupColor();
+    return this._markup.getMarkupColor();
   }
 
   /**
@@ -1044,7 +1052,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * @param b - `Blue` part of color.
    */
   setMarkupColor(r = 255, g = 0, b = 0): void {
-    this.markup.setMarkupColor(r, g, b);
+    this._markup.setMarkupColor(r, g, b);
     const color = { r, g, b };
     this.emitEvent({ type: "changemarkupcolor", data: color });
   }
@@ -1057,7 +1065,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * @param b - `Blue` part of color.
    */
   colorizeAllMarkup(r = 255, g = 0, b = 0): void {
-    this.markup.colorizeAllMarkup(r, g, b);
+    this._markup.colorizeAllMarkup(r, g, b);
   }
 
   /**
@@ -1068,7 +1076,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
    * @param b - `Blue` part of color.
    */
   colorizeSelectedMarkups(r = 255, g = 0, b = 0): void {
-    this.markup.colorizeSelectedMarkups(r, g, b);
+    this._markup.colorizeSelectedMarkups(r, g, b);
   }
 
   /**
@@ -1096,22 +1104,22 @@ export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> impl
 
   /**
    * Draw a viewpoint. To get a list of available model viewpoints, use the
-   * {@link Model.getViewpoints()} or {@link File.getViewpoints()}.
+   * `Model.getViewpoints()` or `File.getViewpoints()` or `Assembly.getViewpoints()`.
    *
    * @param viewpoint - Viewpoint data.
    */
   drawViewpoint(viewpoint: IViewpoint): void {
     this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
     this.setClippingPlanes(viewpoint.clipping_planes);
-    this.markup.setViewpoint(viewpoint);
+    this._markup.setViewpoint(viewpoint);
   }
 
   /**
    * Create a viewpoint. To add a viewpoint to the list of model viewpoints, use the
-   * {@link Model.saveViewpoint()} or {@link File.saveViewpoint()}.
+   * `Model.saveViewpoint()` or `File.saveViewpoint()` or . `Assembly.saveViewpoint()`.
    */
   createViewpoint(): IViewpoint {
-    const vp = this.markup.getViewpoint();
+    const vp = this._markup.getViewpoint();
     vp.orthogonal_camera = this.getOrthogonalCameraSettings();
     vp.clipping_planes = this.getClippingPlanes();
 

package/src/Viewer/utils.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

package/src/index.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
@@ -26,3 +26,15 @@ import "./Viewer/Commands";
 export * from "@inweb/viewer-core";
 export { Viewer } from "./Viewer/Viewer";
 export { OdBaseDragger } from "./Viewer/Draggers/Common/OdBaseDragger";
+export { IMarkup } from "./Viewer/Markup/IMarkup";
+export { IMarkupArrow } from "./Viewer/Markup/Api/IMarkupArrow";
+export { IMarkupCloud } from "./Viewer/Markup/Api/IMarkupCloud";
+export { IMarkupColorable } from "./Viewer/Markup/Api/IMarkupColorable";
+export { IMarkupEllipse } from "./Viewer/Markup/Api/IMarkupEllipse";
+export { IMarkupImage } from "./Viewer/Markup/Api/IMarkupImage";
+export { IMarkupLine, MarkupLineType } from "./Viewer/Markup/Api/IMarkupLine";
+export { IMarkupRectangle } from "./Viewer/Markup/Api/IMarkupRectangle";
+export { IMarkupObject } from "./Viewer/Markup/Api/IMarkupObject";
+export { IMarkupText } from "./Viewer/Markup/Api/IMarkupText";
+export { IWorldTransform } from "./Viewer/Markup/IWorldTransform";
+export { MarkupType } from "./Viewer/Markup/MarkupFactory";