feat(ol-layer-*): support common events on components

The common events are now handled by default:
- `change` (BaseEvent) - Generic change event. Triggered when the revision counter is increased.
- `change:extent` (ObjectEvent)
- `change:maxResolution` (ObjectEvent)
- `change:maxZoom` (ObjectEvent)
- `change:minResolution` (ObjectEvent)
- `change:minZoom` (ObjectEvent)
- `change:opacity` (ObjectEvent)
- `change:source` (ObjectEvent)
- `change:visible` (ObjectEvent)
- `change:zIndex` (ObjectEvent)
- `error` (BaseEvent) - Generic error event. Triggered when an error occurs.
- `postrender` (RenderEvent) - Triggered after a layer is rendered.
- `prerender` (RenderEvent) - Triggered before a layer is rendered.
- `propertychange` (ObjectEvent) - Triggered when a property is changed.
- `sourceready` (BaseEvent)

Author: d-koppenhagen

docs/pluginsguide/index.md

@@ -44,8 +44,9 @@ const props = withDefaults(
 // Create the layer
 // Changes will be applied and the layer will be removed on unmount.
 // The last parameter will receive the event names which should be handled by the target component.
+// Common Layer events (https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html) are already handled within the composable
 // Check out the sources of the composable for more details.
-const { layer } = useLayer(FooLayer, props, ['change:opacity']);
+const { layer } = useLayer(FooLayer, props, ['foo']);
 
 // source components will rely on the layer (depends on the source type)
 provide("vectorLayer", layer);

src/composables/useLayer.ts

@@ -4,7 +4,7 @@ import type { Map } from "ol";
 import type LayerGroup from "ol/layer/Group";
 import type { Layer } from "ol/layer";
 import usePropsAsObjectProperties from "./usePropsAsObjectProperties";
-import { useOpenLayersEvents } from "./useOpenLayersEvents";
+import { LAYER_EVENTS, useOpenLayersEvents } from "./useOpenLayersEvents";
 import type { OverviewMap } from "ol/control";
 
 /**
@@ -23,7 +23,7 @@ export default function useLayer<T extends Layer>(
 
   const layer = shallowRef(new LayerClass(properties));
 
-  useOpenLayersEvents(layer, eventsToHandle);
+  useOpenLayersEvents(layer, [...LAYER_EVENTS, ...eventsToHandle]);
 
   const map = inject<Map>("map");
   const layerGroup = inject<LayerGroup | null>("layerGroup", null);

src/composables/useOpenLayersEvents.ts

@@ -1,17 +1,32 @@
 import {
-  type Ref,
-  onMounted,
-  getCurrentInstance,
   type ComputedRef,
-  isRef,
+  getCurrentInstance,
   inject,
+  isRef,
+  onMounted,
+  type Ref,
   type ShallowRef,
 } from "vue";
 import type BaseObject from "ol/Object";
 import type { EventTypes } from "ol/Observable";
 
 export const COMMON_EVENTS = ["change", "error", "propertychange"];
 
+export const LAYER_EVENTS = [
+  "change:extent",
+  "change:maxResolution",
+  "change:maxZoom",
+  "change:minResolution",
+  "change:minZoom",
+  "change:opacity",
+  "change:source",
+  "change:visible",
+  "change:zIndex",
+  "postrender",
+  "prerender",
+  "sourceready",
+];
+
 export const TILE_SOURCE_EVENTS = [
   "tileloadend",
   "tileloaderror",