@inweb/viewer-visualize 26.12.7 → 27.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/viewer-visualize.js +110 -54
- package/dist/viewer-visualize.js.map +1 -1
- package/dist/viewer-visualize.min.js +1 -1
- package/dist/viewer-visualize.module.js +110 -54
- package/dist/viewer-visualize.module.js.map +1 -1
- package/lib/Viewer/Components/InfoComponent.d.ts +22 -0
- package/lib/Viewer/Viewer.d.ts +1 -0
- package/package.json +5 -5
- package/src/Viewer/Components/InfoComponent.ts +139 -0
- package/src/Viewer/Components/index.ts +2 -0
- package/src/Viewer/Loaders/VSFCloudLoader.ts +0 -4
- package/src/Viewer/Loaders/VSFXCloudLoader.ts +0 -4
- package/src/Viewer/Loaders/VSFXCloudPartialLoader.ts +7 -12
- package/src/Viewer/Loaders/VSFXCloudStreamingLoader.ts +6 -15
- package/src/Viewer/Viewer.ts +9 -3
- package/lib/Viewer/Loaders/UpdateController.d.ts +0 -14
- package/src/Viewer/Loaders/UpdateController.ts +0 -60
|
@@ -2781,6 +2781,99 @@ class CameraComponent {
|
|
|
2781
2781
|
}
|
|
2782
2782
|
}
|
|
2783
2783
|
|
|
2784
|
+
class InfoComponent {
|
|
2785
|
+
constructor(viewer) {
|
|
2786
|
+
this.initialize = () => {
|
|
2787
|
+
this.resize();
|
|
2788
|
+
this.optionsChange({ data: this.viewer.options });
|
|
2789
|
+
};
|
|
2790
|
+
this.clear = () => {
|
|
2791
|
+
this.viewer.info.performance.timeToFirstRender = 0;
|
|
2792
|
+
this.viewer.info.performance.loadTime = 0;
|
|
2793
|
+
this.viewer.info.scene.objects = 0;
|
|
2794
|
+
this.viewer.info.scene.triangles = 0;
|
|
2795
|
+
this.viewer.info.scene.points = 0;
|
|
2796
|
+
this.viewer.info.scene.lines = 0;
|
|
2797
|
+
this.viewer.info.scene.edges = 0;
|
|
2798
|
+
this.viewer.info.optimizedScene.objects = 0;
|
|
2799
|
+
this.viewer.info.optimizedScene.triangles = 0;
|
|
2800
|
+
this.viewer.info.optimizedScene.points = 0;
|
|
2801
|
+
this.viewer.info.optimizedScene.lines = 0;
|
|
2802
|
+
this.viewer.info.optimizedScene.edges = 0;
|
|
2803
|
+
this.viewer.info.memory.geometries = 0;
|
|
2804
|
+
this.viewer.info.memory.geometryBytes = 0;
|
|
2805
|
+
this.viewer.info.memory.textures = 0;
|
|
2806
|
+
this.viewer.info.memory.textureBytes = 0;
|
|
2807
|
+
this.viewer.info.memory.materials = 0;
|
|
2808
|
+
this.viewer.info.memory.totalEstimatedGpuBytes = 0;
|
|
2809
|
+
this.viewer.info.memory.usedJSHeapSize = 0;
|
|
2810
|
+
};
|
|
2811
|
+
this.optionsChange = ({ data: options }) => {
|
|
2812
|
+
const antialiasing = options.antialiasing === true || options.antialiasing === "fxaa";
|
|
2813
|
+
if (antialiasing)
|
|
2814
|
+
this.viewer.info.render.antialiasing = "fxaa";
|
|
2815
|
+
else
|
|
2816
|
+
this.viewer.info.render.antialiasing = "";
|
|
2817
|
+
};
|
|
2818
|
+
this.geometryStart = () => {
|
|
2819
|
+
this.startTime = performance.now();
|
|
2820
|
+
};
|
|
2821
|
+
this.databaseChunk = () => {
|
|
2822
|
+
this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
|
|
2823
|
+
console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
|
|
2824
|
+
};
|
|
2825
|
+
this.geometryEnd = () => {
|
|
2826
|
+
const memory = performance["memory"];
|
|
2827
|
+
if (memory)
|
|
2828
|
+
this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;
|
|
2829
|
+
this.viewer.info.performance.loadTime += performance.now() - this.startTime;
|
|
2830
|
+
console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
|
|
2831
|
+
};
|
|
2832
|
+
this.resize = () => {
|
|
2833
|
+
const { width, height } = this.viewer.canvas;
|
|
2834
|
+
this.viewer.info.render.viewport.width = width;
|
|
2835
|
+
this.viewer.info.render.viewport.height = height;
|
|
2836
|
+
};
|
|
2837
|
+
this.render = () => { };
|
|
2838
|
+
this.animate = () => {
|
|
2839
|
+
const time = performance.now();
|
|
2840
|
+
this.viewer.info.performance.frameTime = Math.round(time - this.beginTime);
|
|
2841
|
+
this.beginTime = time;
|
|
2842
|
+
this.frames++;
|
|
2843
|
+
if (time - this.prevTime >= 1000) {
|
|
2844
|
+
this.viewer.info.performance.fps = Math.round((this.frames * 1000) / (time - this.prevTime));
|
|
2845
|
+
this.prevTime = time;
|
|
2846
|
+
this.frames = 0;
|
|
2847
|
+
}
|
|
2848
|
+
};
|
|
2849
|
+
this.viewer = viewer;
|
|
2850
|
+
this.startTime = 0;
|
|
2851
|
+
this.beginTime = performance.now();
|
|
2852
|
+
this.prevTime = performance.now();
|
|
2853
|
+
this.frames = 0;
|
|
2854
|
+
this.viewer.addEventListener("initialize", this.initialize);
|
|
2855
|
+
this.viewer.addEventListener("clear", this.clear);
|
|
2856
|
+
this.viewer.addEventListener("optionschange", this.optionsChange);
|
|
2857
|
+
this.viewer.addEventListener("geometrystart", this.geometryStart);
|
|
2858
|
+
this.viewer.addEventListener("databasechunk", this.databaseChunk);
|
|
2859
|
+
this.viewer.addEventListener("geometryend", this.geometryEnd);
|
|
2860
|
+
this.viewer.addEventListener("resize", this.resize);
|
|
2861
|
+
this.viewer.addEventListener("render", this.render);
|
|
2862
|
+
this.viewer.addEventListener("animate", this.animate);
|
|
2863
|
+
}
|
|
2864
|
+
dispose() {
|
|
2865
|
+
this.viewer.removeEventListener("initialize", this.initialize);
|
|
2866
|
+
this.viewer.removeEventListener("clear", this.clear);
|
|
2867
|
+
this.viewer.removeEventListener("optionschange", this.optionsChange);
|
|
2868
|
+
this.viewer.removeEventListener("geometrystart", this.geometryStart);
|
|
2869
|
+
this.viewer.removeEventListener("databasechunk", this.databaseChunk);
|
|
2870
|
+
this.viewer.removeEventListener("geometryend", this.geometryEnd);
|
|
2871
|
+
this.viewer.removeEventListener("resize", this.resize);
|
|
2872
|
+
this.viewer.removeEventListener("render", this.render);
|
|
2873
|
+
this.viewer.addEventListener("animate", this.animate);
|
|
2874
|
+
}
|
|
2875
|
+
}
|
|
2876
|
+
|
|
2784
2877
|
class RenderLoopComponent {
|
|
2785
2878
|
constructor(viewer) {
|
|
2786
2879
|
this.animate = (time = 0) => {
|
|
@@ -3066,6 +3159,7 @@ class ResetComponent {
|
|
|
3066
3159
|
|
|
3067
3160
|
const components = componentsRegistry("visualizejs");
|
|
3068
3161
|
components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
|
|
3162
|
+
components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
|
|
3069
3163
|
components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
|
|
3070
3164
|
components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
|
|
3071
3165
|
components.registerComponent("ZoomWheelComponent", (viewer) => new ZoomWheelComponent(viewer));
|
|
@@ -3210,7 +3304,6 @@ class VSFCloudLoader extends Loader {
|
|
|
3210
3304
|
return this;
|
|
3211
3305
|
const visViewer = this.viewer.visViewer();
|
|
3212
3306
|
const filesToDownload = [model.database, ...model.geometry];
|
|
3213
|
-
console.time("File load time");
|
|
3214
3307
|
for (let i = 0; i < filesToDownload.length; i++) {
|
|
3215
3308
|
const dataId = filesToDownload[i];
|
|
3216
3309
|
const progress = (progress) => {
|
|
@@ -3242,7 +3335,6 @@ class VSFCloudLoader extends Loader {
|
|
|
3242
3335
|
this.viewer.emitEvent({ type: "geometrychunk", data, file: model.file, model });
|
|
3243
3336
|
}
|
|
3244
3337
|
}
|
|
3245
|
-
console.timeEnd("File load time");
|
|
3246
3338
|
return this;
|
|
3247
3339
|
}
|
|
3248
3340
|
}
|
|
@@ -3310,7 +3402,6 @@ class VSFXCloudLoader extends Loader {
|
|
|
3310
3402
|
const progress = (progress) => {
|
|
3311
3403
|
this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
|
|
3312
3404
|
};
|
|
3313
|
-
console.time("File load time");
|
|
3314
3405
|
const arrayBuffer = await model.downloadResource(model.database, progress, this.abortController.signal);
|
|
3315
3406
|
const data = new Uint8Array(arrayBuffer);
|
|
3316
3407
|
if (!this.viewer.visualizeJs)
|
|
@@ -3329,39 +3420,10 @@ class VSFXCloudLoader extends Loader {
|
|
|
3329
3420
|
this.viewer.syncOverlay();
|
|
3330
3421
|
this.viewer.update(true);
|
|
3331
3422
|
this.viewer.emitEvent({ type: "databasechunk", data, file: model.file, model });
|
|
3332
|
-
console.timeEnd("File load time");
|
|
3333
3423
|
return this;
|
|
3334
3424
|
}
|
|
3335
3425
|
}
|
|
3336
3426
|
|
|
3337
|
-
const DELAY_TIME_MULTIPLEXER = 2.0;
|
|
3338
|
-
const START_UPDATE_TIME = 1000;
|
|
3339
|
-
var UpdateType;
|
|
3340
|
-
(function (UpdateType) {
|
|
3341
|
-
UpdateType[UpdateType["kDelay"] = 0] = "kDelay";
|
|
3342
|
-
UpdateType[UpdateType["kNormal"] = 1] = "kNormal";
|
|
3343
|
-
UpdateType[UpdateType["kForce"] = 2] = "kForce";
|
|
3344
|
-
})(UpdateType || (UpdateType = {}));
|
|
3345
|
-
class UpdateController {
|
|
3346
|
-
constructor() {
|
|
3347
|
-
this.lastUpdate = 0;
|
|
3348
|
-
this.delayUpdateTime = START_UPDATE_TIME;
|
|
3349
|
-
}
|
|
3350
|
-
initialize(viewer) {
|
|
3351
|
-
this.viewer = viewer;
|
|
3352
|
-
this.lastUpdate = performance.now();
|
|
3353
|
-
}
|
|
3354
|
-
update(type) {
|
|
3355
|
-
const isNeedUpdate = type !== UpdateType.kDelay || performance.now() - this.lastUpdate >= this.delayUpdateTime;
|
|
3356
|
-
const isForce = type === UpdateType.kForce;
|
|
3357
|
-
if (isNeedUpdate) {
|
|
3358
|
-
this.viewer.update(isForce);
|
|
3359
|
-
this.lastUpdate = performance.now();
|
|
3360
|
-
this.delayUpdateTime *= DELAY_TIME_MULTIPLEXER;
|
|
3361
|
-
}
|
|
3362
|
-
}
|
|
3363
|
-
}
|
|
3364
|
-
|
|
3365
3427
|
class VSFXCloudStreamingLoader extends Loader {
|
|
3366
3428
|
constructor(viewer) {
|
|
3367
3429
|
super();
|
|
@@ -3381,9 +3443,7 @@ class VSFXCloudStreamingLoader extends Loader {
|
|
|
3381
3443
|
return this;
|
|
3382
3444
|
const visLib = this.viewer.visLib();
|
|
3383
3445
|
const visViewer = this.viewer.visViewer();
|
|
3384
|
-
|
|
3385
|
-
updateController.initialize(this.viewer);
|
|
3386
|
-
let isFireDatabaseChunk = false;
|
|
3446
|
+
let isServiceDataReady = false;
|
|
3387
3447
|
const chunkLoadHandler = (progress, chunk) => {
|
|
3388
3448
|
if (!this.viewer.visualizeJs)
|
|
3389
3449
|
return;
|
|
@@ -3398,8 +3458,8 @@ class VSFXCloudStreamingLoader extends Loader {
|
|
|
3398
3458
|
this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
|
|
3399
3459
|
let isDatabaseChunk = false;
|
|
3400
3460
|
if (status === visLib.DatabaseStreamStatus.ReadyServiceData ||
|
|
3401
|
-
(status === visLib.DatabaseStreamStatus.Complete && !
|
|
3402
|
-
|
|
3461
|
+
(status === visLib.DatabaseStreamStatus.Complete && !isServiceDataReady)) {
|
|
3462
|
+
isServiceDataReady = true;
|
|
3403
3463
|
isDatabaseChunk = true;
|
|
3404
3464
|
}
|
|
3405
3465
|
if (isDatabaseChunk) {
|
|
@@ -3408,19 +3468,16 @@ class VSFXCloudStreamingLoader extends Loader {
|
|
|
3408
3468
|
this.viewer.models.push(modelImpl);
|
|
3409
3469
|
this.viewer.syncOptions();
|
|
3410
3470
|
this.viewer.syncOverlay();
|
|
3411
|
-
|
|
3471
|
+
this.viewer.update(true);
|
|
3412
3472
|
this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
|
|
3413
3473
|
}
|
|
3414
3474
|
else {
|
|
3415
|
-
|
|
3475
|
+
this.viewer.update();
|
|
3416
3476
|
this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
|
|
3417
3477
|
}
|
|
3418
3478
|
};
|
|
3419
|
-
console.time("File load time");
|
|
3420
3479
|
await model.downloadResource(model.database, chunkLoadHandler, this.abortController.signal);
|
|
3421
|
-
|
|
3422
|
-
console.timeEnd("File load time");
|
|
3423
|
-
return Promise.resolve(this);
|
|
3480
|
+
return this;
|
|
3424
3481
|
}
|
|
3425
3482
|
}
|
|
3426
3483
|
|
|
@@ -3444,15 +3501,13 @@ class VSFXCloudPartialLoader extends Loader {
|
|
|
3444
3501
|
if (!this.viewer.visualizeJs)
|
|
3445
3502
|
return this;
|
|
3446
3503
|
const visViewer = this.viewer.visViewer();
|
|
3504
|
+
visViewer.memoryLimit = this.viewer.options.memoryLimit;
|
|
3447
3505
|
let servicePartAborted = false;
|
|
3448
3506
|
const pendingRequestsMap = new Map();
|
|
3449
3507
|
let pendingRequestsTimerId = 0;
|
|
3450
3508
|
const pendingRequestsAbortHandler = () => clearTimeout(pendingRequestsTimerId);
|
|
3451
3509
|
const pendingRequestsAbortController = new AbortController();
|
|
3452
3510
|
this.abortControllerForRequestMap.set(0, pendingRequestsAbortController);
|
|
3453
|
-
const updateController = new UpdateController();
|
|
3454
|
-
updateController.initialize(this.viewer);
|
|
3455
|
-
visViewer.memoryLimit = this.viewer.options.memoryLimit;
|
|
3456
3511
|
const chunkLoadHandler = (progress, chunk, requestId = 0) => {
|
|
3457
3512
|
if (!this.viewer.visualizeJs)
|
|
3458
3513
|
return;
|
|
@@ -3471,11 +3526,11 @@ class VSFXCloudPartialLoader extends Loader {
|
|
|
3471
3526
|
this.viewer.models.push(modelImpl);
|
|
3472
3527
|
this.viewer.syncOptions();
|
|
3473
3528
|
this.viewer.syncOverlay();
|
|
3474
|
-
|
|
3529
|
+
this.viewer.update(true);
|
|
3475
3530
|
this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
|
|
3476
3531
|
}
|
|
3477
3532
|
else {
|
|
3478
|
-
|
|
3533
|
+
this.viewer.update();
|
|
3479
3534
|
this.viewer.emitEvent({ type: "geometrychunk", data: chunk, file: model.file, model });
|
|
3480
3535
|
}
|
|
3481
3536
|
};
|
|
@@ -3491,7 +3546,6 @@ class VSFXCloudPartialLoader extends Loader {
|
|
|
3491
3546
|
finally {
|
|
3492
3547
|
ranges.forEach((range) => visViewer.onRequestResponseComplete(range.requestId));
|
|
3493
3548
|
this.abortControllerForRequestMap.delete(requestId);
|
|
3494
|
-
updateController.update(UpdateType.kNormal);
|
|
3495
3549
|
}
|
|
3496
3550
|
};
|
|
3497
3551
|
const requestRecordsToRanges = (requestId, records) => {
|
|
@@ -3519,11 +3573,10 @@ class VSFXCloudPartialLoader extends Loader {
|
|
|
3519
3573
|
downloadResourceRange(model.database, requestId, ranges);
|
|
3520
3574
|
},
|
|
3521
3575
|
onFullLoaded: () => {
|
|
3522
|
-
|
|
3576
|
+
this.viewer.update(true);
|
|
3523
3577
|
},
|
|
3524
3578
|
onRequestResponseParsed: (requestId) => {
|
|
3525
3579
|
this.abortControllerForRequestMap.delete(requestId);
|
|
3526
|
-
updateController.update(UpdateType.kNormal);
|
|
3527
3580
|
},
|
|
3528
3581
|
onRequestAborted: (requestId) => {
|
|
3529
3582
|
const abortCtrl = this.abortControllerForRequestMap.get(requestId);
|
|
@@ -3962,6 +4015,7 @@ class Viewer extends EventEmitter2 {
|
|
|
3962
4015
|
this.canvaseventlistener = (event) => this.emit(event);
|
|
3963
4016
|
this._activeDragger = null;
|
|
3964
4017
|
this._components = [];
|
|
4018
|
+
this._updateDelay = 1000;
|
|
3965
4019
|
this._renderNeeded = false;
|
|
3966
4020
|
this._renderTime = 0;
|
|
3967
4021
|
this._enableAutoUpdate = (_a = params.enableAutoUpdate) !== null && _a !== void 0 ? _a : true;
|
|
@@ -4084,12 +4138,14 @@ class Viewer extends EventEmitter2 {
|
|
|
4084
4138
|
return this;
|
|
4085
4139
|
}
|
|
4086
4140
|
update(force = false) {
|
|
4141
|
+
const time = performance.now();
|
|
4142
|
+
force = force || time - this._renderTime >= this._updateDelay;
|
|
4087
4143
|
if (this._enableAutoUpdate) {
|
|
4088
4144
|
this._renderNeeded = true;
|
|
4089
4145
|
if (force)
|
|
4090
|
-
this.render();
|
|
4146
|
+
this.render(time);
|
|
4091
4147
|
}
|
|
4092
|
-
this.emitEvent({ type: "update",
|
|
4148
|
+
this.emitEvent({ type: "update", force });
|
|
4093
4149
|
}
|
|
4094
4150
|
render(time) {
|
|
4095
4151
|
var _a, _b;
|
|
@@ -4706,7 +4762,7 @@ class Viewer extends EventEmitter2 {
|
|
|
4706
4762
|
(_a = this.visViewer()) === null || _a === void 0 ? void 0 : _a.update(maxScheduleUpdateTimeInMs);
|
|
4707
4763
|
(_c = (_b = this._activeDragger) === null || _b === void 0 ? void 0 : _b.updatePreview) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
4708
4764
|
}
|
|
4709
|
-
this.emitEvent({ type: "update",
|
|
4765
|
+
this.emitEvent({ type: "update", force: false });
|
|
4710
4766
|
resolve();
|
|
4711
4767
|
}
|
|
4712
4768
|
catch (e) {
|