@inweb/viewer-visualize 25.3.13

package/src/Viewer/Viewer.ts

@@ -0,0 +1,1183 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { EventEmitter2 } from "@inweb/eventemitter2";
+import { Assembly, Client, File, Model } from "@inweb/client";
+import {
+  CANVAS_EVENTS,
+  commands,
+  IClippingPlane,
+  IOrthogonalCamera,
+  IViewpoint,
+  IViewer,
+  Options,
+  OptionsData,
+  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";
+import { OdCuttingPlaneYAxisDragger } from "./Draggers/OdCuttingPlaneYAxisDragger";
+import { OdCuttingPlaneZAxisDragger } from "./Draggers/OdCuttingPlaneZAxisDragger";
+import { OdOrbitDragger } from "./Draggers/OdOrbitDragger";
+import { OdPanDragger } from "./Draggers/OdPanDragger";
+import { OdZoomDragger } from "./Draggers/OdZoomDragger";
+import { OdZoomWheelDragger } from "./Draggers/OdZoomWheelDragger";
+import { OdZoomWindowDragger } from "./Draggers/OdZoomWindowDragger/index";
+import { OrbitAroundBuildingDragger } from "./Draggers/OrbitAroundBuildingDragger";
+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";
+
+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.
+ */
+
+export class Viewer extends EventEmitter2<ViewerEventMap & OptionsEventMap> implements IViewer {
+  private _activeDragger: OdBaseDragger | null;
+  private _zoomWheelDragger: OdZoomWheelDragger | null;
+  private _gestureManager: GestureManager | null;
+  private _enableAutoUpdate: boolean;
+  private _isNeedRender: boolean;
+  private _isRunAsyncUpdate: boolean;
+  private _renderTime: DOMHighResTimeStamp;
+
+  protected _options: Options;
+  protected _visualizeJsUrl: string;
+  protected _abortControllerForReferences: AbortController | undefined;
+
+  private canvaseventlistener: (event: Event) => void;
+
+  public draggerFactory: Map<string, typeof OdBaseDragger>;
+  public canvasEvents: string[];
+  private frameId: number;
+  private _resizeObserver: ResizeObserver | undefined;
+  public canvas: HTMLCanvasElement | undefined;
+  public markup: IMarkup;
+
+  public visualizeJs: any;
+  public _abortController: AbortController | undefined;
+  public _abortControllerForRequestMap: Map<string, AbortController> | undefined;
+  public client: Client;
+
+  /**
+   * @param client - The `Client` instance that provides access to a server. Do not specify
+   *   `Client` if you need a standalone viewer instance without access to server models.
+   * @param params - An object containing viewer configuration parameters.
+   * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
+   *   library instance, or leave it undefined or blank to use the default URL defined by
+   *   `Client.js` you are using.
+   *
+   *   _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`.
+   */
+  constructor(
+    client?: Client,
+    params: { visualizeJsUrl?: string; enableAutoUpdate?: boolean; markupType?: MarkupType } = {
+      markupType: MarkupType.Konva,
+    }
+  ) {
+    super();
+    this.configure(params);
+
+    this._options = new Options(this);
+
+    this.client = client;
+
+    this._activeDragger = null;
+    this._renderTime = 0;
+
+    this.markup = MarkupFactory.createMarkup(params.markupType ?? MarkupType.Konva);
+
+    this.draggerFactory = new Map<string, typeof OdBaseDragger>();
+    this.registerDragger("Pan", OdPanDragger);
+    this.registerDragger("Orbit", OdOrbitDragger);
+    this.registerDragger("Zoom", OdZoomDragger);
+    this.registerDragger("ZoomWindow", OdZoomWindowDragger);
+    this.registerDragger("OrbitAroundBuilding", OrbitAroundBuildingDragger);
+    this.registerDragger("MeasureLine", MeasureLineDragger);
+    this.registerDragger("CuttingPlaneXAxis", OdCuttingPlaneXAxisDragger);
+    this.registerDragger("CuttingPlaneYAxis", OdCuttingPlaneYAxisDragger);
+    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;
+    this.canvaseventlistener = (event: Event) => this.emit(event);
+
+    this._enableAutoUpdate = params.enableAutoUpdate ?? true;
+    this._isNeedRender = false;
+    this._isRunAsyncUpdate = false;
+
+    this.render = this.render.bind(this);
+    this.resize = this.resize.bind(this);
+  }
+
+  /**
+   * `VisualizeJS` parameters.
+   */
+  get options(): Options {
+    return this._options;
+  }
+
+  /**
+   * `VisualizeJS` library URL. Use {@link Viewer#configure | configure()} to change library URL.
+   *
+   * @readonly
+   */
+  get visualizeJsUrl(): string {
+    return this._visualizeJsUrl;
+  }
+
+  /**
+   * Change the viewer configuration parameters.
+   *
+   * @param params - An object containing new configuration parameters.
+   * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
+   *   library instance or leave it blank to use the default URL defined by `Client.js`.
+   */
+  configure(params: { visualizeJsUrl?: string }): this {
+    this._visualizeJsUrl = params.visualizeJsUrl || "VISUALIZE_JS_URL";
+    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.
+   *
+   * @async
+   * @param canvas - HTML `<canvas>` element for `VisualizeJS`.
+   * @param onProgress - A callback function that handles events measuring progress of loading
+   *   of the `VisualizeJS` library. Retrieves {@link event:visualizeprogress | visualizeprogress} event.
+   */
+  async initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this> {
+    this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
+
+    if (canvas.style.width === "" && canvas.style.height === "") {
+      canvas.style.width = "100%";
+      canvas.style.height = "100%";
+    }
+    canvas.parentElement.style.touchAction = "none";
+    canvas.style.touchAction = "none";
+
+    canvas.width = canvas.clientWidth * window.devicePixelRatio;
+    canvas.height = canvas.clientHeight * window.devicePixelRatio;
+
+    const visualizeJs: any = await loadVisualizeJs(this.visualizeJsUrl, (ev) => {
+      const { loaded, timeStamp, total, lengthComputable } = ev;
+      const event = { loaded, timeStamp, total, lengthComputable, type: "visualizeprogress" } as ProgressEvent;
+      onProgress?.(event);
+    });
+
+    this.visualizeJs = visualizeJs;
+    this.visualizeJs.canvas = canvas;
+    this.visualizeJs.Viewer.create();
+
+    this.canvas = canvas;
+    this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
+
+    this.markup.initialize(this, canvas, this.canvasEvents);
+
+    this._resizeObserver = new ResizeObserver(this.resize);
+    this._resizeObserver.observe(canvas.parentElement);
+    this.resize();
+
+    this._zoomWheelDragger = new OdZoomWheelDragger(this);
+    this._zoomWheelDragger.name = "ZoomWheel";
+    this._zoomWheelDragger.initialize();
+
+    this._gestureManager = new GestureManager(this);
+    this._gestureManager.initialize();
+
+    this.syncOpenCloudVisualStyle(true);
+    this.syncOptions();
+
+    this._renderTime = performance.now();
+    this.render(this._renderTime);
+
+    return this;
+  }
+
+  /**
+   * Releases all resources allocated by this `Viewer` instance. Call this method before
+   * release the `Viewer` instance.
+   */
+  dispose(): this {
+    this.cancel();
+    this.emitEvent({ type: "dispose" });
+
+    if (this.frameId) cancelAnimationFrame(this.frameId);
+    this.frameId = 0;
+
+    this.setActiveDragger("");
+
+    this._zoomWheelDragger?.dispose();
+    this._gestureManager?.dispose();
+
+    this.removeAllListeners();
+
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = undefined;
+
+    this.markup.dispose();
+
+    this.canvasEvents.forEach((x) => this.canvas?.removeEventListener(x, this.canvaseventlistener));
+    this.canvas = undefined;
+
+    this.visualizeJs?.getViewer().clear();
+    this.visualizeJs = undefined;
+
+    return this;
+  }
+
+  /**
+   * Returns `true` if `VisualizeJS` module has been loaded andinitialized.
+   */
+  isInitialized(): boolean {
+    return !!this.visualizeJs;
+  }
+
+  // internal render/resize routines
+
+  private render(time: DOMHighResTimeStamp) {
+    this.frameId = requestAnimationFrame(this.render);
+
+    if (!this.visualizeJs) return;
+
+    if (this._isRunAsyncUpdate) return;
+
+    const visViewer = this.visualizeJs.getViewer();
+    if (visViewer.isRunningAnimation() || this._isNeedRender) {
+      visViewer.update();
+      this._activeDragger?.updatePreview();
+      this._isNeedRender = !visViewer.getActiveDevice().isValid();
+
+      const deltaTime = (time - this._renderTime) / 1000;
+      this._renderTime = time;
+      this.emitEvent({ type: "render", time, deltaTime });
+    }
+  }
+
+  public resize(): this {
+    if (!this.visualizeJs) return this;
+
+    const { clientWidth, clientHeight } = this.canvas;
+    this.canvas.width = clientWidth * window.devicePixelRatio;
+    this.canvas.height = clientHeight * window.devicePixelRatio;
+
+    const visViewer = this.visualizeJs.getViewer();
+    visViewer.resize(0, this.canvas.width, this.canvas.height, 0);
+
+    this.update(true);
+    this.emitEvent({ type: "resize", width: clientWidth, height: clientHeight });
+
+    return this;
+  }
+
+  /**
+   * Updates the viewer. Do nothing if the auto-update mode is disabled in the constructor (use
+   * the `update` event to update viewer manually).
+   *
+   * Fires:
+   *
+   * - {@link UpdateEvent | update}
+   *
+   * @param force - If `true` updates the viewer immidietly. Otherwise updates on next
+   *   animation frame. Default is `false`.
+   */
+  update(force?: boolean) {
+    if (this._enableAutoUpdate) {
+      if (force) {
+        this.visViewer()?.update();
+        this.activeDragger()?.updatePreview();
+      } else {
+        this._isNeedRender = true;
+      }
+    }
+    this.emitEvent({ type: "update", data: force });
+  }
+
+  /**
+   * Update with internal schedule, need after change operation when have long update for
+   * update without lock UI
+   *
+   * @param maxScheduleUpdateTimeInMs - Maximum time for one update, by default 30 ms
+   * @param maxScheduleUpdateCount - Maximum count of schedule update
+   * @returns return void Promise
+   */
+
+  private scheduleUpdateAsync(maxScheduleUpdateTimeInMs = 50): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      setTimeout(() => {
+        try {
+          this.visViewer()?.update(maxScheduleUpdateTimeInMs);
+          this.activeDragger()?.updatePreview();
+          resolve();
+        } catch (e) {
+          console.error(e);
+          reject();
+        }
+      }, 0);
+    });
+  }
+
+  async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50): Promise<void> {
+    this._isRunAsyncUpdate = true;
+    const device = this.visViewer().getActiveDevice();
+    try {
+      for (let iterationCount = 0; !device.isValid() && iterationCount < maxScheduleUpdateCount; iterationCount++) {
+        await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
+      }
+      await this.scheduleUpdateAsync(maxScheduleUpdateTimeInMs);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      this._isRunAsyncUpdate = false;
+    }
+  }
+
+  /**
+   * Returns `VisualizeJS`
+   * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
+   */
+  visLib(): any {
+    return this.visualizeJs;
+  }
+
+  /**
+   * Returns `VisualizeJS`
+   * {@link https://cloud.opendesign.com/docs/index.html#/vis/Viewer | Viewer} instance.
+   */
+  visViewer(): any {
+    return this.visualizeJs?.getViewer();
+  }
+
+  // update the VisualizeJS options
+
+  syncOpenCloudVisualStyle(isInitializing: boolean): this {
+    if (!this.visualizeJs) return this;
+
+    const visLib = this.visLib();
+    const visViewer = visLib.getViewer();
+
+    const device = visViewer.getActiveDevice();
+    if (device.isNull()) return this;
+
+    const view = device.getActiveView();
+
+    // setup light
+    view.enableDefaultLighting(true, visLib.DefaultLightingType.kTwoLights);
+    view.setDefaultLightingIntensity(1.25);
+
+    let visualStyleId;
+    try {
+      visualStyleId = visViewer.findVisualStyle("OpenCloud");
+    } catch (e) {
+      if (!isInitializing) {
+        console.log("OpenCloud visual style not found, creating it on client side");
+      }
+      visualStyleId = visViewer.createVisualStyle("OpenCloud");
+
+      const colorDef = new visLib.OdTvColorDef(66, 66, 66);
+      const shadedVsId = visViewer.findVisualStyle("Realistic");
+
+      const visualStylePtr = visualStyleId.openObject();
+      visualStylePtr.copyFrom(shadedVsId);
+      visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kFaceModifiers, 0, visLib.VisualStyleOperations.kSet);
+      //visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModel, 1, visLib.VisualStyleOperations.kSet);
+      visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModel, 2, visLib.VisualStyleOperations.kSet);
+      visualStylePtr.setOptionDouble(visLib.VisualStyleOptions.kEdgeCreaseAngle, 60, visLib.VisualStyleOperations.kSet);
+      visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeStyles, 0, visLib.VisualStyleOperations.kSet);
+      visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kEdgeModifiers, 8, visLib.VisualStyleOperations.kSet);
+      visualStylePtr.setOptionColor(
+        visLib.VisualStyleOptions.kEdgeColorValue,
+        colorDef,
+        visLib.VisualStyleOperations.kSet
+      );
+      visualStylePtr.delete();
+    }
+
+    view.visualStyle = visualStyleId;
+
+    view.delete();
+    device.delete();
+
+    return this;
+  }
+
+  syncOptions(options: OptionsData = this.options.data): this {
+    if (!this.visualizeJs) return this;
+
+    const visLib = this.visLib();
+    const visViewer = visLib.getViewer();
+
+    const device = visViewer.getActiveDevice();
+    if (device.isNull()) return this;
+
+    if (options.showWCS !== visViewer.getEnableWCS()) {
+      visViewer.setEnableWCS(options.showWCS);
+    }
+    if (options.cameraAnimation !== visViewer.getEnableAnimation()) {
+      visViewer.setEnableAnimation(options.cameraAnimation);
+    }
+    if (options.antialiasing !== visViewer.fxaaAntiAliasing3d) {
+      visViewer.fxaaAntiAliasing3d = options.antialiasing;
+      visViewer.fxaaQuality = 5;
+    }
+
+    if (options.shadows !== visViewer.shadows) {
+      visViewer.shadows = options.shadows;
+
+      const canvas = visLib.canvas;
+      device.invalidate([0, canvas.clientWidth, canvas.clientHeight, 0]);
+    }
+
+    if (options.groundShadow !== visViewer.groundShadow) {
+      visViewer.groundShadow = options.groundShadow;
+    }
+
+    if (options.ambientOcclusion !== device.getOptionBool(visLib.DeviceOptions.kSSAOEnable)) {
+      device.setOptionBool(visLib.DeviceOptions.kSSAOEnable, options.ambientOcclusion);
+      device.setOptionBool(visLib.DeviceOptions.kSSAODynamicRadius, true);
+      device.setOptionDouble(visLib.DeviceOptions.kSSAORadius, 1);
+      device.setOptionInt32(visLib.DeviceOptions.kSSAOLoops, 32);
+      device.setOptionDouble(visLib.DeviceOptions.kSSAOPower, 2);
+      device.setOptionInt32(visLib.DeviceOptions.kSSAOBlurRadius, 2);
+
+      const activeView = visViewer.activeView;
+      activeView.setSSAOEnabled(options.ambientOcclusion);
+      activeView.delete();
+    }
+
+    if (isExist(options.edgeModel)) {
+      const activeView = device.getActiveView();
+
+      const visualStyleId = visViewer.findVisualStyle("OpenCloud");
+      const visualStylePtr = visualStyleId.openObject();
+
+      visualStylePtr.setOptionInt32(
+        visLib.VisualStyleOptions.kEdgeModel,
+        options.edgeModel ? 2 : 0,
+        visLib.VisualStyleOperations.kSet
+      );
+
+      activeView.visualStyle = visualStyleId;
+
+      visualStylePtr.delete();
+      visualStyleId.delete();
+      activeView.delete();
+    }
+
+    device.delete();
+
+    this.syncHighlightingOptions(options);
+    this.update();
+
+    return this;
+  }
+
+  syncHighlightingOptions(options: OptionsData = this.options.data): this {
+    if (!this.visualizeJs) return this;
+
+    const params = options.enableCustomHighlight ? options : Options.defaults();
+
+    const visLib = this.visLib();
+    const visViewer = visLib.getViewer();
+    const { Entry, OdTvRGBColorDef } = visLib;
+
+    const highlightStyleId = visViewer.findHighlightStyle("Web_Default");
+    const highlightStylePtr = highlightStyleId.openObject();
+
+    if (isExist(params.facesColor)) {
+      const color = new OdTvRGBColorDef(params.facesColor.r, params.facesColor.g, params.facesColor.b);
+      highlightStylePtr.setFacesColor(Entry.k3D.value | Entry.k3DTop.value, color);
+      color.delete();
+    }
+
+    if (isExist(params.facesOverlap)) {
+      highlightStylePtr.setFacesVisibility(Entry.k3DTop.value, params.facesOverlap);
+    }
+    if (isExist(params.facesTransparancy)) {
+      highlightStylePtr.setFacesTransparency(Entry.k3D.value | Entry.k3DTop.value, params.facesTransparancy);
+    }
+
+    if (isExist(params.edgesColor)) {
+      const color = new OdTvRGBColorDef(params.edgesColor.r, params.edgesColor.g, params.edgesColor.b);
+      highlightStylePtr.setEdgesColor(
+        Entry.k3DTop.value | Entry.k3D.value | Entry.k2D.value | Entry.k2DTop.value,
+        color
+      );
+      color.delete();
+    }
+
+    if (isExist(params.edgesVisibility)) {
+      highlightStylePtr.setEdgesVisibility(
+        Entry.k2D.value | Entry.k2DTop.value | Entry.k3DTop.value | Entry.k3D.value,
+        params.edgesVisibility
+      );
+    }
+    if (isExist(params.edgesOverlap)) {
+      const visibility = !isExist(params.edgesVisibility) ? true : params.edgesVisibility;
+      highlightStylePtr.setEdgesVisibility(Entry.k2DTop.value | Entry.k3DTop.value, params.edgesOverlap && visibility);
+    }
+
+    const device = visViewer.getActiveDevice();
+    if (!device.isNull()) {
+      const canvas = visLib.canvas;
+
+      device.invalidate([0, canvas.clientWidth, canvas.clientHeight, 0]);
+      device.delete();
+    }
+
+    return this;
+  }
+
+  /**
+   * List of names of available draggers:
+   *
+   * - `Line`
+   * - `Text`
+   * - `Pan`
+   * - `Orbit`
+   * - `Zoom`
+   * - `ZoomWindow`
+   * - `OrbitAroundBuilding`
+   * - `MeasureLine`
+   * - `CuttingPlaneXAxis`
+   * - `CuttingPlaneYAxis`
+   * - `CuttingPlaneZAxis`
+   * - `Walk`
+   *
+   * @readonly
+   */
+  get draggers(): string[] {
+    return [...this.draggerFactory.keys()];
+  }
+
+  /**
+   * Register dragger on draggerFactory.
+   *
+   * @param name - Dragger name.
+   * @param dragger - Dragger class.
+   */
+  public registerDragger(name: string, dragger: typeof OdBaseDragger): void {
+    this.draggerFactory.set(name, dragger);
+  }
+
+  /**
+   * Returns active dragger instance or `null` if there is no active dragger.
+   */
+  activeDragger(): any | null {
+    return this._activeDragger;
+  }
+
+  /**
+   * Set active dragger. `Viewer` must be {@link Viewer#initialize | initialized} before enable
+   * dragger or exception is thrown.
+   *
+   * Fires:
+   *
+   * - {@link ChangeActiveDragger | changeactivedragger}
+   *
+   * @param name - Dragger name. Can be one of the {@link Viewer#draggers | draggers} list.
+   * @returns Returns active dragger instance or `null` if there is no dragger with the given name.
+   */
+  setActiveDragger(name: string): OdBaseDragger | null {
+    if (this._activeDragger?.name !== name) {
+      if (this._activeDragger) {
+        this._activeDragger.dispose();
+        this._activeDragger = null;
+      }
+      const Constructor = this.draggerFactory.get(name);
+      if (Constructor) {
+        this._activeDragger = new Constructor(this);
+        this._activeDragger.name = name;
+        this._activeDragger.initialize();
+      }
+      const canvas = this.canvas;
+      if (canvas) {
+        canvas.className = canvas.className
+          .split(" ")
+          .filter((x) => !x.startsWith("oda-cursor-"))
+          .filter((x) => x)
+          .concat(`oda-cursor-${name.toLowerCase()}`)
+          .join(" ");
+      }
+      this.emitEvent({ type: "changeactivedragger", data: name });
+    }
+    return this._activeDragger;
+  }
+
+  /**
+   * Reset the state of the active dragger.
+   */
+  resetActiveDragger(): void {
+    const dragger = this._activeDragger;
+    if (dragger) {
+      this.setActiveDragger("");
+      this.setActiveDragger(dragger.name);
+    }
+  }
+
+  /**
+   * Remove all cutting planes.
+   */
+  clearSlices(): void {
+    if (!this.visualizeJs) return;
+
+    const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
+    activeView.removeCuttingPlanes();
+    activeView.delete();
+
+    this.update();
+  }
+
+  /**
+   * Remove markup overlay.
+   */
+  clearOverlay(): void {
+    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;
+  }
+
+  /**
+   * Returns `true` if current drawing is 3D drawing.
+   */
+  is3D(): boolean {
+    if (!this.visualizeJs) return false;
+
+    const visViewer = this.visViewer();
+    const ext = visViewer.getActiveExtents();
+    const min = ext.min();
+    const max = ext.max();
+    const extHeight = max[2] - min[2];
+    return extHeight !== 0;
+
+    //return visViewer.activeView.upVector[1] >= 0.95;
+  }
+
+  /**
+   * Returns a list of original handles for the selected entities.
+   */
+  getSelected(): string[] {
+    return this.executeCommand("getSelected");
+  }
+
+  /**
+   * Select model entities by original handles that are obtained using
+   * {@link File.getProperties | File.getProperties()} or
+   * {@link File.searchProperties | File.searchProperties()} methods.
+   *
+   * Fires:
+   *
+   * - {@link SelectEvent | select}
+   *
+   * @param handles - The list of original handles.
+   */
+  setSelected(handles?: string[]): void {
+    this.executeCommand("setSelected", handles);
+  }
+
+  /**
+   * 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.
+   */
+  async loadReferences(model: Model | File | Assembly): Promise<this> {
+    if (!this.visualizeJs) return this;
+
+    const abortController = new AbortController();
+    this._abortControllerForReferences?.abort();
+    this._abortControllerForReferences = abortController;
+
+    let references = [];
+    await model
+      .getReferences(abortController.signal)
+      .then((data) => (references = data.references))
+      .catch((e) => console.error("Cannot load model references.", e));
+
+    for (const file of references) {
+      await this.client
+        .downloadFile(file.id, undefined, abortController.signal)
+        .then((arrayBuffer) => this.visualizeJs?.getViewer().addEmbeddedFile(file.name, new Uint8Array(arrayBuffer)))
+        .catch((e) => console.error(`Cannot load reference file ${file.name}.`, e));
+    }
+
+    return this;
+  }
+
+  // Internal loading routines
+
+  applyModelTransformMatrix(model: Model | Assembly) {
+    this.executeCommand("applyModelTransform", model);
+  }
+
+  applySceneGraphSettings(options = this.options) {
+    if (!this.visualizeJs) return;
+
+    const visLib = this.visLib();
+    const visViewer = visLib.getViewer();
+
+    const device = visViewer.getActiveDevice();
+    if (isExist(options.sceneGraph)) {
+      device.setOptionBool(visLib.DeviceOptions.kDelaySceneGraphProc, !options.sceneGraph);
+    }
+    // if (options.enablePartialMode && visLib.HpTrc.Usd >= visViewer.memoryLimit) {
+    //   device.setOptionBool(visLib.DeviceOptions.kDelaySceneGraphProc, true);
+    // }
+    device.delete();
+
+    this.update();
+  }
+
+  /**
+   * 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()}.
+   *
+   * Fires:
+   *
+   * - {@link OpenEvent | open}
+   * - {@link GeometryStartEvent | geometrystart}
+   * - {@link GeometryProgressEvent | geometryprogress}
+   * - {@link DatabaseChunkEvent | databasechunk}
+   * - {@link GeometryChunkEvent | geometrychunk}
+   * - {@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.
+   */
+  async open(file: File | Assembly | Model): Promise<this> {
+    if (!this.visualizeJs) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", file, model: file });
+
+    let model: Model;
+
+    if (file) {
+      const models = (await file.getModels()) || [];
+      model = models.find((model: Model) => model.default) || models[0];
+    }
+    if (!model) throw new Error("No default model found");
+
+    const overrideOptions = new Options();
+    overrideOptions.data = this.options.data;
+    if (file.type === ".rcs") {
+      console.log("Partial load mode is forced for RCS file");
+      overrideOptions.enablePartialMode = true;
+    }
+
+    const loaderFactory = new LoaderFactory();
+    const loader = loaderFactory.create(this, model, overrideOptions.data);
+
+    await this.loadReferences(model);
+    await loader.load();
+
+    if (this.visualizeJs) {
+      this.applyModelTransformMatrix(model);
+      this.applySceneGraphSettings();
+    }
+
+    return this;
+  }
+
+  /**
+   * Loads a VSF file into the viewer.
+   *
+   * Fires:
+   *
+   * - {@link OpenEvent | open}
+   * - {@link GeometryStartEvent | geometrystart}
+   * - {@link GeometryProgressEvent | geometryprogress}
+   * - {@link DatabaseChunkEvent | databasechunk}
+   * - {@link GeometryEndEvent | geometryend}
+   * - {@link GeometryErrorEvent | geometryerror}
+   *
+   * @param buffer - Binary data buffer to load.
+   */
+  openVsfFile(buffer: Uint8Array | ArrayBuffer): this {
+    if (!this.visualizeJs) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", buffer });
+
+    try {
+      this.emitEvent({ type: "geometrystart", buffer });
+
+      const visLib = this.visLib();
+      const visViewer = visLib.getViewer();
+
+      const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+      visViewer.parseFile(data);
+
+      this.syncOpenCloudVisualStyle(false);
+      this.syncOptions();
+      this.resize();
+
+      this.emitEvent({ type: "geometryprogress", data: 1, buffer });
+      this.emitEvent({ type: "databasechunk", data, buffer });
+      this.emitEvent({ type: "geometryend", buffer });
+    } catch (error) {
+      this.emitEvent({ type: "geometryerror", data: error, buffer });
+      throw error;
+    }
+
+    return this;
+  }
+
+  /**
+   * Loads a VSFX file into the viewer.
+   *
+   * Fires:
+   *
+   * - {@link OpenEvent | open}
+   * - {@link GeometryStartEvent | geometrystart}
+   * - {@link GeometryProgressEvent | geometryprogress}
+   * - {@link DatabaseChunkEvent | databasechunk}
+   * - {@link GeometryEndEvent | geometryend}
+   * - {@link GeometryErrorEvent | geometryerror}
+   *
+   * @param buffer - Binary data buffer to load.
+   */
+  openVsfxFile(buffer: Uint8Array | ArrayBuffer): this {
+    if (!this.visualizeJs) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", buffer });
+
+    try {
+      this.emitEvent({ type: "geometrystart", buffer });
+
+      const visLib = this.visLib();
+      const visViewer = visLib.getViewer();
+
+      const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+      visViewer.parseVsfx(data);
+
+      this.syncOpenCloudVisualStyle(false);
+      this.syncOptions();
+      this.resize();
+
+      this.emitEvent({ type: "geometryprogress", data: 1, buffer });
+      this.emitEvent({ type: "databasechunk", data, buffer });
+      this.emitEvent({ type: "geometryend", buffer });
+    } catch (error) {
+      this.emitEvent({ type: "geometryerror", data: error, buffer });
+      throw error;
+    }
+
+    return this;
+  }
+
+  /**
+   * Cancels asynchronous model loading started by {@link Viewer#open | open()}.
+   */
+  cancel(): this {
+    this._abortControllerForReferences?.abort();
+    this._abortControllerForReferences = undefined;
+
+    this._abortController?.abort();
+    this._abortController = undefined;
+
+    this._abortControllerForRequestMap?.forEach((controller) => controller.abort());
+    this._abortControllerForRequestMap = undefined;
+
+    this.emitEvent({ type: "cancel" });
+
+    return this;
+  }
+
+  /**
+   * Unloads the model and clears the viewer.
+   */
+  clear(): this {
+    if (!this.visualizeJs) return this;
+
+    const visLib = this.visLib();
+    const visViewer = visLib.getViewer();
+
+    this.clearOverlay();
+
+    visViewer.clear();
+    visViewer.createLocalDatabase();
+
+    this.syncOpenCloudVisualStyle(true);
+    this.syncOptions();
+    this.resize();
+
+    this.emitEvent({ type: "clear" });
+
+    return this;
+  }
+
+  /**
+   * Get markup color.
+   *
+   * @returns Color with `RGB` values.
+   */
+  getMarkupColor(): { r: number; g: number; b: number } {
+    return this.markup.getMarkupColor();
+  }
+
+  /**
+   * Set markup color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
+  setMarkupColor(r = 255, g = 0, b = 0): void {
+    this.markup.setMarkupColor(r, g, b);
+    const color = { r, g, b };
+    this.emitEvent({ type: "changemarkupcolor", data: color });
+  }
+
+  /**
+   * 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 = 255, g = 0, b = 0): void {
+    this.markup.colorizeAllMarkup(r, g, b);
+  }
+
+  /**
+   * Add an empty markup entity to the overlay.
+   */
+  addMarkupEntity(entityName: string) {
+    if (!this.visualizeJs) return null;
+
+    this.syncOverlay();
+
+    const visViewer = this.visViewer();
+    const model = visViewer.getMarkupModel();
+    const entityId = model.appendEntity(entityName);
+    const entityPtr = entityId.openObject();
+
+    const color = this.getMarkupColor();
+    entityPtr.setColor(color.r, color.g, color.b);
+    entityPtr.setLineWeight(2);
+    entityPtr.delete();
+
+    this.update();
+
+    return entityId;
+  }
+
+  /**
+   * Draw a viewpoint. To get a list of available model viewpoints, use the
+   * {@link Model#getViewpoints | Model.getViewpoints()} or
+   * {@link File#getViewpoints | File.getViewpoints()}.
+   *
+   * @param viewpoint - Viewpoint.
+   */
+  drawViewpoint(viewpoint: IViewpoint): void {
+    this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
+    this.setClippingPlanes(viewpoint.clipping_planes);
+    this.markup.setViewpoint(viewpoint);
+  }
+
+  /**
+   * Create a viewpoint. To add a viewpoint to the list of model viewpoints, use the
+   * {@link Model#saveViewpoint | Model.saveViewpoint()} or
+   * {@link File#saveViewpoint | File.saveViewpoint()}.
+   */
+  createViewpoint(): IViewpoint {
+    const vp = this.markup.getViewpoint();
+    vp.orthogonal_camera = this.getOrthogonalCameraSettings();
+    vp.clipping_planes = this.getClippingPlanes();
+
+    return vp;
+  }
+
+  private getPoint3dFromArray(array) {
+    return { x: array[0], y: array[1], z: array[2] };
+  }
+
+  private getLogicalPoint3dAsArray(point3d) {
+    return [point3d.x, point3d.y, point3d.z];
+  }
+
+  private getOrthogonalCameraSettings(): IOrthogonalCamera {
+    const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
+
+    return {
+      view_point: this.getPoint3dFromArray(activeView.viewPosition),
+      direction: this.getPoint3dFromArray(activeView.viewTarget),
+      up_vector: this.getPoint3dFromArray(activeView.upVector),
+      field_width: activeView.viewFieldWidth,
+      field_height: activeView.viewFieldHeight,
+    };
+  }
+
+  private setOrthogonalCameraSettings(settings: IOrthogonalCamera) {
+    const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
+
+    this.resetActiveDragger();
+    this.clearSlices();
+    this.clearOverlay();
+
+    if (settings) {
+      activeView.setView(
+        this.getLogicalPoint3dAsArray(settings.view_point),
+        this.getLogicalPoint3dAsArray(settings.direction),
+        this.getLogicalPoint3dAsArray(settings.up_vector),
+        settings.field_width,
+        settings.field_height,
+        true
+      );
+    }
+
+    this.syncOverlay();
+  }
+
+  private getClippingPlanes(): IClippingPlane[] {
+    const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
+
+    const clipping_planes = [];
+    for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
+      const cuttingPlane = activeView.getCuttingPlane(i);
+
+      const plane = {
+        location: this.getPoint3dFromArray(cuttingPlane.getOrigin()),
+        direction: this.getPoint3dFromArray(cuttingPlane.normal()),
+      };
+
+      clipping_planes.push(plane);
+    }
+
+    return clipping_planes;
+  }
+
+  private setClippingPlanes(clippingPlanes: IClippingPlane[]) {
+    if (clippingPlanes) {
+      const visViewer = this.visViewer();
+      const activeView = visViewer.activeView;
+
+      for (const plane of clippingPlanes) {
+        const cuttingPlane = new (this.visLib().OdTvPlane)();
+        cuttingPlane.set(this.getLogicalPoint3dAsArray(plane.location), this.getLogicalPoint3dAsArray(plane.direction));
+
+        activeView.addCuttingPlane(cuttingPlane);
+        activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
+      }
+    }
+  }
+
+  /**
+   * Executes the command denoted by the given command identifier.
+   *
+   * @param id - Identifier of the command to execute.
+   * @param args - Parameters passed to the command function.
+   * @returns A returned value of the given command. Returns `undefined` when the command doesn't exists.
+   */
+  executeCommand(id: string, ...args: any[]): any {
+    return commands("VisualizeJS").executeCommand(id, this, ...args);
+  }
+}