fix(ol-source-*): correctly handle events

closes #365

Author: d-koppenhagen

src/composables/__tests__/useSource.spec.ts

@@ -4,6 +4,7 @@ import { shallowMount } from "@vue/test-utils";
 import { Layer } from "ol/layer";
 import useSource from "../useSource";
 import { Source } from "ol/source";
+import BaseEvent from "ol/events/Event";
 
 describe("useSource", () => {
   function createComponent() {
@@ -43,4 +44,14 @@ describe("useSource", () => {
     expect(setSourceSpy).toBeCalledTimes(3);
     expect(setSourceSpy).toHaveBeenLastCalledWith(null);
   });
+
+  it("should pass through events", () => {
+    const { wrapper } = createComponent();
+    const listenerMockImpl = vi.fn();
+    wrapper.vm.source.on("change", listenerMockImpl);
+    wrapper.vm.source.changed();
+    expect(listenerMockImpl).toHaveBeenCalledTimes(1);
+    const changeEvents = wrapper.emitted().change[0] as unknown[];
+    expect(changeEvents[0]).toBeInstanceOf(BaseEvent);
+  });
 });

src/composables/useSource.ts

@@ -20,7 +20,9 @@ export default function useSource<T extends Source>(
   props: ConstructorParameters<typeof SourceClass>[0],
   eventsToHandle: string[] = [],
 ) {
-  function createSource() {
+  const source = updateSource();
+
+  function updateSource() {
     const properties = usePropsAsObjectProperties({
       ...props,
       ...(props.projection
@@ -31,22 +33,11 @@ export default function useSource<T extends Source>(
           }
         : {}),
     });
-
-    return shallowRef(new SourceClass(properties));
-  }
-
-  let source = createSource();
-
-  const { updateOpenLayersEventHandlers } = useOpenLayersEvents(
-    source,
-    eventsToHandle,
-  );
-
-  function updateSource() {
-    source = createSource();
-    updateOpenLayersEventHandlers();
+    const s = shallowRef(new SourceClass(properties));
+    useOpenLayersEvents(s, eventsToHandle);
     layer?.value?.setSource(null);
-    layer?.value?.setSource(source.value);
+    layer?.value?.setSource(s.value);
+    return s;
   }
 
   function removeSource() {
@@ -59,7 +50,7 @@ export default function useSource<T extends Source>(
 
   watch(() => layer, updateSource);
 
-  watch(() => props, updateSource, { deep: true, immediate: true });
+  watch(() => props, updateSource, { deep: true });
 
   return {
     source,