fix: Async loading of compositions

projects/hslayers/src/components/add-data/vector/add-data-vector.service.ts

@@ -1,6 +1,8 @@
-import '../../styles/styles.module';
 import BaseLayer from 'ol/layer/Base';
 import {GeoJSON} from 'ol/format';
+import {Vector as VectorSource} from 'ol/source';
+
+import '../../styles/styles.module';
 import {HsAddDataService} from '../add-data.service';
 import {HsMapService} from '../../map/map.service';
 import {HsStylerService} from '../../styles/styler.service';
@@ -165,7 +167,10 @@ export class HsAddDataVectorService {
       mapProjection
     );
 
-    const src = new sourceDescriptor.sourceClass(sourceDescriptor);
+    const src =
+      sourceDescriptor.sourceClass == VectorSource
+        ? new sourceDescriptor.sourceClass(sourceDescriptor.sourceParams)
+        : new sourceDescriptor.sourceClass(sourceDescriptor);
     descriptor.layerParams.source = src;
     if (descriptor.layerParams.style) {
       Object.assign(

projects/hslayers/src/components/compositions/compositions-parser.service.ts

@@ -2,6 +2,7 @@ import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 
 import * as xml2Json from 'xml-js';
+import BaseLayer from 'ol/layer/Base';
 import {transform, transformExtent} from 'ol/proj';
 
 import {DuplicateHandling, HsMapService} from '../map/map.service';
@@ -105,7 +106,13 @@ export class HsCompositionsParserService {
     this.loaded(data, pre_parse, url, overwrite, callback);
   }
 
-  loaded(response, pre_parse, url, overwrite: boolean, callback): void {
+  async loaded(
+    response,
+    pre_parse,
+    url,
+    overwrite: boolean,
+    callback
+  ): Promise<void> {
     this.HsEventBusService.compositionLoading.next(response);
     if (this.checkLoadSuccess(response)) {
       this.composition_loaded = url;
@@ -119,7 +126,7 @@ export class HsCompositionsParserService {
       that means composition is enclosed in
       container which itself might contain title or extent
       properties */
-      this.loadCompositionObject(
+      await this.loadCompositionObject(
         response.data || response,
         overwrite,
         response.title,
@@ -206,12 +213,12 @@ export class HsCompositionsParserService {
       response.includes('LayerList') /*.wmc micka*/
     );
   }
-  loadCompositionObject(
+  async loadCompositionObject(
     obj,
     overwrite: boolean,
     titleFromContainer?: boolean,
     extentFromContainer?: string | Array<number>
-  ): void {
+  ): Promise<void> {
     if (overwrite == undefined || overwrite == true) {
       this.removeCompositionLayers();
     }
@@ -231,7 +238,8 @@ export class HsCompositionsParserService {
           .fit(this.transformExtent(extent), this.HsMapService.map.getSize());
       }
     }
-    const layers = this.jsonToLayers(obj);
+
+    const layers = await this.jsonToLayers(obj);
     layers.forEach((lyr) => {
       this.HsMapService.addLayer(lyr, DuplicateHandling.RemoveOriginal);
     });
@@ -403,13 +411,13 @@ export class HsCompositionsParserService {
    * @returns {Array} Array of created layers
    * @description Parse composition object to extract individual layers and add them to map
    */
-  jsonToLayers(j) {
+  async jsonToLayers(j): Promise<BaseLayer[]> {
     const layers = [];
     if (j.data) {
       j = j.data;
     }
     for (const lyr_def of j.layers) {
-      const layer = this.jsonToLayer(lyr_def);
+      const layer = await this.jsonToLayer(lyr_def);
       if (layer == undefined) {
         if (lyr_def.protocol.format != 'hs.format.externalWFS'){
           this.$log.warn(

projects/hslayers/src/components/compositions/compositions.component.ts

@@ -108,9 +108,12 @@ export class HsCompositionsComponent implements OnDestroy {
         continue;
       }
       const reader = new FileReader();
-      reader.onload = (theFile) => {
+      reader.onload = async (theFile) => {
         const json = JSON.parse(<string>reader.result);
-        this.hsCompositionsParserService.loadCompositionObject(json, true);
+        await this.hsCompositionsParserService.loadCompositionObject(
+          json,
+          true
+        );
       };
       reader.readAsText(f);
     }

projects/hslayers/src/components/compositions/compositions.service.ts

@@ -237,7 +237,7 @@ export class HsCompositionsService {
         data.data.layers = response.data;
       }
       this.HsCompositionsParserService.removeCompositionLayers();
-      const layers = this.HsCompositionsParserService.jsonToLayers(data);
+      const layers = await this.HsCompositionsParserService.jsonToLayers(data);
       for (let i = 0; i < layers.length; i++) {
         this.HsMapService.addLayer(layers[i], DuplicateHandling.RemoveOriginal);
       }
@@ -264,7 +264,9 @@ export class HsCompositionsService {
       if (parsed.expires && parsed.expires < new Date().getTime()) {
         return;
       }
-      const layers = this.HsCompositionsParserService.jsonToLayers(parsed);
+      const layers = await this.HsCompositionsParserService.jsonToLayers(
+        parsed
+      );
       for (let i = 0; i < layers.length; i++) {
         this.HsMapService.addLayer(layers[i], DuplicateHandling.IgnoreNew);
       }

projects/hslayers/src/components/compositions/compositions.spec.ts

@@ -119,7 +119,14 @@ describe('compositions', () => {
           useValue: new HsAddDataVectorService(
             mockedMapService,
             mockedUtilsService,
-            new HsStylerService(null, mockedUtilsService, null),
+            new HsStylerService(
+              null,
+              mockedUtilsService,
+              null,
+              null,
+              null,
+              mockedMapService
+            ),
             null
           ),
         },
@@ -181,29 +188,29 @@ describe('compositions', () => {
    * @param scope
    * @param component
    */
-  function loadComposition(component) {
-    component.hsCompositionsParserService.loadCompositionObject(
+  async function loadComposition(component) {
+    await component.hsCompositionsParserService.loadCompositionObject(
       compositionJson,
       true
     );
   }
 
-  it('should load composition from json', function () {
-    loadComposition(component);
-    expect(mockedMapService.map.getLayers().getLength()).toBe(6);
-    expect(getTitle(mockedMapService.map.getLayers().item(0))).toBe(
+  it('should load composition from json', async function () {
+    await loadComposition(component);
+    expect(mockedMapService.map.getLayers().getLength()).toBe(8);
+    expect(getTitle(mockedMapService.map.getLayers().item(2))).toBe(
       'Measurement sketches'
     );
     expect(
-      mockedMapService.map.getLayers().item(3).getSource().getFeatures().length
+      mockedMapService.map.getLayers().item(5).getSource().getFeatures().length
     ).toBe(1);
     expect(
-      mockedMapService.map.getLayers().item(4).getSource().getFeatures().length
+      mockedMapService.map.getLayers().item(6).getSource().getFeatures().length
     ).toBe(1);
   });
 
-  it('if should parse composition layer style', function () {
-    loadComposition(component);
-    expect(mockedMapService.map.getLayers().item(0).getStyle()).toBeDefined();
+  it('if should parse composition layer style', async function () {
+    await loadComposition(component);
+    expect(mockedMapService.map.getLayers().item(2).getStyle()).toBeDefined();
   });
 });

projects/hslayers/src/components/map/map.service.mock.ts

@@ -19,7 +19,11 @@ export class HsMapServiceMock {
   }
 
   addLayer(layer): Layer {
-    this.map.addLayer(layer);
+    try {
+      this.map.addLayer(layer);
+    } catch (ex) {
+      //
+    }
   }
 
   getCurrentProj() {
@@ -29,4 +33,8 @@ export class HsMapServiceMock {
   getMapExtent() {
     return [0, 0, 100, 100];
   }
+
+  getLayersArray() {
+    return [];
+  }
 }