@inweb/viewer-three 26.10.6 → 26.11.0

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

@@ -6,29 +6,30 @@ import { ILoadersRegistry } from "@inweb/viewer-core";
  *
  * 1. Define a loader class implements {@link ILoader}.
  * 2. Define a constructor with a `viewer` parameter.
- * 3. Override {@link ILoader.isSupport} and сheck if the loader can load the specified file.
+ * 3. Override {@link ILoader.isSupport} and check if the loader can load the specified file.
  * 4. Override {@link ILoader.load} and define the logic for loading the scene from the file.
  *
  *    The loader should do:
  *
  *    - Load raw data from file and convert it to the `Three.js` scene.
  *    - Add scene to the viewer `scene`.
- *    - Create `ModelImpl` for the scene and to the viewer `models` list.
+ *    - Create `ModelImpl` instance with unique model ID add it to the viewer `models` list.
  *    - Synchronize viewer options and overlay.
  *    - Update the viewer.
  *
  *    The loader must emit events:
  *
- *    - `geometryprogress` - during loading. If progress is not supported, emit it once with a value of 100%
- *         after the load is complete.
+ *    - `geometryprogress` - during loading (or once at 100% when complete).
  *    - `databasechunk` - when scene is loaded and ready to render.
  * 5. Override {@link ILoader.dispose} and release loader resources, if required.
- * 6. Register loader provider in the loaders registry by calling the {@link loaders.registerLoader}.
+ * 6. Use `this.abortController` (defined in `Loader` class) to abort loading raw data.
+ * 7. Register loader provider in the loaders registry by calling the {@link loaders.registerLoader}.
  *
  * @example Implementing a custom loader.
  *
  * ```javascript
- * import { loaders, Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
+ * import { Scene } from "three";
+ * import { Loader, loaders, ModelImpl, Viewer } from "@inweb/viewer-three";
  *
  * class MyLoader extends Loader {
  *   public viewer: Viewer;
@@ -39,18 +40,19 @@ import { ILoadersRegistry } from "@inweb/viewer-core";
  *   }
  *
  *   override isSupport(file, format): Boolean {
- *     // place custom logic here
- *     return ...;
+ *     // check if this loader supports the file source and format
+ *     return type file === "string" && format === "myformat";
  *   }
  *
- *   override load(file, format, params): Promise<this> {
+ *   override load(file, format, params = {}): Promise<this> {
+ *      // load raw data from file (custom loading logic)
+ *     const data = await fetch(file).then((result) => result.arrayBuffer());
  *
- *     // place custom loading logic here
- *     const scene = ...;
+ *     // convert raw data to the Three.js scene (custom parsing logic)
+ *     const scene = this.parse(data);
  *
  *     const modelImpl = new ModelImpl(scene);
- *     modelImpl.loader = this;
- *     modelImpl.viewer = this.viewer;
+ *     modelImpl.id = params.modelId;
  *
  *     this.viewer.scene.add(scene);
  *     this.viewer.models.push(modelImpl);
@@ -59,11 +61,17 @@ import { ILoadersRegistry } from "@inweb/viewer-core";
  *     this.viewer.syncOverlay();
  *     this.viewer.update();
  *
+ *     this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
  *     this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
  *
  *     return Promise.resove(this);
  *   };
- * }
+ *
+ *   private parse(data: ArrayBuffer): Scene {
+ *     // custom parsing logic
+ *     return new Scene();
+ *   }
+ *  }
  *
  * loaders.registerLoader("MyLoader", (viewer) => new MyLoader(viewer));
  * ```

package/lib/Viewer/measurement/Snapper.d.ts

@@ -0,0 +1,15 @@
+import { Camera, Intersection, Object3D, Vector2, Vector3, WebGLRenderer } from "three";
+export declare class Snapper {
+    camera: Camera;
+    renderer: WebGLRenderer;
+    canvas: HTMLCanvasElement;
+    private raycaster;
+    private detectRadiusInPixels;
+    private edgesCache;
+    constructor(camera: Camera, renderer: WebGLRenderer, canvas: HTMLCanvasElement);
+    isMobile(): boolean;
+    getMousePosition(event: MouseEvent, target: Vector2): Vector2;
+    getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>>;
+    getDetectRadius(point: Vector3): number;
+    getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3;
+}

package/lib/Viewer/measurement/UnitConverter.d.ts

