@inweb/viewer-visualize 26.12.7 → 27.1.1

package/lib/Viewer/Components/InfoComponent.d.ts

@@ -0,0 +1,22 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class InfoComponent implements IComponent {
+    protected viewer: Viewer;
+    private startTime;
+    private beginTime;
+    private prevTime;
+    private frames;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    initialize: () => void;
+    clear: () => void;
+    optionsChange: ({ data: options }: {
+        data: any;
+    }) => void;
+    geometryStart: () => void;
+    databaseChunk: () => void;
+    geometryEnd: () => void;
+    resize: () => void;
+    render: () => void;
+    animate: () => void;
+}

package/lib/Viewer/Components/RenderLoopComponent.d.ts

@@ -5,5 +5,5 @@ export declare class RenderLoopComponent implements IComponent {
     protected requestId: number;
     constructor(viewer: Viewer);
     dispose(): void;
-    animate: (time?: number) => void;
+    animate: (time: number) => void;
 }

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

@@ -55,11 +55,12 @@ import { ILoadersRegistry } from "@inweb/viewer-core";
  *
  *     this.viewer.syncOptions();
  *     this.viewer.syncOverlay();
- *     this.viewer.update();
  *
  *     this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
  *     this.viewer.emitEvent({ type: "databasechunk", data, file });
  *
+ *     this.viewer.update(true);
+ *
  *     return Promise.resove(this);
  *   };
  * }

package/lib/Viewer/Viewer.d.ts

@@ -23,6 +23,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     private _crossOrigin;
     private _activeDragger;
     private _components;
+    private _updateDelay;
     private _renderNeeded;
     private _renderTime;
     private _enableAutoUpdate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "26.12.7",
+  "version": "27.1.1",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.12.7",
-    "@inweb/eventemitter2": "~26.12.7",
-    "@inweb/markup": "~26.12.7",
-    "@inweb/viewer-core": "~26.12.7"
+    "@inweb/client": "~27.1.1",
+    "@inweb/eventemitter2": "~27.1.1",
+    "@inweb/markup": "~27.1.1",
+    "@inweb/viewer-core": "~27.1.1"
   },
   "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
 }

package/src/Viewer/Components/InfoComponent.ts

@@ -0,0 +1,139 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class InfoComponent implements IComponent {
+  protected viewer: Viewer;
+  private startTime: number;
+  private beginTime: number;
+  private prevTime: number;
+  private frames: number;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.startTime = 0;
+    this.beginTime = performance.now();
+    this.prevTime = performance.now();
+    this.frames = 0;
+    this.viewer.addEventListener("initialize", this.initialize);
+    this.viewer.addEventListener("clear", this.clear);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("geometrystart", this.geometryStart);
+    this.viewer.addEventListener("databasechunk", this.databaseChunk);
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("resize", this.resize);
+    this.viewer.addEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("initialize", this.initialize);
+    this.viewer.removeEventListener("clear", this.clear);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("geometrystart", this.geometryStart);
+    this.viewer.removeEventListener("databasechunk", this.databaseChunk);
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("resize", this.resize);
+    this.viewer.removeEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  initialize = () => {
+    this.resize();
+    this.optionsChange({ data: this.viewer.options });
+  };
+
+  clear = () => {
+    this.viewer.info.performance.timeToFirstRender = 0;
+    this.viewer.info.performance.loadTime = 0;
+
+    this.viewer.info.scene.objects = 0;
+    this.viewer.info.scene.triangles = 0;
+    this.viewer.info.scene.points = 0;
+    this.viewer.info.scene.lines = 0;
+    this.viewer.info.scene.edges = 0;
+
+    this.viewer.info.optimizedScene.objects = 0;
+    this.viewer.info.optimizedScene.triangles = 0;
+    this.viewer.info.optimizedScene.points = 0;
+    this.viewer.info.optimizedScene.lines = 0;
+    this.viewer.info.optimizedScene.edges = 0;
+
+    this.viewer.info.memory.geometries = 0;
+    this.viewer.info.memory.geometryBytes = 0;
+    this.viewer.info.memory.textures = 0;
+    this.viewer.info.memory.textureBytes = 0;
+    this.viewer.info.memory.materials = 0;
+    this.viewer.info.memory.totalEstimatedGpuBytes = 0;
+    this.viewer.info.memory.usedJSHeapSize = 0;
+  };
+
+  optionsChange = ({ data: options }) => {
+    const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
+    if (antialiasing) this.viewer.info.render.antialiasing = "fxaa";
+    else this.viewer.info.render.antialiasing = "";
+  };
+
+  geometryStart = () => {
+    this.startTime = performance.now();
+  };
+
+  databaseChunk = () => {
+    this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+
+    console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+  };
+
+  geometryEnd = () => {
+    const memory = performance["memory"];
+    if (memory) this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;
+
+    this.viewer.info.performance.loadTime += performance.now() - this.startTime;
+
+    console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
+  };
+
+  resize = () => {
+    const { width, height } = this.viewer.canvas;
+    this.viewer.info.render.viewport.width = width;
+    this.viewer.info.render.viewport.height = height;
+  };
+
+  render = () => {};
+
+  animate = () => {
+    const time = performance.now();
+
+    this.viewer.info.performance.frameTime = Math.round(time - this.beginTime);
+    this.beginTime = time;
+
+    this.frames++;
+    if (time - this.prevTime >= 1000) {
+      this.viewer.info.performance.fps = Math.round((this.frames * 1000) / (time - this.prevTime));
+      this.prevTime = time;
+      this.frames = 0;
+    }
+  };
+}

