feat(ol-interaction-pointer): add new pointer interaction

which wraps:
https://openlayers.org/en/latest/apidoc/module-ol_interaction_Pointer-PointerInteraction.html

closes #339

Author: d-koppenhagen

docs/.vitepress/config.ts

@@ -384,6 +384,10 @@ export const config: UserConfig = {
                 text: "ol-interaction-modify",
                 link: "/componentsguide/interactions/modify/",
               },
+              {
+                text: "ol-interaction-pointer",
+                link: "/componentsguide/interactions/pointer/",
+              },
               {
                 text: "ol-interaction-select",
                 link: "/componentsguide/interactions/select/",

docs/componentsguide/interactions/pointer/index.md

@@ -0,0 +1,83 @@
+# ol-interaction-pointer
+
+Component that handles user-defined functions on `down`, `move`, `up` and `drag` events.
+
+[[toc]]
+
+## Demo
+
+<script setup>
+import PointerDemo from "@demos/PointerDemo.vue"
+</script>
+
+<ClientOnly>
+<PointerDemo/>
+</ClientOnly>
+
+## Setup
+
+<!--@include: ../../interactions.plugin.md-->
+
+## Usage
+
+| Plugin Usage               |            Explicit Import            |
+|----------------------------|:-------------------------------------:|
+| `<ol-interaction-pointer>` | `<Interactions.OlInteractionPointer>` |
+
+::: code-group
+
+<<< ../../../../src/demos/PointerDemo.vue
+
+:::
+
+## Properties
+
+### stopDown
+
+Should the down event be propagated to other interactions, or should be stopped?
+
+- **Type**: `((arg0: boolean) => boolean) | undefined`
+
+## Events
+
+You have access to all Events from the underlying interaction.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Pointer-PointerInteraction.html) to see the available events tht will be fired.
+
+In addition, the events `down`, `move`, `up`, `drag` and `event`, are fired.
+
+```html
+<ol-interaction-pointer
+  @down="handleDownEvent"
+  @move="handleMoveEvent"
+  @up="handleUpEvent"
+  @drag="handleDragEvent"
+  @error="handleErrorEvent"
+/>
+```
+
+## Methods
+
+You have access to all Methods from the underlying interaction.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_interaction_Pointer-PointerInteraction.html) to see the available methods.
+
+To access the source, you can use a `ref()` as shown below:
+
+```vue
+<template>
+  <!-- ... -->
+  <ol-interaction-pointer ref="pointerRef" @down="handleDownEvent" />
+  <!-- ... -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type Pointer from "ol/interaction/Pointer";
+
+const pointerRef = ref<{ pointer: Pointer } | null>(null);
+
+onMounted(() => {
+  const pointer: Pointer = pointerRef.value?.pointer;
+  // call your method on `pointer`
+});
+</script>
+```

src/components/interaction/OlInteractionPointer.vue

@@ -0,0 +1,83 @@
+<template>
+  <slot></slot>
+</template>
+
+<script setup lang="ts">
+import { inject, watch, onMounted, onUnmounted, shallowRef } from "vue";
+import Pointer, { type Options } from "ol/interaction/Pointer";
+import type Map from "ol/Map";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
+import type { MapBrowserEvent } from "ol";
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: "down", data: MapBrowserEvent<any>): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: "move", data: MapBrowserEvent<any>): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: "up", data: MapBrowserEvent<any>): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: "drag", data: MapBrowserEvent<any>): void;
+}>();
+
+const props =
+  defineProps<
+    Omit<
+      Options,
+      | "handleDownEvent"
+      | "handleDragEvent"
+      | "handleMoveEvent"
+      | "handleUpEvent"
+    >
+  >();
+
+const map = inject<Map>("map");
+const properties = usePropsAsObjectProperties(props);
+
+const pointer = shallowRef(
+  new Pointer({
+    ...properties,
+    handleDownEvent: (e) => {
+      emit("down", e);
+      return true;
+    },
+    handleDragEvent: (e) => {
+      emit("drag", e);
+      return true;
+    },
+    handleMoveEvent: (e) => {
+      emit("move", e);
+    },
+    handleUpEvent: (e) => {
+      emit("up", e);
+      return true;
+    },
+  }),
+);
+
+useOpenLayersEvents(pointer, ["change:active"]);
+
+watch(pointer, (newVal, oldVal) => {
+  map?.removeInteraction(oldVal);
+  map?.addInteraction(newVal);
+  map?.changed();
+});
+
+onMounted(() => {
+  map?.addInteraction(pointer.value);
+});
+
+onUnmounted(() => {
+  map?.removeInteraction(pointer.value);
+});
+
+defineExpose({
+  pointer,
+});
+</script>

src/components/interaction/index.ts

@@ -7,6 +7,7 @@ import OlInteractionLink from "./OlInteractionLink.vue";
 import OlInteractionSelect from "./OlInteractionSelect.vue";
 import OlInteractionDraw from "./OlInteractionDraw.vue";
 import OlInteractionModify from "./OlInteractionModify.vue";
+import OlInteractionPointer from "./OlInteractionPointer.vue";
 import OlInteractionSnap from "./OlInteractionSnap.vue";
 import OlInteractionTransform from "./OlInteractionTransform.vue";
 import type { Vue3OpenlayersGlobalOptions } from "@/types";
@@ -20,6 +21,7 @@ function install(app: App, options?: Vue3OpenlayersGlobalOptions) {
   app.component("OlInteractionSelect", OlInteractionSelect);
   app.component("OlInteractionDraw", OlInteractionDraw);
   app.component("OlInteractionModify", OlInteractionModify);
+  app.component("OlInteractionPointer", OlInteractionPointer);
   app.component("OlInteractionSnap", OlInteractionSnap);
   app.component("OlInteractionTransform", OlInteractionTransform);
 
@@ -44,6 +46,7 @@ export {
   OlInteractionSelect,
   OlInteractionDraw,
   OlInteractionModify,
+  OlInteractionPointer,
   OlInteractionSnap,
   OlInteractionTransform,
 };

src/demos/PointerDemo.vue

@@ -0,0 +1,38 @@
+<template>
+  <ol-map
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 400px"
+  >
+    <ol-view
+      ref="view"
+      :center="center"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+
+    <ol-interaction-pointer
+      @down="log('⬇️ down', $event)"
+      @up="log('⬆️ up', $event)"
+      @move="log('🚗 move', $event)"
+      @drag="log('🤚🏽 drag', $event)"
+    />
+  </ol-map>
+</template>
+
+<script setup lang="ts">
+import type { MapBrowserEvent } from "ol";
+import { ref } from "vue";
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+
+const log = (type: string, event: MapBrowserEvent<UIEvent>) => {
+  console.log(type, event);
+};
+</script>

vite.config.ts

@@ -126,6 +126,7 @@ export default defineConfig({
           "ol/interaction/Draw": "Draw",
           "ol/interaction/DragBox": "DragBox",
           "ol/interaction/Modify": "Modify",
+          "ol/interaction/Pointer": "Pointer",
           "ol/style/Circle": "CircleStyle",
           "ol/style/Fill": "Fill",
           "ol/style/Stroke": "Stroke",