@inweb/viewer-three 25.10.1 → 25.11.1

package/lib/Viewer/Viewer.d.ts

@@ -3,10 +3,11 @@ import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
 import { CanvasEventMap, IDragger, IOptions, IViewer, IViewpoint, Options, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
+import { IMarkup, IWorldTransform } from "@inweb/markup";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
-export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer {
+export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer, IWorldTransform {
     client: Client | undefined;
     protected _options: Options;
     private canvaseventlistener;
@@ -25,6 +26,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     private components;
     private renderNeeded;
     private renderTime;
+    private _markup;
     /**
      * @param client - The `Client` instance that is used to load model reference files from the
      *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
@@ -33,6 +35,12 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     constructor(client?: Client);
     get options(): IOptions;
     get draggers(): string[];
+    /**
+     * 2D markup core instance used to create markups.
+     *
+     * @readonly
+     */
+    get markup(): IMarkup;
     initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this>;
     dispose(): this;
     isInitialized(): boolean;
@@ -140,12 +148,42 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
         withCredentials?: boolean;
     }): Promise<this>;
     clear(): this;
+    syncOverlay(): void;
+    clearOverlay(): void;
+    clearSlices(): void;
+    getSelected(): string[];
+    setSelected(handles?: string[]): void;
+    clearSelected(): void;
+    hideSelected(): void;
+    isolateSelected(): void;
+    showAll(): void;
+    explode(index?: number): void;
+    collect(): void;
     activeDragger(): IDragger | null;
     setActiveDragger(name?: string): IDragger | null;
     resetActiveDragger(): void;
     is3D(): boolean;
-    getSelected(): string[];
-    setSelected(handles?: string[]): void;
+    screenToWorld(position: {
+        x: number;
+        y: number;
+    }): {
+        x: number;
+        y: number;
+        z: number;
+    };
+    worldToScreen(position: {
+        x: number;
+        y: number;
+        z: number;
+    }): {
+        x: number;
+        y: number;
+    };
+    getScale(): {
+        x: number;
+        y: number;
+        z: number;
+    };
     executeCommand(id: string, ...args: any[]): any;
     getComponent(type: any): any;
     drawViewpoint(viewpoint: IViewpoint): void;

package/lib/Viewer/commands/index.d.ts

@@ -1,5 +1,6 @@
 import "./ApplyModelTransform";
 import "./ClearMarkup";
+import "./ClearSelected";
 import "./ClearSlices";
 import "./CreatePreview";
 import "./Explode";
@@ -16,7 +17,6 @@ import "./SetDefaultViewPosition";
 import "./SetMarkupColor";
 import "./SetSelected";
 import "./ShowAll";
-import "./Unselect";
 import "./ZoomToExtents";
 import "./ZoomToObjects";
 import "./ZoomToSelected";

package/lib/Viewer/components/SelectionComponent.d.ts

@@ -11,8 +11,8 @@ export declare class SelectionComponent implements IDisposable {
     onPointerDown: (event: PointerEvent) => void;
     onPointerUp: (event: PointerEvent) => void;
     onDoubleClick: (event: MouseEvent) => void;
-    getMousePosition(event: MouseEvent, position: Vector2): Vector2;
-    getPointerIntersects(position: Vector2): Array<Intersection<Object3D>>;
+    getMousePosition(event: MouseEvent, target: Vector2): Vector2;
+    getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>>;
     select(object: any): void;
     clearSelection(): void;
     optionsChange: () => void;

package/lib/Viewer/draggers/OrbitDragger.d.ts

@@ -1,6 +1,6 @@
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import type { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
+import { OrbitControls } from "../controls/OrbitControls.js";
 export declare class OrbitDragger implements IDisposable {
     protected viewer: Viewer;
     protected orbit: OrbitControls;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "25.10.1",
+  "version": "25.11.1",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -28,9 +28,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.10.1",
-    "@inweb/eventemitter2": "~25.10.1",
-    "@inweb/viewer-core": "~25.10.1"
+    "@inweb/client": "~25.11.1",
+    "@inweb/eventemitter2": "~25.11.1",
+    "@inweb/markup": "~25.11.1",
+    "@inweb/viewer-core": "~25.11.1"
   },
   "devDependencies": {
     "@types/three": "^0.152.1",

package/src/Viewer/Viewer.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Plane, Scene, Vector3, WebGLRenderer } from "three";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
 
@@ -31,14 +31,19 @@ import {
   CANVAS_EVENTS,
   CanvasEventMap,
   commands,
+  IClippingPlane,
+  IComponent,
   IDragger,
   IOptions,
+  IPerspectiveCamera,
+  IPoint,
   IViewer,
   IViewpoint,
   Options,
   OptionsEventMap,
   ViewerEventMap,
 } from "@inweb/viewer-core";
+import { IMarkup, IWorldTransform, Markup } from "@inweb/markup";
 
 import { PanDragger } from "./draggers/PanDragger";
 import { OrbitDragger } from "./draggers/OrbitDragger";
@@ -64,7 +69,10 @@ import { WCSHelperComponent } from "./components/WCSHelperComponent";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
-export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer {
+export class Viewer
+  extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap>
+  implements IViewer, IWorldTransform
+{
   public client: Client | undefined;
   protected _options: Options;
 
@@ -90,6 +98,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
   private renderNeeded: boolean;
   private renderTime: DOMHighResTimeStamp;
 
+  private _markup: IMarkup;
+
   /**
    * @param client - The `Client` instance that is used to load model reference files from the
    *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
@@ -126,6 +136,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
 
     this.render = this.render.bind(this);
     this.update = this.update.bind(this);
+
+    this._markup = new Markup();
   }
 
   get options(): IOptions {
@@ -136,6 +148,15 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return Object.keys(this.draggerFactory);
   }
 
+  /**
+   * 2D markup core instance used to create markups.
+   *
+   * @readonly
+   */
+  get markup(): IMarkup {
+    return this._markup;
+  }
+
   initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this> {
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
 
@@ -156,6 +177,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
 
+    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));
@@ -169,6 +192,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     // this.components.push(new ExtentsHelperComponent(this));
 
     this.syncOptions();
+    this.syncOverlay();
 
     this.renderTime = performance.now();
     this.render(this.renderTime);
@@ -189,11 +213,13 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     this.components.forEach((component: IDisposable) => component.dispose());
     this.components = [];
 
-    this.setActiveDragger("");
+    this.setActiveDragger();
     this.removeAllListeners();
 
     this.clear();
 
+    this._markup.dispose();
+
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
       this.canvas = undefined;
@@ -217,23 +243,21 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     if (!this.renderNeeded) return;
     if (!this.renderer) return;
 
-    const clippingPlanes = this.renderer.clippingPlanes;
+    this.renderNeeded = false;
 
     this.renderer.setViewport(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
+    this.renderer.autoClear = true;
     this.renderer.render(this.scene, this.camera);
 
+    const clippingPlanes = this.renderer.clippingPlanes;
     this.renderer.clippingPlanes = [];
     this.renderer.autoClear = false;
     this.renderer.render(this.helpers, this.camera);
+    this.renderer.clippingPlanes = clippingPlanes;
 
     const deltaTime = (time - this.renderTime) / 1000;
     this.renderTime = time;
     this.emitEvent({ type: "render", time, deltaTime });
-
-    this.renderer.autoClear = true;
-    this.renderer.clippingPlanes = clippingPlanes;
-
-    this.renderNeeded = false;
   }
 
   public update(force = false): void {
@@ -420,8 +444,9 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
       this.models.push(gltf);
       this.scene.add(gltf.scene);
 
+      this.syncOptions();
+      this.syncOverlay();
       this.update();
-      this.resetActiveDragger();
 
       this.emitEvent({ type: "databasechunk" });
       this.emitEvent({ type: "geometryend", data: gltf.scene });
@@ -452,9 +477,8 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     }
 
     this.setActiveDragger();
-
-    this.selected = [];
-    this.renderer.clippingPlanes = [];
+    this.clearSlices();
+    this.clearOverlay();
 
     this.helpers.traverse(disposeObject);
     this.helpers.clear();
@@ -465,12 +489,68 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
 
     this.scene.clear();
 
-    this.emitEvent({ type: "clear" });
+    this.syncOptions();
+    this.syncOverlay();
     this.update(true);
 
+    this.emitEvent({ type: "clear" });
+
     return this;
   }
 
+  syncOverlay(): void {
+    if (!this.renderer) return;
+
+    this._markup.syncOverlay();
+    this.update();
+  }
+
+  clearOverlay(): void {
+    if (!this.renderer) return;
+
+    this._markup.clearOverlay();
+    this.update();
+  }
+
+  clearSlices(): void {
+    if (!this.renderer) return;
+
+    this.renderer.clippingPlanes = [];
+    this.update();
+  }
+
+  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");
+  }
+
   activeDragger(): IDragger | null {
     return this._activeDragger;
   }
@@ -498,6 +578,7 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
           .join(" ");
       }
       this.emitEvent({ type: "changeactivedragger", data: name });
+      this.update();
     }
     return this._activeDragger;
   }
