@inweb/viewer-three 27.5.0 → 27.6.0

package/extensions/components/LightHelperComponent.ts

@@ -57,7 +57,7 @@ class LightHelperComponent implements IComponent {
     const helperSize = extentsSize / 20;
 
     this.viewer.scene.traverse((object: any) => {
-      let helper: DirectionalLightHelper | HemisphereLightHelper | PointLightHelper;
+      let helper: DirectionalLightHelper | HemisphereLightHelper | PointLightHelper | null = null;
 
       if (object.isDirectionalLight) helper = new DirectionalLightHelper(object, helperSize, "#aa0000");
       else if (object.isHemisphereLight) helper = new HemisphereLightHelper(object, helperSize, "#ff9800");

package/extensions/components/StatsPanelComponent.ts

@@ -45,7 +45,6 @@ class StatsPanelComponent implements IComponent {
     this.viewer.removeEventListener("animate", this.updateViewer);
 
     this.stats.dom.remove();
-    this.stats = undefined;
   }
 
   updateStats = () => {

package/extensions/loaders/GLTFCloudLoader.ts

@@ -26,10 +26,16 @@ import { GLTFLoadingManager, Loader, loaders, ModelImpl, Viewer } from "@inweb/v
 
 class GLTFCloudLoader extends Loader {
   public viewer: Viewer;
+  private manager: GLTFLoadingManager | null;
 
   constructor(viewer: Viewer) {
     super();
     this.viewer = viewer;
+    this.manager = null;
+  }
+
+  override dispose() {
+    if (this.manager) this.manager.dispose();
   }
 
   override isSupport(file: any): boolean {
@@ -43,9 +49,9 @@ class GLTFCloudLoader extends Loader {
 
   override async load(model: any): Promise<this> {
     const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
-    const manager = new GLTFLoadingManager(url);
+    this.manager = new GLTFLoadingManager(url);
 
-    const loader = new GLTFLoader(manager);
+    const loader = new GLTFLoader(this.manager);
     loader.setRequestHeader(model.httpClient.headers);
 
     const progress = (event: ProgressEvent) => {

package/extensions/loaders/GLTFFileLoader.ts

@@ -26,18 +26,19 @@ import { GLTFLoadingManager, GLTFLoadParams, Loader, loaders, ModelImpl, Viewer
 
 export class GLTFFileLoader extends Loader {
   public viewer: Viewer;
-  private manager: GLTFLoadingManager;
+  private manager: GLTFLoadingManager | null;
 
   constructor(viewer: Viewer) {
     super();
     this.viewer = viewer;
+    this.manager = null;
   }
 
   override dispose() {
     if (this.manager) this.manager.dispose();
   }
 
-  override isSupport(file: any, format?: string): boolean {
+  override isSupport(file: any, format = ""): boolean {
     return (
       (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
       /(gltf|glb)$/i.test(format)

package/extensions/loaders/IFCX/IFCXFileLoader.ts

@@ -26,13 +26,19 @@ import { IFCXLoader } from "./IFCXLoader";
 
 export class IFCXFileLoader extends Loader {
   public viewer: Viewer;
+  private manager: GLTFLoadingManager | null;
 
   constructor(viewer: Viewer) {
     super();
     this.viewer = viewer;
+    this.manager = null;
   }
 
-  override isSupport(file: any, format?: string): boolean {
+  override dispose() {
+    if (this.manager) this.manager.dispose();
+  }
+
+  override isSupport(file: any, format = ""): boolean {
     return (
       (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
       /(ifcx)$/i.test(format)
@@ -40,10 +46,10 @@ export class IFCXFileLoader extends Loader {
   }
 
   override async load(file: any, format?: string, params: GLTFLoadParams = {}): Promise<this> {
-    const manager = new GLTFLoadingManager(file, params);
+    this.manager = new GLTFLoadingManager(file, params);
 
-    const loader = new IFCXLoader(manager);
-    loader.setPath(manager.path);
+    const loader = new IFCXLoader(this.manager);
+    loader.setPath(this.manager.path);
     loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
     loader.setWithCredentials(params.withCredentials || loader.withCredentials);
 
@@ -53,7 +59,7 @@ export class IFCXFileLoader extends Loader {
       this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
     };
 
-    const scene = await loader.loadAsync(manager.fileURL, progress);
+    const scene = await loader.loadAsync(this.manager.fileURL, progress);
     if (!this.viewer.scene) return this;
 
     let handle = 1;

package/lib/Viewer/Viewer.d.ts

@@ -161,7 +161,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     activeDragger(): IDragger | null;
     setActiveDragger(name?: string): IDragger | null;
     resetActiveDragger(): void;
-    getComponent(name: string): IComponent;
+    getComponent(name: string): IComponent | null;
     drawViewpoint(viewpoint: IViewpoint): void;
     createViewpoint(): IViewpoint;
     getSnapshot(type?: string, quality?: number): string;

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

@@ -12,5 +12,5 @@ export declare class Snapper {
     getMousePosition(event: MouseEvent, target: Vector2): Vector2;
     getPointerIntersects(mouse: Vector2, objects: Object3D[], recursive?: boolean, clip?: boolean): Array<Intersection<Object3D>>;
     getDetectRadius(point: Vector3): number;
-    getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3;
+    getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3 | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.5.0",
+  "version": "27.6.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",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.5.0",
-    "@inweb/eventemitter2": "~27.5.0",
-    "@inweb/markup": "~27.5.0",
-    "@inweb/viewer-core": "~27.5.0"
+    "@inweb/client": "~27.6.0",
+    "@inweb/eventemitter2": "~27.6.0",
+    "@inweb/markup": "~27.6.0",
+    "@inweb/viewer-core": "~27.6.0"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

package/src/Viewer/Viewer.ts

@@ -226,7 +226,8 @@ export class Viewer
     this._markup.initialize(this.canvas, this.canvasEvents, this, this);
 
     for (const name of components.getComponents().keys()) {
-      this._components.push(components.createComponent(name, this));
+      const component = components.createComponent(name, this);
+      if (component) this._components.push(component);
     }
 
     this.syncOptions();
@@ -258,10 +259,7 @@ export class Viewer
     this._components.forEach((component: IComponent) => component.dispose());
     this._components.length = 0;
 
-    if (this._markup) {
-      this._markup.dispose();
-      this._markup = undefined;
-    }
+    this._markup.dispose();
 
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
@@ -461,7 +459,7 @@ export class Viewer
     if (!format && typeof file === "string") format = file.split(".").pop();
     if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
 
-    const loader: ILoader = loaders.createLoader(this, model, format);
+    const loader: ILoader | null = loaders.createLoader(this, model, format);
     if (!loader) throw new Error(`Format not supported (${format})`);
     this.loaders.push(loader);
 
@@ -615,8 +613,8 @@ export class Viewer
 
   setActiveDragger(name = ""): IDragger | null {
     if (!this._activeDragger || this._activeDragger.name !== name) {
-      const oldDragger = this._activeDragger;
-      let newDragger = null;
+      const oldDragger: IDragger | null = this._activeDragger;
+      let newDragger: IDragger | null = null;
 
       if (this._activeDragger) {
         this._activeDragger.dispose();
@@ -647,8 +645,8 @@ export class Viewer
     }
   }
 
-  getComponent(name: string): IComponent {
-    return this._components.find((component) => component.name === name);
+  getComponent(name: string): IComponent | null {
+    return this._components.find((component) => component.name === name) || null;
   }
 
   drawViewpoint(viewpoint: IViewpoint): void {
@@ -656,7 +654,7 @@ export class Viewer
 
     const getVector3FromPoint3d = ({ x, y, z }): Vector3 => new Vector3(x, y, z);
 
-    const setOrthogonalCamera = (orthogonal_camera: IOrthogonalCamera) => {
+    const setOrthogonalCamera = (orthogonal_camera?: IOrthogonalCamera) => {
       if (orthogonal_camera) {
         const extentsSize = this.extents.getSize(new Vector3()).length() || 1;
         const rendererSize = this.renderer.getSize(new Vector2());
@@ -686,7 +684,7 @@ export class Viewer
       }
     };
 
-    const setPerspectiveCamera = (perspective_camera: IPerspectiveCamera) => {
+    const setPerspectiveCamera = (perspective_camera?: IPerspectiveCamera) => {
       if (perspective_camera) {
         const extentsSize = this.extents.getSize(new Vector3()).length() || 1;
         const rendererSize = this.renderer.getSize(new Vector2());
@@ -713,7 +711,7 @@ export class Viewer
       }
     };
 
-    const setClippingPlanes = (clipping_planes: IClippingPlane[]) => {
+    const setClippingPlanes = (clipping_planes?: IClippingPlane[]) => {
       if (clipping_planes) {
         clipping_planes.forEach((clipping_plane) => {
           const plane = new Plane();
@@ -764,7 +762,7 @@ export class Viewer
 
     const getPoint3dFromVector3 = ({ x, y, z }): IPoint => ({ x, y, z });
 
-    const getOrthogonalCamera = (): IOrthogonalCamera => {
+    const getOrthogonalCamera = (): IOrthogonalCamera | undefined => {
       if (this.camera["isOrthographicCamera"])
         return {
           view_point: getPoint3dFromVector3(this.camera.position),
@@ -777,7 +775,7 @@ export class Viewer
       else return undefined;
     };
 
-    const getPerspectiveCamera = (): IPerspectiveCamera => {
+    const getPerspectiveCamera = (): IPerspectiveCamera | undefined => {
       if (this.camera["isPerspectiveCamera"])
         return {
           view_point: getPoint3dFromVector3(this.camera.position),
@@ -789,7 +787,7 @@ export class Viewer
     };
 
     const getClippingPlanes = (): IClippingPlane[] => {
-      const clipping_planes = [];
+      const clipping_planes: IClippingPlane[] = [];
       this.clippingPlanes.forEach((plane: Plane) => {
         const clipping_plane = {
           location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3())),

package/src/Viewer/commands/GetSelected2.ts

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

package/src/Viewer/commands/SetSelected.ts

@@ -24,7 +24,7 @@
 import type { Viewer } from "../Viewer";
 
 export function setSelected(viewer: Viewer, handles: string[] = []): void {
-  const handles2 = [];
+  const handles2: string[] = [];
 
   handles.forEach((handle) => {
     if (handle.includes(":")) {

package/src/Viewer/components/BackgroundComponent.ts

@@ -42,7 +42,7 @@ export class BackgroundComponent implements IComponent {
 
   dispose() {
     this.viewer.removeEventListener("optionschange", this.syncOptions);
-    this.viewer.scene.background = undefined;
+    this.viewer.scene.background = null;
   }
 
   syncOptions = () => {

package/src/Viewer/components/CameraComponent.ts

@@ -80,7 +80,7 @@ export class CameraComponent implements IComponent {
 
     const target = this.viewer.target.clone();
 
-    let camera: PerspectiveCamera | OrthographicCamera;
+    let camera: PerspectiveCamera | OrthographicCamera | null = null;
 
     if (currentCamera.isOrthographicCamera) {
       const fov = currentCamera.userData.fov || 45;

package/src/Viewer/components/CanvasRemoveComponent.ts

@@ -36,7 +36,6 @@ export class CanvasRemoveComponent implements IComponent {
 
   dispose() {
     this.mutationObserver.disconnect();
-    this.mutationObserver = undefined;
   }
 
   cleanupViewer = (mutations: MutationRecord[]) => {

package/src/Viewer/components/HighlighterUtils.ts

@@ -40,7 +40,7 @@ export class HighlighterUtils {
 
   static fromIndexedLine(positions: Float32Array, indices: number[]) {
     const lineGeometry = new LineSegmentsGeometry();
-    const segments = [];
+    const segments: number[] = [];
 
     for (let i = 0; i < indices.length; i += 2) {
       const idx1 = indices[i] * 3;
@@ -68,7 +68,7 @@ export class HighlighterUtils {
 
   static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean) {
     const lineGeometry = new LineSegmentsGeometry();
-    const segments = [];
+    const segments: number[] = [];
 
     if (isLineSegments) {
       for (let i = 0; i < positions.length; i += 6) {

package/src/Viewer/components/SelectionComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D, Vector2, Vector3 } from "three";
+import { Intersection, Object3D, Vector2, Vector3 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -68,7 +68,9 @@ export class SelectionComponent implements IComponent {
     const snapper = new Snapper(this.viewer.camera, this.viewer.clippingPlanes, this.viewer.canvas);
     snapper.threshold = extentsSize / 10000;
 
-    let intersections = [];
+    type Intersection2 = Intersection<Object3D> & { model: IModelImpl };
+
+    let intersections: Intersection2[] = [];
     this.viewer.models.forEach((model) => {
       const objects = model.getVisibleObjects();
       const intersects = snapper.getPointerIntersects(upPosition, objects);

package/src/Viewer/helpers/SectionsHelper.js

@@ -41,10 +41,6 @@ import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeome
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2.js";
 
-// ============================================================================
-// MATH UTILITY CLASS
-// ============================================================================
-
 /**
  * Spatial Hash Grid class. Used for merging vertices that are practically at the same coordinate (within
  * the given tolerance). This is critical for eliminating gaps caused by floating-point precision
@@ -115,10 +111,10 @@ class PointHashGrid {
   }
 }
 
-// ---------------------------------------------------------------------
-// Sections Helper Class
-// Manages all meshes related to clipping planes: Fill (Caps), Outlines, and Debug Points
-// ---------------------------------------------------------------------
+/**
+ * Sections Helper Class Manages all meshes related to clipping planes: Fill (Caps), Outlines, and Debug
+ * Points
+ */
 class SectionsHelper extends Object3D {
   constructor() {
     super();

package/src/Viewer/helpers/WCSHelper.ts

@@ -113,11 +113,13 @@ export class WCSHelper extends Object3D {
     canvas.height = 64;
 
     const context = canvas.getContext("2d");
-    context.clearRect(0, 0, 64, 64);
-    context.font = "24px Arial";
-    context.textAlign = "center";
-    context.fillStyle = color.getStyle();
-    context.fillText(text, 32, 41);
+    if (context) {
+      context.clearRect(0, 0, 64, 64);
+      context.font = "24px Arial";
+      context.textAlign = "center";
+      context.fillStyle = color.getStyle();
+      context.fillText(text, 32, 41);
+    }
 
     const texture = new CanvasTexture(canvas);
     texture.colorSpace = SRGBColorSpace;

package/src/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.ts

@@ -62,7 +62,7 @@ export class DynamicModelImpl extends ModelImpl {
   }
 
   override getObjects(): Object3D[] {
-    const objects = [];
+    const objects: Object3D[] = [];
     this.gltfLoader.originalObjects.forEach((object: Object3D) => {
       objects.push(object);
     });
@@ -78,7 +78,7 @@ export class DynamicModelImpl extends ModelImpl {
 
     const handlesSet = new Set(handles);
 
-    const objects = [];
+    const objects: Object3D[] = [];
     handlesSet.forEach((handle) => {
       objects.push(this.gltfLoader.getObjectsByHandle(handle));
     });
@@ -153,6 +153,13 @@ export class DynamicModelImpl extends ModelImpl {
       return target;
     };
 
+    const calcObjectOffset = (object: Object3D, target: Vector3): Vector3 => {
+      const parent = object.parent;
+      if (!parent || parent.userData.originalCenter === undefined) return target;
+
+      return target.subVectors(object.userData.originalCenter, parent.userData.originalCenter);
+    };
+
     const calcObjectDepth = (object: Object3D): number => {
       if (object.userData.depth !== undefined) return object.userData.depth;
 
@@ -162,17 +169,19 @@ export class DynamicModelImpl extends ModelImpl {
       object.userData.depth = depth;
       object.userData.originalPosition = object.position.clone();
       object.userData.originalCenter = calcObjectCenter(object, new Vector3());
+      object.userData.originalOffset = calcObjectOffset(object, new Vector3());
 
       return depth;
     };
 
     const explodeScale = scale / 100;
     const explodeRoot = this.scene.children[0];
+    const explodeObjects = this.getObjects();
 
-    if (!explodeRoot.userData.explodeDepth) {
+    if (explodeRoot.userData.explodeDepth === undefined) {
       let maxDepth = 0;
 
-      this.gltfLoader.originalObjects.forEach((object: Object3D) => {
+      explodeObjects.forEach((object: Object3D) => {
         const depth = calcObjectDepth(object);
         if (depth > maxDepth) maxDepth = depth;
       });
@@ -187,11 +196,11 @@ export class DynamicModelImpl extends ModelImpl {
 
     const offsetCache = new Map();
 
-    const calcObjectOffset = (object: Object3D, target: Vector3): Vector3 => {
+    const calcExplodeOffset = (object: Object3D, target: Vector3): Vector3 => {
       if (offsetCache.has(object)) return target.copy(offsetCache.get(object));
 
       const parent = object.parent;
-      if (parent && object !== explodeRoot) calcObjectOffset(parent, target);
+      if (parent && object !== explodeRoot) calcExplodeOffset(parent, target);
 
       const depth = object.userData.depth;
 
@@ -199,11 +208,7 @@ export class DynamicModelImpl extends ModelImpl {
         let objectScale = explodeScale * coeff;
         if (depth === explodeDepth) objectScale *= currentSegmentFraction;
 
-        const parentCenter = parent.userData.originalCenter;
-        const objectCenter = object.userData.originalCenter;
-        const localOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-
-        target.add(localOffset);
+        target.addScaledVector(object.userData.originalOffset, objectScale);
       }
 
       offsetCache.set(object, target.clone());
@@ -213,9 +218,9 @@ export class DynamicModelImpl extends ModelImpl {
 
     const transformMap = new Map();
 
-    this.gltfLoader.originalObjects.forEach((object: Object3D) => {
-      const globalOffset = calcObjectOffset(object, new Vector3());
-      transformMap.set(object, new Matrix4().makeTranslation(globalOffset));
+    explodeObjects.forEach((object: Object3D) => {
+      const offset = calcExplodeOffset(object, new Vector3());
+      transformMap.set(object, new Matrix4().makeTranslation(offset));
     });
 
     this.gltfLoader.applyObjectTransforms(transformMap);

package/src/Viewer/loaders/GLTFBinaryParser.ts

@@ -86,10 +86,10 @@ export class GLTFBinaryParser {
       offset += chunkLength;
     }
 
-    if (typeof this.content === "undefined") {
+    if (this.content === undefined) {
       throw new Error("GLTFBinaryParser: JSON content not found.");
     }
-    if (typeof this.body === "undefined") {
+    if (this.body === undefined) {
       throw new Error("GLTFBinaryParser: Binary buffer chunk not found or type not supported.");
     }
   }

package/src/Viewer/loaders/GLTFFileDynamicLoader.ts

@@ -49,14 +49,14 @@ export class GLTFFileDynamicLoader extends Loader {
     if (this.manager) this.manager.dispose();
   }
 
-  override isSupport(file: any, format?: string): boolean {
+  override isSupport(file: any, format = ""): boolean {
     return (
       (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
       /(gltf|glb)$/i.test(format)
     );
   }
 
-  override async load(file: any, format?: string, params?: GLTFLoadParams): Promise<this> {
+  override async load(file: any, format?: string, params: GLTFLoadParams = {}): Promise<this> {
     this.manager = new GLTFLoadingManager(file, params);
 
     const scene = new Group();

package/src/Viewer/measurement/Snapper.ts

@@ -151,7 +151,7 @@ export class Snapper {
     return 0.1;
   }
 
-  getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3 {
+  getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3 | undefined {
     const intersections = this.getPointerIntersects(mouse, objects);
     if (intersections.length === 0) return undefined;
 
@@ -166,7 +166,7 @@ export class Snapper {
     const intersectionPoint = intersections[0].point;
     const localPoint = object.worldToLocal(intersectionPoint.clone());
 
-    let snapPoint: Vector3;
+    let snapPoint: Vector3 | undefined = undefined;
     let snapDistance = this.getDetectRadius(intersectionPoint);
 
     const geometry = object.geometry;