perf(cesium): Reduce usage of some unnecessary sync callbacks

hslayers · Apr 15, 2024 · c2490b0 · c2490b0
1 parent e160ef1
commit c2490b0
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 46 deletions.
diff --git a/projects/hslayers-cesium/src/hscesium-layers.service.ts b/projects/hslayers-cesium/src/hscesium-layers.service.ts
@@ -136,11 +136,6 @@ export class HsCesiumLayersService {
     };
   }
 
-  /**
-   * @param version -
-   * @param srs -
-   * @param crs -
-   */
   getProjectFromVersion(version, srs, crs) {
     if (version == '1.1.1') {
       return srs;

diff --git a/projects/hslayers-cesium/src/hscesium.component.ts b/projects/hslayers-cesium/src/hscesium.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component} from '@angular/core';
+import {AfterViewInit, Component, DestroyRef} from '@angular/core';
 
 import {HS_PRMS, HsShareUrlService} from 'hslayers-ng/components/share';
 import {HsCoreService} from 'hslayers-ng/services/core';
@@ -10,15 +10,25 @@ import {HsToolbarPanelContainerService} from 'hslayers-ng/services/panels';
 
 import {HsCesiumService} from './hscesium.service';
 import {HsToggleViewComponent} from './toggle-view/toggle-view.component';
+import {filter} from 'rxjs';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'hs-cesium',
   templateUrl: './hscesium.component.html',
   styles: `
-  .hs-cesium-container {
-    height: 100%; margin: 0; padding: 0; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%;  
-    margin-right: 0;
-  }`,
+    .hs-cesium-container {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      margin-right: 0;
+    }
+  `,
 })
 export class HslayersCesiumComponent implements AfterViewInit {
   app = 'default';
@@ -31,6 +41,7 @@ export class HslayersCesiumComponent implements AfterViewInit {
     private hsToolbarPanelContainerService: HsToolbarPanelContainerService,
     public HsEventBusService: HsEventBusService,
     public HsLayoutService: HsLayoutService,
+    private DestroyRef: DestroyRef,
   ) {}
 
   ngAfterViewInit(): void {
@@ -54,9 +65,14 @@ export class HslayersCesiumComponent implements AfterViewInit {
       this.HsCesiumService.dimensionChanged(data.layer, data.dimension),
     );
 
-    this.HsEventBusService.sizeChanges.subscribe((size) =>
-      this.HsCesiumService.resize(size),
-    );
-    this.HsCesiumService.resize();
+    this.HsEventBusService.sizeChanges
+      .pipe(
+        takeUntilDestroyed(this.DestroyRef),
+        /**
+         * Resize immidiatelly only in case cesium is visible
+         */
+        filter((size) => this.HsCesiumService.visible),
+      )
+      .subscribe((size) => this.HsCesiumService.resize(size));
   }
 }
diff --git a/projects/hslayers-cesium/src/hscesium.service.ts b/projects/hslayers-cesium/src/hscesium.service.ts
@@ -106,29 +106,15 @@ export class HsCesiumService {
         this.hsLog.error('Please set HsConfig.default_view');
       }
 
-      //TODO: research if this must be used or ignored
-      const bing = BingMapsImageryProvider.fromUrl('//dev.virtualearth.net', {
-        key: this.BING_KEY,
-        mapStyle: BingMapsStyle.AERIAL,
-      });
-
       const viewer = new Viewer(
         this.HsLayoutService.contentWrapper.querySelector(
           '.hs-cesium-container',
         ),
         {
-          timeline: this.HsCesiumConfig.cesiumTimeline
-            ? this.HsCesiumConfig.cesiumTimeline
-            : false,
-          animation: this.HsCesiumConfig.cesiumAnimation
-            ? this.HsCesiumConfig.cesiumAnimation
-            : false,
-          creditContainer: this.HsCesiumConfig.creditContainer
-            ? this.HsCesiumConfig.creditContainer
-            : undefined,
-          infoBox: this.HsCesiumConfig.cesiumInfoBox
-            ? this.HsCesiumConfig.cesiumInfoBox
-            : false,
+          timeline: this.HsCesiumConfig.cesiumTimeline ?? false,
+          animation: this.HsCesiumConfig.cesiumAnimation ?? false,
+          creditContainer: this.HsCesiumConfig.creditContainer ?? undefined,
+          infoBox: this.HsCesiumConfig.cesiumInfoBox ?? false,
           terrainProvider: terrainProvider,
           baseLayer: this.HsCesiumConfig.imageryProvider
             ? new ImageryLayer(this.HsCesiumConfig.imageryProvider, {})
@@ -153,10 +139,8 @@ export class HsCesiumService {
         },
       );
 
-      viewer.scene.debugShowFramesPerSecond = this.HsCesiumConfig
-        .cesiumDebugShowFramesPerSecond
-        ? this.HsCesiumConfig.cesiumDebugShowFramesPerSecond
-        : false;
+      viewer.scene.debugShowFramesPerSecond =
+        this.HsCesiumConfig.cesiumDebugShowFramesPerSecond ?? false;
       viewer.scene.globe.enableLighting = this.getShadowMode();
       viewer.scene.globe.shadows = this.getShadowMode();
       viewer.scene.globe.terrainExaggeration =
@@ -207,15 +191,9 @@ export class HsCesiumService {
         }
       }
 
-      this.HsEventBusService.mapExtentChanges
-        .pipe(takeUntil(this.end))
-        .subscribe(() => {
-          const view = this.HsMapService.getMap().getView();
-          if (this.HsMapService.visible) {
-            this.HsCesiumCameraService.setExtentEqualToOlExtent(view);
-          }
-        });
-
+      /**
+       * UNUSED:No trigger found in HSL or HSL-Cesium
+       */
       this.HsEventBusService.zoomTo
         .pipe(takeUntil(this.end))
         .subscribe((data) => {
@@ -302,7 +280,11 @@ export class HsCesiumService {
     this.HsCesiumLayersService.removeLayersWithOldParams();
   }
 
-  resize(size?) {
+  /**
+   * Resize cesium container
+   * @param size Size of OL map container
+   */
+  resize(size: {height: number; width: number}) {
     if (size == undefined) {
       return;
     }
@@ -351,7 +333,15 @@ export class HsCesiumService {
       this.cesiumDisabled();
       this.hsCoreService.updateMapSize();
     } else {
+      const view = this.HsMapService.getMap().getView();
+      if (this.HsMapService.visible) {
+        this.HsCesiumCameraService.setExtentEqualToOlExtent(view);
+      }
       this.init();
+      this.resize({
+        width: this.HsMapService.mapElement.offsetWidth,
+        height: this.HsMapService.mapElement.offsetHeight,
+      });
     }
     this.HsEventBusService.mapLibraryChanges.next(
       this.visible ? 'cesium' : 'ol',