@inweb/viewer-three 26.10.6 → 26.11.1

package/plugins/loaders/IFCX/IFCXCloudLoader.ts

@@ -21,6 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+import { Scene } from "three";
 import { Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
 import { parse, clear } from "./render.js";
 
@@ -52,18 +53,17 @@ export class IFCXCloudLoader extends Loader {
     const textDecoder = new TextDecoder();
     const json = JSON.parse(textDecoder.decode(arrayBuffer));
 
-    const scene = await parse(json);
+    const scene: Scene = await parse(json);
     clear();
 
     let handle = 0;
-    scene.traverse((object: any) => {
-      object.userData = { handle, ...object.userData };
+    scene.traverse((object) => {
+      object.userData = { handle: handle + "", ...object.userData };
       handle++;
     });
 
     const modelImpl = new ModelImpl(scene);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = file.id;
 
     this.viewer.scene.add(scene);
     this.viewer.models.push(modelImpl);

package/plugins/loaders/IFCX/IFCXFileLoader.ts

@@ -39,7 +39,7 @@ export class IFCXFileLoader extends Loader {
     );
   }
 
-  override async load(file: any, format?: string, params?: GLTFLoadParams): Promise<this> {
+  override async load(file: any, format?: string, params: GLTFLoadParams = {}): Promise<this> {
     const manager = new GLTFLoadingManager(file, params);
 
     const loader = new IFCXLoader(manager);
@@ -58,13 +58,12 @@ export class IFCXFileLoader extends Loader {
 
     let handle = 0;
     scene.traverse((object) => {
-      object.userData = { handle, ...object.userData };
+      object.userData = { handle: handle + "", ...object.userData };
       handle++;
     });
 
     const modelImpl = new ModelImpl(scene);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = params.modelId || this.extractFileName(file);
 
     this.viewer.scene.add(scene);
     this.viewer.models.push(modelImpl);

package/plugins/loaders/Potree/PotreeFileLoader.ts

@@ -23,11 +23,11 @@
 
 import { Euler, Vector3 } from "three";
 import { PointColorType, PointCloudOctree, PointSizeType, PointShape, Potree } from "potree-core";
-import { Loader, Viewer } from "@inweb/viewer-three";
+import { Loader, LoadParams, Viewer } from "@inweb/viewer-three";
 
 import { PotreeModelImpl } from "./PotreeModelImpl";
 
-export type PotreeLoadParams = {
+export type PotreeLoadParams = LoadParams & {
   path?: string;
   position?: Vector3;
   rotation?: Euler;
@@ -83,8 +83,7 @@ export class PotreeFileLoader extends Loader {
     this.pointClouds.push(pco);
 
     const modelImpl = new PotreeModelImpl(pco);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = params.modelId || this.extractFileName(file);
     modelImpl.pco = pco;
 
     this.viewer.scene.add(pco);

package/src/Viewer/Viewer.ts

@@ -50,8 +50,8 @@ import {
   FileSource,
   IClippingPlane,
   IComponent,
-  IEntity,
   IDragger,
+  IEntity,
   ILoader,
   IOptions,
   IOrthogonalCamera,
@@ -80,12 +80,13 @@ export class Viewer
   implements IViewer, IWorldTransform
 {
   public client: Client | undefined;
-  protected _options: Options;
-
-  private canvaseventlistener: (event: any) => void;
-
+  public options: IOptions;
   public canvas: HTMLCanvasElement | undefined;
   public canvasEvents: string[];
+  public loaders: ILoader[];
+  public models: IModelImpl[];
+
+  private canvaseventlistener: (event: any) => void;
 
   public scene: Scene | undefined;
   public helpers: Helpers | undefined;
@@ -98,9 +99,6 @@ export class Viewer
   public ssaaRenderPass: SSAARenderPass | undefined;
   public outputPass: OutputPass | undefined;
   public composer: EffectComposer | undefined;
-
-  public loaders: ILoader[];
-  public models: IModelImpl[];
   public selected: Object3D[];
   public extents: Box3;
   public target: Vector3;
@@ -120,22 +118,22 @@ export class Viewer
    */
   constructor(client?: Client) {
     super();
-    this._options = new Options(this);
-
     this.client = client;
+    this.options = new Options(this);
+    this.loaders = [];
+    this.models = [];
 
-    this.canvasEvents = CANVAS_EVENTS;
+    this.canvasEvents = CANVAS_EVENTS.slice();
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
-    this.loaders = [];
-    this.models = [];
     this.selected = [];
     this.extents = new Box3();
-    this.target = new Vector3();
+    this.target = new Vector3(0, 0, 0);
 
     this._activeDragger = null;
     this._components = [];
 
+    this._renderNeeded = false;
     this._renderTime = 0;
 
     this.render = this.render.bind(this);
@@ -144,10 +142,17 @@ export class Viewer
     this._markup = new Markup();
   }
 
-  get options(): IOptions {
-    return this._options;
+  /**
+   * 2D markup core instance used to create markups.
+   *
+   * @readonly
+   */
+  get markup(): IMarkup {
+    return this._markup;
   }
 
+  // IViewer
+
   get draggers(): string[] {
     return [...draggers.getDraggers().keys()];
   }
@@ -156,21 +161,11 @@ export class Viewer
     return [...components.getComponents().keys()];
   }
 
-  /**
-   * 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));
 
     this.scene = new Scene();
     this.helpers = new Helpers();
-    this.target = new Vector3(0, 0, 0);
 
     const pixelRatio = window.devicePixelRatio;
     const rect = canvas.parentElement.getBoundingClientRect();
@@ -319,6 +314,8 @@ export class Viewer
     this.emitEvent({ type: "update", data: force });
   }
 
+  // Internal render routines
+
   render(time?: DOMHighResTimeStamp, force = false): void {
     if (!this.renderer) return;
     if (!this._renderNeeded && !force) return;
@@ -341,6 +338,8 @@ export class Viewer
     this.emitEvent({ type: "render", time, deltaTime });
   }
 
+  // Internal loading routines
+
   loadReferences(model: Model | File | Assembly): Promise<this> {
     // todo: load reference as text fonts
     return Promise.resolve(this);
@@ -357,18 +356,20 @@ export class Viewer
    * exception will be thrown.
    *
    * For files from Open Cloud Server, the default model will be loaded. If there is no default model,
-   * first availiable model will be loaded. If no models are found in the file, an exception will be
+   * the first available model will be loaded. If no models are found in the file, an exception will be
    * thrown.
    *
    * For URLs, the file extension is used to determine the file format. For a `ArrayBuffer` and `Data
-   * URL`, a file format must be specified using `params.format` parameter (see below). If no appropriate
-   * loader is found for the specified format, an exception will be thrown.
+   * URL`, a file format must be specified using `params.format` parameter. If no appropriate loader is
+   * found for the specified format, an exception will be thrown.
    *
    * If there was an active dragger before opening the file, it will be deactivated. After opening the
    * file, you must manually activate the required dragger.
    *
    * Fires:
    *
+   * - {@link CancelEvent | cancel}
+   * - {@link ClearEvent | clear}
    * - {@link OpenEvent | open}
    * - {@link GeometryStartEvent | geometrystart}
    * - {@link GeometryProgressEvent | geometryprogress}
@@ -377,23 +378,26 @@ export class Viewer
    * - {@link GeometryEndEvent | geometryend}
    * - {@link GeometryErrorEvent | geometryerror}
    *
-   * @param file - File to load. Can be one of:
+   * @param file - File to load. Can be:
    *
    *   - `File`, `Assembly` or `Model` instance from the Open Cloud Server
-   *   - File `URL` string
+   *   - `URL` string
    *   - {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string
    *   - {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object
    *   - {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
    *       object
    *
    * @param params - Loading parameters.
-   * @param params.format - File format string. Required when loading a file as `ArrayBuffer` or `Data
-   *   URL`.
+   * @param params.format - File format. Can be `gltf`, `glb` or format from a plugin. Required when
+   *   loading a file as `ArrayBuffer` or `Data URL`.
    * @param params.mode - File opening mode. Can be one of:
    *
-   *   - `open` - Unloads an open file and opens a new one. This is default mode.
-   *   - `append` - Appends a file to an already open file.
+   *   - `file` - Single file mode. Unloads an open file and opens a new one. This is default mode.
+   *   - `assembly` - Assembly mode. Appends a file to an already open file.
    *
+   * @param params.modelId - Unique model ID in the assembly (multi-model scene). Used as a model prefix
+   *   when selecting objects (see {@link getSelected2}). Must not contain the ":" (colon). Required when
+   *   loading a file as `ArrayBuffer` or `Data URL`.
    * @param params.requestHeader - The
    *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
    *   request.
@@ -415,6 +419,7 @@ export class Viewer
     params: {
       format?: string;
       mode?: string;
+      modelId?: string;
       requestHeader?: HeadersInit;
       withCredentials?: boolean;
       path?: string;
@@ -424,22 +429,27 @@ export class Viewer
   ): Promise<this> {
     if (!this.renderer) return this;
 
-    if (params.mode !== "a" && params.mode !== "append") {
+    const mode = params.mode || "file";
+
+    if (mode !== "assembly" && mode !== "a" && mode !== "append") {
       this.cancel();
       this.clear();
     }
 
-    this.emitEvent({ type: "open", file });
+    this.emitEvent({ type: "open", mode, file });
 
     let model: any = file;
     if (model && typeof model.getModels === "function") {
       const models = await model.getModels();
       model = models.find((model: Model) => model.default) || models[0] || file;
     }
+    if (model && typeof model.database === "string") {
+      file = model.file;
+    }
     if (!model) throw new Error(`Format not supported`);
 
     let format = params.format;
-    if (!format && typeof model.type === "string") format = model.type.split(".").pop();
+    if (!format && typeof file["type"] === "string") format = file["type"].split(".").pop();
     if (!format && typeof file === "string") format = file.split(".").pop();
     if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
 
@@ -483,7 +493,7 @@ export class Viewer
       "Viewer.loadGltfFile() has been deprecated since 26.4 and will be removed in a future release, use Viewer.open() instead."
     );
 
-    return this.open(file, { ...params, format: "gltf", externalFiles, mode: "append" });
+    return this.open(file, { ...params, format: "gltf", externalFiles, mode: "assembly" });
   }
 
   cancel(): this {
@@ -510,6 +520,9 @@ export class Viewer
     this.scene.clear();
     this.helpers.clear();
 
+    this.extents.makeEmpty();
+    this.target.set(0, 0, 0);
+
     this.syncOptions();
     this.syncOverlay();
     this.update(true);
@@ -519,6 +532,10 @@ export class Viewer
     return this;
   }
 
+  is3D(): boolean {
+    return true;
+  }
+
   syncOptions(options: IOptions = this.options): void {
     if (!this.renderer) return;
 
@@ -557,10 +574,18 @@ export class Viewer
     return this.executeCommand("getSelected");
   }
 
+  getSelected2(): string[] {
+    return this.executeCommand("getSelected2");
+  }
+
   setSelected(handles?: string[]): void {
     this.executeCommand("setSelected", handles);
   }
 
+  setSelected2(handles?: string[]): void {
+    this.executeCommand("setSelected2", handles);
+  }
+
   clearSelected(): void {
     this.executeCommand("clearSelected");
   }
@@ -630,44 +655,6 @@ export class Viewer
     return this._components.find((component) => component.name === name);
   }
 
-  is3D(): boolean {
-    return true;
-  }
-
-  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 };
-  }
-
-  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 {
-    return commands.executeCommand(id, this, ...args);
-  }
-
   drawViewpoint(viewpoint: IViewpoint): void {
     if (!this.renderer) return;
 
@@ -731,15 +718,17 @@ export class Viewer
     };
 
     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);
-      });
+      if (clipping_planes) {
+        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: IEntity[]) => {
@@ -759,10 +748,10 @@ export class Viewer
     setOrthogonalCamera(viewpoint.orthogonal_camera);
     setPerspectiveCamera(viewpoint.perspective_camera);
     setClippingPlanes(viewpoint.clipping_planes);
-    setSelection(viewpoint.selection);
+    setSelection(viewpoint.custom_fields?.selection2 || viewpoint.selection);
     this._markup.setViewpoint(viewpoint);
 
-    this.target = getVector3FromPoint3d(viewpoint.custom_fields?.camera_target ?? this.target);
+    this.target.copy(getVector3FromPoint3d(viewpoint.custom_fields?.camera_target ?? this.target));
 
     this.setActiveDragger(draggerName);
     this.emitEvent({ type: "drawviewpoint", data: viewpoint });
@@ -814,6 +803,10 @@ export class Viewer
       return this.getSelected().map((handle) => ({ handle }));
     };
 
+    const getSelection2 = (): IEntity[] => {
+      return this.getSelected2().map((handle) => ({ handle }));
+    };
+
     const viewpoint: IViewpoint = { custom_fields: {} };
 
     viewpoint.orthogonal_camera = getOrthogonalCamera();
@@ -824,9 +817,48 @@ export class Viewer
     this._markup.getViewpoint(viewpoint);
 
     viewpoint.custom_fields.camera_target = getPoint3dFromVector3(this.target);
+    viewpoint.custom_fields.selection2 = getSelection2();
 
     this.emitEvent({ type: "createviewpoint", data: viewpoint });
 
     return viewpoint;
   }
+
+  // IWorldTransform
+
+  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 };
+  }
+
+  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 };
+  }
+
+  // ICommandService
+
+  executeCommand(id: string, ...args: any[]): any {
+    return commands.executeCommand(id, this, ...args);
+  }
 }

package/src/Viewer/commands/ClearSelected.ts

@@ -29,5 +29,7 @@ export function clearSelected(viewer: Viewer): void {
   selection.clearSelection();
 
   viewer.update();
-  viewer.emitEvent({ type: "select", data: undefined, handles: [] });
+
+  viewer.emitEvent({ type: "select", handles: [] });
+  viewer.emitEvent({ type: "select2", handles: [] });
 }

package/src/Viewer/commands/GetModels.ts

@@ -24,5 +24,5 @@
 import type { Viewer } from "../Viewer";
 
 export function getModels(viewer: Viewer): string[] {
-  return viewer.models.map((model) => model.handle);
+  return viewer.models.map((model) => model.id);
 }

package/src/Viewer/commands/GetSelected.ts

@@ -24,7 +24,7 @@
 import type { Viewer } from "../Viewer";
 
 export function getSelected(viewer: Viewer): string[] {
-  const handles = [];
-  viewer.models.forEach((model) => handles.push(...model.getHandlesByObjects(viewer.selected)));
+  const handles2 = viewer.executeCommand("getSelected2");
+  const handles = handles2.map((handle) => handle.slice(handle.indexOf(":") + 1));
   return handles;
 }

package/src/Viewer/commands/GetSelected2.ts

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 type { Viewer } from "../Viewer";
+
+export function getSelected2(viewer: Viewer): string[] {
+  const handles2 = [];
+
+  viewer.models.forEach((model) => {
+    handles2.push(...model.getHandlesByObjects(viewer.selected));
+  });
+
+  return handles2;
+}

package/src/Viewer/commands/HideSelected.ts

@@ -31,6 +31,8 @@ export function hideSelected(viewer: Viewer): void {
   selection.clearSelection();
 
   viewer.update();
+
   viewer.emitEvent({ type: "hide" });
-  viewer.emitEvent({ type: "select", data: undefined, handles: [] });
+  viewer.emitEvent({ type: "select", handles: [] });
+  viewer.emitEvent({ type: "select2", handles: [] });
 }

package/src/Viewer/commands/SelectModel.ts

@@ -24,14 +24,14 @@
 import type { Viewer } from "../Viewer";
 import type { SelectionComponent } from "../components/SelectionComponent";
 
-export function selectModel(viewer: Viewer, handle: string): void {
+export function selectModel(viewer: Viewer, id: string): void {
   const selection = viewer.getComponent("SelectionComponent") as SelectionComponent;
   selection.clearSelection();
 
-  viewer.models
-    .filter((model) => model.handle === handle)
-    .forEach((model) => selection.select(model.getObjects(), model));
+  viewer.models.filter((model) => model.id === id).forEach((model) => selection.select(model.getObjects(), model));
 
   viewer.update();
-  viewer.emit({ type: "select", data: [] });
+
+  viewer.emitEvent({ type: "select", handles: viewer.getSelected() });
+  viewer.emitEvent({ type: "select2", handles: viewer.getSelected2() });
 }

package/src/Viewer/commands/SetSelected.ts

@@ -22,19 +22,18 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import type { Viewer } from "../Viewer";
-import type { SelectionComponent } from "../components/SelectionComponent";
 
 export function setSelected(viewer: Viewer, handles: string[] = []): void {
-  const selection = viewer.getComponent("SelectionComponent") as SelectionComponent;
-  selection.clearSelection();
+  const handles2 = [];
 
-  viewer.models.forEach((model) => {
-    const objects = model.getObjectsByHandles(handles);
-    model.showObjects(objects);
-    selection.select(objects, model);
+  handles.forEach((handle) => {
+    if (handle.includes(":")) {
+      handles2.push(handle);
+    } else
+      viewer.models.forEach((model) => {
+        handles2.push(`${model.id}:${handle}`);
+      });
   });
 
-  viewer.update();
-  viewer.emitEvent({ type: "show" });
-  viewer.emitEvent({ type: "select", data: undefined, handles });
+  viewer.executeCommand("setSelected2", handles2);
 }

package/src/Viewer/commands/SetSelected2.ts

@@ -0,0 +1,42 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 type { Viewer } from "../Viewer";
+import type { SelectionComponent } from "../components/SelectionComponent";
+
+export function setSelected2(viewer: Viewer, handles: string[] = []): void {
+  const selectionComponent = viewer.getComponent("SelectionComponent") as SelectionComponent;
+  selectionComponent.clearSelection();
+
+  viewer.models.forEach((model) => {
+    const objects = model.getObjectsByHandles(handles);
+    model.showObjects(objects);
+    selectionComponent.select(objects, model);
+  });
+
+  viewer.update();
+
+  viewer.emitEvent({ type: "show" });
+  viewer.emitEvent({ type: "select", data: undefined, handles: viewer.getSelected() });
+  viewer.emitEvent({ type: "select2", data: undefined, handles });
+}