feat: Support loading of QML in style panel upload

fix #3433
hslayers · Oct 14, 2022 · f8d99f2 · f8d99f2
1 parent 6a67c18
commit f8d99f2
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 25 deletions.
diff --git a/projects/hslayers/src/common/layer-extensions.ts b/projects/hslayers/src/common/layer-extensions.ts
@@ -375,6 +375,10 @@ export function setSld(layer: Layer<Source>, sld: string): void {
   layer.set(HS_SLD, sld);
 }
 
+export function setQml(layer: Layer<Source>, qml: string): void {
+  layer.set(HS_QML, qml);
+}
+
 export function setHsLaymanSynchronizing(
   layer: Layer<Source>,
   hsLaymanSynchronizing: boolean

diff --git a/projects/hslayers/src/components/styles/styler.component.html b/projects/hslayers/src/components/styles/styler.component.html
@@ -47,7 +47,7 @@
   <div class="card-footer bg-white px-1">
     <div class="form-group m-3" *ngIf="uploaderVisible">
       <hs-file-upload (uploaded)="handleFileUpload($event)" [app]="data.app" uploader="hs-sld-upload"
-        acceptedFormats=".sld">
+        acceptedFormats=".sld, .qml">
       </hs-file-upload>
     </div>
     <div class="d-flex align-items-center justify-content-between">
@@ -70,7 +70,7 @@
       .unsavedChange">
         <div class="alert alert-danger p-1 m-0" role="alert">
           {{'COMMON.unsavedChanges' | translateHs : {app: data.app} }} <button class="btn btn-primary"
-            (click)="hsStylerService.setSld(data.app)" data-toggle="tooltip"
+            (click)="hsStylerService.setSldQml(data.app)" data-toggle="tooltip"
             [title]="'STYLER.unsavedChanges' | translateHs : data">
             <i class="icon-save-floppy"></i>
           </button>

diff --git a/projects/hslayers/src/components/styles/styler.component.ts b/projects/hslayers/src/components/styles/styler.component.ts
@@ -87,7 +87,7 @@ export class HsStylerComponent
       if (confirmed == 'no') {
         return;
       } else if (confirmed == 'yes') {
-        this.hsStylerService.setSld(this.data.app);
+        this.hsStylerService.setSldQml(this.data.app);
       }
     }
     this.hsLayoutService.setMainPanel('layermanager', this.data.app);
@@ -119,8 +119,8 @@ export class HsStylerComponent
       });
     });
     Promise.all(promises).then(async (fileContents) => {
-      const sld = fileContents[0] as string;
-      await this.hsStylerService.loadSld(sld, this.data.app);
+      const styleString = fileContents[0] as string;
+      await this.hsStylerService.loadStyle(styleString, this.data.app);
     });
   }
 }
diff --git a/projects/hslayers/src/components/styles/styler.service.ts b/projects/hslayers/src/components/styles/styler.service.ts
@@ -40,6 +40,7 @@ import {
   getQml,
   getSld,
   getTitle,
+  setQml,
   setSld,
 } from '../../common/layer-extensions';
 import {getHighlighted} from '../../common/feature-extensions';
