@inweb/viewer-three 26.12.6 → 27.1.0

package/extensions/loaders/GLTFFileLoader.ts

@@ -62,7 +62,7 @@ export class GLTFFileLoader extends Loader {
     const gltf = await loader.loadAsync(this.manager.fileURL, progress);
     if (!this.viewer.scene) return this;
 
-    let handle = 0;
+    let handle = 1;
     gltf.scene.traverse((object) => {
       object.userData = { handle: handle + "", ...object.userData };
       handle++;

package/extensions/loaders/IFCX/IFCXCloudLoader.ts

@@ -56,7 +56,7 @@ export class IFCXCloudLoader extends Loader {
     const scene: Scene = await parse(json);
     clear();
 
-    let handle = 0;
+    let handle = 1;
     scene.traverse((object) => {
       object.userData = { handle: handle + "", ...object.userData };
       handle++;

package/extensions/loaders/IFCX/IFCXFileLoader.ts

@@ -56,7 +56,7 @@ export class IFCXFileLoader extends Loader {
     const scene = await loader.loadAsync(manager.fileURL, progress);
     if (!this.viewer.scene) return this;
 
-    let handle = 0;
+    let handle = 1;
     scene.traverse((object) => {
       object.userData = { handle: handle + "", ...object.userData };
       handle++;

package/lib/Viewer/Viewer.d.ts

@@ -39,6 +39,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     target: Vector3;
     private _activeDragger;
     private _components;
+    private _updateDelay;
     private _renderNeeded;
     private _renderTime;
     private _markup;
@@ -61,7 +62,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     isInitialized(): boolean;
     setSize(width: number, height: number, updateStyle?: boolean): void;
     update(force?: boolean): void;
-    render(time?: DOMHighResTimeStamp, force?: boolean): void;
+    render(time?: DOMHighResTimeStamp): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;
     /**
      * Loads a file into the viewer.

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

@@ -4,5 +4,5 @@ export declare class ExtentsComponent implements IComponent {
     private viewer;
     constructor(viewer: Viewer);
     dispose(): void;
-    syncExtents: () => void;
+    syncExtents: (event: any) => void;
 }

package/lib/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.d.ts

@@ -8,13 +8,13 @@ export declare class DynamicModelImpl extends ModelImpl {
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];
-    hasObject(object: any): boolean;
     getObjectsByHandles(handles: string | string[]): Object3D[];
     getHandlesByObjects(objects: Object3D | Object3D[]): string[];
     hideObjects(objects: Object3D | Object3D[]): this;
     isolateObjects(objects: Object3D | Object3D[]): this;
     showObjects(objects: Object3D | Object3D[]): this;
     showAllObjects(): this;
-    showOriginalObjects(objects: Object3D | Object3D[]): this;
-    hideOriginalObjects(objects: Object3D | Object3D[]): this;
+    highlightObjects(objects: Object3D | Object3D[]): this;
+    unhighlightObjects(objects: Object3D | Object3D[]): this;
+    explode(scale?: number, coeff?: number): this;
 }

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

@@ -3,6 +3,7 @@ export declare class Snapper {
     camera: Camera;
     renderer: WebGLRenderer;
     canvas: HTMLCanvasElement;
+    threshold: number;
     private raycaster;
     private detectRadiusInPixels;
     private edgesCache;

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

@@ -1,62 +1,69 @@
-export declare const ModelUnits: {
+export declare const DisplayUnits: {
     Meters: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Centimeters: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Millimeters: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Feet: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Inches: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Yards: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Kilometers: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Miles: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Micrometers: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Mils: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     MicroInches: {
         name: string;
-        type: string;
+        symbol: string;
         scale: number;
     };
     Default: {
         name: string;
-        type: string;
+        symbol: string;
+        scale: number;
+    };
+};
+export declare const ModelUnits: {
+    Default: {
+        name: string;
+        symbol: string;
         scale: number;
     };
 };

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

@@ -13,10 +13,6 @@ export interface IModelImpl extends IModel {
     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;
@@ -24,7 +20,7 @@ export interface IModelImpl extends IModel {
     isolateObjects(objects: Object3D | Object3D[]): this;
     showObjects(objects: Object3D | Object3D[]): this;
     showAllObjects(): this;
-    showOriginalObjects(objects: Object3D | Object3D[]): this;
-    hideOriginalObjects(objects: Object3D | Object3D[]): this;
+    highlightObjects(objects: Object3D | Object3D[]): this;
+    unhighlightObjects(objects: Object3D | Object3D[]): this;
     explode(scale: number, coeff?: number): this;
 }

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

@@ -4,6 +4,8 @@ import { IModelImpl } from "./IModelImpl";
 export declare class ModelImpl implements IModelImpl {
     id: string;
     scene: Object3D;
+    private handleToObjects;
+    private originalObjects;
     constructor(scene: Object3D);
     dispose(): void;
     getUnits(): string;
@@ -14,10 +16,6 @@ export declare class ModelImpl implements IModelImpl {
     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;
@@ -25,7 +23,7 @@ export declare class ModelImpl implements IModelImpl {
     isolateObjects(objects: Object3D | Object3D[]): this;
     showObjects(objects: Object3D | Object3D[]): this;
     showAllObjects(): this;
-    showOriginalObjects(objects: Object3D | Object3D[]): this;
-    hideOriginalObjects(objects: Object3D | Object3D[]): this;
+    highlightObjects(objects: Object3D | Object3D[]): this;
+    unhighlightObjects(objects: Object3D | Object3D[]): this;
     explode(scale?: number, coeff?: number): this;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.12.6",
+  "version": "27.1.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": "~26.12.6",
-    "@inweb/eventemitter2": "~26.12.6",
-    "@inweb/markup": "~26.12.6",
-    "@inweb/viewer-core": "~26.12.6"
+    "@inweb/client": "~27.1.0",
+    "@inweb/eventemitter2": "~27.1.0",
+    "@inweb/markup": "~27.1.0",
+    "@inweb/viewer-core": "~27.1.0"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",

package/src/Viewer/Viewer.ts

@@ -109,6 +109,7 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
+  private _updateDelay: number;
   private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
 
@@ -137,6 +138,7 @@ export class Viewer
     this._activeDragger = null;
     this._components = [];
 
+    this._updateDelay = 1000;
     this._renderNeeded = false;
     this._renderTime = 0;
 
@@ -175,9 +177,9 @@ export class Viewer
     const rect = canvas.parentElement.getBoundingClientRect();
     const width = rect.width || 1;
     const height = rect.height || 1;
-    const aspect = width / height;
+    const aspectRatio = width / height;
 
-    this.camera = new PerspectiveCamera(45, aspect, 0.001, 1000);
+    this.camera = new PerspectiveCamera(45, aspectRatio, 0.001, 1000);
     this.camera.up.set(0, 1, 0);
     this.camera.position.set(0, 0, 1);
     this.camera.lookAt(this.target);
@@ -293,15 +295,15 @@ export class Viewer
     if (!this.renderer) return;
 
     const camera = this.camera as any;
-    const aspect = width / height;
+    const aspectRatio = width / height;
 
     if (camera.isPerspectiveCamera) {
-      camera.aspect = aspect;
+      camera.aspect = aspectRatio;
       camera.updateProjectionMatrix();
     }
     if (camera.isOrthographicCamera) {
-      camera.left = camera.bottom * aspect;
-      camera.right = camera.top * aspect;
+      camera.left = camera.bottom * aspectRatio;
+      camera.right = camera.top * aspectRatio;
       camera.updateProjectionMatrix();
     }
 
@@ -313,16 +315,20 @@ export class Viewer
   }
 
   update(force = false): void {
+    const time = performance.now();
+    force = force || time - this._renderTime >= this._updateDelay;
+
     this._renderNeeded = true;
-    if (force) this.render();
-    this.emitEvent({ type: "update", data: force });
+    if (force) this.render(time);
+
+    this.emitEvent({ type: "update", force });
   }
 
   // Internal render routines
 
-  render(time?: DOMHighResTimeStamp, force = false): void {
+  render(time?: DOMHighResTimeStamp): void {
     if (!this.renderer) return;
-    if (!this._renderNeeded && !force) return;
+    if (!this._renderNeeded) return;
 
     if (!time) time = performance.now();
     const deltaTime = (time - this._renderTime) / 1000;
@@ -671,13 +677,13 @@ export class Viewer
       if (orthogonal_camera) {
         const extentsSize = this.extents.getBoundingSphere(new Sphere()).radius * 2;
         const rendererSize = this.renderer.getSize(new Vector2());
-        const aspect = rendererSize.x / rendererSize.y;
+        const aspectRatio = rendererSize.x / rendererSize.y;
 
         const camera = new OrthographicCamera();
         camera.top = orthogonal_camera.field_height / 2;
         camera.bottom = -orthogonal_camera.field_height / 2;
-        camera.left = camera.bottom * aspect;
-        camera.right = camera.top * aspect;
+        camera.left = camera.bottom * aspectRatio;
+        camera.right = camera.top * aspectRatio;
         camera.near = 0;
         camera.far = extentsSize * 1000;
         camera.zoom = orthogonal_camera.view_to_world_scale;
@@ -693,6 +699,7 @@ export class Viewer
         this.helpersPass.camera = camera;
         this.ssaaRenderPass.camera = camera;
 
+        this.options.cameraMode = "orthographic";
         this.emitEvent({ type: "changecameramode", mode: "orthographic" });
       }
     };
@@ -701,11 +708,11 @@ export class Viewer
       if (perspective_camera) {
         const extentsSize = this.extents.getBoundingSphere(new Sphere()).radius * 2;
         const rendererSize = this.renderer.getSize(new Vector2());
-        const aspect = rendererSize.x / rendererSize.y;
+        const aspectRatio = rendererSize.x / rendererSize.y;
 
         const camera = new PerspectiveCamera();
         camera.fov = perspective_camera.field_of_view;
-        camera.aspect = aspect;
+        camera.aspect = aspectRatio;
         camera.near = extentsSize / 1000;
         camera.far = extentsSize * 1000;
         camera.updateProjectionMatrix();
@@ -720,6 +727,7 @@ export class Viewer
         this.helpersPass.camera = camera;
         this.ssaaRenderPass.camera = camera;
 
+        this.options.cameraMode = "perspective";
         this.emitEvent({ type: "changecameramode", mode: "perspective" });
       }
     };
@@ -760,6 +768,8 @@ export class Viewer
 
     this.target.copy(getVector3FromPoint3d(viewpoint.custom_fields?.camera_target ?? this.target));
 
+    this.syncOverlay();
+
     this.setActiveDragger(draggerName);
     this.emitEvent({ type: "drawviewpoint", data: viewpoint });
     this.update();

package/src/Viewer/commands/GetSelected2.ts

@@ -27,8 +27,8 @@ export function getSelected2(viewer: Viewer): string[] {
   const handles2 = [];
 
   viewer.models.forEach((model) => {
-    handles2.push(...model.getHandlesByObjects(viewer.selected));
+    handles2.push(model.getHandlesByObjects(viewer.selected));
   });
 
-  return handles2;
+  return handles2.flat();
 }

package/src/Viewer/commands/ZoomTo.ts

@@ -31,7 +31,7 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
   const boxSize = box.getBoundingSphere(new Sphere()).radius;
 
   const rendererSize = viewer.renderer.getSize(new Vector2());
-  const aspect = rendererSize.x / rendererSize.y;
+  const aspectRatio = rendererSize.x / rendererSize.y;
 
   const camera = viewer.camera as any;
 
@@ -46,8 +46,8 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
   if (camera.isOrthographicCamera) {
     camera.top = boxSize;
     camera.bottom = -boxSize;
-    camera.left = camera.bottom * aspect;
-    camera.right = camera.top * aspect;
+    camera.left = camera.bottom * aspectRatio;
+    camera.right = camera.top * aspectRatio;
     camera.zoom = 1;
     camera.updateProjectionMatrix();
 

package/src/Viewer/components/CameraComponent.ts

@@ -49,16 +49,16 @@ export class CameraComponent implements IComponent {
   switchCamera(camera: any) {
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2 || 1;
     const rendererSize = this.viewer.renderer.getSize(new Vector2());
-    const aspect = rendererSize.x / rendererSize.y;
+    const aspectRatio = rendererSize.x / rendererSize.y;
 
     if (camera.isPerspectiveCamera) {
-      camera.aspect = aspect;
+      camera.aspect = aspectRatio;
       camera.near = extentsSize / 1000;
       camera.far = extentsSize * 1000;
     }
     if (camera.isOrthographicCamera) {
-      camera.left = camera.bottom * aspect;
-      camera.right = camera.top * aspect;
+      camera.left = camera.bottom * aspectRatio;
+      camera.right = camera.top * aspectRatio;
       camera.near = 0;
       camera.far = extentsSize * 1000;
     }

package/src/Viewer/components/ExtentsComponent.ts

@@ -50,13 +50,13 @@ export class ExtentsComponent implements IComponent {
     this.viewer.off("showall", this.syncExtents);
   }
 
-  syncExtents = () => {
+  syncExtents = (event) => {
     const extents = new Box3();
     this.viewer.models.forEach((model) => model.getExtents(extents));
     this.viewer.extents.copy(extents);
 
-    // do not change target after opening the second file in assembly
-    if (this.viewer.models.length > 1) return;
+    if (event.type !== "databasechunk" && event.target !== "clear") return;
+    if (this.viewer.models.length > 1) return; // do not change target in assembly mode
 
     this.viewer.extents.getCenter(this.viewer.target);
   };

package/src/Viewer/components/HighlighterComponent.ts

@@ -78,12 +78,12 @@ export class HighlighterComponent implements IComponent {
     const { edgesVisibility } = this.viewer.options;
 
     if (!Array.isArray(objects)) objects = [objects];
-    if (!objects.length) return;
+    if (objects.length === 0) return;
 
     objects
       .filter((object) => !object.userData.isEdge) // <- filtering server generated edges
       .forEach((object: any) => {
-        if (object.isHighlighted) return;
+        if (object.userData.isHighlighted) return;
 
         if (object.isLine || object.isLineSegments) {
           const positions = object.geometry.attributes.position.array;
@@ -93,48 +93,42 @@ export class HighlighterComponent implements IComponent {
             : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
 
           const wireframe = new Wireframe(lineGeometry, this.lineGlowMaterial);
-          wireframe.position.copy(object.position);
-          wireframe.rotation.copy(object.rotation);
-          wireframe.scale.copy(object.scale);
           wireframe.visible = edgesVisibility;
+          wireframe.userData.isHighlightWireframe = true;
 
-          object.parent.add(wireframe);
+          object.add(wireframe);
           object.userData.highlightWireframe = wireframe;
-
           object.userData.originalMaterial = object.material;
           object.material = this.lineMaterial;
-          object.isHighlighted = true;
+          object.userData.isHighlighted = true;
         } else if (object.isMesh) {
           const edgesGeometry = new EdgesGeometry(object.geometry, 89);
           const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
 
           const wireframe = new Wireframe(lineGeometry, this.edgesMaterial);
-          wireframe.position.copy(object.position);
-          wireframe.rotation.copy(object.rotation);
-          wireframe.scale.copy(object.scale);
           wireframe.visible = edgesVisibility;
+          wireframe.userData.isHighlightWireframe = true;
 
-          object.parent.add(wireframe);
+          object.add(wireframe);
           object.userData.highlightWireframe = wireframe;
-
           object.userData.originalMaterial = object.material;
           object.material = this.facesMaterial;
-          object.isHighlighted = true;
+          object.userData.isHighlighted = true;
         }
       });
   }
 
   unhighlight(objects: Object3D | Object3D[]) {
     if (!Array.isArray(objects)) objects = [objects];
-    if (!objects.length) return;
+    if (objects.length === 0) return;
 
     objects.forEach((object: any) => {
-      if (!object.isHighlighted) return;
+      if (!object.userData.isHighlighted) return;
 
-      object.isHighlighted = false;
       object.material = object.userData.originalMaterial;
       object.userData.highlightWireframe.removeFromParent();
 
+      delete object.userData.isHighlighted;
       delete object.userData.originalMaterial;
       delete object.userData.highlightWireframe;
     });

package/src/Viewer/components/SelectionComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D, Vector2 } from "three";
+import { Object3D, Vector2, Vector3 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -64,6 +64,7 @@ export class SelectionComponent implements IComponent {
     if (upPosition.distanceTo(this.downPosition) !== 0) return;
 
     const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
+    snapper.threshold = this.viewer.extents.getSize(new Vector3()).length() / 10000;
 
     let intersections = [];
     this.viewer.models.forEach((model) => {
@@ -107,13 +108,13 @@ export class SelectionComponent implements IComponent {
     }
 
     if (!Array.isArray(objects)) objects = [objects];
-    if (!objects.length) return;
+    if (objects.length === 0) return;
 
-    model.showOriginalObjects(objects);
+    model.highlightObjects(objects);
     this.highlighter.highlight(objects);
 
-    objects.forEach((object: any) => this.viewer.selected.push(object));
-    objects.forEach((object: any) => (object.isSelected = true));
+    objects.forEach((object) => this.viewer.selected.push(object));
+    objects.forEach((object) => (object.userData.isSelected = true));
   }
 
   deselect(objects: Object3D | Object3D[], model?: IModelImpl) {
@@ -123,30 +124,30 @@ export class SelectionComponent implements IComponent {
     }
 
     if (!Array.isArray(objects)) objects = [objects];
-    if (!objects.length) return;
+    if (objects.length === 0) return;
 
+    model.unhighlightObjects(objects);
     this.highlighter.unhighlight(objects);
-    model.hideOriginalObjects(objects);
 
     this.viewer.selected = this.viewer.selected.filter((x) => !objects.includes(x));
-    objects.forEach((object: any) => (object.isSelected = false));
+    objects.forEach((object) => (object.userData.isSelected = false));
   }
 
   toggleSelection(objects: Object3D | Object3D[], model?: IModelImpl) {
     if (!Array.isArray(objects)) objects = [objects];
-    if (!objects.length) return;
+    if (objects.length === 0) return;
 
-    if ((objects[0] as any).isSelected) this.deselect(objects, model);
+    if (objects[0].userData.isSelected) this.deselect(objects, model);
     else this.select(objects, model);
   }
 
   clearSelection() {
-    if (!this.viewer.selected.length) return;
+    if (this.viewer.selected.length === 0) return;
 
+    this.viewer.models.forEach((model) => model.unhighlightObjects(this.viewer.selected));
     this.highlighter.unhighlight(this.viewer.selected);
-    this.viewer.models.forEach((model) => model.hideOriginalObjects(this.viewer.selected));
 
-    this.viewer.selected.forEach((object: any) => (object.isSelected = false));
+    this.viewer.selected.forEach((object) => (object.userData.isSelected = false));
     this.viewer.selected.length = 0;
   }
 

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -50,6 +50,7 @@ export class MeasureLineDragger extends OrbitDragger {
     this.overlay.addLine(this.line);
 
     this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+    this.snapper.threshold = viewer.extents.getSize(new Vector3()).length() / 10000;
 
     this.objects = [];
     this.updateObjects();

package/src/Viewer/draggers/OrbitDragger.ts

@@ -43,6 +43,7 @@ export class OrbitDragger implements IDragger {
     this.changed = false;
     this.viewer = viewer;
     this.viewer.addEventListener("databasechunk", this.updateControls);
+    this.viewer.addEventListener("clear", this.updateControls);
     this.viewer.on("viewposition", this.updateControls);
     this.viewer.addEventListener("zoom", this.updateControls);
     this.viewer.addEventListener("drawviewpoint", this.updateControls);
@@ -56,6 +57,7 @@ export class OrbitDragger implements IDragger {
 
   dispose(): void {
     this.viewer.removeEventListener("databasechunk", this.updateControls);
+    this.viewer.removeEventListener("clear", this.updateControls);
     this.viewer.off("viewposition", this.updateControls);
     this.viewer.removeEventListener("zoom", this.updateControls);
     this.viewer.removeEventListener("drawviewpoint", this.updateControls);