@inweb/viewer-visualize 26.12.7 → 27.1.1

package/dist/viewer-visualize.js

@@ -3336,15 +3336,108 @@
         }
     }
 
+    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);
@@ -3621,6 +3714,7 @@
 
     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));
@@ -3743,8 +3837,8 @@
             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;
         }
     }
@@ -3765,7 +3859,6 @@
                 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) => {
@@ -3789,15 +3882,14 @@
                     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;
         }
     }
@@ -3840,8 +3932,8 @@
             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;
         }
     }
@@ -3865,7 +3957,6 @@
             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)
@@ -3882,41 +3973,12 @@
             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();
@@ -3936,9 +3998,7 @@
                 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;
@@ -3953,8 +4013,8 @@
                 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) {
@@ -3963,19 +4023,16 @@
                     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;
         }
     }
 
@@ -3999,15 +4056,13 @@
             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;
@@ -4026,12 +4081,12 @@
                     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) => {
@@ -4046,7 +4101,6 @@
                 finally {
                     ranges.forEach((range) => visViewer.onRequestResponseComplete(range.requestId));
                     this.abortControllerForRequestMap.delete(requestId);
-                    updateController.update(UpdateType.kNormal);
                 }
             };
             const requestRecordsToRanges = (requestId, records) => {
@@ -4074,11 +4128,10 @@
                     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);
@@ -18049,6 +18102,7 @@ js: import "konva/skia-backend";
             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;
@@ -18118,8 +18172,8 @@ js: import "konva/skia-backend";
             this.syncOptions();
             this.syncOverlay();
             this._renderTime = performance.now();
-            this.render(this._renderTime);
             this.emitEvent({ type: "initialize" });
+            this.update(true);
             return this;
         }
         dispose() {
@@ -18155,8 +18209,8 @@ js: import "konva/skia-backend";
                 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.");
@@ -18171,12 +18225,14 @@ js: import "konva/skia-backend";
             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;
@@ -18221,6 +18277,8 @@ js: import "konva/skia-backend";
             return this;
         }
         applyModelTransformMatrix(model) {
+            if (!this.visualizeJs)
+                return;
             this.executeCommand("applyModelTransform", model);
         }
         applySceneGraphSettings(options = this.options) {
@@ -18266,16 +18324,15 @@ js: import "konva/skia-backend";
             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) {
@@ -18292,7 +18349,6 @@ js: import "konva/skia-backend";
                 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 });
             }
@@ -18301,6 +18357,7 @@ js: import "konva/skia-backend";
                 throw error;
             }
             this.emitEvent({ type: "geometryend", file: "", buffer });
+            this.update(true);
             return this;
         }
         openVsfxFile(buffer) {
@@ -18317,7 +18374,6 @@ js: import "konva/skia-backend";
                 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 });
             }
@@ -18326,6 +18382,7 @@ js: import "konva/skia-backend";
                 throw error;
             }
             this.emitEvent({ type: "geometryend", file: "", buffer });
+            this.update(true);
             return this;
         }
         cancel() {
@@ -18352,8 +18409,8 @@ js: import "konva/skia-backend";
             visViewer.createLocalDatabase();
             this.syncOptions();
             this.syncOverlay();
-            this.update(true);
             this.emitEvent({ type: "clear" });
+            this.update(true);
             return this;
         }
         is3D() {
@@ -18646,7 +18703,7 @@ js: import "konva/skia-backend";
             this.syncOverlay();
             this.setActiveDragger(draggerName);
             this.emitEvent({ type: "drawviewpoint", data: viewpoint });
-            this.update();
+            this.update(true);
         }
         createViewpoint() {
             if (!this.visualizeJs)
@@ -18793,7 +18850,7 @@ js: import "konva/skia-backend";
                             (_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) {