@inweb/viewer-visualize 26.10.6 → 26.11.0

package/src/Viewer/Viewer.ts

@@ -30,11 +30,12 @@ import {
   FileSource,
   IClippingPlane,
   IComponent,
-  IEntity,
   IDragger,
+  IEntity,
   ILoader,
   IOrthogonalCamera,
   IOptions,
+  IPerspectiveCamera,
   IPoint,
   IViewer,
   IViewpoint,
@@ -48,6 +49,7 @@ import { draggers } from "./Draggers";
 import { commands } from "./Commands";
 import { components } from "./Components";
 import { loaders } from "./Loaders";
+import { IModelImpl } from "./Models/IModelImpl";
 
 import { loadVisualizeJs } from "./utils";
 import { MarkupFactory, MarkupType } from "./Markup/MarkupFactory";
@@ -57,36 +59,38 @@ const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
 const isExist = (value) => value !== undefined && value !== null;
 
 /**
- * 3D viewer powered by {@link https://cloud.opendesign.com/docs/index.html#/visualizejs | VisualizeJS}
- * library.
+ * 3D viewer powered by {@link https://cloud.opendesign.com/docs/index.html#/visualizejs | VisualizeJS}.
  */
 export class Viewer
   extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap>
   implements IViewer, IWorldTransform
 {
+  public client: Client | undefined;
+  public options: IOptions;
+  public canvas: HTMLCanvasElement | undefined;
+  public canvasEvents: string[];
+  public loaders: ILoader[];
+  public models: IModelImpl[];
+
+  private canvaseventlistener: (event: Event) => void;
+
+  private _visualizeJsUrl = "";
+  private _visualizeJs: any;
+  private _visualizeTimestamp: number;
+  private _viewer: any;
+  private _crossOrigin;
+
   private _activeDragger: IDragger | null;
-  private _components: Array<IComponent>;
-  private _enableAutoUpdate: boolean;
+  private _components: IComponent[];
+
   private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
+  private _enableAutoUpdate: boolean;
   private _isRunAsyncUpdate: boolean;
 
-  protected _options: Options;
-  protected _visualizeJsUrl = "";
-  protected _visualizeJs: any;
-  protected _visualizeTimestamp: number;
-  protected _viewer: any;
-  protected _crossOrigin;
-
-  private canvaseventlistener: (event: Event) => void;
+  public _abortControllerForReferences: AbortController | undefined;
 
-  public canvasEvents: string[];
   private _markup: IMarkup;
-  public canvas: HTMLCanvasElement | undefined;
-
-  public _abortControllerForReferences: AbortController | undefined;
-  public client: Client | undefined;
-  public loaders: Array<ILoader>;
 
   /**
    * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
@@ -113,21 +117,20 @@ export class Viewer
     super();
     this.configure(params);
 
-    this._options = new Options(this);
-
     this.client = client;
+    this.options = new Options(this);
     this.loaders = [];
+    this.models = [];
+
+    this.canvasEvents = CANVAS_EVENTS.slice();
+    this.canvaseventlistener = (event: Event) => this.emit(event);
 
     this._activeDragger = null;
     this._components = [];
 
+    this._renderNeeded = false;
     this._renderTime = 0;
-
-    this.canvasEvents = CANVAS_EVENTS.slice();
-    this.canvaseventlistener = (event: Event) => this.emit(event);
-
     this._enableAutoUpdate = params.enableAutoUpdate ?? true;
-    this._renderNeeded = false;
     this._isRunAsyncUpdate = false;
 
     this.render = this.render.bind(this);
@@ -136,13 +139,6 @@ export class Viewer
     this._markup = MarkupFactory.createMarkup(params.markupType);
   }
 
-  /**
-   * Viewer options.
-   */
-  get options(): IOptions {
-    return this._options;
-  }
-
   /**
    * `VisualizeJS` library URL. Use {@link configure | configure()} to change library URL.
    *
@@ -152,6 +148,30 @@ export class Viewer
     return this._visualizeJsUrl;
   }
 
+  /**
+   * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module}
+   * instance.
+   */
+  get visualizeJs(): any {
+    return this._visualizeJs;
+  }
+
+  /**
+   * 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._viewer;
+  }
+
   /**
    * 2D markup core instance used to create markups.
    *
@@ -179,6 +199,16 @@ export class Viewer
     return this;
   }
 
+  // IViewer
+
+  get draggers(): string[] {
+    return [...draggers.getDraggers().keys()];
+  }
+
+  get components(): string[] {
+    return [...components.getComponents().keys()];
+  }
+
   /**
    * Loads the `VisualizeJS` module and initializes it with the specified canvas. Call
    * {@link dispose | dispose()} to release allocated resources.
@@ -197,12 +227,13 @@ export class Viewer
   async initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this> {
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
 
+    const pixelRatio = window.devicePixelRatio;
     const rect = canvas.parentElement.getBoundingClientRect();
     const width = rect.width || 1;
     const height = rect.height || 1;
 
-    canvas.width = Math.round(width * window.devicePixelRatio);
-    canvas.height = Math.round(height * window.devicePixelRatio);
+    canvas.width = Math.round(width * pixelRatio);
+    canvas.height = Math.round(height * pixelRatio);
 
     canvas.style.width = width + "px";
     canvas.style.height = height + "px";
@@ -306,28 +337,7 @@ export class Viewer
     this.emitEvent({ type: "resize", width, height });
   }
 
-  // internal render/resize routines
-
-  public render(time?: DOMHighResTimeStamp) {
-    if (!this.visualizeJs) return;
-    if (this._isRunAsyncUpdate) return;
-
-    const renderNeeded = this.visViewer().isRunningAnimation() || this._renderNeeded;
-    if (!renderNeeded) return;
-
-    if (!time) time = performance.now();
-    const deltaTime = (time - this._renderTime) / 1000;
-
-    this._renderTime = time;
-    this._renderNeeded = !this.visViewer().getActiveDevice().isValid();
-
-    this.visViewer().update();
-    this._activeDragger?.updatePreview?.();
-
-    this.emitEvent({ type: "render", time, deltaTime });
-  }
-
-  public resize(): this {
+  resize(): this {
     console.warn(
       "Viewer.resize() has been deprecated since 26.9 and will be removed in a future release, use Viewer.setSize() instead."
     );
@@ -365,515 +375,76 @@ export class Viewer
     this.emitEvent({ type: "update", data: force });
   }
 
-  private scheduleUpdateAsync(maxScheduleUpdateTimeInMs = 50): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      setTimeout(() => {
-        try {
-          if (this._enableAutoUpdate) {
-            this.visViewer()?.update(maxScheduleUpdateTimeInMs);
-            this._activeDragger?.updatePreview?.();
-          }
-          this.emitEvent({ type: "update", data: false });
-          resolve();
-        } catch (e) {
-          console.error(e);
-          reject();
-        }
-      }, 0);
-    });
-  }
+  // Internal render routines
 
-  /**
-   * Updates the viewer asynchronously without locking the user interface. Used to update the viewer
-   * after changes that require a long rendering time.
-   *
-   * Do nothing if the auto-update mode is disabled in the constructor. In this case, register an
-   * `update` event handler and update the `VisualizeJS` viewer and active dragger manually.
-   *
-   * Fires:
-   *
-   * - {@link UpdateEvent | update}
-   *
-   * @param maxScheduleUpdateTimeInMs - Maximum time for one update, default 30 ms.
-   * @param maxScheduleUpdateCount - Maximum count of scheduled updates.
-   */
-  async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50): Promise<void> {
+  render(time?: DOMHighResTimeStamp) {
     if (!this.visualizeJs) return;
+    if (this._isRunAsyncUpdate) return;
 
-    this._isRunAsyncUpdate = true;
-    try {
-      const device = this.visViewer().getActiveDevice();
-      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;
-    }
-  }
+    const renderNeeded = this.visViewer().isRunningAnimation() || this._renderNeeded;
+    if (!renderNeeded) return;
 
-  /**
-   * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module}
-   * instance.
-   */
-  get visualizeJs(): any {
-    return this._visualizeJs;
-  }
+    if (!time) time = performance.now();
+    const deltaTime = (time - this._renderTime) / 1000;
 
-  /**
-   * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module}
-   * instance.
-   */
-  visLib(): any {
-    return this._visualizeJs;
-  }
+    this._renderTime = time;
+    this._renderNeeded = !this.visViewer().getActiveDevice().isValid();
 
-  /**
-   * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/vis/Viewer | Viewer}
-   * instance.
-   */
-  visViewer(): any {
-    return this._viewer;
+    this.visViewer().update();
+    this._activeDragger?.updatePreview?.();
+
+    this.emitEvent({ type: "render", time, deltaTime });
   }
 
-  // update the VisualizeJS options
+  // Internal loading routines
 
-  syncOpenCloudVisualStyle(): this {
+  async loadReferences(model: Model | File | Assembly): Promise<this> {
     if (!this.visualizeJs) return this;
+    if (!this.client) return this;
+    if (!model.getReferences) return this;
 
-    const visLib = this.visLib();
-    const visViewer = this.visViewer();
-
-    const device = visViewer.getActiveDevice();
-    if (device.isNull()) return this;
-
-    const view = device.getActiveView();
-
-    view.enableDefaultLighting(true, visLib.DefaultLightingType.kTwoLights);
-    view.setDefaultLightingIntensity(1.25);
-
-    // Visualize.js 25.11 and earlier threw an exception if the style did not exist.
-    let visualStyleId;
-    try {
-      visualStyleId = visViewer.findVisualStyle("OpenCloud");
-    } catch {
-      visualStyleId = undefined;
-    }
+    const abortController = new AbortController();
 
-    if (!visualStyleId || visualStyleId.isNull()) {
-      visualStyleId = visViewer.createVisualStyle("OpenCloud");
+    this._abortControllerForReferences?.abort();
+    this._abortControllerForReferences = abortController;
 
-      const colorDef = new visLib.OdTvColorDef(66, 66, 66);
-      const shadedVsId = visViewer.findVisualStyle("Realistic");
+    let references: any[] = [];
+    await model
+      .getReferences(abortController.signal)
+      .then((data) => (references = data.references))
+      .catch((e) => console.error("Cannot load model references.", e));
 
-      const visualStylePtr = visualStyleId.openObject();
-      visualStylePtr.copyFrom(shadedVsId);
-      visualStylePtr.setOptionInt32(visLib.VisualStyleOptions.kFaceModifiers, 0, 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();
+    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));
     }
 
-    view.visualStyle = visualStyleId;
-
-    view.delete();
-    device.delete();
-
     return this;
   }
 
-  syncOptions(options: IOptions = this.options): this {
-    if (!this.visualizeJs) return this;
+  applyModelTransformMatrix(model: Model | Assembly) {
+    this.executeCommand("applyModelTransform", model);
+  }
 
-    this.syncOpenCloudVisualStyle();
+  applySceneGraphSettings(options = this.options) {
+    if (!this.visualizeJs) return;
 
     const visLib = this.visLib();
     const visViewer = this.visViewer();
 
     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);
-    }
-
-    const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
-    if (antialiasing !== visViewer.fxaaAntiAliasing3d) {
-      visViewer.fxaaAntiAliasing3d = antialiasing;
-      visViewer.fxaaQuality = 5;
-    }
-
-    if (options.shadows !== visViewer.shadows) {
-      visViewer.shadows = options.shadows;
-
-      const canvas = visLib.canvas;
-      device.invalidate([0, canvas.width, canvas.height, 0]);
+    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();
 
-    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: IOptions = this.options): this {
-    if (!this.visualizeJs) return this;
-
-    const params = options.enableCustomHighlight ? options : Options.defaults();
-
-    const visLib = this.visLib();
-    const visViewer = this.visViewer();
-    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.width, canvas.height, 0]);
-      device.delete();
-    }
-
-    return this;
-  }
-
-  get draggers(): string[] {
-    return [...draggers.getDraggers().keys()];
-  }
-
-  get components(): string[] {
-    return [...components.getComponents().keys()];
-  }
-
-  /**
-   * Deprecated since `25.12`. Use {@link draggers.registerDragger} instead.
-   */
-  public registerDragger(name: string, dragger: typeof Dragger): void {
-    console.warn(
-      "Viewer.registerDragger() has been deprecated since 25.12 and will be removed in a future release, use draggers('visualizejs').registerDragger() instead."
-    );
-    draggers.registerDragger(name, (viewer: IViewer) => new dragger(viewer));
-  }
-
-  activeDragger(): IDragger | null {
-    return this._activeDragger;
-  }
-
-  setActiveDragger(name = ""): IDragger | null {
-    if (!this._activeDragger || this._activeDragger.name !== name) {
-      const oldDragger = this._activeDragger;
-      let newDragger = null;
-
-      if (this._activeDragger) {
-        this._activeDragger.dispose();
-        this._activeDragger = null;
-      }
-      if (this.visualizeJs) {
-        newDragger = draggers.createDragger(name, this);
-        if (newDragger) {
-          this._activeDragger = newDragger;
-          this._activeDragger.initialize?.();
-        }
-      }
-      const canvas = this.canvas;
-      if (canvas) {
-        if (oldDragger) canvas.classList.remove(`oda-cursor-${oldDragger.name.toLowerCase()}`);
-        if (newDragger) canvas.classList.add(`oda-cursor-${newDragger.name.toLowerCase()}`);
-      }
-
-      this.emitEvent({ type: "changeactivedragger", data: name });
-      this.update();
-    }
-    return this._activeDragger;
-  }
-
-  resetActiveDragger(): void {
-    const dragger = this._activeDragger;
-    if (dragger) {
-      this.setActiveDragger();
-      this.setActiveDragger(dragger.name);
-    }
-  }
-
-  getComponent(name: string): IComponent {
-    return this._components.find((component) => component.name === name);
-  }
-
-  clearSlices(): void {
-    if (!this.visualizeJs) return;
-
-    const visViewer = this.visViewer();
-    const activeView = visViewer.activeView;
-    activeView.removeCuttingPlanes();
-    activeView.delete();
-
-    this.update();
-  }
-
-  clearOverlay(): void {
-    if (!this.visualizeJs) return;
-
-    this._markup.clearOverlay();
-    this.update();
-  }
-
-  syncOverlay(): void {
-    if (!this.visualizeJs) return;
-
-    const visViewer = this.visViewer();
-    const activeView = visViewer.activeView;
-
-    let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
-    if (!overlayView) {
-      const markupModel = visViewer.getMarkupModel();
-      const pDevice = visViewer.getActiveDevice();
-
-      overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
-      overlayView.addModel(markupModel);
-
-      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._markup.syncOverlay();
-    this.update();
-  }
-
-  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;
-  }
-
-  screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
-    if (!this.visualizeJs) return { x: position.x, y: position.y, z: 0 };
-
-    const activeView = this.visViewer().activeView;
-    const worldPoint = activeView.transformScreenToWorld(
-      position.x * window.devicePixelRatio,
-      position.y * window.devicePixelRatio
-    );
-
-    const result = { x: worldPoint[0], y: worldPoint[1], z: worldPoint[2] };
-
-    activeView.delete();
-
-    return result;
-  }
-
-  worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
-    if (!this.visualizeJs) return { x: position.x, y: position.y };
-
-    const activeView = this.visViewer().activeView;
-    const devicePoint = activeView.transformWorldToScreen(position.x, position.y, position.z);
-
-    const result = { x: devicePoint[0] / window.devicePixelRatio, y: devicePoint[1] / window.devicePixelRatio };
-
-    activeView.delete();
-
-    return result;
-  }
-
-  getScale(): { x: number; y: number; z: number } {
-    const result = { x: 1.0, y: 1.0, z: 1.0 };
-
-    const projMatrix = this.visViewer().activeView.projectionMatrix;
-    const tolerance = 1.0e-6;
-
-    const x = projMatrix.get(0, 0);
-    if (x > tolerance || x < -tolerance) result.x = 1 / x;
-
-    const y = projMatrix.get(1, 1);
-    if (y > tolerance || y < -tolerance) result.y = 1 / y;
-
-    const z = projMatrix.get(2, 2);
-    if (z > tolerance || z < -tolerance) result.z = 1 / z;
-
-    return result;
-  }
-
-  getSelected(): string[] {
-    return this.executeCommand("getSelected");
-  }
-
-  setSelected(handles?: string[]): void {
-    this.executeCommand("setSelected", handles);
-  }
-
-  clearSelected(): void {
-    this.executeCommand("clearSelected");
-  }
-
-  hideSelected(): void {
-    this.executeCommand("hideSelected");
-  }
-
-  isolateSelected(): void {
-    this.executeCommand("isolateSelected");
-  }
-
-  showAll(): void {
-    this.executeCommand("showAll");
-  }
-
-  explode(index = 0): void {
-    this.executeCommand("explode", index);
-  }
-
-  collect(): void {
-    this.executeCommand("collect");
-  }
-
-  // Internal loading routines
-
-  async loadReferences(model: Model | File | Assembly): Promise<this> {
-    if (!this.visualizeJs) return this;
-    if (!this.client) return this;
-    if (!model.getReferences) return this;
-
-    const abortController = new AbortController();
-    this._abortControllerForReferences?.abort();
-    this._abortControllerForReferences = abortController;
-
-    let references: any[] = [];
-    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;
-  }
-
-  applyModelTransformMatrix(model: Model | Assembly) {
-    this.executeCommand("applyModelTransform", model);
-  }
-
-  applySceneGraphSettings(options = this.options) {
-    if (!this.visualizeJs) return;
-
-    const visLib = this.visLib();
-    const visViewer = this.visViewer();
-
-    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();
-  }
+    this.update();
+  }
 
   /**
    * Loads a file into the viewer.
@@ -890,8 +461,8 @@ export class Viewer
    * thrown.
    *
    * For URLs, the file extension is used to determine the file format. For a `ArrayBuffer` and `Data
-   * URL`, a file format must be specified using `params.format` parameter (see below). If no appropriate
-   * loader is found for the specified format, an exception will be thrown.
+   * URL`, a file format must be specified using `params.format` parameter. If no appropriate loader is
+   * found for the specified format, an exception will be thrown.
    *
    * If there was an active dragger before opening the file, it will be deactivated. After opening the
    * file, you must manually activate the required dragger.
@@ -908,6 +479,8 @@ export class Viewer
    *
    * Fires:
    *
+   * - {@link CancelEvent | cancel}
+   * - {@link ClearEvent | clear}
    * - {@link OpenEvent | open}
    * - {@link GeometryStartEvent | geometrystart}
    * - {@link GeometryProgressEvent | geometryprogress}
@@ -916,19 +489,20 @@ export class Viewer
    * - {@link GeometryEndEvent | geometryend}
    * - {@link GeometryErrorEvent | geometryerror}
    *
-   * @param file - File to load. Can be one of:
+   * @param file - File to load. Can be:
    *
    *   - `File`, `Assembly` or `Model` instance from the Open Cloud Server
-   *   - File `URL` string
+   *   - `URL` string
    *   - {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string
-   *   - {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object
+   *   - {@link https://developer.mozilla.org/docs/Web/API/File | Web API dFile} object
    *   - {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
    *       object
    *
    * @param params - Loading parameters.
-   * @param params.format - File format string. Required when loading a file as `ArrayBuffer` or `Data
-   *   URL`.
+   * @param params.format - File format. Can be one of `vsf` or `vsfx`. Required when loading a file as
+   *   `ArrayBuffer` or `Data URL`.
    * @param params.mode - Reserved for future use.
+   * @param params.modelId - Reserved for future use.
    * @param params.requestHeader - The
    *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
    *   request.
@@ -942,227 +516,529 @@ export class Viewer
     params: {
       format?: string;
       mode?: string;
+      modelId?: string;
       requestHeader?: HeadersInit;
       withCredentials?: boolean;
     } = {}
   ): Promise<this> {
     if (!this.visualizeJs) return this;
 
-    this.cancel();
-    this.clear();
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", mode: "file", file });
+
+    let model: any = file;
+    if (model && typeof model.getModels === "function") {
+      const models = await model.getModels();
+      model = models.find((model: Model) => model.default) || models[0] || file;
+    }
+    if (model && typeof model.database === "string") {
+      file = model.file;
+    }
+    if (!model) throw new Error(`Format not supported`);
+
+    let format = params.format;
+    if (!format && typeof file["type"] === "string") format = file["type"].split(".").pop();
+    if (!format && typeof file === "string") format = file.split(".").pop();
+    if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
+
+    const loader = loaders.createLoader(this, model, format);
+    if (!loader) throw new Error(`Format not supported`);
+    this.loaders.push(loader);
+
+    this.emitEvent({ type: "geometrystart", file, model });
+    try {
+      await this.loadReferences(model);
+      await loader.load(model, format, params);
+    } catch (error: any) {
+      this.emitEvent({ type: "geometryerror", data: error, file, model });
+      throw error;
+    }
+    this.emitEvent({ type: "geometryend", file, model });
+
+    if (this.visualizeJs) {
+      this.applyModelTransformMatrix(model);
+      this.applySceneGraphSettings();
+    }
+
+    return this;
+  }
+
+  /**
+   * Deprecated since `26.4`. Use {@link open | open()} instead.
+   *
+   * @deprecated
+   */
+  openVsfFile(buffer: Uint8Array | ArrayBuffer): this {
+    console.warn(
+      "Viewer.openVsfFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead."
+    );
+
+    if (!this.visualizeJs) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", mode: "file", file: "", buffer });
+
+    const visViewer = this.visViewer();
+
+    this.emitEvent({ type: "geometrystart", file: "", buffer });
+    try {
+      const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+      visViewer.parseFile(data);
+
+      this.syncOptions();
+      this.syncOverlay();
+      this.update(true);
+
+      this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
+      this.emitEvent({ type: "databasechunk", data, file: "", buffer });
+    } catch (error: any) {
+      this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
+      throw error;
+    }
+    this.emitEvent({ type: "geometryend", file: "", buffer });
+
+    return this;
+  }
+
+  /**
+   * Deprecated since `26.4`. Use {@link open | open()} instead.
+   *
+   * @deprecated
+   */
+  openVsfxFile(buffer: Uint8Array | ArrayBuffer): this {
+    console.warn(
+      "Viewer.openVsfxFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead."
+    );
+
+    if (!this.visualizeJs) return this;
+
+    this.cancel();
+    this.clear();
+
+    this.emitEvent({ type: "open", mode: "file", file: "", buffer });
+
+    const visViewer = this.visViewer();
+
+    this.emitEvent({ type: "geometrystart", file: "", buffer });
+    try {
+      const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+      visViewer.parseVsfx(data);
+
+      this.syncOptions();
+      this.syncOverlay();
+      this.update(true);
+
+      this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
+      this.emitEvent({ type: "databasechunk", data, file: "", buffer });
+    } catch (error: any) {
+      this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
+      throw error;
+    }
+    this.emitEvent({ type: "geometryend", file: "", buffer });
+
+    return this;
+  }
+
+  cancel(): this {
+    this._abortControllerForReferences?.abort();
+    this._abortControllerForReferences = undefined;
+
+    this.loaders.forEach((loader) => loader.cancel());
+
+    this.emitEvent({ type: "cancel" });
+    return this;
+  }
+
+  clear(): this {
+    if (!this.visualizeJs) return this;
+
+    const visViewer = this.visViewer();
+
+    this.setActiveDragger();
+    this.clearSlices();
+    this.clearOverlay();
+    this.clearSelected();
+
+    this.loaders.forEach((loader) => loader.dispose());
+    this.loaders = [];
+
+    this.models.forEach((model) => model.dispose());
+    this.models = [];
+
+    visViewer.clear();
+    visViewer.createLocalDatabase();
+
+    this.syncOptions();
+    this.syncOverlay();
+    this.update(true);
+
+    this.emitEvent({ type: "clear" });
+
+    return this;
+  }
+
+  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;
+  }
+
+  syncOptions(options: IOptions = this.options): this {
+    if (!this.visualizeJs) return this;
+
+    const visLib = this.visLib();
+    const visViewer = this.visViewer();
+
+    const device = visViewer.getActiveDevice();
+    if (device.isNull()) return this;
+
+    // sync Open Cloud visual style
+
+    const view = device.getActiveView();
+
+    view.enableDefaultLighting(true, visLib.DefaultLightingType.kTwoLights);
+    view.setDefaultLightingIntensity(1.25);
+
+    let visualStyleId: any;
+    try {
+      visualStyleId = visViewer.findVisualStyle("OpenCloud");
+    } catch {
+      // Visualize.js 25.11 and earlier threw an exception if the style did not exist.
+      visualStyleId = undefined;
+    }
+
+    if (!visualStyleId || visualStyleId.isNull()) {
+      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, 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;
+
+    // sync Visualize options
+
+    if (options.showWCS !== visViewer.getEnableWCS()) {
+      visViewer.setEnableWCS(options.showWCS);
+    }
+    if (options.cameraAnimation !== visViewer.getEnableAnimation()) {
+      visViewer.setEnableAnimation(options.cameraAnimation);
+    }
+
+    const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
+    if (antialiasing !== visViewer.fxaaAntiAliasing3d) {
+      visViewer.fxaaAntiAliasing3d = antialiasing;
+      visViewer.fxaaQuality = 5;
+    }
+
+    if (options.shadows !== visViewer.shadows) {
+      visViewer.shadows = options.shadows;
+
+      // const canvas = visLib.canvas;
+      // device.invalidate([0, canvas.width, canvas.height, 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();
+    }
 
-    this.emitEvent({ type: "open", file });
+    if (isExist(options.edgeModel)) {
+      const activeView = device.getActiveView();
 
-    let model: any = file;
-    if (model && typeof model.getModels === "function") {
-      const models = await model.getModels();
-      model = models.find((model: Model) => model.default) || models[0] || file;
+      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();
     }
-    if (!model) throw new Error(`Format not supported`);
 
-    let format = params.format;
-    if (!format && typeof model.type === "string") format = model.type.split(".").pop();
-    if (!format && typeof file === "string") format = file.split(".").pop();
-    if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
+    // sync highlighting options
 
-    const loader = loaders.createLoader(this, model, format);
-    if (!loader) throw new Error(`Format not supported`);
-    this.loaders.push(loader);
+    const params = options.enableCustomHighlight ? options : Options.defaults();
 
-    this.emitEvent({ type: "geometrystart", file, model });
-    try {
-      await this.loadReferences(model);
-      await loader.load(model, format, params);
-    } catch (error: any) {
-      this.emitEvent({ type: "geometryerror", data: error, file, model });
-      throw error;
+    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();
     }
-    this.emitEvent({ type: "geometryend", file, model });
 
-    if (this.visualizeJs) {
-      this.applyModelTransformMatrix(model);
-      this.applySceneGraphSettings();
+    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);
     }
 
-    return this;
-  }
+    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();
+    }
 
