fix(ol-interaction-draw): emit events on changed geometry

closes #361

Author: d-koppenhagen

src/components/interaction/OlInteractionDraw.vue

@@ -3,21 +3,21 @@
 </template>
 
 <script setup lang="ts">
-import type { Ref } from "vue";
 import {
-  provide,
   inject,
-  watch,
   onMounted,
   onUnmounted,
+  provide,
+  type Ref,
+  shallowRef,
   toRefs,
-  ref,
+  watch,
 } from "vue";
+import type { GeometryFunction } from "ol/interaction/Draw";
 import Draw from "ol/interaction/Draw";
 import type Map from "ol/Map";
 import type VectorSource from "ol/source/Vector";
 import type { Type as GeometryType } from "ol/geom/Geometry";
-import type { GeometryFunction } from "ol/interaction/Draw";
 import type { Condition } from "ol/events/condition";
 import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
 
@@ -93,9 +93,12 @@ function createDraw() {
   });
 }
 
-let draw = createDraw();
+const draw = shallowRef(createDraw());
 
-useOpenLayersEvents(draw, ["drawstart", "drawend"]);
+const { updateOpenLayersEventHandlers } = useOpenLayersEvents(draw, [
+  "drawstart",
+  "drawend",
+]);
 
 watch(
   [
@@ -115,25 +118,26 @@ watch(
     wrapX,
   ],
   () => {
-    draw.abortDrawing();
-    map?.removeInteraction(draw);
-    draw = createDraw();
-    map?.addInteraction(draw);
+    draw.value.abortDrawing();
+    map?.removeInteraction(draw.value);
+    draw.value = createDraw();
+    updateOpenLayersEventHandlers();
+    map?.addInteraction(draw.value);
     map?.changed();
   },
 );
 
 onMounted(() => {
-  map?.addInteraction(draw);
+  map?.addInteraction(draw.value);
 });
 
 onUnmounted(() => {
-  map?.removeInteraction(draw);
+  map?.removeInteraction(draw.value);
 });
 
-provide("stylable", ref(draw));
+provide("stylable", draw);
 
 defineExpose({
-  draw,
+  draw: draw.value,
 });
 </script>

src/composables/useOpenLayersEvents.ts

@@ -59,7 +59,7 @@ export function useOpenLayersEvents(
   const instance = getCurrentInstance();
   const globalOptions = inject("ol-options");
 
-  onMounted(() => {
+  function updateOpenLayersEventHandlers() {
     ([...COMMON_EVENTS, ...eventNames] as EventTypes[]).forEach((eventName) => {
       let unwrappedFeature: Pick<BaseObject, "on">;
 
@@ -81,5 +81,13 @@ export function useOpenLayersEvents(
         instance?.emit(eventName, ...args);
       });
     });
+  }
+
+  onMounted(() => {
+    updateOpenLayersEventHandlers();
   });
+
+  return {
+    updateOpenLayersEventHandlers,
+  };
 }