@@ -514,12 +595,34 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return true;
   }
 
-  getSelected(): string[] {
-    return this.executeCommand("getSelected");
+  screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
+    if (!this.renderer) return { x: position.x, y: position.y, z: 0 };
+
+    const rect = this.canvas.getBoundingClientRect();
+    const x = position.x / (rect.width / 2) - 1;
+    const y = -position.y / (rect.height / 2) + 1;
+
+    const point = new Vector3(x, y, -1);
+    point.unproject(this.camera);
+
+    return { x: point.x, y: point.y, z: point.z };
   }
 
-  setSelected(handles?: string[]): void {
-    this.executeCommand("setSelected", handles);
+  worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
+    if (!this.renderer) return { x: position.x, y: position.y };
+
+    const point = new Vector3(position.x, position.y, position.z);
+    point.project(this.camera);
+
+    const rect = this.canvas.getBoundingClientRect();
+    const x = (point.x + 1) * (rect.width / 2);
+    const y = (-point.y + 1) * (rect.height / 2);
+
+    return { x, y };
+  }
+
+  getScale(): { x: number; y: number; z: number } {
+    return { x: 1, y: 1, z: 1 };
   }
 
   executeCommand(id: string, ...args: any[]): any {
@@ -530,13 +633,101 @@ export class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & Opti
     return this.components.find((component) => component instanceof type);
   }
 