-  /**
-   * Deprecated since `26.4`. Use {@link open | open()} instead.
-   *
-   * @deprecated
-   */
-  openVsfFile(buffer: Uint8Array | ArrayBuffer): this {
-    console.warn(
-      "Viewer.openVsfFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead."
-    );
+    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);
+    }
 
-    if (!this.visualizeJs) return this;
+    // const canvas = visLib.canvas;
+    // device.invalidate([0, canvas.width, canvas.height, 0]);
 
-    this.cancel();
-    this.clear();
+    view.delete();
+    device.delete();
+
+    this.update();
+
+    return this;
+  }
 
-    this.emitEvent({ type: "open", file: "", buffer });
+  syncOverlay(): void {
+    if (!this.visualizeJs) return;
 
     const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
 
-    this.emitEvent({ type: "geometrystart", file: "", buffer });
-    try {
-      const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
-      visViewer.parseFile(data);
+    let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
+    if (!overlayView) {
+      const markupModel = visViewer.getMarkupModel();
+      const pDevice = visViewer.getActiveDevice();
 
-      this.syncOptions();
-      this.syncOverlay();
-      this.update(true);
+      overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
+      overlayView.addModel(markupModel);
 
-      this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
-      this.emitEvent({ type: "databasechunk", data, file: "", buffer });
-    } catch (error: any) {
-      this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
-      throw error;
+      activeView.addSibling(overlayView);
+      pDevice.addView(overlayView);
     }
-    this.emitEvent({ type: "geometryend", file: "", buffer });
 
-    return this;
-  }
+    overlayView.viewPosition = activeView.viewPosition;
+    overlayView.viewTarget = activeView.viewTarget;
+    overlayView.upVector = activeView.upVector;
+    overlayView.viewFieldWidth = activeView.viewFieldWidth;
+    overlayView.viewFieldHeight = activeView.viewFieldHeight;
 
-  /**
-   * Deprecated since `26.4`. Use {@link open | open()} instead.
-   *
-   * @deprecated
-   */
-  openVsfxFile(buffer: Uint8Array | ArrayBuffer): this {
-    console.warn(
-      "Viewer.openVsfxFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead."
-    );
+    const viewPort = overlayView.getViewport();
+    overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
+    overlayView.vportRect = activeView.vportRect;
 
-    if (!this.visualizeJs) return this;
+    this._markup.syncOverlay();
+    this.update();
+  }
 
-    this.cancel();
-    this.clear();
+  clearOverlay(): void {
+    if (!this.visualizeJs) return;
+
+    this._markup.clearOverlay();
+    this.update();
+  }
 
-    this.emitEvent({ type: "open", file: "", buffer });
+  clearSlices(): void {
+    if (!this.visualizeJs) return;
 
     const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
+    activeView.removeCuttingPlanes();
+    activeView.delete();
 
-    this.emitEvent({ type: "geometrystart", file: "", buffer });
-    try {
-      const data = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
-      visViewer.parseVsfx(data);
+    this.update();
+  }
 
-      this.syncOptions();
-      this.syncOverlay();
-      this.update(true);
+  getSelected(): string[] {
+    return this.executeCommand("getSelected");
+  }
 
-      this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
-      this.emitEvent({ type: "databasechunk", data, file: "", buffer });
-    } catch (error: any) {
-      this.emitEvent({ type: "geometryerror", data: error, file: "", buffer });
-      throw error;
-    }
-    this.emitEvent({ type: "geometryend", file: "", buffer });
+  setSelected(handles?: string[]): void {
+    this.executeCommand("setSelected", handles);
+  }
 
-    return this;
+  getSelected2(): string[] {
+    return this.executeCommand("getSelected2");
   }
 
-  cancel(): this {
-    this._abortControllerForReferences?.abort();
-    this._abortControllerForReferences = undefined;
+  setSelected2(handles?: string[]): void {
+    this.executeCommand("setSelected2", handles);
+  }
 
-    this.loaders.forEach((loader) => loader.cancel());
+  clearSelected(): void {
+    this.executeCommand("clearSelected");
+  }
 
-    this.emitEvent({ type: "cancel" });
-    return this;
+  hideSelected(): void {
+    this.executeCommand("hideSelected");
   }
 
-  clear(): this {
-    if (!this.visualizeJs) return this;
+  isolateSelected(): void {
+    this.executeCommand("isolateSelected");
+  }
 
-    const visViewer = this.visViewer();
+  showAll(): void {
+    this.executeCommand("showAll");
+  }
 
-    this.setActiveDragger();
-    this.clearSlices();
-    this.clearOverlay();
-    this.clearSelected();
+  explode(index = 0): void {
+    this.executeCommand("explode", index);
+  }
 
-    this.loaders.forEach((loader) => loader.dispose());
-    this.loaders = [];
+  collect(): void {
+    this.executeCommand("collect");
+  }
 
-    visViewer.clear();
-    visViewer.createLocalDatabase();
+  /**
+   * Deprecated since `25.12`. Use {@link draggers.registerDragger} instead.
+   */
+  public registerDragger(name: string, dragger: typeof Dragger): void {
+    console.warn(
+      "Viewer.registerDragger() has been deprecated since 25.12 and will be removed in a future release, use draggers('visualizejs').registerDragger() instead."
+    );
+    draggers.registerDragger(name, (viewer: IViewer) => new dragger(viewer));
+  }
 
-    this.syncOptions();
-    this.syncOverlay();
-    this.update(true);
+  activeDragger(): IDragger | null {
+    return this._activeDragger;
+  }
 
-    this.emitEvent({ type: "clear" });
+  setActiveDragger(name = ""): IDragger | null {
+    if (!this._activeDragger || this._activeDragger.name !== name) {
+      const oldDragger = this._activeDragger;
+      let newDragger = null;
 
-    return this;
-  }
+      if (this._activeDragger) {
+        this._activeDragger.dispose();
+        this._activeDragger = null;
+      }
+      if (this.visualizeJs) {
+        newDragger = draggers.createDragger(name, this);
+        if (newDragger) {
+          this._activeDragger = newDragger;
+          this._activeDragger.initialize?.();
+        }
+      }
+      const canvas = this.canvas;
+      if (canvas) {
+        if (oldDragger) canvas.classList.remove(`oda-cursor-${oldDragger.name.toLowerCase()}`);
+        if (newDragger) canvas.classList.add(`oda-cursor-${newDragger.name.toLowerCase()}`);
+      }
 
-  /**
-   * Deprecated since `25.11`. Use {@link IMarkup.getMarkupColor | markup.getMarkupColor()} instead.
-   */
-  getMarkupColor(): { r: number; g: number; b: number } {
-    console.warn(
-      "Viewer.getMarkupColor() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.getMarkupColor() instead."
-    );
-    return this._markup.getMarkupColor();
+      this.emitEvent({ type: "changeactivedragger", data: name });
+      this.update();
+    }
+    return this._activeDragger;
   }
 
-  /**
-   * Deprecated since `25.11`. Use {@link IMarkup.setMarkupColor | markup.setMarkupColor()} instead.
-   */
-  setMarkupColor(r = 255, g = 0, b = 0): void {
-    console.warn(
-      "Viewer.setMarkupColor() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.setMarkupColor() instead."
-    );
-    this._markup.setMarkupColor(r, g, b);
+  resetActiveDragger(): void {
+    const dragger = this._activeDragger;
+    if (dragger) {
+      this.setActiveDragger();
+      this.setActiveDragger(dragger.name);
+    }
   }
 
-  /**
-   * Deprecated since `25.11`. Use {@link IMarkup.colorizeAllMarkup | markup.colorizeAllMarkup()} instead.
-   */
-  colorizeAllMarkup(r = 255, g = 0, b = 0): void {
-    console.warn(
-      "Viewer.colorizeAllMarkup() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.colorizeAllMarkup() instead."
-    );
-    this._markup.colorizeAllMarkup(r, g, b);
+  getComponent(name: string): IComponent {
+    return this._components.find((component) => component.name === name);
   }
 
-  /**
-   * Deprecated since `25.11`. Use
-   * {@link IMarkup.colorizeSelectedMarkups | markup.colorizeSelectedMarkups()} instead.
-   */
-  colorizeSelectedMarkups(r = 255, g = 0, b = 0): void {
-    this._markup.colorizeSelectedMarkups(r, g, b);
-  }
+  drawViewpoint(viewpoint: IViewpoint): void {
+    if (!this.visualizeJs) return;
 
-  /**
-   * Adds an empty `Visualize` markup entity to the overlay.
-   */
-  addMarkupEntity(entityName: string) {
-    if (!this.visualizeJs) return null;
+    const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
 
-    this.syncOverlay();
+    const getPoint3dAsArray = (point3d: IPoint): number[] => {
+      return [point3d.x, point3d.y, point3d.z];
+    };
 
-    const visViewer = this.visViewer();
-    const model = visViewer.getMarkupModel();
-    const entityId = model.appendEntity(entityName);
-    const entityPtr = entityId.openObject();
+    const setOrthogonalCamera = (orthogonal_camera: IOrthogonalCamera) => {
+      if (orthogonal_camera) {
+        activeView.setView(
+          getPoint3dAsArray(orthogonal_camera.view_point),
+          getPoint3dAsArray(orthogonal_camera.direction),
+          getPoint3dAsArray(orthogonal_camera.up_vector),
+          orthogonal_camera.field_width,
+          orthogonal_camera.field_height,
+          true
+        );
 
-    const color = this.getMarkupColor();
-    entityPtr.setColor(color.r, color.g, color.b);
-    entityPtr.setLineWeight(2);
-    entityPtr.delete();
+        this.syncOverlay();
+        this.emitEvent({ type: "changecameramode", mode: "orthographic" });
+      }
+    };
 
-    this.update();
+    const setPerspectiveCamera = (perspective_camera: IPerspectiveCamera) => {};
 
-    return entityId;
-  }
+    const setClippingPlanes = (clipping_planes: IClippingPlane[]) => {
+      if (clipping_planes) {
+        for (const clipping_plane of clipping_planes) {
+          const cuttingPlane = new (this.visLib().OdTvPlane)();
+          cuttingPlane.set(getPoint3dAsArray(clipping_plane.location), getPoint3dAsArray(clipping_plane.direction));
 
-  drawViewpoint(viewpoint: IViewpoint): void {
-    if (!this.visualizeJs) return;
+          activeView.addCuttingPlane(cuttingPlane);
+          activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
+        }
+      }
+    };
+
+    const setSelection = (selection: IEntity[]) => {
+      if (selection) this.setSelected(selection.map((component) => component.handle));
+    };
 
     const draggerName = this._activeDragger?.name;
 
@@ -1174,9 +1050,10 @@ export class Viewer
     this.showAll();
     this.explode();
 
-    this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
-    this.setClippingPlanes(viewpoint.clipping_planes);
-    this.setSelection(viewpoint.selection);
+    setOrthogonalCamera(viewpoint.orthogonal_camera);
+    setPerspectiveCamera(viewpoint.perspective_camera);
+    setClippingPlanes(viewpoint.clipping_planes);
+    setSelection(viewpoint.custom_fields?.selection2 || viewpoint.selection);
     this._markup.setViewpoint(viewpoint);
 
     this.setActiveDragger(draggerName);
@@ -1187,103 +1064,119 @@ export class Viewer
   createViewpoint(): IViewpoint {
     if (!this.visualizeJs) return {};
 
-    const viewpoint: IViewpoint = {};
+    const visViewer = this.visViewer();
+    const activeView = visViewer.activeView;
+
+    const getPoint3dFromArray = (array: number[]): IPoint => {
+      return { x: array[0], y: array[1], z: array[2] };
+    };
+
+    const getOrthogonalCamera = (): IOrthogonalCamera => {
+      return {
+        view_point: getPoint3dFromArray(activeView.viewPosition),
+        direction: getPoint3dFromArray(activeView.viewTarget),
+        up_vector: getPoint3dFromArray(activeView.upVector),
+        field_width: activeView.viewFieldWidth,
+        field_height: activeView.viewFieldHeight,
+        view_to_world_scale: 1,
+      };
+    };
+
+    const getPerspectiveCamera = (): IPerspectiveCamera => {
+      return undefined;
+    };
+
+    const getClippingPlanes = (): IClippingPlane[] => {
+      const clipping_planes = [];
+      for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
+        const cuttingPlane = activeView.getCuttingPlane(i);
+
+        const clipping_plane = {
+          location: getPoint3dFromArray(cuttingPlane.getOrigin()),
+          direction: getPoint3dFromArray(cuttingPlane.normal()),
+        };
+
+        clipping_planes.push(clipping_plane);
+      }
+
+      return clipping_planes;
+    };
+
+    const getSelection = (): IEntity[] => {
+      return this.getSelected().map((handle) => ({ handle }));
+    };
+
+    const getSelection2 = (): IEntity[] => {
+      return this.getSelected2().map((handle) => ({ handle }));
+    };
+
+    const viewpoint: IViewpoint = { custom_fields: {} };
 
-    viewpoint.orthogonal_camera = this.getOrthogonalCameraSettings();
-    viewpoint.clipping_planes = this.getClippingPlanes();
-    viewpoint.selection = this.getSelection();
+    viewpoint.orthogonal_camera = getOrthogonalCamera();
+    viewpoint.perspective_camera = getPerspectiveCamera();
+    viewpoint.clipping_planes = getClippingPlanes();
+    viewpoint.selection = getSelection();
     viewpoint.description = new Date().toDateString();
     this._markup.getViewpoint(viewpoint);
 
+    viewpoint.custom_fields.selection2 = getSelection2();
+
     this.emitEvent({ type: "createviewpoint", data: viewpoint });
 
     return viewpoint;
   }
 
-  private getPoint3dFromArray(array: number[]) {
-    return { x: array[0], y: array[1], z: array[2] };
-  }
+  // IWorldTransform
 
-  private getLogicalPoint3dAsArray(point3d: IPoint) {
-    return [point3d.x, point3d.y, point3d.z];
-  }
+  screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
+    if (!this.visualizeJs) return { x: position.x, y: position.y, z: 0 };
 
-  private getOrthogonalCameraSettings(): IOrthogonalCamera {
-    const visViewer = this.visViewer();
-    const activeView = visViewer.activeView;
+    const activeView = this.visViewer().activeView;
+    const worldPoint = activeView.transformScreenToWorld(
+      position.x * window.devicePixelRatio,
+      position.y * window.devicePixelRatio
+    );
 
-    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,
-      view_to_world_scale: 1,
-    };
-  }
+    const result = { x: worldPoint[0], y: worldPoint[1], z: worldPoint[2] };
 
-  private setOrthogonalCameraSettings(settings: IOrthogonalCamera) {
-    const visViewer = this.visViewer();
-    const activeView = visViewer.activeView;
+    activeView.delete();
 
-    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();
-    }
+    return result;
   }
 
-  private getClippingPlanes(): IClippingPlane[] {
-    const visViewer = this.visViewer();
-    const activeView = visViewer.activeView;
+  worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
+    if (!this.visualizeJs) return { x: position.x, y: position.y };
 
-    const clipping_planes = [];
-    for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
-      const cuttingPlane = activeView.getCuttingPlane(i);
+    const activeView = this.visViewer().activeView;
+    const devicePoint = activeView.transformWorldToScreen(position.x, position.y, position.z);
 
-      const clipping_plane = {
-        location: this.getPoint3dFromArray(cuttingPlane.getOrigin()),
-        direction: this.getPoint3dFromArray(cuttingPlane.normal()),
-      };
+    const result = { x: devicePoint[0] / window.devicePixelRatio, y: devicePoint[1] / window.devicePixelRatio };
 
-      clipping_planes.push(clipping_plane);
-    }
+    activeView.delete();
 
-    return clipping_planes;
+    return result;
   }
 
-  private setClippingPlanes(clipping_planes: IClippingPlane[]) {
-    if (clipping_planes) {
-      const visViewer = this.visViewer();
-      const activeView = visViewer.activeView;
+  getScale(): { x: number; y: number; z: number } {
+    const result = { x: 1.0, y: 1.0, z: 1.0 };
 
-      for (const clipping_plane of clipping_planes) {
-        const cuttingPlane = new (this.visLib().OdTvPlane)();
-        cuttingPlane.set(
-          this.getLogicalPoint3dAsArray(clipping_plane.location),
-          this.getLogicalPoint3dAsArray(clipping_plane.direction)
-        );
+    const projMatrix = this.visViewer().activeView.projectionMatrix;
+    const tolerance = 1.0e-6;
 
-        activeView.addCuttingPlane(cuttingPlane);
-        activeView.setEnableCuttingPlaneFill(true, 0x66, 0x66, 0x66);
-      }
-    }
-  }
+    const x = projMatrix.get(0, 0);
+    if (x > tolerance || x < -tolerance) result.x = 1 / x;
 
-  private getSelection(): IEntity[] {
-    return this.getSelected().map((handle) => ({ handle }));
-  }
+    const y = projMatrix.get(1, 1);
+    if (y > tolerance || y < -tolerance) result.y = 1 / y;
+
+    const z = projMatrix.get(2, 2);
+    if (z > tolerance || z < -tolerance) result.z = 1 / z;
 
-  private setSelection(selection: IEntity[]) {
-    this.setSelected(selection?.map((component) => component.handle));
+    return result;
   }
 
+  // ICommandService
+
   /**
    * Executes the command denoted by the given command. If the command is not found, tries to set active
    * dragger with the specified name.
@@ -1325,6 +1218,118 @@ export class Viewer
     return commands.executeCommand(id, this, ...args);
   }
 
+  // VisualizeJS viewer specific
+
+  /**
+   * Adds an empty `Visualize` markup entity to the VisualizeJS 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;
+  }
+
+  /**
+   * Deprecated since `25.11`. Use {@link IMarkup.getMarkupColor | markup.getMarkupColor()} instead.
+   */
+  getMarkupColor(): { r: number; g: number; b: number } {
+    console.warn(
+      "Viewer.getMarkupColor() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.getMarkupColor() instead."
+    );
+    return this._markup.getMarkupColor();
+  }
+
+  /**
+   * Deprecated since `25.11`. Use {@link IMarkup.setMarkupColor | markup.setMarkupColor()} instead.
+   */
+  setMarkupColor(r = 255, g = 0, b = 0): void {
+    console.warn(
+      "Viewer.setMarkupColor() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.setMarkupColor() instead."
+    );
+    this._markup.setMarkupColor(r, g, b);
+  }
+
+  /**
+   * Deprecated since `25.11`. Use {@link IMarkup.colorizeAllMarkup | markup.colorizeAllMarkup()} instead.
+   */
+  colorizeAllMarkup(r = 255, g = 0, b = 0): void {
+    console.warn(
+      "Viewer.colorizeAllMarkup() has been deprecated since 25.11 and will be removed in a future release, use Viewer.markup.colorizeAllMarkup() instead."
+    );
+    this._markup.colorizeAllMarkup(r, g, b);
+  }
+
+  /**
+   * Deprecated since `25.11`. Use
+   * {@link IMarkup.colorizeSelectedMarkups | markup.colorizeSelectedMarkups()} instead.
+   */
+  colorizeSelectedMarkups(r = 255, g = 0, b = 0): void {
+    this._markup.colorizeSelectedMarkups(r, g, b);
+  }
+
+  private scheduleUpdateAsync(maxScheduleUpdateTimeInMs = 50): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      setTimeout(() => {
+        try {
+          if (this._enableAutoUpdate) {
+            this.visViewer()?.update(maxScheduleUpdateTimeInMs);
+            this._activeDragger?.updatePreview?.();
+          }
+          this.emitEvent({ type: "update", data: false });
+          resolve();
+        } catch (e) {
+          console.error(e);
+          reject();
+        }
+      }, 0);
+    });
+  }
+
+  /**
+   * Updates the viewer asynchronously without locking the user interface. Used to update the viewer
+   * after changes that require a long rendering time.
+   *
+   * Do nothing if the auto-update mode is disabled in the constructor. In this case, register an
+   * `update` event handler and update the `VisualizeJS` viewer and active dragger manually.
+   *
+   * Fires:
+   *
+   * - {@link UpdateEvent | update}
+   *
+   * @param maxScheduleUpdateTimeInMs - Maximum time for one update, default 30 ms.
+   * @param maxScheduleUpdateCount - Maximum count of scheduled updates.
+   */
+  async updateAsync(maxScheduleUpdateTimeInMs = 50, maxScheduleUpdateCount = 50): Promise<void> {
+    if (!this.visualizeJs) return;
+
+    this._isRunAsyncUpdate = true;
+    try {
+      const device = this.visViewer().getActiveDevice();
+      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;
+    }
+  }
+
   public deviceAutoRegeneration() {
     const visViewer = this.visViewer();
     const device = visViewer.getActiveDevice();