From a95f8a5f0f1900f23ebe6fbf3f46331ff7bca5df Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Tue, 19 Sep 2023 19:13:17 +0200
Subject: [PATCH] feat(ol-map) support all Map events from OpenLayers on
 component

Newly supported events are:
- `change:size`
- `change:target`
- `change:view`
- `rendercomplete`
Please refer to the [OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)
---
 docs/componentsguide/map/index.md | 76 +++++--------------------------
 src/components/map/OlMap.vue      | 10 +++-
 2 files changed, 20 insertions(+), 66 deletions(-)

diff --git a/docs/componentsguide/map/index.md b/docs/componentsguide/map/index.md
index 849f54fa..00f37741 100644
--- a/docs/componentsguide/map/index.md
+++ b/docs/componentsguide/map/index.md
@@ -38,34 +38,29 @@ None.
 
 ## Events
 
-Pointer events that emits [`ol.MapBrowserEvent`](http://openlayers.org/en/latest/apidoc/module-ol_MapBrowserEvent-MapBrowserEvent.html)
+You have access to all Events from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html) to see the available events tht will be fired.
 
-- `click`
-- `dblclick`
-- `singleclick`
-- `pointerdrag`
-- `pointermove`
-
-Other events that emit [`ol.MapEvent`](http://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html)
-
-- `movestart`
-- `moveend`
-- `postrender`
-- `precompose`
-- `postcompose`
+```html
+<ol-map @error="handleEvent">
+  <!-- ... -->
+</ol-map>
+```
 
 ## Methods
 
 You have access to all Methods from the underlying source.
-Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Map.html) to see the available methods.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html) to see the available methods.
 
 To access the source, you can use a `ref()` as shown below:
 
 ```vue
 <template>
-  <ol-map ref="mapRef">
+  <!-- ... -->
+  <ol-map ref="mapRef" @error="handleEvent">
     <!-- ... -->
   </ol-map>
+  <!-- ... -->
 </template>
 
 <script setup lang="ts">
@@ -77,55 +72,6 @@ const mapRef = ref<{ map: Map }>(null);
 onMounted(() => {
   const map: Map = mapRef.value?.map;
   // call your method on `map`
-  const size = map.getSize();
 });
 </script>
 ```
-
-Furthermore the following methods are directly exposed and can be use as describe above, using a `ref=""`.
-
-### focus()
-
-Triggers focus on map container.
-
-### forEachFeatureAtPixel(pixel, callback, options = {})
-
-- **Arguments**:
-  - `pixel {number[]}`
-  - `callback {function(ol.Feature, ?ol.layer.Layer): *}`
-    Feature callback. The callback will be called with two arguments: OpenLayers `feature`
-    at the pixel and `layer` of the feature (will be null for unmanaged layers).
-    To stop detection, callback functions can return a truthy value.
-  - `[options] {Object | undefined}`
-    - `layerFilter {function(ol.layer.Layer): boolean}` Layer filter function.
-    - `hitTolerance {number | undefined}` Hit-detection tolerance in pixels.
-      Default is `0`.
-- **Returns**: `*` Truthy value returned from the callback.
-
-Detect features that intersect a pixel on the viewport, and execute a callback
-with each intersecting feature. Layers included in the detection can be configured
-through the `layerFilter` option in `options`.
-
-### getCoordinateFromPixel(pixel)
-
-- **Arguments**:
-  - `pixel {number[]}`
-- **Returns**: `number[]` Coordinates of the pixel in map view projection.
-
-Get the coordinate for a given pixel.
-
-### refresh()
-
-- **Returns**: `{Promise<void>}`
-
-Updates map size and re-renders map.
-
-### render()
-
-- **Returns**: `{Promise<void>}`
-
-Request a map rendering (at the next animation frame).
-
-### updateSize()
-
-Updates map size.
diff --git a/src/components/map/OlMap.vue b/src/components/map/OlMap.vue
index 6b1665fc..6d140b5d 100644
--- a/src/components/map/OlMap.vue
+++ b/src/components/map/OlMap.vue
@@ -20,6 +20,10 @@ import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties
 const props = defineProps<MapOptions>();
 
 const emit = defineEmits([
+  "change:layerGroup",
+  "change:size",
+  "change:target",
+  "change:view",
   "click",
   "dblclick",
   "singleclick",
@@ -30,6 +34,7 @@ const emit = defineEmits([
   "postrender",
   "precompose",
   "postcompose",
+  "rendercomplete",
 ]);
 
 const { properties } = usePropsAsObjectProperties(props);
@@ -67,16 +72,19 @@ const render = () => map?.render();
 const updateSize = () => map?.updateSize();
 
 map.on("click", (event) => emit("click", event));
+map.on("change:size", (event) => emit("change:size", event));
+map.on("change:target", (event) => emit("change:target", event));
+map.on("change:view", (event) => emit("change:view", event));
 map.on("dblclick", (event) => emit("dblclick", event));
 map.on("singleclick", (event) => emit("singleclick", event));
 map.on("pointerdrag", (event) => emit("pointerdrag", event));
 map.on("pointermove", (event) => emit("pointermove", event));
-
 map.on("movestart", (event) => emit("movestart", event));
 map.on("moveend", (event) => emit("moveend", event));
 map.on("postrender", (event) => emit("postrender", event));
 map.on("precompose", (event) => emit("precompose", event));
 map.on("postcompose", (event) => emit("postcompose", event));
+map.on("rendercomplete", (event) => emit("rendercomplete", event));
 
 defineExpose({
   map,