From 8171eeaccc7a5cb3444cd4277ad52fd4a1b6424b Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Wed, 22 May 2024 08:11:34 +0200
Subject: [PATCH] refactor(composables): move prop handling and class creation
 into `useLayer` composable

---
 docs/pluginsguide/index.md                    | 28 +++++++++++----
 .../layers/OlAnimatedClusterLayer.vue         | 34 +++++++------------
 .../layers/OlAnimatedClusterlayer.vue         | 34 +++++++------------
 src/components/layers/OlHeatmapLayer.vue      | 13 +++----
 src/components/layers/OlImageLayer.vue        | 12 +++----
 src/components/layers/OlTileLayer.vue         | 12 +++----
 src/components/layers/OlVectorImageLayer.vue  | 14 +++-----
 src/components/layers/OlVectorLayer.vue       | 14 +++-----
 src/components/layers/OlVectorTileLayer.vue   | 14 +++-----
 src/components/layers/OlWebglTileLayer.vue    | 12 +++----
 src/components/layers/OlWebglVectorLayer.vue  | 20 ++++-------
 src/composables/__tests__/useLayer.spec.ts    | 10 ++----
 src/composables/useLayer.ts                   | 32 ++++++++++++-----
 13 files changed, 112 insertions(+), 137 deletions(-)

diff --git a/docs/pluginsguide/index.md b/docs/pluginsguide/index.md
index ad963b8..31aa46a 100644
--- a/docs/pluginsguide/index.md
+++ b/docs/pluginsguide/index.md
@@ -41,15 +41,31 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
-
-const layer = shallowRef(new FooLayer(properties));
-useLayer(layer, props);
+// Create the layer
+// Changes will be applied and the layer will be removed on unmount.
+// The last parameter will receive the event names which should be handled by the target component.
+// Check out the sources of the composable for more details.
+const { layer } = useLayer(FooLayer, props, ['change:opacity']);
 
