From 7c1dd7059c5a3d9945908ad9319c87000394d496 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Wed, 3 Apr 2024 09:22:28 +0200
Subject: [PATCH] feat(ol-context-menu-control): propagate events

closes #325
---
 .vscode/extensions.json                       |  3 +-
 .../mapControls/OlContextMenuControl.vue      | 30 +++++++--------
 src/demos/ContextMenuDemo.vue                 | 37 ++++++++++++-------
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index d4964acf..98109c37 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,8 +1,7 @@
 {
   "recommendations": [
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
     "vitest.explorer",
     "esbenp.prettier-vscode"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/components/mapControls/OlContextMenuControl.vue b/src/components/mapControls/OlContextMenuControl.vue
index 369c4b0c..afc0d3e3 100644
--- a/src/components/mapControls/OlContextMenuControl.vue
+++ b/src/components/mapControls/OlContextMenuControl.vue
@@ -2,31 +2,29 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ContextMenu from "ol-contextmenu";
+import ContextMenu, { type Options } from "ol-contextmenu";
 import { useAttrs } from "vue";
-import type { Item } from "ol-contextmenu/dist/types";
 import useControl from "@/composables/useControl";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
 
-const props = withDefaults(
-  defineProps<{
-    eventType?: "contextmenu" | "click" | "dblclick" | undefined;
-    defaultItems?: boolean;
-    width?: number;
-    items?: Item[];
-  }>(),
-  {
-    eventType: "contextmenu",
-    defaultItems: true,
-    width: 150,
-    items: () => [],
-  },
-);
+const props = withDefaults(defineProps<Options>(), {
+  eventType: "contextmenu",
+  defaultItems: true,
+  width: 150,
+  items: () => [],
+});
+
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
 
 const attrs = useAttrs();
 const { properties } = usePropsAsObjectProperties(props);
 
 const { control } = useControl(ContextMenu, properties, attrs);
+useOpenLayersEvents(control, ["beforeopen", "open", "close", "add-menu-entry"]);
 
 defineExpose({
   control,
diff --git a/src/demos/ContextMenuDemo.vue b/src/demos/ContextMenuDemo.vue
index e7f3d88d..d32a2331 100644
--- a/src/demos/ContextMenuDemo.vue
+++ b/src/demos/ContextMenuDemo.vue
@@ -17,7 +17,13 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-context-menu-control :items="contextMenuItems" />
+    <ol-context-menu-control
+      :items="contextMenuItems"
+      @beforeopen="log('beforeopen', $event)"
+      @open="log('open', $event)"
+      @close="log('close', $event)"
+      @add-menu-entry="log('add-menu-entry', $event)"
+    />
 
     <ol-vector-layer>
       <ol-source-vector ref="markers"> </ol-source-vector>
@@ -28,29 +34,28 @@
   </ol-map>
 </template>
 
-<script setup>
-import { ref, inject } from "vue";
+<script setup lang="ts">
+import type { ContextMenuEvent, Item } from "ol-contextmenu";
+import { onMounted, ref } from "vue";
+import { Feature, type View } from "ol";
+import { Point } from "ol/geom";
+import type VectorSource from "ol/source/Vector";
 
 import marker from "@/assets/marker.png";
 
+const contextMenuItems = ref<Item[]>([]);
 const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
-
-const contextMenuItems = ref([]);
-
-const markers = ref(null);
-const view = ref(null);
-
-const Feature = inject("ol-feature");
-const Geom = inject("ol-geom");
+const markers = ref<{ source: VectorSource } | null>(null);
+const view = ref<View | null>(null);
 
 contextMenuItems.value = [
   {
     text: "Center map here",
     classname: "some-style-class", // add some CSS rules
     callback: (val) => {
-      view.value.setCenter(val.coordinate);
+      view.value?.setCenter(val.coordinate);
     }, // `center` is your callback function
   },
   {
@@ -61,11 +66,15 @@ contextMenuItems.value = [
     callback: (val) => {
       console.log(val);
       const feature = new Feature({
-        geometry: new Geom.Point(val.coordinate),
+        geometry: new Point(val.coordinate),
       });
-      markers.value.source.addFeature(feature);
+      markers.value?.source.addFeature(feature);
     },
   },
   "-", // this is a separator
 ];
+
+function log(type: string, event: ContextMenuEvent) {
+  console.log(type, event);
+}
 </script>