@inweb/client 25.2.2 → 25.2.5

package/src/Viewer/Viewer.ts

@@ -1,1109 +1,1109 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 { IViewer } from "./IViewer";
-import { commands } from "./Commands";
-import { EventEmitter2 } from "./EventEmitter2";
-import { ViewerEventMap } from "./ViewerEvents";
-import { OptionsEventMap, OptionsChangeEvent } from "./OptionsEvents";
-import { CANVAS_EVENTS } from "./CanvasEvents";
-
-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 { Client } from "../Api/Client";
-import { File } from "../Api/File";
-import { Assembly } from "../Api/Assembly";
-import { Model } from "../Api/Model";
-import { Options, OptionsData } from "./Options";
-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 clientoptionschange: (event: OptionsChangeEvent) => void;
-  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.clientoptionschange = (event: OptionsChangeEvent) => (this._options.data = event.data.data);
-
-    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.
-   *
-   * Use this only for standalone viewer instances. Use {@link Client#options | Client.options}
-   * instead if the viewer was created with a `Client` reference using
-   * {@link Viewer | Viewer.create(client)}. Changes in client options will be automatically
-   * applied to the viewer options.
-   */
-  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> {
-    if (this.client) {
-      this.client.addEventListener("optionschange", this.clientoptionschange);
-      this.options.data = this.client.options.data;
-    }
-    this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
-
-    if (canvas.style.width === "" && canvas.style.height === "") {
-      canvas.style.width = "100%";
-      canvas.style.height = "100%";
-    }
-    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;
-
-    this.client?.removeEventListener("optionschange", this.clientoptionschange);
-
-    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 model - 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(model: Model | File | Assembly): Promise<this> {
-    if (!this.visualizeJs) return this;
-
-    this.cancel();
-    this.clear();
-
-    this.emitEvent({ type: "open", model });
-
-    if (model instanceof File || model instanceof Assembly) {
-      const models = (await model.getModels()) ?? [];
-      model = models.find((model) => model.default) ?? models[0];
-    }
-    if (!model) throw new Error("No default model found");
-
-    await this.loadReferences(model);
-
-    const overrideOptions = new Options();
-    overrideOptions.data = this.options.data;
-    if (model.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 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: any): void {
-    this.markup.drawViewpoint(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(): object {
-    const vp = this.markup.createViewpoint();
-    return vp;
-  }
-
-  /**
-   * 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);
-  }
-}
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IViewer } from "./IViewer";
+import { commands } from "./Commands";
+import { EventEmitter2 } from "./EventEmitter2";
+import { ViewerEventMap } from "./ViewerEvents";
+import { OptionsEventMap, OptionsChangeEvent } from "./OptionsEvents";
+import { CANVAS_EVENTS } from "./CanvasEvents";
+
+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 { Client } from "../Api/Client";
+import { File } from "../Api/File";
+import { Assembly } from "../Api/Assembly";
+import { Model } from "../Api/Model";
+import { Options, OptionsData } from "./Options";
+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 clientoptionschange: (event: OptionsChangeEvent) => void;
+  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.clientoptionschange = (event: OptionsChangeEvent) => (this._options.data = event.data.data);
+
+    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.
+   *
+   * Use this only for standalone viewer instances. Use {@link Client#options | Client.options}
+   * instead if the viewer was created with a `Client` reference using
+   * {@link Viewer | Viewer.create(client)}. Changes in client options will be automatically
+   * applied to the viewer options.
+   */
+  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> {
+    if (this.client) {
+      this.client.addEventListener("optionschange", this.clientoptionschange);
+      this.options.data = this.client.options.data;
+    }
+    this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
+
+    if (canvas.style.width === "" && canvas.style.height === "") {
+      canvas.style.width = "100%";
+      canvas.style.height = "100%";
+    }
+    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;
+
+    this.client?.removeEventListener("optionschange", this.clientoptionschange);
+
+    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 model - 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(model: Model | File | Assembly): Promise<this> {
+    if (!this.visualizeJs) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", model });
+
+    if (model instanceof File || model instanceof Assembly) {
+      const models = (await model.getModels()) ?? [];
+      model = models.find((model) => model.default) ?? models[0];
+    }
+    if (!model) throw new Error("No default model found");
+
+    await this.loadReferences(model);
+
+    const overrideOptions = new Options();
+    overrideOptions.data = this.options.data;
+    if (model.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 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: any): void {
+    this.markup.drawViewpoint(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(): object {
+    const vp = this.markup.createViewpoint();
+    return vp;
+  }
+
+  /**
+   * 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);
+  }
+}