-provide("layer", layer);
+// source components will rely on the layer (depends on the source type)
+provide("vectorLayer", layer);
+// provide("heatmapLayer", layer);
+// provide("imageLayer", layer);
+// provide("tileLayer", layer);
+// provide("vectorImageLayer", layer);
+// provide("vectorTileLayer", layer);
+// provide("webglVectorLayer", layer);
 
 defineExpose({
-  layer,
+  // see above ("provide")
+  vectorLayer: layer
+  // vectorLayer
+  // heatmapLayer
+  // imageLayer
+  // tileLayer
+  // vectorImageLayer
+  // vectorTileLayer
+  // webglVectorLayer
 });
 </script>
 ```
diff --git a/src/components/layers/OlAnimatedClusterLayer.vue b/src/components/layers/OlAnimatedClusterLayer.vue
index 45563d1..799da18 100644
--- a/src/components/layers/OlAnimatedClusterLayer.vue
+++ b/src/components/layers/OlAnimatedClusterLayer.vue
@@ -5,11 +5,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject, provide, watch, shallowRef } from "vue";
+import { provide, shallowRef, watch } from "vue";
 import { Cluster } from "ol/source";
 import { easeOut } from "ol/easing";
 import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
-import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
@@ -17,10 +16,7 @@ import {
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
 import type { Point } from "ol/geom";
-import {
-  FEATURE_EVENTS,
-  useOpenLayersEvents,
-} from "@/composables/useOpenLayersEvents";
+import { FEATURE_EVENTS } from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -49,8 +45,6 @@ const props = withDefaults(
   },
 );
 
-const map = inject<Map>("map");
-
 const properties = usePropsAsObjectProperties(props);
 
 const clusterSource = shallowRef(
@@ -60,29 +54,27 @@ const clusterSource = shallowRef(
   }),
 );
 
-useOpenLayersEvents(clusterSource, FEATURE_EVENTS);
+const { layer, map } = useLayer(
+  AnimatedCluster,
+  {
+    ...props,
+    source: clusterSource.value,
+  },
+  FEATURE_EVENTS,
+);
 
 watch(
-  () => properties.distance,
+  () => props.distance,
   (newValue) => {
     clusterSource.value.setDistance(newValue);
   },
 );
 
-const vectorLayer = shallowRef(
-  new AnimatedCluster({
-    ...properties,
-    source: clusterSource.value,
-  }),
-);
-
-useLayer(vectorLayer, properties);
-
 provide("vectorLayer", clusterSource);
-provide("stylable", vectorLayer);
+provide("stylable", layer);
 
 defineExpose({
-  vectorLayer,
+  vectorLayer: layer,
   map,
 });
 </script>
diff --git a/src/components/layers/OlAnimatedClusterlayer.vue b/src/components/layers/OlAnimatedClusterlayer.vue
index 45563d1..799da18 100644
--- a/src/components/layers/OlAnimatedClusterlayer.vue
+++ b/src/components/layers/OlAnimatedClusterlayer.vue
@@ -5,11 +5,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject, provide, watch, shallowRef } from "vue";
+import { provide, shallowRef, watch } from "vue";
 import { Cluster } from "ol/source";
 import { easeOut } from "ol/easing";
 import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
-import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
@@ -17,10 +16,7 @@ import {
   type LayersCommonProps,
 } from "@/components/layers/LayersCommonProps";
 import type { Point } from "ol/geom";
-import {
-  FEATURE_EVENTS,
-  useOpenLayersEvents,
-} from "@/composables/useOpenLayersEvents";
+import { FEATURE_EVENTS } from "@/composables/useOpenLayersEvents";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -49,8 +45,6 @@ const props = withDefaults(
   },
 );
 
-const map = inject<Map>("map");
-
 const properties = usePropsAsObjectProperties(props);
 
 const clusterSource = shallowRef(
@@ -60,29 +54,27 @@ const clusterSource = shallowRef(
   }),
 );
 
-useOpenLayersEvents(clusterSource, FEATURE_EVENTS);
+const { layer, map } = useLayer(
+  AnimatedCluster,
+  {
+    ...props,
+    source: clusterSource.value,
+  },
+  FEATURE_EVENTS,
+);
 
 watch(
-  () => properties.distance,
+  () => props.distance,
   (newValue) => {
     clusterSource.value.setDistance(newValue);
   },
 );
 
-const vectorLayer = shallowRef(
-  new AnimatedCluster({
-    ...properties,
-    source: clusterSource.value,
-  }),
-);
-
-useLayer(vectorLayer, properties);
-
 provide("vectorLayer", clusterSource);
-provide("stylable", vectorLayer);
+provide("stylable", layer);
 
 defineExpose({
-  vectorLayer,
+  vectorLayer: layer,
   map,
 });
 </script>
diff --git a/src/components/layers/OlHeatmapLayer.vue b/src/components/layers/OlHeatmapLayer.vue
index 823b8dd..785845d 100644
--- a/src/components/layers/OlHeatmapLayer.vue
+++ b/src/components/layers/OlHeatmapLayer.vue
@@ -5,10 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 import HeatmapLayer from "ol/layer/Heatmap";
 import type { Extent } from "ol/extent";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -36,14 +35,12 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
-const heatmapLayer = shallowRef(new HeatmapLayer(properties));
-useLayer(heatmapLayer, properties);
+const { layer } = useLayer(HeatmapLayer, props);
 
-provide("heatmapLayer", heatmapLayer);
-provide("stylable", heatmapLayer);
+provide("heatmapLayer", layer);
+provide("stylable", layer);
 
 defineExpose({
-  heatmapLayer,
+  heatmapLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlImageLayer.vue b/src/components/layers/OlImageLayer.vue
index 274d1ef..3bd40dd 100644
--- a/src/components/layers/OlImageLayer.vue
+++ b/src/components/layers/OlImageLayer.vue
@@ -5,9 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 import ImageLayer from "ol/layer/Image";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -19,14 +18,11 @@ const props = withDefaults(
   layersCommonDefaultProps,
 );
 
-const properties = usePropsAsObjectProperties(props);
+const { layer } = useLayer(ImageLayer, props);
 
-const imageLayer = shallowRef(new ImageLayer(properties));
-useLayer(imageLayer, properties);
-
-provide("imageLayer", imageLayer);
+provide("imageLayer", layer);
 
 defineExpose({
-  imageLayer,
+  imageLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlTileLayer.vue b/src/components/layers/OlTileLayer.vue
index 7e5a83e..7634c28 100644
--- a/src/components/layers/OlTileLayer.vue
+++ b/src/components/layers/OlTileLayer.vue
@@ -5,9 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 import TileLayer from "ol/layer/Tile";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -26,14 +25,11 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
+const { layer } = useLayer(TileLayer, props);
 
-const tileLayer = shallowRef(new TileLayer(properties));
-useLayer(tileLayer, properties);
-
-provide("tileLayer", tileLayer);
+provide("tileLayer", layer);
 
 defineExpose({
-  tileLayer,
+  tileLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlVectorImageLayer.vue b/src/components/layers/OlVectorImageLayer.vue
index 54c9232..002de73 100644
--- a/src/components/layers/OlVectorImageLayer.vue
+++ b/src/components/layers/OlVectorImageLayer.vue
@@ -5,10 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 
 import VectorImageLayer from "ol/layer/VectorImage";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -32,15 +31,12 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
+const { layer } = useLayer(VectorImageLayer, props);
 
-const vectorImageLayer = shallowRef(new VectorImageLayer(properties));
-useLayer(vectorImageLayer, properties);
-
-provide("vectorLayer", vectorImageLayer);
-provide("stylable", vectorImageLayer);
+provide("vectorLayer", layer);
+provide("stylable", layer);
 
 defineExpose({
-  vectorImageLayer,
+  vectorImageLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlVectorLayer.vue b/src/components/layers/OlVectorLayer.vue
index 66a1eea..7ae9568 100644
--- a/src/components/layers/OlVectorLayer.vue
+++ b/src/components/layers/OlVectorLayer.vue
@@ -5,9 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 import VectorLayer from "ol/layer/Vector";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -35,15 +34,12 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
+const { layer } = useLayer(VectorLayer, props);
 
-const vectorLayer = shallowRef(new VectorLayer(properties));
-useLayer(vectorLayer, props);
-
-provide("vectorLayer", vectorLayer);
-provide("stylable", vectorLayer);
+provide("vectorLayer", layer);
+provide("stylable", layer);
 
 defineExpose({
-  vectorLayer,
+  vectorLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlVectorTileLayer.vue b/src/components/layers/OlVectorTileLayer.vue
index 0a51bd6..28ec988 100644
--- a/src/components/layers/OlVectorTileLayer.vue
+++ b/src/components/layers/OlVectorTileLayer.vue
@@ -5,11 +5,10 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 import VectorTileLayer, {
   type VectorTileRenderType,
 } from "ol/layer/VectorTile";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -37,15 +36,12 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
+const { layer } = useLayer(VectorTileLayer, props);
 
-const vectorTileLayer = shallowRef(new VectorTileLayer(properties));
-useLayer(vectorTileLayer, properties);
-
-provide("vectorTileLayer", vectorTileLayer);
-provide("stylable", vectorTileLayer);
+provide("vectorTileLayer", layer);
+provide("stylable", layer);
 
 defineExpose({
-  vectorTileLayer,
+  vectorTileLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlWebglTileLayer.vue b/src/components/layers/OlWebglTileLayer.vue
index cd36b18..df0c171 100644
--- a/src/components/layers/OlWebglTileLayer.vue
+++ b/src/components/layers/OlWebglTileLayer.vue
@@ -5,22 +5,18 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
+import { provide } from "vue";
 import TileLayer, { type Options } from "ol/layer/WebGLTile";
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import useLayer from "@/composables/useLayer";
 import { layersCommonDefaultProps } from "./LayersCommonProps";
 
 const props = withDefaults(defineProps<Options>(), layersCommonDefaultProps);
 
-const properties = usePropsAsObjectProperties(props);
+const { layer } = useLayer(TileLayer, props);
 
-const tileLayer = shallowRef(new TileLayer(properties));
-useLayer(tileLayer, properties);
-
-provide("tileLayer", tileLayer);
+provide("tileLayer", layer);
 
 defineExpose({
-  tileLayer,
+  tileLayer: layer,
 });
 </script>
diff --git a/src/components/layers/OlWebglVectorLayer.vue b/src/components/layers/OlWebglVectorLayer.vue
index 6646b86..dca272c 100644
--- a/src/components/layers/OlWebglVectorLayer.vue
+++ b/src/components/layers/OlWebglVectorLayer.vue
@@ -5,9 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { provide, shallowRef } from "vue";
-
-import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { provide } from "vue";
 import useLayer from "@/composables/useLayer";
 import {
   layersCommonDefaultProps,
@@ -35,19 +33,13 @@ const props = withDefaults(
   },
 );
 
-const properties = usePropsAsObjectProperties(props);
-
-const webglVectorLayer = shallowRef(
-  new WebGLVectorLayer({
-    ...properties,
-    styles: properties.style,
-  }),
-);
-useLayer(webglVectorLayer, properties);
+const { layer } = useLayer(WebGLVectorLayer, {
+  ...props,
+});
 
-provide("webglVectorLayer", webglVectorLayer);
+provide("webglVectorLayer", layer);
 
 defineExpose({
-  webglVectorLayer,
+  webglVectorLayer: layer,
 });
 </script>
diff --git a/src/composables/__tests__/useLayer.spec.ts b/src/composables/__tests__/useLayer.spec.ts
index 69e011e..e686552 100644
--- a/src/composables/__tests__/useLayer.spec.ts
+++ b/src/composables/__tests__/useLayer.spec.ts
@@ -1,7 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import useLayer from "../useLayer";
-import usePropsAsObjectProperties from "../usePropsAsObjectProperties";
-import { defineComponent, ref, shallowRef } from "vue";
+import { defineComponent, ref } from "vue";
 import { shallowMount } from "@vue/test-utils";
 import { Layer } from "ol/layer";
 import { layersCommonDefaultProps } from "@components/layers/LayersCommonProps";
@@ -15,12 +14,7 @@ describe("useLayer", () => {
       template: "<slot/>",
       props: Object.keys(layersCommonDefaultProps),
       setup(props) {
-        const properties = usePropsAsObjectProperties(
-          props,
-        ) as typeof layersCommonDefaultProps;
-        const layer = shallowRef(new Layer(properties));
-        useLayer(layer, properties);
-        return { layer };
+        return useLayer(Layer, props);
       },
     });
 
diff --git a/src/composables/useLayer.ts b/src/composables/useLayer.ts
index a29f288..f51334c 100644
--- a/src/composables/useLayer.ts
+++ b/src/composables/useLayer.ts
@@ -1,17 +1,30 @@
-import { inject, onUnmounted, ref, type Ref, watch } from "vue";
+import { inject, onUnmounted, ref, type Ref, shallowRef, watch } from "vue";
 
 import type { Map } from "ol";
 import type LayerGroup from "ol/layer/Group";
 import type { Layer } from "ol/layer";
-import type usePropsAsObjectProperties from "./usePropsAsObjectProperties";
+import usePropsAsObjectProperties from "./usePropsAsObjectProperties";
+import { useOpenLayersEvents } from "./useOpenLayersEvents";
 import type { OverviewMap } from "ol/control";
-import type { layersCommonDefaultProps } from "@/components/layers/LayersCommonProps";
 
-export default function useLayer(
-  layer: Ref<Layer>,
-  properties: typeof layersCommonDefaultProps &
-    ReturnType<typeof usePropsAsObjectProperties>,
+/**
+ * Create a Layer
+ * @param LayerClass The Class of the source which should be created
+ * @param props The properties which should be passed to the LayerClass
+ * @param eventsToHandle The event names list for events that should be passed from the layer through the component
+ */
+export default function useLayer<T extends Layer>(
+  // eslint-disable-next-line
+  LayerClass: new (...args: any[]) => T,
+  props: ConstructorParameters<typeof LayerClass>[0],
+  eventsToHandle: string[] = [],
 ) {
+  const properties = usePropsAsObjectProperties(props);
+
+  const layer = shallowRef(new LayerClass(properties));
+
+  useOpenLayersEvents(layer, eventsToHandle);
+
   const map = inject<Map>("map");
   const layerGroup = inject<LayerGroup | null>("layerGroup", null);
   const overviewMap = inject<Ref<OverviewMap | null> | null>(
@@ -71,5 +84,8 @@ export default function useLayer(
     });
   }
 
-  return {};
+  return {
+    layer,
+    map,
+  };
 }