@inweb/viewer-visualize 26.12.7 → 27.1.1

package/dist/viewer-visualize.module.js

@@ -2781,15 +2781,108 @@ class CameraComponent {
     }
 }
 
+class InfoComponent {
+    constructor(viewer) {
+        this.initialize = () => {
+            this.resize();
+            this.optionsChange({ data: this.viewer.options });
+        };
+        this.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;
+        };
+        this.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 = "";
+        };
+        this.geometryStart = () => {
+            this.startTime = performance.now();
+        };
+        this.databaseChunk = () => {
+            this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+            console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+        };
+        this.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");
+        };
+        this.resize = () => {
+            const { width, height } = this.viewer.canvas;
+            this.viewer.info.render.viewport.width = width;
+            this.viewer.info.render.viewport.height = height;
+        };
+        this.render = () => { };
+        this.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;
+            }
+        };
+        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);
+    }
+}
+
 class RenderLoopComponent {
     constructor(viewer) {
-        this.animate = (time = 0) => {
+        this.animate = (time) => {
             this.requestId = requestAnimationFrame(this.animate);
             this.viewer.render(time);
             this.viewer.emitEvent({ type: "animate", time });
         };
         this.viewer = viewer;
-        this.animate();
+        this.requestId = requestAnimationFrame(this.animate);
     }
     dispose() {
         cancelAnimationFrame(this.requestId);
@@ -3066,6 +3159,7 @@ class ResetComponent {
 
 const components = componentsRegistry("visualizejs");
 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));
@@ -3188,8 +3282,8 @@ class VSFFileLoader extends Loader {
         this.viewer.models.push(modelImpl);
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        this.viewer.update(true);
         this.viewer.emitEvent({ type: "databasechunk", data, file });
+        this.viewer.update(true);
         return this;
     }
 }
@@ -3210,7 +3304,6 @@ class VSFCloudLoader extends Loader {
             return this;
         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];
             const progress = (progress) => {
@@ -3234,15 +3327,14 @@ class VSFCloudLoader extends Loader {
                 this.viewer.models.push(modelImpl);
                 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;
     }
 }
@@ -3285,8 +3377,8 @@ class VSFXFileLoader extends Loader {
         this.viewer.models.push(modelImpl);
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-        this.viewer.update(true);
         this.viewer.emitEvent({ type: "databasechunk", data, file });
+        this.viewer.update(true);
         return this;
     }
 }
@@ -3310,7 +3402,6 @@ class VSFXCloudLoader extends Loader {
         const progress = (progress) => {
             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);
         if (!this.viewer.visualizeJs)
@@ -3327,41 +3418,12 @@ class VSFXCloudLoader extends Loader {
         this.viewer.models.push(modelImpl);
         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;
     }
 }
 
