fix: layerConfig.style + layer type checking

EOX-A · Jul 11, 2024 · 10c520d · 10c520d
1 parent 930a142
commit 10c520d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/elements/layercontrol/src/components/layer-config.js b/elements/layercontrol/src/components/layer-config.js
@@ -3,6 +3,8 @@ import { getStartVals } from "../helpers";
 import { dataChangeMethod, applyUpdatedStyles } from "../methods/layer-config";
 import { when } from "lit/directives/when.js";
 import _debounce from "lodash.debounce";
+import VectorLayer from "ol/layer/Vector";
+import WebGLTileLayer from "ol/layer/WebGLTile";
 /**
  * `EOxLayerControlLayerConfig` is a component that handles configuration options for layers using eox-jsonform.
  * It allows users to input data, modify layer settings, and update the UI based on those settings.
@@ -69,7 +71,7 @@ export class EOxLayerControlLayerConfig extends LitElement {
     /**
      * Layer config for eox-jsonform
      *
-     * @type {{ schema: object, element: string, type?:"tileUrl"|"style" }}
+     * @type {{ schema: Record<string,any>; element: string; type?:"tileUrl"|"style"; style?:import("ol/layer/WebGLTile").Style}}
      */
     this.layerConfig = null;
 
@@ -88,9 +90,13 @@ export class EOxLayerControlLayerConfig extends LitElement {
    */
   #handleDataChange(e) {
     this.#data = e.detail;
-    if (this.layerConfig.type === "style") {
-      if (["Vector", "WebGLTile"].includes(this.layer.get("type"))) {
-        applyUpdatedStyles(this.#data, this.layer);
+    if (this.layerConfig.type === "style" || this.layerConfig.style) {
+      const isVectorOrTile =
+        ["Vector", "WebGLTile"].includes(this.layer.get("type")) ||
+        this.layer instanceof VectorLayer ||
+        this.layer instanceof WebGLTileLayer;
+      if (isVectorOrTile) {
+        applyUpdatedStyles(this.#data, this.layer, this.layerConfig);
       } else {
         console.error(
           `Layer type ${this.layer.get(

diff --git a/elements/layercontrol/src/enums/stories.js b/elements/layercontrol/src/enums/stories.js
@@ -290,13 +290,12 @@ export const STORIES_LAYER_CROPOMHUSC2 = {
     url: "https://api.cropom-dev.com/crop_model/regional_forecast?region_code=HU332",
     format: "GeoJSON",
   },
-  styles: STYLES_LAYER_CROPOMHUSC2,
   properties: {
     id: "id",
     title: "Crop Yield Vector Example",
     layerConfig: {
-      type: "style",
       schema: JSONFORM_SCHEMA_LAYER_CROPOMHUSC2,
+      style: STYLES_LAYER_CROPOMHUSC2,
     },
   },
 };

diff --git a/elements/layercontrol/src/helpers/get-start-vals.js b/elements/layercontrol/src/helpers/get-start-vals.js
@@ -1,3 +1,5 @@
+import WebGLTileLayer from "ol/layer/WebGLTile";
+
 /**
  * Recursively traverses the schema object to extract startVals based on values of nested properties.
  *
@@ -35,7 +37,7 @@ export function getNestedStartVals(schema, nestedValues) {
  * Retrieves startVals from Query Params or style variables based on layer configuration.
  *
  * @param {import("ol/layer").Layer} layer - The layer object.
- * @param {{[key: string]: any}} layerConfig - Configuration object for the layer.
+ * @param {import("../components/layer-config").EOxLayerControlLayerConfig['layerConfig']} layerConfig - Configuration object for the layer.
  * @returns {object | null} - Object containing the startVals or null if not found.
  */
 export function getStartVals(layer, layerConfig) {
@@ -46,21 +48,21 @@ export function getStartVals(layer, layerConfig) {
   let nestedValues = {};
   // extract style variables from layer
   let styleVars =
-    layer.get("type") === "WebGLTile"
+    layer.get("type") === "WebGLTile" || layer instanceof WebGLTileLayer
       ? /** @type {import("ol/layer/WebGLTile").default} */
         (layer)["style_"]?.variables
-      : layer.get("styles")?.variables;
-  if (layerConfig.type === "style" && styleVars) {
+      : layerConfig.style?.variables;
+  if ((layerConfig.type === "style" || layerConfig.style) && styleVars) {
     nestedValues = styleVars;
 
     //@ts-expect-error
   } else if (layer.getSource()?.getTileUrlFunction?.()) {
     // Extract query parameters from tile URL
-    //@ts-ignore
+    //@ts-expect-error
     const url = new URL(layer.getSource().getTileUrlFunction()([0, 0, 0]));
 
     // Retrieve startVals based on schema and query parameters
-    //@ts-ignore
+    //@ts-expect-error
     nestedValues = Object.fromEntries(url.searchParams.entries());
   } else return null;
 

diff --git a/elements/layercontrol/src/methods/layer-config/apply-updated-styles.js b/elements/layercontrol/src/methods/layer-config/apply-updated-styles.js
@@ -1,12 +1,21 @@
+import VectorLayer from "ol/layer/Vector";
+import WebGLTileLayer from "ol/layer/WebGLTile";
+
 /**
  * @param {Record<string,number>} jsonformOutput
  * @param { import("ol/layer/Layer").default} layer
+ * @param { import("../../components/layer-config").EOxLayerControlLayerConfig['layerConfig']} layerConfig
  * */
-export default function (jsonformOutput, layer) {
-  const styles =
-    layer.get("type") === "WebGLTile"
-      ? /** @type {import('ol/layer/WebGLTile').default} */ (layer)["style_"]
-      : layer.get("styles");
+export default function (jsonformOutput, layer, layerConfig) {
+  // check whether the layer is Vector or Tile
+  const isTile =
+    layer.get("type") === "WebGLTile" || layer instanceof WebGLTileLayer;
+  const isVector =
+    layer.get("type") === "Vector" || layer instanceof VectorLayer;
+
+  const styles = isTile
+    ? /** @type {import('ol/layer/WebGLTile').default} */ (layer)["style_"]
+    : layerConfig.style;
   let styleVars = styles?.variables;
   if (styleVars) {
     const updatedValues = flattenObject(jsonformOutput);
@@ -16,12 +25,12 @@ export default function (jsonformOutput, layer) {
       ...updatedValues,
     };
 
-    if (layer.get("type") === "Vector") {
+    if (isVector) {
       const updatedStyles = updateVectorLayerStyle(styles);
       /** @type {import('ol/layer/Vector').default} */ (layer).setStyle(
         updatedStyles
       );
-    } else if (layer.get("type") === "WebGLTile") {
+    } else if (isTile) {
       /** @type {import('ol/layer/WebGLTile').default} */ (
         layer
       ).updateStyleVariables(updatedValues);