package/src/Viewer/Components/RenderLoopComponent.ts

@@ -30,14 +30,14 @@ export class RenderLoopComponent implements IComponent {
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
-    this.animate();
+    this.requestId = requestAnimationFrame(this.animate);
   }
 
   dispose() {
     cancelAnimationFrame(this.requestId);
   }
 
-  animate = (time = 0) => {
+  animate = (time: number) => {
     this.requestId = requestAnimationFrame(this.animate);
 
     this.viewer.render(time);

package/src/Viewer/Components/index.ts

@@ -24,6 +24,7 @@
 import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
 import { CameraComponent } from "./CameraComponent";
+import { InfoComponent } from "./InfoComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { ZoomWheelComponent } from "./ZoomWheelComponent";
@@ -74,6 +75,7 @@ export const components: IComponentsRegistry = componentsRegistry("visualizejs")
 // build-in components
 
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
+components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComponent(viewer));

package/src/Viewer/Loaders/VSFCloudLoader.ts

@@ -48,8 +48,6 @@ export class VSFCloudLoader extends Loader {
     const visViewer = this.viewer.visViewer();
     const filesToDownload = [model.database, ...model.geometry];
 
-    console.time("File load time");
-
     for (let i = 0; i < filesToDownload.length; i++) {
       const dataId = filesToDownload[i];
 
@@ -78,17 +76,15 @@ export class VSFCloudLoader extends Loader {
 
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        this.viewer.update(true);
 
         this.viewer.emitEvent({ type: "databasechunk", data, file: model.file, model });
+        this.viewer.update(true);
       } else {
-        this.viewer.update();
         this.viewer.emitEvent({ type: "geometrychunk", data, file: model.file, model });
+        this.viewer.update();
       }
     }
 
-    console.timeEnd("File load time");
-
     return this;
   }
 }

package/src/Viewer/Loaders/VSFFileLoader.ts

@@ -76,9 +76,9 @@ export class VSFFileLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update(true);
 
     this.viewer.emitEvent({ type: "databasechunk", data, file });
+    this.viewer.update(true);
 
     return this;
   }

package/src/Viewer/Loaders/VSFXCloudLoader.ts

@@ -52,8 +52,6 @@ export class VSFXCloudLoader extends Loader {
       this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
     };
 
-    console.time("File load time");
-
     const arrayBuffer = await model.downloadResource(model.database, progress, this.abortController.signal);
     const data = new Uint8Array(arrayBuffer);
 
@@ -73,11 +71,9 @@ export class VSFXCloudLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update(true);
 
     this.viewer.emitEvent({ type: "databasechunk", data, file: model.file, model });
-
-    console.timeEnd("File load time");
+    this.viewer.update(true);
 
     return this;
   }

package/src/Viewer/Loaders/VSFXCloudPartialLoader.ts

@@ -24,7 +24,6 @@
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 import { ModelImpl } from "../Models/ModelImpl";
-import { UpdateController, UpdateType } from "./UpdateController";
 
 const PENDING_REQUESTS_SIZE = 50;
 const PENDING_REQUESTS_TIMEOUT = 250;
