diff --git a/docs/pluginsguide/index.md b/docs/pluginsguide/index.md index 31aa46a..5304c98 100644 --- a/docs/pluginsguide/index.md +++ b/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); diff --git a/src/composables/useLayer.ts b/src/composables/useLayer.ts index f51334c..be57e29 100644 --- a/src/composables/useLayer.ts +++ b/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( const layer = shallowRef(new LayerClass(properties)); - useOpenLayersEvents(layer, eventsToHandle); + useOpenLayersEvents(layer, [...LAYER_EVENTS, ...eventsToHandle]); const map = inject("map"); const layerGroup = inject("layerGroup", null); diff --git a/src/composables/useOpenLayersEvents.ts b/src/composables/useOpenLayersEvents.ts index b9c7d83..a5f9d4d 100644 --- a/src/composables/useOpenLayersEvents.ts +++ b/src/composables/useOpenLayersEvents.ts @@ -1,10 +1,10 @@ import { - type Ref, - onMounted, - getCurrentInstance, type ComputedRef, - isRef, + getCurrentInstance, inject, + isRef, + onMounted, + type Ref, type ShallowRef, } from "vue"; import type BaseObject from "ol/Object"; @@ -12,6 +12,21 @@ 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",