-  drawViewpoint(viewpoint: IViewpoint): void {}
+  drawViewpoint(viewpoint: IViewpoint): void {
+    if (!this.renderer) return;
+
+    const getVector3FromPoint3d = ({ x, y, z }): Vector3 => new Vector3(x, y, z);
+
+    const setPerspectiveCamera = (camera: IPerspectiveCamera) => {
+      if (camera) {
+        this.camera.up.copy(getVector3FromPoint3d(camera.up_vector));
+        this.camera.fov = camera.field_of_view;
+        this.camera.position.copy(getVector3FromPoint3d(camera.view_point));
+        this.camera.lookAt(getVector3FromPoint3d(camera.direction).add(this.camera.position));
+        this.camera.updateMatrixWorld();
+        this.camera.updateProjectionMatrix();
+      }
+    };
+
+    const setClippingPlanes = (clipping_planes: IClippingPlane[]) => {
+      clipping_planes?.forEach((clipping_plane) => {
+        const plane = new Plane();
+        plane.setFromNormalAndCoplanarPoint(
+          getVector3FromPoint3d(clipping_plane.direction),
+          getVector3FromPoint3d(clipping_plane.location)
+        );
+
+        this.renderer.clippingPlanes.push(plane);
+      });
+    };
+
+    const setSelection = (selection: IComponent[]) => {
+      this.setSelected(selection?.map((component) => component.handle));
+    };
+
+    const draggerName = this._activeDragger?.name;
+
+    this.setActiveDragger();
+    this.clearSlices();
+    this.clearOverlay();
+
+    this.clearSelected();
+    this.showAll();
+    this.explode();
+
+    setPerspectiveCamera(viewpoint.perspective_camera);
+    setClippingPlanes(viewpoint.clipping_planes);
+    setSelection(viewpoint.selection);
+    this._markup.setViewpoint(viewpoint);
+
+    this.target = getVector3FromPoint3d(viewpoint.custom_fields?.camera_target ?? this.target);
+
+    this.setActiveDragger(draggerName);
+    this.emitEvent({ type: "drawviewpoint", data: viewpoint });
+    this.update();
+  }
 
   createViewpoint(): IViewpoint {
-    const viewpoint: IViewpoint = {};
+    if (!this.renderer) return {};
+
+    const getPoint3dFromVector3 = ({ x, y, z }): IPoint => ({ x, y, z });
+
+    const getPerspectiveCamera = (): IPerspectiveCamera => {
+      return {
+        view_point: getPoint3dFromVector3(this.camera.position),
+        direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3())),
+        up_vector: getPoint3dFromVector3(this.camera.up),
+        field_of_view: this.camera.fov,
+      };
+    };
+
+    const getClippingPlanes = (): IClippingPlane[] => {
+      const clipping_planes = [];
+      this.renderer.clippingPlanes.forEach((plane: Plane) => {
+        const clipping_plane = {
+          location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3())),
+          direction: getPoint3dFromVector3(plane.normal),
+        };
+        clipping_planes.push(clipping_plane);
+      });
+      return clipping_planes;
+    };
+
+    const getSelection = (): IComponent[] => {
+      return this.getSelected().map((handle) => ({ handle }));
+    };
 