@@ -59,13 +60,14 @@ class HsStylerParams {
     : new QGISStyleParser();
 
   sld: string;
+  qml: string;
   isAuthorized: boolean;
 
   pin_white_blue;
   pin_white_blue_highlight;
   colorMapDialogVisible = false;
   unsavedChange = false;
-  changesStore = new Map();
+  changesStore = new Map<string, {sld: string; qml: string}>();
 }
 
 @Injectable({
@@ -275,6 +277,7 @@ export class HsStylerService {
       }
     }
     this.get(app).sld = sld;
+    this.get(app).qml = qml;
   }
 
   /**
@@ -293,13 +296,10 @@ export class HsStylerService {
         style: await this.sldToOlStyle(defaultStyle, app),
       };
     }
-    if (
-      typeof style == 'string' &&
-      (style as string).includes('StyledLayerDescriptor')
-    ) {
+    const styleType = this.guessStyleFormat(style);
+    if (styleType == 'sld') {
       return {sld: style, style: await this.sldToOlStyle(style, app)};
-    }
-    if (typeof style == 'string' && (style as string).includes('<qgis')) {
+    } else if (styleType == 'qml') {
       return {qml: style, style: await this.qmlToOlStyle(style, app)};
     } else if (
       typeof style == 'object' &&
@@ -312,6 +312,16 @@ export class HsStylerService {
     }
   }
 
+  guessStyleFormat(style: any): 'qml' | 'sld' {
+    if (typeof style == 'string') {
+      if ((style as string).includes('StyledLayerDescriptor')) {
+        return 'sld';
+      } else if ((style as string).includes('<qgis')) {
+        return 'qml';
+      }
+    }
+  }
+
   /**
    * Prepare current layers style for editing by converting
    * SLD attribute string to JSON and reading layers title
@@ -329,15 +339,13 @@ export class HsStylerService {
         return;
       }
       appRef.layer = layer;
-      console.log('Layer uid', getUid(appRef.layer));
       appRef.layerBeingMonitored =
         !!this.hsLayerSynchronizerService.syncedLayers.find((l) => l == layer);
       appRef.unsavedChange = appRef.changesStore.has(getUid(layer));
       appRef.layerTitle = getTitle(layer);
-      const sld = appRef.unsavedChange
+      const {sld, qml} = appRef.unsavedChange
         ? appRef.changesStore.get(getUid(layer))
-        : getSld(layer);
-      const qml = getQml(layer);
+        : {sld: getSld(layer), qml: getQml(layer)};
       if (sld != undefined) {
         appRef.styleObject = await this.sldToJson(sld, app);
       } else if (qml != undefined) {
@@ -564,22 +572,26 @@ export class HsStylerService {
   }
 
   /**
-   * Checks whether SLD should be indicated or saved right away.
+   * Checks whether SLD/QML should be indicated or saved right away.
    * Indicate only when user is logged in Layman and layer is being monitored otherwise save
    */
   resolveSldChange(appRef: HsStylerParams, app: string) {
     if (appRef.isAuthorized && appRef.layerBeingMonitored) {
-      appRef.changesStore.set(getUid(appRef.layer), appRef.sld);
+      appRef.changesStore.set(getUid(appRef.layer), {
+        sld: appRef.sld,
+        qml: appRef.qml,
+      });
       appRef.unsavedChange = true;
     } else {
-      this.setSld(app);
+      this.setSldQml(app);
     }
   }
 
-  /**Set SLD parameter of layer*/
-  setSld(app: string) {
+  /**Set SLD/QML parameter of layer*/
+  setSldQml(app: string) {
     const appRef = this.get(app);
     setSld(appRef.layer, appRef.sld);
+    setQml(appRef.layer, appRef.qml);
     appRef.changesStore.delete(getUid(appRef.layer));
     appRef.unsavedChange = false;
   }
@@ -656,15 +668,28 @@ export class HsStylerService {
     await this.save(app);
   }
 
-  async loadSld(sld: string, app: string): Promise<void> {
+  /**
+   * Load style in SLD/QML and set it to current layer
+   * @param styleString
+   * @param app
+   */
+  async loadStyle(styleString: string, app: string): Promise<void> {
     try {
       const appRef = this.get(app);
-      await appRef.sldParser.readStyle(sld);
-      setSld(appRef.layer, sld);
+      const styleFmt = this.guessStyleFormat(styleString);
+      if (styleFmt == 'sld') {
+        await appRef.sldParser.readStyle(styleString);
+        setQml(appRef.layer, undefined);
+        setSld(appRef.layer, styleString);
+      } else if (styleFmt == 'qml') {
+        await appRef.qmlParser.readStyle(styleString);
+        setSld(appRef.layer, undefined);
+        setQml(appRef.layer, styleString);
+      }
       await this.fill(appRef.layer, app);
       await this.save(app);
     } catch (err) {
-      console.warn('SLD could not be parsed');
+      console.warn('SLD could not be parsed', err);
     }
   }
 }