@inweb/viewer-visualize 25.12.0 → 26.1.0

package/src/Viewer/Commands/HideSelected.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function hideSelected(viewer: Viewer): void {
+export function hideSelected(viewer: Viewer): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -34,5 +33,3 @@ function hideSelected(viewer: Viewer): void {
   viewer.emitEvent({ type: "hide" });
   viewer.emitEvent({ type: "select", data: undefined, handles: [] });
 }
-
-commands("VisualizeJS").registerCommand("hideSelected", hideSelected);

package/src/Viewer/Commands/IsolateSelected.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function isolateSelected(viewer: Viewer): void {
+export function isolateSelected(viewer: Viewer): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -33,5 +32,3 @@ function isolateSelected(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "isolate" });
 }
-
-commands("VisualizeJS").registerCommand("isolateSelected", isolateSelected);

package/src/Viewer/Commands/RegenerateAll.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function regenerateAll(viewer: Viewer): void {
+export function regenerateAll(viewer: Viewer): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -33,5 +32,3 @@ function regenerateAll(viewer: Viewer): void {
   viewer.update();
   viewer.emit({ type: "regenerateall" });
 }
-
-commands("VisualizeJS").registerCommand("regenerateAll", regenerateAll);

package/src/Viewer/Commands/ResetView.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function resetView(viewer: Viewer): void {
+export function resetView(viewer: Viewer): void {
   if (!viewer.visualizeJs) return;
 
   viewer.executeCommand("setActiveDragger");
@@ -39,5 +38,3 @@ function resetView(viewer: Viewer): void {
 
   viewer.emit({ type: "resetview" });
 }
-
-commands("VisualizeJS").registerCommand("resetView", resetView);

package/src/Viewer/Commands/SelectModel.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function selectModel(viewer: Viewer, handle: string): void {
+export function selectModel(viewer: Viewer, handle: string): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -48,5 +47,3 @@ function selectModel(viewer: Viewer, handle: string): void {
   }
   modelItr.delete();
 }
-
-commands("VisualizeJS").registerCommand("selectModel", selectModel);

package/src/Viewer/Commands/SetActiveDragger.ts

@@ -21,9 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-commands("VisualizeJS").registerCommand("setActiveDragger", (viewer: Viewer, dragger = "") => {
+export function setActiveDragger(viewer: Viewer, dragger = "") {
   viewer.setActiveDragger(dragger);
-});
+}

package/src/Viewer/Commands/SetDefaultViewPosition.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function setDefaultViewPosition(viewer: Viewer, position = ""): void {
+export function setDefaultViewPosition(viewer: Viewer, position = ""): void {
   if (!viewer.visualizeJs) return;
 
   const visLib = viewer.visLib();
@@ -36,15 +35,3 @@ function setDefaultViewPosition(viewer: Viewer, position = ""): void {
   viewer.update();
   viewer.emit({ type: "viewposition", data: position });
 }
-
-commands("VisualizeJS").registerCommand("setDefaultViewPosition", setDefaultViewPosition);
-commands("VisualizeJS").registerCommand("k3DViewTop", (viewer) => setDefaultViewPosition(viewer, "k3DViewTop"));
-commands("VisualizeJS").registerCommand("k3DViewBottom", (viewer) => setDefaultViewPosition(viewer, "k3DViewBottom"));
-commands("VisualizeJS").registerCommand("k3DViewLeft", (viewer) => setDefaultViewPosition(viewer, "k3DViewLeft"));
-commands("VisualizeJS").registerCommand("k3DViewRight", (viewer) => setDefaultViewPosition(viewer, "k3DViewRight"));
-commands("VisualizeJS").registerCommand("k3DViewFront", (viewer) => setDefaultViewPosition(viewer, "k3DViewFront"));
-commands("VisualizeJS").registerCommand("k3DViewBack", (viewer) => setDefaultViewPosition(viewer, "k3DViewBack"));
-commands("VisualizeJS").registerCommand("k3DViewSE", (viewer) => setDefaultViewPosition(viewer, "k3DViewSE"));
-commands("VisualizeJS").registerCommand("k3DViewSW", (viewer) => setDefaultViewPosition(viewer, "k3DViewSW"));
-commands("VisualizeJS").registerCommand("k3DViewNE", (viewer) => setDefaultViewPosition(viewer, "k3DViewNE"));
-commands("VisualizeJS").registerCommand("k3DViewNW", (viewer) => setDefaultViewPosition(viewer, "k3DViewNW"));

package/src/Viewer/Commands/SetMarkupColor.ts

@@ -21,9 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-commands("VisualizeJS").registerCommand("setMarkupColor", (viewer: Viewer, r = 255, g = 0, b = 0) => {
-  viewer.setMarkupColor(r, g, b);
-});
+export function setMarkupColor(viewer: Viewer, r = 255, g = 0, b = 0) {
+  viewer.markup.setMarkupColor(r, g, b);
+}

package/src/Viewer/Commands/SetSelected.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function setSelected(viewer: Viewer, handles: string[] = []): void {
+export function setSelected(viewer: Viewer, handles: string[] = []): void {
   if (!viewer.visualizeJs) return;
 
   const visLib = viewer.visLib();
@@ -43,5 +42,3 @@ function setSelected(viewer: Viewer, handles: string[] = []): void {
 
   selectionSet.delete();
 }
-
-commands("VisualizeJS").registerCommand("setSelected", setSelected);

package/src/Viewer/Commands/ShowAll.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function showAll(viewer: Viewer): void {
+export function showAll(viewer: Viewer): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -33,5 +32,3 @@ function showAll(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "showall" });
 }
-
-commands("VisualizeJS").registerCommand("showAll", showAll);

package/src/Viewer/Commands/ZoomToExtents.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function zoomToExtents(viewer: Viewer, force = false, animate = viewer.options.cameraAnimation): void {
+export function zoomToExtents(viewer: Viewer, force = false, animate = viewer.options.cameraAnimation): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -39,6 +38,3 @@ function zoomToExtents(viewer: Viewer, force = false, animate = viewer.options.c
   viewer.update();
   viewer.emitEvent({ type: "zoom" });
 }
-
-commands("VisualizeJS").registerCommand("zoomToExtents", zoomToExtents);
-commands("VisualizeJS").registerCommandAlias("zoomToExtents", "zoomExtents");

package/src/Viewer/Commands/ZoomToObjects.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
+export function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
   if (!viewer.visualizeJs) return;
 
   const visLib = viewer.visLib();
@@ -44,5 +43,3 @@ function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
 
   selectionSet.delete();
 }
-
-commands("VisualizeJS").registerCommand("zoomToObjects", zoomToObjects);

package/src/Viewer/Commands/ZoomToSelected.ts

@@ -21,10 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 
-function zoomToSelected(viewer: Viewer): void {
+export function zoomToSelected(viewer: Viewer): void {
   if (!viewer.visualizeJs) return;
 
   const visViewer = viewer.visViewer();
@@ -36,5 +35,3 @@ function zoomToSelected(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "zoom" });
 }
-
-commands("VisualizeJS").registerCommand("zoomToSelected", zoomToSelected);

package/src/Viewer/Commands/index.ts

@@ -21,26 +21,92 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import "./ApplyModelTransform";
-import "./ClearMarkup";
-import "./ClearSelected";
-import "./ClearSlices";
-import "./CreatePreview";
-import "./Explode";
-import "./GetDefaultViewPositions";
-import "./GetModels";
-import "./GetSelected";
-import "./HideSelected";
-import "./IsolateSelected";
-import "./RegenerateAll";
-import "./ResetView";
-import "./SelectModel";
-import "./SetActiveDragger";
-import "./SetDefaultViewPosition";
-import "./SetMarkupColor";
-import "./SetSelected";
-import "./ShowAll";
-import "./ZoomToExtents";
-import "./ZoomToObjects";
-import "./ZoomToSelected";
-import "./AutoTransformAllModelsToCentralPoint";
+import { ICommandsRegistry, commandsRegistry } from "@inweb/viewer-core";
+
+import { applyModelTransform } from "./ApplyModelTransform";
+import { clearMarkup } from "./ClearMarkup";
+import { clearSelected } from "./ClearSelected";
+import { clearSlices } from "./ClearSlices";
+import { createPreview } from "./CreatePreview";
+import { explode, collect } from "./Explode";
+import { getDefaultViewPositions } from "./GetDefaultViewPositions";
+import { getModels } from "./GetModels";
+import { getSelected } from "./GetSelected";
+import { hideSelected } from "./HideSelected";
+import { isolateSelected } from "./IsolateSelected";
+import { regenerateAll } from "./RegenerateAll";
+import { resetView } from "./ResetView";
+import { selectModel } from "./SelectModel";
+import { setActiveDragger } from "./SetActiveDragger";
+import { setDefaultViewPosition } from "./SetDefaultViewPosition";
+import { setMarkupColor } from "./SetMarkupColor";
+import { setSelected } from "./SetSelected";
+import { showAll } from "./ShowAll";
+import { zoomToExtents } from "./ZoomToExtents";
+import { zoomToObjects } from "./ZoomToObjects";
+import { zoomToSelected } from "./ZoomToSelected";
+import { autoTransformAllModelsToCentralPoint } from "./AutoTransformAllModelsToCentralPoint";
+
+/**
+ * A commands registry. Use this registry to register custom commands.
+ *
+ * To implement custom command:
+ *
+ * 1. Define a command handler with a first `viewer` parameter.
+ * 2. Register command handler in the commands registry by calling the {@link commands.registerCommand}.
+ *
+ * @example <caption>Implementing a custom command.</caption>
+ *   import { commands, Viewer } from "@inweb/viewer-visualize";
+ *
+ *   function commandHandler(viewer: Viewer, name = "world"): void {
+ *     console.log(`Hello ${name}!!!`);
+ *   }
+ *
+ *   commands.registerCommand("sayHello", commandHandler);
+ *
+ * @example <caption>Calling a custom command.</caption>
+ *   viewer.executeCommand("sayHello", "user");
+ */
+export const commands: ICommandsRegistry = commandsRegistry("visualizejs");
+
+// build-in commands
+
+commands.registerCommand("applyModelTransform", applyModelTransform);
+commands.registerCommand("clearMarkup", clearMarkup);
+commands.registerCommand("clearSelected", clearSelected);
+commands.registerCommand("clearSlices", clearSlices);
+commands.registerCommand("createPreview", createPreview);
+commands.registerCommand("explode", explode);
+commands.registerCommand("collect", collect);
+commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
+commands.registerCommand("getModels", getModels);
+commands.registerCommand("getSelected", getSelected);
+commands.registerCommand("hideSelected", hideSelected);
+commands.registerCommand("isolateSelected", isolateSelected);
+commands.registerCommand("regenerateAll", regenerateAll);
+commands.registerCommand("resetView", resetView);
+commands.registerCommand("selectModel", selectModel);
+commands.registerCommand("setActiveDragger", setActiveDragger);
+commands.registerCommand("setDefaultViewPosition", setDefaultViewPosition);
+commands.registerCommand("setMarkupColor", setMarkupColor);
+commands.registerCommand("setSelected", setSelected);
+commands.registerCommand("showAll", showAll);
+commands.registerCommand("zoomToExtents", zoomToExtents);
+commands.registerCommand("zoomToObjects", zoomToObjects);
+commands.registerCommand("zoomToSelected", zoomToSelected);
+commands.registerCommand("autoTransformAllModelsToCentralPoint", autoTransformAllModelsToCentralPoint);
+
+commands.registerCommand("k3DViewTop", (viewer) => setDefaultViewPosition(viewer, "k3DViewTop"));
+commands.registerCommand("k3DViewBottom", (viewer) => setDefaultViewPosition(viewer, "k3DViewBottom"));
+commands.registerCommand("k3DViewLeft", (viewer) => setDefaultViewPosition(viewer, "k3DViewLeft"));
+commands.registerCommand("k3DViewRight", (viewer) => setDefaultViewPosition(viewer, "k3DViewRight"));
+commands.registerCommand("k3DViewFront", (viewer) => setDefaultViewPosition(viewer, "k3DViewFront"));
+commands.registerCommand("k3DViewBack", (viewer) => setDefaultViewPosition(viewer, "k3DViewBack"));
+commands.registerCommand("k3DViewSE", (viewer) => setDefaultViewPosition(viewer, "k3DViewSE"));
+commands.registerCommand("k3DViewSW", (viewer) => setDefaultViewPosition(viewer, "k3DViewSW"));
+commands.registerCommand("k3DViewNE", (viewer) => setDefaultViewPosition(viewer, "k3DViewNE"));
+commands.registerCommand("k3DViewNW", (viewer) => setDefaultViewPosition(viewer, "k3DViewNW"));
+
+commands.registerCommandAlias("clearMarkup", "clearOverlay");
+commands.registerCommandAlias("clearSelected", "unselect");
+commands.registerCommandAlias("zoomToExtents", "zoomExtents");

package/src/Viewer/Components/GestureManagerComponent.ts

@@ -0,0 +1,42 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+import { GestureManager } from "../Draggers/Common/GestureManager";
+
+export class GestureManagerComponent implements IComponent {
+  protected viewer: Viewer;
+  private gestureManager: GestureManager;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.gestureManager = new GestureManager(viewer);
+    this.gestureManager.initialize();
+  }
+
+  dispose() {
+    this.gestureManager.dispose();
+    this.gestureManager = undefined;
+  }
+}

package/src/Viewer/Components/RenderLoopComponent.ts

@@ -0,0 +1,44 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class RenderLoopComponent implements IComponent {
+  protected viewer: Viewer;
+  protected requestId: number;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.animate();
+  }
+
+  dispose() {
+    cancelAnimationFrame(this.requestId);
+  }
+
+  animate = (time = 0) => {
+    this.requestId = requestAnimationFrame(this.animate);
+    this.viewer.render(time);
+  };
+}

package/src/Viewer/Components/ResizeCanvasComponent.ts

@@ -0,0 +1,44 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class ResizeCanvasComponent implements IComponent {
+  protected viewer: Viewer;
+  protected resizeObserver: ResizeObserver;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.resizeObserver = new ResizeObserver(this.resizeViewer);
+    this.resizeObserver.observe(viewer.canvas.parentElement);
+  }
+
+  dispose() {
+    this.resizeObserver.disconnect();
+  }
+
+  resizeViewer = () => {
+    this.viewer.resize();
+  };
+}

package/src/Viewer/Components/ZoomWheelComponent.ts

@@ -0,0 +1,43 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+import { OdZoomWheelDragger } from "../Draggers/OdZoomWheelDragger";
+
+export class ZoomWheelComponent implements IComponent {
+  protected viewer: Viewer;
+  private zoomWheelDragger: OdZoomWheelDragger;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.zoomWheelDragger = new OdZoomWheelDragger(viewer);
+    this.zoomWheelDragger.name = "ZoomWheel";
+    this.zoomWheelDragger.initialize();
+  }
+
+  dispose() {
+    this.zoomWheelDragger.dispose();
+    this.zoomWheelDragger = undefined;
+  }
+}

package/src/Viewer/Components/index.ts

@@ -0,0 +1,76 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
+
+import { RenderLoopComponent } from "./RenderLoopComponent";
+import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
+import { ZoomWheelComponent } from "./ZoomWheelComponent";
+import { GestureManagerComponent } from "./GestureManagerComponent";
+
+/**
+ * Viewer components registry. Use this registry to register custom components.
+ *
+ * To implement custom component:
+ *
+ * 1. Define a component class implements {@link IComponent}.
+ * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
+ * 3. Define the component logic in the event listeners. For example, listen for the `mousedown`
+ *    event and select objects when the left mouse button is pressed.
+ * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
+ * 5. Register component provider in the components registry by calling the
+ *    {@link components.registerComponent}.
+ *
+ * @example <caption>Implementing a custom component.</caption>
+ *   import { IComponent, components, Viewer } from "@inweb/viewer-visualize";
+ *
+ *   class MyComponent implements IComponent {
+ *     protected viewer: Viewer;
+ *
+ *     constructor(viewer: Viewer) {
+ *       this.viewer = viewer;
+ *       this.viewer.addEventListener("mousedown", this.onMouseDown);
+ *     }
+ *
+ *     override dispose() {
+ *       this.viewer.removeEventListener("mousedown", this.onMouseDown);
+ *     }
+ *
+ *     onMouseDown = (event: PointerEvent) => {
+ *       // place custom logic here
+ *     };
+ *   }
+ *
+ *   components.registerComponent(
+ *     "MyComponent",
+ *     (viewer): IComponent => new MyComponent(viewer)
+ *   );
+ */
+export const components: IComponentsRegistry = componentsRegistry("visualizejs");
+
+// build-in components
+
+components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
+components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
+components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComponent(viewer));
+components.registerComponent("GestureManagerComponent", (viewer) => new GestureManagerComponent(viewer));

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

@@ -100,7 +100,7 @@ export class OrbitAction {
     );
     extView.delete();
 
-    this._subject.activeDragger()?.updatePreview();
+    this._subject.activeDragger()?.updatePreview?.();
   }
 
   public endAction() {

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

@@ -80,7 +80,7 @@ export class PanAction {
     position.delete();
     positionWithDelta.delete();
 
-    this._subject.activeDragger()?.updatePreview();
+    this._subject.activeDragger()?.updatePreview?.();
     this._subject.emitEvent({
       type: "pan",
       x: absoluteX,