@inweb/viewer-three 25.12.0 → 26.1.0

package/src/Viewer/Viewer.ts

@@ -30,9 +30,9 @@ import { Assembly, Client, Model, File } from "@inweb/client";
 import {
   CANVAS_EVENTS,
   CanvasEventMap,
-  commands,
   IClippingPlane,
   IComponent,
+  IEntity,
   IDragger,
   IOptions,
   IPerspectiveCamera,
@@ -45,27 +45,10 @@ import {
 } from "@inweb/viewer-core";
 import { IMarkup, IWorldTransform, Markup } from "@inweb/markup";
 
-import { PanDragger } from "./draggers/PanDragger";
-import { OrbitDragger } from "./draggers/OrbitDragger";
-import { ZoomDragger } from "./draggers/ZoomDragger";
-import { WalkDragger } from "./draggers/WalkDragger";
-import { CuttingPlaneXAxisDragger } from "./draggers/CuttingPlaneXAxis";
-import { CuttingPlaneYAxisDragger } from "./draggers/CuttingPlaneYAxis";
-import { CuttingPlaneZAxisDragger } from "./draggers/CuttingPlaneZAxis";
-import { MeasureLineDragger } from "./draggers/MeasureLineDragger";
-
-import { IDisposable } from "./IDisposable";
-import { ExtentsComponent } from "./components/ExtentsComponent";
-import { LightComponent } from "./components/LightComponent";
-import { BackgroundComponent } from "./components/BackgroundComponent";
-import { DefaultPositionComponent } from "./components/DefaultPositionComponent";
-import { ResizeCanvasComponent } from "./components/ResizeCanvasComponent";
-import { RenderLoopComponent } from "./components/RenderLoopComponent";
-import { SelectionComponent } from "./components/SelectionComponent";
-// import { ViewPositionComponent } from "./components/ViewPositionComponent";
-import { WCSHelperComponent } from "./components/WCSHelperComponent";
-// import { AxesHelperComponent } from "./components/AxesHelperComponent";
-// import { ExtentsHelperComponent } from "./components/ExtentsHelperComponent";
+import { draggers } from "./draggers";
+import { commands } from "./commands";
+
+import { components } from "./components";
 
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
@@ -91,10 +74,8 @@ export class Viewer
   public extents: Box3;
   public target: Vector3;
 
-  private draggerFactory: Record<string, any>;
   private _activeDragger: IDragger | null;
-
-  private components: Array<IDisposable>;
+  private _components: Array<IComponent>;
 
   private renderNeeded: boolean;
   private renderTime: DOMHighResTimeStamp;
@@ -115,24 +96,13 @@ export class Viewer
     this.canvasEvents = CANVAS_EVENTS;
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
+    this.models = [];
+    this.selected = [];
     this.extents = new Box3();
     this.target = new Vector3();
 
-    this.draggerFactory = {
-      Pan: PanDragger,
-      Zoom: ZoomDragger,
-      Orbit: OrbitDragger,
-      Walk: WalkDragger,
-      CuttingPlaneXAxis: CuttingPlaneXAxisDragger,
-      CuttingPlaneYAxis: CuttingPlaneYAxisDragger,
-      CuttingPlaneZAxis: CuttingPlaneZAxisDragger,
-      MeasureLine: MeasureLineDragger,
-    };
     this._activeDragger = null;
-
-    this.models = [];
-    this.components = [];
-    this.selected = [];
+    this._components = [];
 
     this.renderTime = 0;
 
@@ -147,7 +117,11 @@ export class Viewer
   }
 
   get draggers(): string[] {
-    return Object.keys(this.draggerFactory);
+    return [...draggers.getDraggers().keys()];
+  }
+
+  get components(): string[] {
+    return [...components.getComponents().keys()];
   }
 
   /**
@@ -181,17 +155,9 @@ export class Viewer
 
     this._markup.initialize(this.canvas, this.canvasEvents, this, this);
 
-    this.components.push(new ExtentsComponent(this));
-    this.components.push(new LightComponent(this));
-    this.components.push(new BackgroundComponent(this));
-    // this.components.push(new ViewPositionComponent(this));
-    this.components.push(new DefaultPositionComponent(this));
-    this.components.push(new ResizeCanvasComponent(this));
-    this.components.push(new RenderLoopComponent(this));
-    this.components.push(new SelectionComponent(this));
-    this.components.push(new WCSHelperComponent(this));
-    // this.components.push(new AxesHelperComponent(this));
-    // this.components.push(new ExtentsHelperComponent(this));
+    for (let name of components.getComponents().keys()) {
+      this._components.push(components.createComponent(name, this));
+    }
 
     this.syncOptions();
     this.syncOverlay();
@@ -212,8 +178,8 @@ export class Viewer
     this.cancel();
     this.emitEvent({ type: "dispose" });
 
-    this.components.forEach((component: IDisposable) => component.dispose());
-    this.components = [];
+    this._components.forEach((component: IComponent) => component.dispose());
+    this._components = [];
 
     this.setActiveDragger();
     this.removeAllListeners();
@@ -257,6 +223,8 @@ export class Viewer
     this.renderer.render(this.helpers, this.camera);
     this.renderer.clippingPlanes = clippingPlanes;
 
+    this._activeDragger?.updatePreview?.();
+
     const deltaTime = (time - this.renderTime) / 1000;
     this.renderTime = time;
     this.emitEvent({ type: "render", time, deltaTime });
@@ -566,26 +534,27 @@ export class Viewer
 
   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.isInitialized()) {
-        const Constructor = this.draggerFactory[name];
-        if (Constructor) {
-          this._activeDragger = new Constructor(this);
-          this._activeDragger.name = name;
+        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();
     }
@@ -635,11 +604,11 @@ export class Viewer
   }
 
   executeCommand(id: string, ...args: any[]): any {
-    return commands("ThreeJS").executeCommand(id, this, ...args);
+    return commands.executeCommand(id, this, ...args);
   }
 
-  getComponent(type): any {
-    return this.components.find((component) => component instanceof type);
+  getComponent(name: string): IComponent {
+    return this._components.find((component) => component.name === name);
   }
 
   drawViewpoint(viewpoint: IViewpoint): void {
@@ -670,7 +639,7 @@ export class Viewer
       });
     };
 
-    const setSelection = (selection: IComponent[]) => {
+    const setSelection = (selection: IEntity[]) => {
       this.setSelected(selection?.map((component) => component.handle));
     };
 
@@ -722,7 +691,7 @@ export class Viewer
       return clipping_planes;
     };
 
-    const getSelection = (): IComponent[] => {
+    const getSelection = (): IEntity[] => {
       return this.getSelected().map((handle) => ({ handle }));
     };
 

package/src/Viewer/commands/ApplyModelTransform.ts

@@ -21,13 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Model, File, Assembly } from "@inweb/client";
-import { commands } from "@inweb/viewer-core";
+import type { Model, File, Assembly } from "@inweb/client";
 import type { Viewer } from "../Viewer";
 
-// gltf root object don't have model handle
-function applyModelTransform(viewer: Viewer, model: Model | File | Assembly) {
+export function applyModelTransform(viewer: Viewer, model: Model | File | Assembly) {
   console.warn("applyModelTransform not implemented");
 }
-
-commands("ThreeJS").registerCommand("applyModelTransform", applyModelTransform);

package/src/Viewer/commands/ClearMarkup.ts

@@ -21,8 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-commands("ThreeJS").registerCommand("clearMarkup", (viewer: Viewer) => viewer.clearOverlay());
-commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");
+export function clearMarkup(viewer: Viewer) {
+  viewer.clearOverlay();
+}

package/src/Viewer/commands/ClearSelected.ts

@@ -21,11 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import { SelectionComponent } from "../components/SelectionComponent";
 
-function clearSelected(viewer: Viewer): void {
+export function clearSelected(viewer: Viewer): void {
   const selection = new SelectionComponent(viewer);
   selection.clearSelection();
   selection.dispose();
@@ -33,6 +32,3 @@ function clearSelected(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "select", data: undefined, handles: [] });
 }
-
-commands("ThreeJS").registerCommand("clearSelected", clearSelected);
-commands("ThreeJS").registerCommandAlias("clearSelected", "unselect");

package/src/Viewer/commands/ClearSlices.ts

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

package/src/Viewer/commands/CreatePreview.ts

@@ -21,12 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function createPreview(viewer: Viewer, type = "image/jpeg", encoderOptions = 0.25): string {
+export function createPreview(viewer: Viewer, type = "image/jpeg", encoderOptions = 0.25): string {
   viewer.update(true);
   return viewer.canvas.toDataURL(type, encoderOptions);
 }
-
-commands("ThreeJS").registerCommand("createPreview", createPreview);

package/src/Viewer/commands/Explode.ts

@@ -22,8 +22,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, Object3D, Vector3 } from "three";
-
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 function calcObjectDepth(object: Object3D, depth: number) {
@@ -72,12 +70,13 @@ function explodeScene(scene: Object3D, scale = 0) {
   explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
 }
 
-function explode(viewer: Viewer, index = 0): void {
+export function explode(viewer: Viewer, index = 0): void {
   viewer.models.forEach((gltf) => explodeScene(gltf.scene, index));
 
   viewer.update();
   viewer.emitEvent({ type: "explode", data: index });
 }
 
-commands("ThreeJS").registerCommand("explode", explode);
-commands("ThreeJS").registerCommand("collect", (viewer: any) => explode(viewer, 0));
+export function collect(viewer: Viewer) {
+  explode(viewer, 0);
+}

package/src/Viewer/commands/GetDefaultViewPositions.ts

@@ -21,11 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import { defaultViewPositions } from "./SetDefaultViewPosition";
 
-function getDefaultViewPositions(): string[] {
+export function getDefaultViewPositions(): string[] {
   return Object.keys(defaultViewPositions);
 }
-
-commands("ThreeJS").registerCommand("getDefaultViewPositions", getDefaultViewPositions);

package/src/Viewer/commands/GetModels.ts

@@ -21,12 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function getModels(viewer: Viewer): string[] {
-  const handles: string[] = viewer.models.map((model) => model.userData.handle || "").filter((handle) => handle);
-  return handles;
+export function getModels(viewer: Viewer): string[] {
+  return viewer.models.map((model) => model.userData?.handle || "").filter((handle) => handle);
 }
-
-commands("ThreeJS").registerCommand("getModels", getModels);

package/src/Viewer/commands/GetSelected.ts

@@ -21,11 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function getSelected(viewer: Viewer): string[] {
+export function getSelected(viewer: Viewer): string[] {
   return viewer.selected.map((object) => object.userData?.handle).filter((handle) => handle);
 }
-
-commands("ThreeJS").registerCommand("getSelected", getSelected);

package/src/Viewer/commands/HideSelected.ts

@@ -21,11 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import { SelectionComponent } from "../components/SelectionComponent";
 
-function hideSelected(viewer: Viewer): void {
+export function hideSelected(viewer: Viewer): void {
   viewer.selected.forEach((object) => (object.visible = false));
 
   const selection = new SelectionComponent(viewer);
@@ -36,5 +35,3 @@ function hideSelected(viewer: Viewer): void {
   viewer.emitEvent({ type: "hide" });
   viewer.emitEvent({ type: "select", data: undefined, handles: [] });
 }
-
-commands("ThreeJS").registerCommand("hideSelected", hideSelected);

package/src/Viewer/commands/IsolateSelected.ts

@@ -22,11 +22,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Object3D } from "three";
-
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function isolateSelected(viewer: Viewer): void {
+export function isolateSelected(viewer: Viewer): void {
   const selectedSet = new Set(viewer.selected);
 
   function isolateObject(object: Object3D, depth: number): boolean {
@@ -46,5 +44,3 @@ function isolateSelected(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "isolate" });
 }
-
-commands("ThreeJS").registerCommand("isolateSelected", isolateSelected);

package/src/Viewer/commands/RegenerateAll.ts

@@ -21,12 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function regenerateAll(viewer: Viewer): void {
-  console.warn("regenerateAll not implemented");
+export function regenerateAll(viewer: Viewer): void {
   viewer.emit({ type: "regenerateall" });
 }
-
-commands("ThreeJS").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 type { Viewer } from "../Viewer";
 
-function resetView(viewer: Viewer): void {
+export function resetView(viewer: Viewer): void {
   viewer.executeCommand("setActiveDragger");
   viewer.executeCommand("clearSlices");
   viewer.executeCommand("clearOverlay");
@@ -37,5 +36,3 @@ function resetView(viewer: Viewer): void {
 
   viewer.emit({ type: "resetview" });
 }
-
-commands("ThreeJS").registerCommand("resetView", resetView);

package/src/Viewer/commands/SelectModel.ts

@@ -21,12 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function selectModel(viewer: Viewer, handle: string): void {
+export function selectModel(viewer: Viewer, handle: string): void {
   console.warn("selectModel not implemented");
   viewer.emit({ type: "select", data: [] });
 }
-
-commands("ThreeJS").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 type { Viewer } from "../Viewer";
 
-commands("ThreeJS").registerCommand("setActiveDragger", (viewer: Viewer, dragger = "") => {
+export function setActiveDragger(viewer: Viewer, dragger = "") {
   viewer.setActiveDragger(dragger);
-});
+}

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -22,8 +22,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Sphere, Vector3 } from "three";
-
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 export const defaultViewPositions = {
@@ -39,7 +37,7 @@ export const defaultViewPositions = {
   nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
 };
 
-function setDefaultViewPosition(viewer: Viewer, position: string): void {
+export function setDefaultViewPosition(viewer: Viewer, position: string): void {
   const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
 
   const center = viewer.extents.getCenter(new Vector3());
@@ -59,26 +57,3 @@ function setDefaultViewPosition(viewer: Viewer, position: string): void {
 
   viewer.executeCommand("zoomToExtents");
 }
-
-commands("ThreeJS").registerCommand("setDefaultViewPosition", setDefaultViewPosition);
-commands("ThreeJS").registerCommand("top", (viewer) => setDefaultViewPosition(viewer, "top"));
-commands("ThreeJS").registerCommand("bottom", (viewer) => setDefaultViewPosition(viewer, "bottom"));
-commands("ThreeJS").registerCommand("left", (viewer) => setDefaultViewPosition(viewer, "left"));
-commands("ThreeJS").registerCommand("right", (viewer) => setDefaultViewPosition(viewer, "right"));
-commands("ThreeJS").registerCommand("front", (viewer) => setDefaultViewPosition(viewer, "front"));
-commands("ThreeJS").registerCommand("back", (viewer) => setDefaultViewPosition(viewer, "back"));
-commands("ThreeJS").registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
-commands("ThreeJS").registerCommand("se", (viewer) => setDefaultViewPosition(viewer, "se"));
-commands("ThreeJS").registerCommand("ne", (viewer) => setDefaultViewPosition(viewer, "ne"));
-commands("ThreeJS").registerCommand("nw", (viewer) => setDefaultViewPosition(viewer, "nw"));
-
-commands("ThreeJS").registerCommandAlias("top", "k3DViewTop");
-commands("ThreeJS").registerCommandAlias("bottom", "k3DViewBottom");
-commands("ThreeJS").registerCommandAlias("left", "k3DViewLeft");
-commands("ThreeJS").registerCommandAlias("right", "k3DViewRight");
-commands("ThreeJS").registerCommandAlias("front", "k3DViewFront");
-commands("ThreeJS").registerCommandAlias("back", "k3DViewBack");
-commands("ThreeJS").registerCommandAlias("se", "k3DViewSE");
-commands("ThreeJS").registerCommandAlias("sw", "k3DViewSW");
-commands("ThreeJS").registerCommandAlias("ne", "k3DViewNE");
-commands("ThreeJS").registerCommandAlias("nw", "k3DViewNW");

package/src/Viewer/commands/SetMarkupColor.ts

@@ -21,10 +21,8 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-commands("ThreeJS").registerCommand("setMarkupColor", (viewer: Viewer, r = 255, g = 0, b = 0) => {
-  console.warn("setMarkupColor not implemented");
-  // 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,11 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import { SelectionComponent } from "../components/SelectionComponent";
 
-function setSelected(viewer: Viewer, handles: string[] = []): void {
+export function setSelected(viewer: Viewer, handles: string[] = []): void {
   const handleSet = new Set(handles);
   const objects = [];
   viewer.scene.traverseVisible((child) => {
@@ -40,5 +39,3 @@ function setSelected(viewer: Viewer, handles: string[] = []): void {
   viewer.update();
   viewer.emitEvent({ type: "select", data: undefined, handles });
 }
-
-commands("ThreeJS").registerCommand("setSelected", setSelected);

package/src/Viewer/commands/ShowAll.ts

@@ -21,14 +21,11 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function showAll(viewer: Viewer): void {
+export function showAll(viewer: Viewer): void {
   viewer.scene.traverse((object) => (object.visible = true));
 
   viewer.update();
   viewer.emitEvent({ type: "showall" });
 }
-
-commands("ThreeJS").registerCommand("showAll", showAll);

package/src/Viewer/commands/ZoomToExtents.ts

@@ -22,11 +22,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Sphere, Vector3 } from "three";
-
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function zoomToExtents(viewer: Viewer): void {
+export function zoomToExtents(viewer: Viewer): void {
   if (viewer.extents.isEmpty()) return;
 
   const center = viewer.extents.getCenter(new Vector3());
@@ -42,6 +40,3 @@ function zoomToExtents(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "zoom" });
 }
-
-commands("ThreeJS").registerCommand("zoomToExtents", zoomToExtents);
-commands("ThreeJS").registerCommandAlias("zoomToExtents", "zoomExtents");

package/src/Viewer/commands/ZoomToObjects.ts

@@ -22,11 +22,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, Sphere, Vector3 } from "three";
-
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
+export function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
   const handleSet = new Set(handles);
   const objects = [];
   viewer.scene.traverseVisible((child) => {
@@ -47,5 +45,3 @@ function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
   viewer.update();
   viewer.emitEvent({ type: "zoom" });
 }
-
-commands("ThreeJS").registerCommand("zoomToObjects", zoomToObjects);

package/src/Viewer/commands/ZoomToSelected.ts

@@ -22,11 +22,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, Sphere, Vector3 } from "three";
-
-import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function zoomToSelected(viewer: Viewer): void {
+export function zoomToSelected(viewer: Viewer): void {
   const extents = viewer.selected.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
 
   if (extents.isEmpty()) extents.copy(viewer.extents);
@@ -44,5 +42,3 @@ function zoomToSelected(viewer: Viewer): void {
   viewer.update();
   viewer.emitEvent({ type: "zoom" });
 }
-
-commands("ThreeJS").registerCommand("zoomToSelected", zoomToSelected);