@inweb/viewer-visualize 25.12.1 → 26.1.1

package/src/Viewer/Draggers/Actions/ZoomAction.ts

@@ -37,7 +37,7 @@ export class ZoomAction {
     viewer.zoomAt(zoomFactor, x, y);
 
     this._subject.deviceAutoRegeneration();
-    this._subject.activeDragger()?.updatePreview();
+    this._subject.activeDragger()?.updatePreview?.();
     this._subject.emitEvent({
       type: "zoomat",
       data: zoomFactor,

package/src/Viewer/Draggers/OdaWalkDragger.ts

@@ -45,6 +45,7 @@ export class OdaWalkDragger extends OdBaseDragger {
   protected animationId: any;
   protected deltaAngle: number;
   protected enableZoomWheelPreviousValue: boolean;
+  protected dragPosition: Point2d;
 
   constructor(subject: Viewer) {
     super(subject);
@@ -210,8 +211,16 @@ export class OdaWalkDragger extends OdBaseDragger {
     this.lastFrameTS = timestamp;
   }
 
-  override drag(x, y, dltX, dltY) {
+  override start(x: number, y: number): void {
+    this.dragPosition = { x, y };
+  }
+
+  override drag(x: number, y: number) {
     if (this.cameraId && this.isDragging) {
+      const dltX = x - this.dragPosition.x;
+      const dltY = y - this.dragPosition.y;
+      this.dragPosition = { x, y };
+
       if (dltX !== 0.0) this.turnLeft(-dltX * this.deltaAngle);
       if (dltY !== 0.0) this.cameraWalker.turnDown(dltY * this.deltaAngle);
       this.subject.update();

package/src/Viewer/Draggers/index.ts

@@ -0,0 +1,91 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { IDraggersRegistry, draggersRegistry } from "@inweb/viewer-core";
+
+import { MeasureLineDragger } from "./MeasureLineDragger";
+import { OdaWalkDragger } from "./OdaWalkDragger";
+import { OdCuttingPlaneXAxisDragger } from "./OdCuttingPlaneXAxisDragger";
+import { OdCuttingPlaneYAxisDragger } from "./OdCuttingPlaneYAxisDragger";
+import { OdCuttingPlaneZAxisDragger } from "./OdCuttingPlaneZAxisDragger";
+import { OdOrbitDragger } from "./OdOrbitDragger";
+import { OdPanDragger } from "./OdPanDragger";
+import { OdZoomDragger } from "./OdZoomDragger";
+import { OdZoomWheelDragger } from "./OdZoomWheelDragger";
+import { OdZoomWindowDragger } from "./OdZoomWindowDragger";
+import { OrbitAroundBuildingDragger } from "./OrbitAroundBuildingDragger";
+
+/**
+ * A draggers registry. Use this registry to register custom draggers.
+ *
+ * To implement custom dragger:
+ *
+ * 1. Define a dragger class implements {@link IDragger}.
+ * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
+ * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove`
+ *    event and zoom in/out when the left mouse button is pressed.
+ * 4. Override {@link IDragger.dispose} and remove mouse event listeners from the viewer.
+ * 5. Register dragger provider in the draggers registry by calling the {@link draggers.registerDragger}.
+ *
+ * @example <caption>Implementing a custom dragger.</caption>
+ *   import { IDragger, draggers, Viewer } from "@inweb/viewer-visualize";
+ *
+ *   class MyDragger implements IDragger {
+ *     protected viewer: Viewer;
+ *
+ *     constructor(viewer: Viewer) {
+ *       this.viewer = viewer;
+ *       this.viewer.addEventListener("pointermove", this.onPointerMove);
+ *     }
+ *
+ *     override dispose() {
+ *       this.viewer.removeEventListener("pointermove", this.onPointerMove);
+ *     }
+ *
+ *     onPointerMove = (event: PointerEvent) => {
+ *       // place custom logic here
+ *     };
+ *   }
+ *
+ *   draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
+ *
+ * @example <caption>Activating a custom dragger.</caption>
+ *   viewer.setActiveDragger("MyDragger");
+ */
+const draggers: IDraggersRegistry = draggersRegistry("visualizejs");
+
+// build-in draggers
+
+draggers.registerDragger("Pan", (viewer) => new OdPanDragger(viewer));
+draggers.registerDragger("Orbit", (viewer) => new OdOrbitDragger(viewer));
+draggers.registerDragger("Zoom", (viewer) => new OdZoomDragger(viewer));
+draggers.registerDragger("ZoomWindow", (viewer) => new OdZoomWindowDragger(viewer));
+draggers.registerDragger("ZoomWheel", (viewer) => new OdZoomWheelDragger(viewer));
+draggers.registerDragger("OrbitAroundBuilding", (viewer) => new OrbitAroundBuildingDragger(viewer));
+draggers.registerDragger("MeasureLine", (viewer) => new MeasureLineDragger(viewer));
+draggers.registerDragger("CuttingPlaneXAxis", (viewer) => new OdCuttingPlaneXAxisDragger(viewer));
+draggers.registerDragger("CuttingPlaneYAxis", (viewer) => new OdCuttingPlaneYAxisDragger(viewer));
+draggers.registerDragger("CuttingPlaneZAxis", (viewer) => new OdCuttingPlaneZAxisDragger(viewer));
+draggers.registerDragger("Walk", (viewer) => new OdaWalkDragger(viewer));
+
+export { draggers };

package/src/Viewer/Viewer.ts

@@ -26,10 +26,10 @@ import { Assembly, Client, File, Model } from "@inweb/client";
 import {
   CANVAS_EVENTS,
   CanvasEventMap,
-  commands,
   Dragger,
   IClippingPlane,
   IComponent,
+  IEntity,
   IDragger,
   IOrthogonalCamera,
   IOptions,
@@ -42,18 +42,9 @@ import {
 } from "@inweb/viewer-core";
 import { IMarkup, IWorldTransform } from "@inweb/markup";
 
-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 { draggers } from "./Draggers";
+import { commands } from "./Commands";
+import { components } from "./Components";
 
 import { loadVisualizeJs } from "./utils";
 import { LoaderFactory } from "./Loaders/LoaderFactory";
@@ -72,8 +63,7 @@ export class Viewer
   implements IViewer, IWorldTransform
 {
   private _activeDragger: IDragger | null;
-  private _zoomWheelDragger: OdZoomWheelDragger | null;
-  private _gestureManager: GestureManager | null;
+  private _components: Array<IComponent>;
   private _enableAutoUpdate: boolean;
   private _isNeedRender: boolean;
   private _isRunAsyncUpdate: boolean;
@@ -86,10 +76,7 @@ export class Viewer
 
   private canvaseventlistener: (event: Event) => void;
 
-  public draggerFactory: Map<string, typeof Dragger>;
   public canvasEvents: string[];
-  private frameId = 0;
-  private _resizeObserver: ResizeObserver | undefined;
   private _markup: IMarkup;
   public canvas: HTMLCanvasElement | undefined;
 
@@ -124,21 +111,9 @@ export class Viewer
     this.client = client;
 
     this._activeDragger = null;
-    this._zoomWheelDragger = null;
-    this._gestureManager = null;
-    this._renderTime = 0;
+    this._components = [];
 
-    this.draggerFactory = new Map<string, typeof Dragger>();
-    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);
+    this._renderTime = 0;
 
     this.canvasEvents = CANVAS_EVENTS.slice();
     this.canvaseventlistener = (event: Event) => this.emit(event);
@@ -148,7 +123,7 @@ export class Viewer
     this._isRunAsyncUpdate = false;
 
     this.render = this.render.bind(this);
-    this.resize = this.resize.bind(this);
+    this.update = this.update.bind(this);
 
     this._markup = MarkupFactory.createMarkup(params.markupType);
   }
@@ -236,22 +211,16 @@ export class Viewer
     this._visualizeJs = visualizeJs;
     this.visualizeJs.canvas = canvas;
     this.visualizeJs.Viewer.create();
+    this.visualizeJs.getViewer().resize(0, canvas.width, canvas.height, 0);
 
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
 
     this._markup.initialize(this.canvas, this.canvasEvents, this, this);
 
-    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();
+    for (let name of components.getComponents().keys()) {
+      this._components.push(components.createComponent(name, this));
+    }
 
     this.syncOpenCloudVisualStyle(true);
     this.syncOptions();
@@ -269,21 +238,12 @@ export class Viewer
     this.cancel();
     this.emitEvent({ type: "dispose" });
 
-    if (this.frameId) cancelAnimationFrame(this.frameId);
-    this.frameId = 0;
+    this._components.forEach((component: IComponent) => component.dispose());
+    this._components = [];
 
     this.setActiveDragger();
     this.removeAllListeners();
 
-    if (this._gestureManager) this._gestureManager.dispose();
-    this._gestureManager = undefined;
-
-    if (this._zoomWheelDragger) this._zoomWheelDragger.dispose();
-    this._zoomWheelDragger = undefined;
-
-    if (this._resizeObserver) this._resizeObserver.disconnect();
-    this._resizeObserver = undefined;
-
     this._markup.dispose();
 
     if (this.canvas) {
@@ -307,9 +267,7 @@ export class Viewer
 
   // internal render/resize routines
 
-  private render(time: DOMHighResTimeStamp) {
-    this.frameId = requestAnimationFrame(this.render);
-
+  public render(time: DOMHighResTimeStamp) {
     if (!this.visualizeJs) return;
 
     if (this._isRunAsyncUpdate) return;
@@ -317,7 +275,7 @@ export class Viewer
     const visViewer = this.visualizeJs.getViewer();
     if (visViewer.isRunningAnimation() || this._isNeedRender) {
       visViewer.update();
-      this._activeDragger?.updatePreview();
+      this._activeDragger?.updatePreview?.();
       this._isNeedRender = !visViewer.getActiveDevice().isValid();
 
       const deltaTime = (time - this._renderTime) / 1000;
@@ -362,7 +320,7 @@ export class Viewer
     if (this._enableAutoUpdate) {
       if (force) {
         this.visViewer()?.update();
-        this.activeDragger()?.updatePreview();
+        this._activeDragger?.updatePreview?.();
       } else {
         this._isNeedRender = true;
       }
@@ -376,7 +334,7 @@ export class Viewer
         try {
           if (this._enableAutoUpdate) {
             this.visViewer()?.update(maxScheduleUpdateTimeInMs);
-            this.activeDragger()?.updatePreview();
+            this._activeDragger?.updatePreview?.();
           }
           this.emitEvent({ type: "update", data: false });
           resolve();
@@ -621,41 +579,22 @@ export class Viewer
     return this;
   }
 
-  /**
-   * List of names of available draggers.
-   *
-   * The following draggers are available by default:
-   *
-   * - `Line`
-   * - `Text`
-   * - `Pan`
-   * - `Orbit`
-   * - `Zoom`
-   * - `ZoomWindow`
-   * - `OrbitAroundBuilding`
-   * - `MeasureLine`
-   * - `CuttingPlaneXAxis`
-   * - `CuttingPlaneYAxis`
-   * - `CuttingPlaneZAxis`
-   * - `Walk`
-   *
-   * To register your own command use the {@link registerDragger | registerDragger()}.
-   */
   get draggers(): string[] {
-    return [...this.draggerFactory.keys()];
+    return [...draggers.getDraggers().keys()];
+  }
+
+  get components(): string[] {
+    return [...components.getComponents().keys()];
   }
 
   /**
-   * Registers a dragger for the viewer.
-   *
-   * Dragger is an object that received mouse/keyboard events and does something to the viewer.
-   * For a quick tutorial on how to create your own dragger, see {@link Dragger}.
-   *
-   * @param name - Dragger name.
-   * @param dragger - Dragger class.
+   * Deprecated since `25.12`. Use {@link draggers.registerDragger} instead.
    */
   public registerDragger(name: string, dragger: typeof Dragger): void {
-    this.draggerFactory.set(name, dragger);
+    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 {
@@ -663,28 +602,27 @@ export class Viewer
   }
 
   setActiveDragger(name = ""): IDragger | null {
-    if (this._activeDragger?.name !== name) {
+    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) {
-        const Constructor = this.draggerFactory.get(name);
-        if (Constructor) {
-          this._activeDragger = new Constructor(this);
-          this._activeDragger.name = name;
-          this._activeDragger.initialize();
+        newDragger = draggers.createDragger(name, this);
+        if (newDragger) {
+          this._activeDragger = newDragger;
+          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(" ");
+        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();
     }
@@ -699,6 +637,10 @@ export class Viewer
     }
   }
 
+  getComponent(name: string): IComponent {
+    return this._components.find((component) => component.name === name);
+  }
+
   clearSlices(): void {
     if (!this.visualizeJs) return;
 
@@ -1280,11 +1222,11 @@ export class Viewer
     }
   }
 
-  private getSelection(): IComponent[] {
+  private getSelection(): IEntity[] {
     return this.getSelected().map((handle) => ({ handle }));
   }
 
-  private setSelection(selection: IComponent[]) {
+  private setSelection(selection: IEntity[]) {
     this.setSelected(selection?.map((component) => component.handle));
   }
 
@@ -1318,8 +1260,7 @@ export class Viewer
    * - `zoomToObjects`
    * - `zoomToSelected`
    *
-   * To register your own command use the {@link ICommands.registerCommand | registerCommand()}
-   * method of the {@link commands} manager.
+   * To register custom command use the {@link commands.registerCommand}.
    *
    * @param id - Command ID or dragger name.
    * @param args - Parameters passed to the command handler function.
@@ -1327,7 +1268,7 @@ export class Viewer
    *   instance. Returns `undefined` if neither the command nor the dragger exists.
    */
   executeCommand(id: string, ...args: any[]): any {
-    return commands("VisualizeJS").executeCommand(id, this, ...args);
+    return commands.executeCommand(id, this, ...args);
   }
 
   public deviceAutoRegeneration() {

package/src/index.ts

@@ -21,10 +21,13 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import "./Viewer/Commands";
-
 export * from "@inweb/viewer-core";
 export * from "@inweb/markup";
+
+export { draggers } from "./Viewer/Draggers";
+export { commands } from "./Viewer/Commands";
+export { components } from "./Viewer/Components";
 export { Viewer } from "./Viewer/Viewer";
+
 export { OdBaseDragger } from "./Viewer/Draggers/Common/OdBaseDragger";
 export { MarkupType } from "./Viewer/Markup/MarkupFactory";