@@ -0,0 +1,63 @@
+export declare const ModelUnits: {
+    Meters: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Centimeters: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Millimeters: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Feet: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Inches: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Yards: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Kilometers: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Miles: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Micrometers: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Mils: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    MicroInches: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+    Default: {
+        name: string;
+        type: string;
+        scale: number;
+    };
+};
+export declare function convertUnits(fromUnits: string, toUnits: string, distance: number): number;

package/lib/Viewer/measurement/UnitFormatter.d.ts

@@ -0,0 +1,4 @@
+export declare function getDisplayUnit(units: string): any;
+export declare function calculatePrecision(value: number): number;
+export declare function calculateDistance(precision: any): number;
+export declare function formatDistance(distance: number, units: string, precision?: any): string;

package/lib/Viewer/models/IModelImpl.d.ts

@@ -1,19 +1,21 @@
 import { Box3, Object3D } from "three";
-import { ILoader, IViewer } from "@inweb/viewer-core";
+import { IModel } from "@inweb/viewer-core";
 /**
- * Model interface.
+ * Basic model implementation.
  */
-export interface IModelImpl {
-    handle: string;
+export interface IModelImpl extends IModel {
     scene: Object3D;
-    loader: ILoader;
-    viewer: IViewer;
-    dispose(): void;
+    getUnits(): string;
+    getUnitScale(): number;
+    getUnitString(): string;
+    getPrecision(): number;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];
-    hasObject(objects: Object3D): boolean;
+    hasObject(object: Object3D): boolean;
+    hasHandle(handle: string): boolean;
     getOwnObjects(objects: Object3D | Object3D[]): Object3D[];
+    getOwnHandles(handles: string | string[]): string[];
     getObjectsByHandles(handles: string | string[]): Object3D[];
     getHandlesByObjects(objects: Object3D | Object3D[]): string[];
     hideObjects(objects: Object3D | Object3D[]): this;

package/lib/Viewer/models/ModelImpl.d.ts

@@ -1,19 +1,21 @@
 import { Box3, Object3D } from "three";
-import { ILoader } from "@inweb/viewer-core";
 import { IModelImpl } from "./IModelImpl";
-import { Viewer } from "../Viewer";
 export declare class ModelImpl implements IModelImpl {
-    handle: string;
+    id: string;
     scene: Object3D;
-    loader: ILoader;
-    viewer: Viewer;
     constructor(scene: Object3D);
     dispose(): void;
+    getUnits(): string;
+    getUnitScale(): number;
+    getUnitString(): string;
+    getPrecision(): number;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];
     hasObject(object: Object3D): boolean;
+    hasHandle(handle: string): boolean;
     getOwnObjects(objects: Object3D | Object3D[]): Object3D[];
+    getOwnHandles(handles: string | string[]): string[];
     getObjectsByHandles(handles: string | string[]): Object3D[];
     getHandlesByObjects(objects: Object3D | Object3D[]): string[];
     hideObjects(objects: Object3D | Object3D[]): this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.10.6",
+  "version": "26.11.0",
   "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",
@@ -14,7 +14,7 @@
     "three.js"
   ],
   "sideEffects": [
-    "dist/plugins/**/*"
+    "dist/extensions/**/*"
   ],
   "main": "dist/viewer-three.js",
   "module": "dist/viewer-three.module.js",
@@ -23,22 +23,22 @@
     "dist",
     "lib/**/*.d.ts",
     "src",
-    "plugins"
+    "extensions"
   ],
   "scripts": {
-    "build": "npm run build:viewer && npm run build:plugins",
+    "build": "npm run build:viewer && npm run build:extensions",
     "build:viewer": "rollup -c rollup.config.js",
-    "build:plugins": "rollup -c rollup.plugins.config.js",
-    "test": "npm run test:viewer && npm run test:plugins",
+    "build:extensions": "rollup -c rollup.extensions.config.js",
+    "test": "npm run test:viewer && npm run test:extensions",
     "test:viewer": "karma start karma.conf.js",
-    "test:plugins": "karma start karma.plugins.conf.js",
+    "test:extensions": "karma start karma.extensions.conf.js",
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.10.6",
-    "@inweb/eventemitter2": "~26.10.6",
-    "@inweb/markup": "~26.10.6",
-    "@inweb/viewer-core": "~26.10.6"
+    "@inweb/client": "~26.11.0",
+    "@inweb/eventemitter2": "~26.11.0",
+    "@inweb/markup": "~26.11.0",
+    "@inweb/viewer-core": "~26.11.0"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",

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 an extension. 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);
+  }
 }