-    viewpoint.snapshot = { data: this.canvas?.toDataURL("image/jpeg", 0.25) };
+    const viewpoint: IViewpoint = { custom_fields: {} };
+
+    viewpoint.perspective_camera = getPerspectiveCamera();
+    viewpoint.clipping_planes = getClippingPlanes();
+    viewpoint.selection = getSelection();
     viewpoint.description = new Date().toDateString();
+    this._markup.getViewpoint(viewpoint);
+
+    viewpoint.custom_fields.camera_target = getPoint3dFromVector3(this.target);
+
+    this.emitEvent({ type: "createviewpoint", data: viewpoint });
 
     return viewpoint;
   }

package/src/Viewer/commands/ClearMarkup.ts

@@ -24,6 +24,5 @@
 import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-// markup should be as a separate library
-commands("ThreeJS").registerCommand("clearMarkup", (viewer: Viewer) => console.warn("clearMarkup not implemented"));
+commands("ThreeJS").registerCommand("clearMarkup", (viewer: Viewer) => viewer.clearOverlay());
 commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");

package/src/Viewer/commands/{Unselect.ts → ClearSelected.ts}

@@ -25,13 +25,14 @@ import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import { SelectionComponent } from "../components/SelectionComponent";
 
-function unselect(viewer: Viewer): void {
+function clearSelected(viewer: Viewer): void {
   const selection = new SelectionComponent(viewer);
   selection.clearSelection();
   selection.dispose();
 
   viewer.update();
-  viewer.emit({ type: "select", data: undefined, handles: [] });
+  viewer.emitEvent({ type: "select", data: undefined, handles: [] });
 }
 
-commands("ThreeJS").registerCommand("unselect", unselect);
+commands("ThreeJS").registerCommand("clearSelected", clearSelected);
+commands("ThreeJS").registerCommandAlias("clearSelected", "unselect");

package/src/Viewer/commands/ClearSlices.ts

@@ -24,9 +24,4 @@
 import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
-function clearSlices(viewer: Viewer) {
-  viewer.renderer.clippingPlanes = [];
-  viewer.update();
-}
-
-commands("ThreeJS").registerCommand("clearSlices", clearSlices);
+commands("ThreeJS").registerCommand("clearSlices", (viewer: Viewer) => viewer.clearSlices());

package/src/Viewer/commands/Explode.ts

@@ -76,7 +76,7 @@ function explode(viewer: Viewer, index = 0): void {
   viewer.models.forEach((gltf) => explodeScene(gltf.scene, index));
 
   viewer.update();
-  viewer.emit({ type: "explode", data: index });
+  viewer.emitEvent({ type: "explode", data: index });
 }
 
 commands("ThreeJS").registerCommand("explode", explode);

package/src/Viewer/commands/HideSelected.ts

@@ -33,8 +33,8 @@ function hideSelected(viewer: Viewer): void {
   selection.dispose();
 
   viewer.update();
-  viewer.emit({ type: "hide" });
-  viewer.emit({ type: "select", data: undefined, handles: [] });
+  viewer.emitEvent({ type: "hide" });
+  viewer.emitEvent({ type: "select", data: undefined, handles: [] });
 }
 
 commands("ThreeJS").registerCommand("hideSelected", hideSelected);

package/src/Viewer/commands/IsolateSelected.ts

@@ -44,7 +44,7 @@ function isolateSelected(viewer: Viewer): void {
   isolateObject(viewer.scene, 0);
 
   viewer.update();
-  viewer.emit({ type: "isolate" });
+  viewer.emitEvent({ type: "isolate" });
 }
 
 commands("ThreeJS").registerCommand("isolateSelected", isolateSelected);

package/src/Viewer/commands/ResetView.ts

@@ -25,11 +25,11 @@ import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 function resetView(viewer: Viewer): void {
-  viewer.executeCommand("setActiveDragger", "");
+  viewer.executeCommand("setActiveDragger");
   viewer.executeCommand("clearSlices");
   viewer.executeCommand("clearOverlay");
   viewer.executeCommand("setMarkupColor");
-  viewer.executeCommand("unselect");
+  viewer.executeCommand("clearSelected");
   viewer.executeCommand("showAll");
   viewer.executeCommand("explode", 0);
   viewer.executeCommand("zoomToExtents", true);

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -31,8 +31,8 @@ export const defaultViewPositions = {
   bottom: new Vector3(0, 0, -1),
   left: new Vector3(-1, 0, 0),
   right: new Vector3(1, 0, 0),
-  front: new Vector3(0, 1, 0),
-  back: new Vector3(0, -1, 0),
+  front: new Vector3(0, -1, 0),
+  back: new Vector3(0, 1, 0),
   sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
   se: new Vector3(0.5, -0.5, 1.0).normalize(),
   ne: new Vector3(0.5, 0.5, 1.0).normalize(),
@@ -42,16 +42,17 @@ export const defaultViewPositions = {
 function setDefaultViewPosition(viewer: Viewer, position: string): void {
   const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
 
-  const camera = viewer.camera;
   const center = viewer.extents.getCenter(new Vector3());
   const sphere = viewer.extents.getBoundingSphere(new Sphere());
-  const offset = new Vector3().copy(direction).multiplyScalar(sphere.radius);
+  const offet = direction.clone().multiplyScalar(sphere.radius);
 
-  camera.position.copy(center);
-  camera.position.add(offset);
-  camera.rotation.set(0, 0, 0);
+  const camera = viewer.camera;
+  camera.position.copy(center).add(offet);
   camera.lookAt(center);
   camera.updateProjectionMatrix();
+  camera.updateMatrixWorld();
+
+  viewer.target.copy(center);
 
   viewer.update();
   viewer.emit({ type: "viewposition", data: position });

package/src/Viewer/commands/SetSelected.ts

@@ -38,7 +38,7 @@ function setSelected(viewer: Viewer, handles: string[] = []): void {
   selection.dispose();
 
   viewer.update();
-  viewer.emit({ type: "select", data: undefined, handles });
+  viewer.emitEvent({ type: "select", data: undefined, handles });
 }
 
 commands("ThreeJS").registerCommand("setSelected", setSelected);

package/src/Viewer/commands/ShowAll.ts

@@ -28,7 +28,7 @@ function showAll(viewer: Viewer): void {
   viewer.scene.traverse((object) => (object.visible = true));
 
   viewer.update();
-  viewer.emit({ type: "showall" });
+  viewer.emitEvent({ type: "showall" });
 }
 
 commands("ThreeJS").registerCommand("showAll", showAll);

package/src/Viewer/commands/index.ts

@@ -23,6 +23,7 @@
 
 import "./ApplyModelTransform";
 import "./ClearMarkup";
+import "./ClearSelected";
 import "./ClearSlices";
 import "./CreatePreview";
 import "./Explode";
@@ -39,7 +40,6 @@ import "./SetDefaultViewPosition";
 import "./SetMarkupColor";
 import "./SetSelected";
 import "./ShowAll";
-import "./Unselect";
 import "./ZoomToExtents";
 import "./ZoomToObjects";
 import "./ZoomToSelected";