From 10c520d2e1348d5719fb45a9ef9b2dd657db2a26 Mon Sep 17 00:00:00 2001 From: A-Behairi Date: Thu, 11 Jul 2024 11:19:29 +0200 Subject: [PATCH] fix: `layerConfig.style` + layer type checking --- .../src/components/layer-config.js | 14 +++++++---- elements/layercontrol/src/enums/stories.js | 3 +-- .../src/helpers/get-start-vals.js | 14 ++++++----- .../layer-config/apply-updated-styles.js | 23 +++++++++++++------ 4 files changed, 35 insertions(+), 19 deletions(-) diff --git a/elements/layercontrol/src/components/layer-config.js b/elements/layercontrol/src/components/layer-config.js index aa478e6a8..52b44a55e 100644 --- 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; 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 index 5c240b2a3..9b3cbb525 100644 --- 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 index 0ad8e4be1..b1cf42652 100644 --- 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 index cf2014872..445b38588 100644 --- 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} 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);