-const DELAY_TIME_MULTIPLEXER = 2.0;
-const START_UPDATE_TIME = 1000;
-var UpdateType;
-(function (UpdateType) {
-    UpdateType[UpdateType["kDelay"] = 0] = "kDelay";
-    UpdateType[UpdateType["kNormal"] = 1] = "kNormal";
-    UpdateType[UpdateType["kForce"] = 2] = "kForce";
-})(UpdateType || (UpdateType = {}));
-class UpdateController {
-    constructor() {
-        this.lastUpdate = 0;
-        this.delayUpdateTime = START_UPDATE_TIME;
-    }
-    initialize(viewer) {
-        this.viewer = viewer;
-        this.lastUpdate = performance.now();
-    }
-    update(type) {
-        const isNeedUpdate = type !== UpdateType.kDelay || performance.now() - this.lastUpdate >= this.delayUpdateTime;
-        const isForce = type === UpdateType.kForce;
-        if (isNeedUpdate) {
-            this.viewer.update(isForce);
-            this.lastUpdate = performance.now();
-            this.delayUpdateTime *= DELAY_TIME_MULTIPLEXER;
-        }
-    }
-}
-
 class VSFXCloudStreamingLoader extends Loader {
     constructor(viewer) {
         super();
@@ -3381,9 +3443,7 @@ class VSFXCloudStreamingLoader extends Loader {
             return this;
         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, chunk) => {
             if (!this.viewer.visualizeJs)
                 return;
@@ -3398,8 +3458,8 @@ class VSFXCloudStreamingLoader extends Loader {
             this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
             let isDatabaseChunk = false;
             if (status === visLib.DatabaseStreamStatus.ReadyServiceData ||
-                (status === visLib.DatabaseStreamStatus.Complete && !isFireDatabaseChunk)) {
-                isFireDatabaseChunk = true;
+                (status === visLib.DatabaseStreamStatus.Complete && !isServiceDataReady)) {
+                isServiceDataReady = true;
                 isDatabaseChunk = true;
             }
             if (isDatabaseChunk) {
@@ -3408,19 +3468,16 @@ class VSFXCloudStreamingLoader extends Loader {
                 this.viewer.models.push(modelImpl);
                 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;
     }
 }
 
@@ -3444,15 +3501,13 @@ 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();
         let pendingRequestsTimerId = 0;
         const pendingRequestsAbortHandler = () => clearTimeout(pendingRequestsTimerId);
         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, chunk, requestId = 0) => {
             if (!this.viewer.visualizeJs)
                 return;
@@ -3471,12 +3526,12 @@ class VSFXCloudPartialLoader extends Loader {
                 this.viewer.models.push(modelImpl);
                 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();
             }
         };
         const downloadResourceRange = async (dataId, requestId, ranges) => {
@@ -3491,7 +3546,6 @@ class VSFXCloudPartialLoader extends Loader {
             finally {
                 ranges.forEach((range) => visViewer.onRequestResponseComplete(range.requestId));
                 this.abortControllerForRequestMap.delete(requestId);
-                updateController.update(UpdateType.kNormal);
             }
         };
         const requestRecordsToRanges = (requestId, records) => {
@@ -3519,11 +3573,10 @@ class VSFXCloudPartialLoader extends Loader {
                 downloadResourceRange(model.database, requestId, ranges);
             },
             onFullLoaded: () => {
-                updateController.update(UpdateType.kNormal);
+                this.viewer.update(true);
             },
             onRequestResponseParsed: (requestId) => {
                 this.abortControllerForRequestMap.delete(requestId);
-                updateController.update(UpdateType.kNormal);
             },
             onRequestAborted: (requestId) => {
                 const abortCtrl = this.abortControllerForRequestMap.get(requestId);
@@ -3962,6 +4015,7 @@ class Viewer extends EventEmitter2 {
         this.canvaseventlistener = (event) => this.emit(event);
         this._activeDragger = null;
         this._components = [];
+        this._updateDelay = 1000;
         this._renderNeeded = false;
         this._renderTime = 0;
         this._enableAutoUpdate = (_a = params.enableAutoUpdate) !== null && _a !== void 0 ? _a : true;
@@ -4031,8 +4085,8 @@ class Viewer extends EventEmitter2 {
         this.syncOptions();
         this.syncOverlay();
         this._renderTime = performance.now();
-        this.render(this._renderTime);
         this.emitEvent({ type: "initialize" });
+        this.update(true);
         return this;
     }
     dispose() {
@@ -4068,8 +4122,8 @@ class Viewer extends EventEmitter2 {
             this.canvas.style.height = height + "px";
         }
         this._viewer.resize(0, this.canvas.width, this.canvas.height, 0);
-        this.update(true);
         this.emitEvent({ type: "resize", width, height });
+        this.update(true);
     }
     resize() {
         console.warn("Viewer.resize() has been deprecated since 26.9 and will be removed in a future release, use Viewer.setSize() instead.");
@@ -4084,12 +4138,14 @@ class Viewer extends EventEmitter2 {
         return this;
     }
     update(force = false) {
+        const time = performance.now();
+        force = force || time - this._renderTime >= this._updateDelay;
         if (this._enableAutoUpdate) {
             this._renderNeeded = true;
             if (force)
-                this.render();
+                this.render(time);
         }
-        this.emitEvent({ type: "update", data: force });
+        this.emitEvent({ type: "update", force });
     }
     render(time) {
         var _a, _b;
@@ -4134,6 +4190,8 @@ class Viewer extends EventEmitter2 {
         return this;
     }
     applyModelTransformMatrix(model) {
+        if (!this.visualizeJs)
+            return;
         this.executeCommand("applyModelTransform", model);
     }
     applySceneGraphSettings(options = this.options) {
@@ -4179,16 +4237,15 @@ class Viewer extends EventEmitter2 {
         try {
             await this.loadReferences(model);
             await loader.load(model, format, params);
+            this.applyModelTransformMatrix(model);
+            this.applySceneGraphSettings();
         }
         catch (error) {
             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;
     }
     openVsfFile(buffer) {
@@ -4205,7 +4262,6 @@ class Viewer extends EventEmitter2 {
             visViewer.parseFile(data);
             this.syncOptions();
             this.syncOverlay();
-            this.update(true);
             this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
             this.emitEvent({ type: "databasechunk", data, file: "", buffer });
         }
@@ -4214,6 +4270,7 @@ class Viewer extends EventEmitter2 {
             throw error;
         }
         this.emitEvent({ type: "geometryend", file: "", buffer });
+        this.update(true);
         return this;
     }
     openVsfxFile(buffer) {
@@ -4230,7 +4287,6 @@ class Viewer extends EventEmitter2 {
             visViewer.parseVsfx(data);
             this.syncOptions();
             this.syncOverlay();
-            this.update(true);
             this.emitEvent({ type: "geometryprogress", data: 1, file: "", buffer });
             this.emitEvent({ type: "databasechunk", data, file: "", buffer });
         }
@@ -4239,6 +4295,7 @@ class Viewer extends EventEmitter2 {
             throw error;
         }
         this.emitEvent({ type: "geometryend", file: "", buffer });
+        this.update(true);
         return this;
     }
     cancel() {
@@ -4265,8 +4322,8 @@ class Viewer extends EventEmitter2 {
         visViewer.createLocalDatabase();
         this.syncOptions();
         this.syncOverlay();
-        this.update(true);
         this.emitEvent({ type: "clear" });
+        this.update(true);
         return this;
     }
     is3D() {
@@ -4559,7 +4616,7 @@ class Viewer extends EventEmitter2 {
         this.syncOverlay();
         this.setActiveDragger(draggerName);
         this.emitEvent({ type: "drawviewpoint", data: viewpoint });
-        this.update();
+        this.update(true);
     }
     createViewpoint() {
         if (!this.visualizeJs)
@@ -4706,7 +4763,7 @@ class Viewer extends EventEmitter2 {
                         (_a = this.visViewer()) === null || _a === void 0 ? void 0 : _a.update(maxScheduleUpdateTimeInMs);
                         (_c = (_b = this._activeDragger) === null || _b === void 0 ? void 0 : _b.updatePreview) === null || _c === void 0 ? void 0 : _c.call(_b);
                     }
-                    this.emitEvent({ type: "update", data: false });
+                    this.emitEvent({ type: "update", force: false });
                     resolve();
                 }
                 catch (e) {