@@ -54,6 +53,8 @@ export class VSFXCloudPartialLoader extends Loader {
     if (!this.viewer.visualizeJs) return this;
 
     const visViewer = this.viewer.visViewer();
+    visViewer.memoryLimit = this.viewer.options.memoryLimit;
+
     let servicePartAborted = false;
 
     const pendingRequestsMap = new Map();
@@ -63,11 +64,6 @@ export class VSFXCloudPartialLoader extends Loader {
     const pendingRequestsAbortController = new AbortController();
     this.abortControllerForRequestMap.set(0, pendingRequestsAbortController);
 
-    const updateController = new UpdateController();
-    updateController.initialize(this.viewer);
-
-    visViewer.memoryLimit = this.viewer.options.memoryLimit;
-
     const chunkLoadHandler = (progress: number, chunk: Uint8Array, requestId = 0) => {
       if (!this.viewer.visualizeJs) return;
 
@@ -89,12 +85,12 @@ export class VSFXCloudPartialLoader extends Loader {
 
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        updateController.update(UpdateType.kForce);
 
         this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
+        this.viewer.update(true);
       } else {
-        updateController.update(UpdateType.kDelay);
         this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
+        this.viewer.update();
       }
     };
 
@@ -108,7 +104,6 @@ export class VSFXCloudPartialLoader extends Loader {
       } finally {
         ranges.forEach((range) => visViewer.onRequestResponseComplete(range.requestId));
         this.abortControllerForRequestMap.delete(requestId);
-        updateController.update(UpdateType.kNormal);
       }
     };
 
@@ -140,12 +135,11 @@ export class VSFXCloudPartialLoader extends Loader {
       },
 
       onFullLoaded: () => {
-        updateController.update(UpdateType.kNormal);
+        this.viewer.update(true);
       },
 
       onRequestResponseParsed: (requestId: number) => {
         this.abortControllerForRequestMap.delete(requestId);
-        updateController.update(UpdateType.kNormal);
       },
 
       onRequestAborted: (requestId: number) => {
@@ -165,7 +159,8 @@ export class VSFXCloudPartialLoader extends Loader {
           requestNumber = pendingRequest.number;
         }
 
-        // first several records of each file are processed without grouping (they usually require to be processed sequentially)
+        // first several records of each file are processed without grouping
+        // (they usually require to be processed sequentially)
         if (requestNumber <= 5) {
           pendingRequestsMap.set(dataId, { ranges: [], number: requestNumber + 1 });
           downloadResourceRange(dataId, requestId, ranges);

package/src/Viewer/Loaders/VSFXCloudStreamingLoader.ts

@@ -24,7 +24,6 @@
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 import { ModelImpl } from "../Models/ModelImpl";
-import { UpdateController, UpdateType } from "./UpdateController";
 
 export class VSFXCloudStreamingLoader extends Loader {
   public viewer: Viewer;
@@ -52,10 +51,7 @@ export class VSFXCloudStreamingLoader extends Loader {
     const visLib = this.viewer.visLib();
     const visViewer = this.viewer.visViewer();
 
-    const updateController = new UpdateController();
-    updateController.initialize(this.viewer);
-
-    let isFireDatabaseChunk = false;
+    let isServiceDataReady = false;
 
     const chunkLoadHandler = (progress: number, chunk: Uint8Array) => {
       if (!this.viewer.visualizeJs) return;
@@ -73,9 +69,9 @@ export class VSFXCloudStreamingLoader extends Loader {
       let isDatabaseChunk = false;
       if (
         status === visLib.DatabaseStreamStatus.ReadyServiceData ||
-        (status === visLib.DatabaseStreamStatus.Complete && !isFireDatabaseChunk)
+        (status === visLib.DatabaseStreamStatus.Complete && !isServiceDataReady)
       ) {
-        isFireDatabaseChunk = true;
+        isServiceDataReady = true;
         isDatabaseChunk = true;
       }
 
@@ -87,22 +83,17 @@ export class VSFXCloudStreamingLoader extends Loader {
 
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        updateController.update(UpdateType.kForce);
 
         this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
+        this.viewer.update(true);
       } else {
-        updateController.update(UpdateType.kDelay);
         this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
+        this.viewer.update();
       }
     };
 
-    console.time("File load time");
-
     await model.downloadResource(model.database, chunkLoadHandler, this.abortController.signal);
-    updateController.update(UpdateType.kNormal);
-
-    console.timeEnd("File load time");
 
-    return Promise.resolve(this);
+    return this;
   }
 }

package/src/Viewer/Loaders/VSFXFileLoader.ts

@@ -76,9 +76,9 @@ export class VSFXFileLoader extends Loader {
 
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
-    this.viewer.update(true);
 
     this.viewer.emitEvent({ type: "databasechunk", data, file });
+    this.viewer.update(true);
 
     return this;
   }

package/src/Viewer/Loaders/index.ts

@@ -87,11 +87,12 @@ import { VSFXCloudPartialLoader } from "./VSFXCloudPartialLoader";
  *
  *     this.viewer.syncOptions();
  *     this.viewer.syncOverlay();
- *     this.viewer.update();
  *
  *     this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
  *     this.viewer.emitEvent({ type: "databasechunk", data, file });
  *
+ *     this.viewer.update(true);
+ *
  *     return Promise.resove(this);
  *   };
  * }

package/src/Viewer/Viewer.ts

@@ -86,6 +86,7 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
+  private _updateDelay: number;
   private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
   private _enableAutoUpdate: boolean;
@@ -132,6 +133,7 @@ export class Viewer
     this._activeDragger = null;
     this._components = [];
 
+    this._updateDelay = 1000;
     this._renderNeeded = false;
     this._renderTime = 0;
     this._enableAutoUpdate = params.enableAutoUpdate ?? true;
@@ -282,9 +284,9 @@ export class Viewer
     this.syncOverlay();
 
     this._renderTime = performance.now();
-    this.render(this._renderTime);
 
     this.emitEvent({ type: "initialize" });
+    this.update(true);
 
     return this;
   }
@@ -337,8 +339,8 @@ export class Viewer
 
     this._viewer.resize(0, this.canvas.width, this.canvas.height, 0);
 
-    this.update(true);
     this.emitEvent({ type: "resize", width, height });
+    this.update(true);
   }
 
   resize(): this {
@@ -372,11 +374,15 @@ export class Viewer
    *   Default is `false`.
    */
   update(force = false) {
+    const time = performance.now();
+    force = force || time - this._renderTime >= this._updateDelay;
+
     if (this._enableAutoUpdate) {
       this._renderNeeded = true;
-      if (force) this.render();
+      if (force) this.render(time);
     }
-    this.emitEvent({ type: "update", data: force });
+
+    this.emitEvent({ type: "update", force });
   }
 
   // Internal render routines
@@ -429,6 +435,8 @@ export class Viewer
   }
 
   applyModelTransformMatrix(model: Model | Assembly) {
+    if (!this.visualizeJs) return;
+
     this.executeCommand("applyModelTransform", model);
   }
 
