feat(ol-style): define and export OverrideStyleFunction which now also includes the resolution as third parameter

You can now either:
- modify an existing style
- return a new style
- return an array of new styles

closes #191

Author: d-koppenhagen

docs/componentsguide/styles/style/index.md

@@ -41,8 +41,13 @@ import StyleDemo2 from "@demos/StyleDemo2.vue"
 
 - **Type**: `Number`
 
-### overrideStyleFunction
+### `overrideStyleFunction`
 
-- **Type**: `Function`
+- **Type**: `OverrideStyleFunction`
 
-Change the style forexample in cluster sytem you can change the feature count in text style (see cluster doc)
+Change the style for example in cluster you can change the feature count in text style (see cluster doc)
+The function has three arguments:
+
+1. `feature: FeatureLike`: The feature the style is related to.
+2. `currentStyle: Style`: The current style that's applied (you can override it here)
+3. `resolution?: number`: A number representing the view's resolution

src/components/layers/OlLayerGroup.vue

@@ -17,7 +17,10 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Options>(), layersCommonDefaultProps);
+const props = withDefaults(
+  defineProps<Options & { className?: string }>(),
+  layersCommonDefaultProps
+);
 
 const map = inject<Map>("map");
 const { properties } = usePropsAsObjectProperties(props);

src/components/styles/OlStyle.vue

@@ -12,24 +12,27 @@ import Style, { type StyleLike } from "ol/style/Style";
 import Draw from "ol/interaction/Draw";
 import Modify from "ol/interaction/Modify";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type Feature from "ol/Feature";
+import type { Layer } from "ol/layer";
+import type { Select } from "ol/interaction";
+import type { OverrideStyleFunction } from ".";
 
 const props = withDefaults(
   defineProps<{
     zIndex?: number;
-    overrideStyleFunction?: (...args: unknown[]) => unknown;
+    overrideStyleFunction?: OverrideStyleFunction;
   }>(),
   {}
 );
 
-const styledObj = inject<Ref<Draw | Modify | Style> | undefined>(
-  "stylable",
-  undefined
-);
+const styledObj = inject<
+  Ref<Draw | Modify | Select | Feature | Layer> | undefined
+>("stylable", undefined);
 const { properties } = usePropsAsObjectProperties(props);
 
 const style = computed(() => new Style(properties));
 
-const setStyle = (val: StyleLike | null) => {
+const setStyle = (val: StyleLike) => {
   const st = styledObj?.value;
   if (!st) {
     return;
@@ -42,50 +45,38 @@ const setStyle = (val: StyleLike | null) => {
     try {
       // @ts-ignore
       st.setStyle(val);
-      // @ts-ignore
       st.changed();
-      // @ts-ignore
       st.dispatchEvent("styleChanged");
     } catch (error) {
       // @ts-ignore
       st.style_ = val;
       // @ts-ignore
       st.values_.style = val;
-      // @ts-ignore
       st.changed();
-      // @ts-ignore
       st.dispatchEvent("styleChanged");
     }
   }
 };
 
 const styleFunc = computed<StyleLike>(() => {
-  return (feature) => {
-    if (properties.overrideStyleFunction != null) {
-      properties.overrideStyleFunction(feature, style.value);
+  return (feature, resolution) => {
+    if (properties.overrideStyleFunction) {
+      properties.overrideStyleFunction(feature, style.value, resolution);
     }
     return style.value;
   };
 });
 
-watch(properties, () => {
-  if (!properties.overrideStyleFunction === null) {
-    setStyle(style.value);
-  } else {
-    setStyle(styleFunc.value);
-  }
-});
+watch(properties, () =>
+  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value)
+);
 
-onMounted(() => {
-  if (!properties.overrideStyleFunction) {
-    setStyle(style.value);
-  } else {
-    setStyle(styleFunc.value);
-  }
-});
+onMounted(() =>
+  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value)
+);
 
 onUnmounted(() => {
-  setStyle(null);
+  setStyle(new Style());
 });
 
 provide("style", style);

src/components/styles/index.ts

@@ -6,9 +6,17 @@ import OlStyleFill from "./OlStyleFill.vue";
 import OlStyleIcon from "./OlStyleIcon.vue";
 import OlStyleText from "./OlStyleText.vue";
 import OlStyleFlowline from "./OlStyleFlowline.vue";
+import type { FeatureLike } from "ol/Feature";
+import type { Style } from "ol/style";
 
 let installed = false;
 
+type OverrideStyleFunction = (
+  feature: FeatureLike,
+  currentStyle: Style,
+  resolution: number
+) => Style | Style[] | void;
+
 function install(app: App) {
   if (installed) return;
   installed = true;
@@ -33,4 +41,5 @@ export {
   OlStyleText,
   OlStyleFlowline,
   OlStyleCircle,
+  type OverrideStyleFunction,
 };

src/demos/ClusterDemo.vue

@@ -55,10 +55,10 @@ const projection = ref("EPSG:4326");
 const zoom = ref(6.8);
 const rotation = ref(0);
 
-const overrideStyleFunction = (feature, style) => {
+const overrideStyleFunction = (feature, style, resolution) => {
+  console.log({ feature, style, resolution });
   const clusteredFeatures = feature.get("features");
   const size = clusteredFeatures.length;
-
   style.getText().setText(size.toString());
 };