@inweb/viewer-visualize 26.12.6 → 27.1.0

package/dist/viewer-visualize.js

@@ -3336,6 +3336,99 @@
         }
     }
 
+    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) => {
@@ -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));
@@ -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) => {
@@ -3797,7 +3890,6 @@
                     this.viewer.emitEvent({ type: "geometrychunk", data, file: model.file, model });
                 }
             }
-            console.timeEnd("File load time");
             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)
@@ -3884,39 +3975,10 @@
             this.viewer.syncOverlay();
             this.viewer.update(true);
             this.viewer.emitEvent({ type: "databasechunk", data, file: model.file, model });
-            console.timeEnd("File load time");
             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.update(true);
                     this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
                 }
                 else {
-                    updateController.update(UpdateType.kDelay);
+                    this.viewer.update();
                     this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
                 }
             };
-            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,11 +4081,11 @@
                     this.viewer.models.push(modelImpl);
                     this.viewer.syncOptions();
                     this.viewer.syncOverlay();
-                    updateController.update(UpdateType.kForce);
+                    this.viewer.update(true);
                     this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
                 }
                 else {
-                    updateController.update(UpdateType.kDelay);
+                    this.viewer.update();
                     this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
                 }
             };
@@ -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);
@@ -17062,7 +17115,7 @@ js: import "konva/skia-backend";
         }
         getViewpoint(viewpoint) {
             if (!viewpoint)
-                viewpoint = {};
+                viewpoint = { custom_fields: {} };
             viewpoint.lines = this.getMarkupLines();
             viewpoint.texts = this.getMarkupTexts();
             viewpoint.arrows = this.getMarkupArrows();
@@ -17070,8 +17123,8 @@ js: import "konva/skia-backend";
             viewpoint.ellipses = this.getMarkupEllipses();
             viewpoint.images = this.getMarkupImages();
             viewpoint.rectangles = this.getMarkupRectangles();
-            viewpoint.custom_fields = { markup_color: this.getMarkupColor() };
             viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
+            viewpoint.custom_fields.markup_color = this.getMarkupColor();
             return viewpoint;
         }
         enableEditMode(mode) {
@@ -17953,7 +18006,7 @@ js: import "konva/skia-backend";
             const visLib = this._viewer.visLib();
             const visViewer = this._viewer.visViewer();
             if (!viewpoint)
-                viewpoint = {};
+                viewpoint = { custom_fields: {} };
             viewpoint.lines = [];
             viewpoint.texts = [];
             const model = visViewer.getMarkupModel();
@@ -17995,12 +18048,8 @@ js: import "konva/skia-backend";
                 entityPtr.delete();
             }
             itr.delete();
-            viewpoint.snapshot = {
-                data: visLib.canvas.toDataURL("image/jpeg", 0.25),
-            };
-            viewpoint.custom_fields = {
-                markup_color: this.getMarkupColor(),
-            };
+            viewpoint.snapshot = { data: visLib.canvas.toDataURL("image/jpeg", 0.25) };
+            viewpoint.custom_fields.markup_color = this.getMarkupColor();
             return viewpoint;
         }
         enableEditMode(mode) {
@@ -18053,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;
@@ -18175,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;
@@ -18600,11 +18652,27 @@ js: import "konva/skia-backend";
             const setOrthogonalCamera = (orthogonal_camera) => {
                 if (orthogonal_camera) {
                     activeView.setView(getPoint3dAsArray(orthogonal_camera.view_point), getPoint3dAsArray(orthogonal_camera.direction), getPoint3dAsArray(orthogonal_camera.up_vector), orthogonal_camera.field_width, orthogonal_camera.field_height, true);
-                    this.syncOverlay();
+                    this.options.cameraMode = "orthographic";
                     this.emitEvent({ type: "changecameramode", mode: "orthographic" });
                 }
             };
-            const setPerspectiveCamera = (perspective_camera) => { };
+            const setPerspectiveCamera = (perspective_camera) => {
+                if (perspective_camera) {
+                    const aspectRatio = this.canvas.width / this.canvas.height;
+                    const position = perspective_camera.view_point;
+                    const target = perspective_camera.direction;
+                    const fov = (perspective_camera.field_of_view * Math.PI) / 180;
+                    const dx = target.x - position.x;
+                    const dy = target.y - position.y;
+                    const dz = target.z - position.z;
+                    const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                    const fieldHeight = 2 * distance * Math.tan(fov / 2);
+                    const fieldWidth = fieldHeight * aspectRatio;
+                    activeView.setView(getPoint3dAsArray(perspective_camera.view_point), getPoint3dAsArray(perspective_camera.direction), getPoint3dAsArray(perspective_camera.up_vector), fieldWidth, fieldHeight, false);
+                    this.options.cameraMode = "perspective";
+                    this.emitEvent({ type: "changecameramode", mode: "perspective" });
+                }
+            };
             const setClippingPlanes = (clipping_planes) => {
                 if (clipping_planes) {
                     for (const clipping_plane of clipping_planes) {
@@ -18631,6 +18699,7 @@ js: import "konva/skia-backend";
             setClippingPlanes(viewpoint.clipping_planes);
             setSelection(((_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.selection2) || viewpoint.selection);
             this._markup.setViewpoint(viewpoint);
+            this.syncOverlay();
             this.setActiveDragger(draggerName);
             this.emitEvent({ type: "drawviewpoint", data: viewpoint });
             this.update();
@@ -18644,17 +18713,37 @@ js: import "konva/skia-backend";
                 return { x: array[0], y: array[1], z: array[2] };
             };
             const getOrthogonalCamera = () => {
-                return {
-                    view_point: getPoint3dFromArray(activeView.viewPosition),
-                    direction: getPoint3dFromArray(activeView.viewTarget),
-                    up_vector: getPoint3dFromArray(activeView.upVector),
-                    field_width: activeView.viewFieldWidth,
-                    field_height: activeView.viewFieldHeight,
-                    view_to_world_scale: 1,
-                };
+                if (!activeView.perspective)
+                    return {
+                        view_point: getPoint3dFromArray(activeView.viewPosition),
+                        direction: getPoint3dFromArray(activeView.viewTarget),
+                        up_vector: getPoint3dFromArray(activeView.upVector),
+                        field_width: activeView.viewFieldWidth,
+                        field_height: activeView.viewFieldHeight,
+                        view_to_world_scale: 1,
+                    };
+                else
+                    return undefined;
             };
             const getPerspectiveCamera = () => {
-                return undefined;
+                if (activeView.perspective) {
+                    const position = activeView.viewPosition;
+                    const target = activeView.viewTarget;
+                    const fieldHeight = activeView.viewFieldHeight;
+                    const dx = target[0] - position[0];
+                    const dy = target[1] - position[1];
+                    const dz = target[2] - position[2];
+                    const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                    const fov = 2 * Math.atan(fieldHeight / (2 * distance));
+                    return {
+                        view_point: getPoint3dFromArray(activeView.viewPosition),
+                        direction: getPoint3dFromArray(activeView.viewTarget),
+                        up_vector: getPoint3dFromArray(activeView.upVector),
+                        field_of_view: (fov * 180) / Math.PI,
+                    };
+                }
+                else
+                    return undefined;
             };
             const getClippingPlanes = () => {
                 const clipping_planes = [];
@@ -18760,7 +18849,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) {