@@ -555,16 +563,15 @@ export class Viewer
     try {
       await this.loadReferences(model);
       await loader.load(model, format, params);
+
+      this.applyModelTransformMatrix(model);
+      this.applySceneGraphSettings();
     } catch (error: any) {
       this.emitEvent({ type: "geometryerror", data: error, file, model });
       throw error;
     }
     this.emitEvent({ type: "geometryend", file, model });
-
-    if (this.visualizeJs) {
-      this.applyModelTransformMatrix(model);
-      this.applySceneGraphSettings();
-    }
+    this.update(true);
 
     return this;
   }
@@ -595,7 +602,6 @@ export class Viewer
 
       this.syncOptions();
       this.syncOverlay();
-      this.update(true);
 
       this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
       this.emitEvent({ type: "databasechunk", data, file: "", buffer });
@@ -604,6 +610,7 @@ export class Viewer
       throw error;
     }
     this.emitEvent({ type: "geometryend", file: "", buffer });
+    this.update(true);
 
     return this;
   }
@@ -634,7 +641,6 @@ export class Viewer
 
       this.syncOptions();
       this.syncOverlay();
-      this.update(true);
 
       this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
       this.emitEvent({ type: "databasechunk", data, file: "", buffer });
@@ -643,6 +649,7 @@ export class Viewer
       throw error;
     }
     this.emitEvent({ type: "geometryend", file: "", buffer });
+    this.update(true);
 
     return this;
   }
@@ -678,9 +685,9 @@ export class Viewer
 
     this.syncOptions();
     this.syncOverlay();
-    this.update(true);
 
     this.emitEvent({ type: "clear" });
+    this.update(true);
 
     return this;
   }
@@ -1098,10 +1105,10 @@ export class Viewer
     this._markup.setViewpoint(viewpoint);
 
     this.syncOverlay();
-
     this.setActiveDragger(draggerName);
+
     this.emitEvent({ type: "drawviewpoint", data: viewpoint });
-    this.update();
+    this.update(true);
   }
 
   createViewpoint(): IViewpoint {
@@ -1361,7 +1368,7 @@ export class Viewer
             this.visViewer()?.update(maxScheduleUpdateTimeInMs);
             this._activeDragger?.updatePreview?.();
           }
-          this.emitEvent({ type: "update", data: false });
+          this.emitEvent({ type: "update", force: false });
           resolve();
         } catch (e) {
           console.error(e);

package/lib/Viewer/Loaders/UpdateController.d.ts

@@ -1,14 +0,0 @@
-import { Viewer } from "../Viewer";
-export declare enum UpdateType {
-    kDelay = 0,
-    kNormal = 1,
-    kForce = 2
-}
-export declare class UpdateController {
-    private lastUpdate;
-    private viewer;
-    delayUpdateTime: number;
-    constructor();
-    initialize(viewer: Viewer): void;
-    update(type: UpdateType): void;
-}