refactor(ol-source-webglpoints): pass-through all props and events fr…

…om `ol/source/Vector`

BREAKING CHANGE:
- use default values from OpenLayers version latest (7.4.0)

docs/componentsguide/sources/webglpoints/index.md

@@ -38,66 +38,49 @@ import WebglPointsSourceDemo from "@demos/WebglPointsSourceDemo.vue"
 
 ## Properties
 
-### attributions
+### Props from OpenLayers
 
-- **Type**: ` [String, Array]`
-- **Default**: `EPSG:3857`
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
 
-### features
+### Deviating Properties
 
-- **Type**: `Array`
-- **Default**: `() => []`
+None.
 
-### format
-
-- **Type**: `Format`
-
-formats available with `inject('ol-format')`
-
-### loader
-
-- **Type**: `Function`
-
-### overlaps
-
-- **Type**: `Boolean`
-- **Default**: `true`
-
-### projection
-
-- **Type**: `String`
-- **Default**: 'EPSG:3857'
-
-### strategy
-
-- **Type**: `Function`
-
-strategy available with inject('ol-loadingstrategy');
+## Events
 
-### url
+You have access to all Events from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html) to see the available events tht will be fired.
 
-- **Type**: `[String, Function]`
+```html
+<ol-source-webglpoints :url="url" @error="handleEvent" />
+```
 
-### useSpatialIndex
+## Methods
 
-- **Type**: `Boolean`
+You have access to all Methods from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html) to see the available methods.
 
-- **Default**: `true`
+To access the source, you can use a `ref()` as shown below:
 
-### wrapX
+```vue
+<template>
+  <!-- ... -->
+  <ol-source-webglpoints :url="url" ref="sourceRef" />
+  <!-- ... -->
+</template>
 
-- **Type**: `Boolean`
-- **Default**: `true`
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type VectorSource from "ol/source/vector";
 
-## Events
+const sourceRef = ref<{ source: VectorSource }>(null);
 
-- `addfeature`
-- `change`
-- `changefeature`
-- `clear`
-- `error`
-- `featuresloadend`
-- `featuresloaderror`
-- `featuresloadstart`
-- `propertychange`
-- `removefeature`
+onMounted(() => {
+  const source: VectorSource = sourceRef.value?.source;
+  // call your method on `source`
+});
+</script>
+```

src/components/sources/OlSourceVector.vue

@@ -14,7 +14,7 @@ import type Geometry from "ol/geom/Geometry";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 import eventGateway, { FEATURE_EVENTS } from "@/helpers/eventGateway";
 
-const props = withDefaults(defineProps<Options>(), {
+const props = withDefaults(defineProps<Options<Geometry>>(), {
   overlaps: true,
   projection: "EPSG:3857",
   useSpatialIndex: true,
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<Options>(), {
 
 const emit = defineEmits([]);
 
-const vectorLayer = inject<Ref<VectorLayer<VectorSource>> | null>(
+const vectorLayer = inject<Ref<VectorLayer<VectorSource<Geometry>>> | null>(
   "vectorLayer",
   null
 );
@@ -33,7 +33,7 @@ const layer = heatmapLayer || vectorLayer;
 const { properties } = usePropsAsObjectProperties(props);
 
 const source = computed(() => {
-  const vs = new VectorSource(properties as Options<Geometry>);
+  const vs = new VectorSource(properties);
 
   eventGateway(emit, vs, FEATURE_EVENTS);
 

src/components/sources/OlSourceWebglPoints.vue

@@ -5,49 +5,37 @@
 </template>
 
 <script setup lang="ts">
-import type { LoadingStrategy, Options } from "ol/source/Vector";
-import VectorSource from "ol/source/Vector";
+import VectorSource, { type Options } from "ol/source/Vector";
 import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
 
-import type { AttributionLike } from "ol/source/Source";
-import type Collection from "ol/Collection";
-import type Feature from "ol/Feature";
-import type FeatureFormat from "ol/format/Feature";
-import type { FeatureLoader, FeatureUrlFunction } from "ol/featureloader";
 import type WebGLPointsLayer from "ol/layer/WebGLPoints";
 import type Point from "ol/geom/Point";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import type { ProjectionLike } from "ol/proj";
+import eventGateway, { FEATURE_EVENTS } from "@/helpers/eventGateway";
 
-const props = withDefaults(
-  defineProps<{
-    attributions?: AttributionLike;
-    features?: Collection<Feature<Point>>;
-    format?: FeatureFormat | undefined;
-    loader?: FeatureLoader;
-    overlaps?: boolean;
-    projection?: ProjectionLike;
-    strategy?: LoadingStrategy;
-    url?: string | FeatureUrlFunction;
-    useSpatialIndex?: boolean;
-    wrapX?: boolean;
-  }>(),
-  {
-    overlaps: true,
-    projection: "EPSG:3857",
-    useSpatialIndex: true,
-    wrapX: true,
-  }
-);
+const props = withDefaults(defineProps<Options<Point>>(), {
+  overlaps: true,
+  projection: "EPSG:3857",
+  useSpatialIndex: true,
+  wrapX: true,
+});
+
+const emit = defineEmits([]);
 
 const layer = inject<Ref<WebGLPointsLayer<VectorSource<Point>>> | null>(
   "webglPointsLayer"
 );
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const source = computed(() => new VectorSource(properties as Options<Point>));
+const source = computed(() => {
+  const vs = new VectorSource(properties);
+
+  eventGateway(emit, vs, FEATURE_EVENTS);
+
+  return vs;
+});
 
 const applySource = () => {
   layer?.value?.setSource(null);