refactor(composables): move prop handling and class creation into useLayer composable

Author: d-koppenhagen

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>
 ```

src/components/layers/OlAnimatedClusterLayer.vue

@@ -5,22 +5,18 @@
 </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 {
   layersCommonDefaultProps,
   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>

src/components/layers/OlAnimatedClusterlayer.vue

@@ -5,22 +5,18 @@
 </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 {
   layersCommonDefaultProps,
   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>

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>

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>

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>

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>

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>

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>

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>