@inweb/viewer-visualize 26.12.6 → 27.1.0

package/dist/viewer-visualize.module.js

@@ -2781,6 +2781,99 @@ 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) => {
@@ -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));
@@ -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) => {
@@ -3242,7 +3335,6 @@ class VSFCloudLoader extends Loader {
                 this.viewer.emitEvent({ type: "geometrychunk", data, file: model.file, model });
             }
         }
-        console.timeEnd("File load time");
         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)
@@ -3329,39 +3420,10 @@ class VSFXCloudLoader extends Loader {
         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();
@@ -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.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;
     }
 }
 
@@ -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,11 +3526,11 @@ class VSFXCloudPartialLoader extends Loader {
                 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 });
             }
         };
@@ -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);
@@ -3866,7 +3919,7 @@ class VisualizeMarkup {
         const visLib = this._viewer.visLib();
         const visViewer = this._viewer.visViewer();
         if (!viewpoint)
-            viewpoint = {};
+            viewpoint = { custom_fields: {} };
         viewpoint.lines = [];
         viewpoint.texts = [];
         const model = visViewer.getMarkupModel();
@@ -3908,12 +3961,8 @@ class VisualizeMarkup {
             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) {
@@ -3966,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;
@@ -4088,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;
@@ -4513,11 +4565,27 @@ class Viewer extends EventEmitter2 {
         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) {
@@ -4544,6 +4612,7 @@ class Viewer extends EventEmitter2 {
         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();
@@ -4557,17 +4626,37 @@ class Viewer extends EventEmitter2 {
             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 = [];
@@ -4673,7 +4762,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) {