refactor(ol-source-image-static): pass-through all props and events from ol/source/ImageStatic

BREAKING CHANGE:
- drop prop `imageSmoothing`, use `interpolate`
- set compatible OpenLayers version to latest (7.4.0)

Author: d-koppenhagen

docs/componentsguide/sources/cluster/index.md

@@ -114,7 +114,7 @@ None.
 ## Events
 
 You have access to all Events from the underlying source.
-Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_BingMaps-BingMaps.html) to see the available events tht will be fired.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html) to see the available events tht will be fired.
 
 ```html
 <ol-source-cluster @error="handleEvent" />
@@ -123,7 +123,7 @@ Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc
 ## Methods
 
 You have access to all Methods from the underlying source.
-Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_BingMaps-BingMaps.html) to see the available methods.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html) to see the available methods.
 
 To access the source, you can use a `ref()` as shown below:
 

docs/componentsguide/sources/imagestatic/index.md

@@ -1,6 +1,6 @@
 # ol-source-image-static
 
-A layer source for displaying a single, static image.
+> Layer source for displaying a single, static image.
 
 <script setup>
 import ImageLayerDemo from "@demos/ImageLayerDemo.vue"
@@ -64,47 +64,49 @@ const imgCopyright = ref('© <a href="http://xkcd.com/license.html">xkcd</a>');
 
 ## Properties
 
-### attributions
+### Props from OpenLayers
 
-- **Type**: `string`
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageStatic-Static.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
 
-Attributions
+### Deviating Properties
 
-### crossOrigin
+None.
 
-- **Type**: `string`
-- **Default**: `ol-layer`
+## Events
 
-The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer.
+You have access to all Events from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageStatic-Static.html) to see the available events tht will be fired.
 
-### imageExtent
-
-- **Type**: `Array`
-
-Extent of the image in map coordinates. This is the [left, bottom, right, top] map coordinates of your image.
-
-### imageSmoothing
-
-- **Type**: `boolean`
-- **Default**: `true`
-
-Enable image smoothing.
-
-### projection
-
-- **Type**: `string or object (options projection)`
-- **Default**: `Projection. Default is the view projection.`
+```html
+<ol-source-image-static :url="imgUrl" @error="handleEvent" />
+```
 
-The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer.
+## Methods
 
-### imageSize
+You have access to all Methods from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageStatic-Static.html) to see the available methods.
 
-- **Type**: `Array`
+To access the source, you can use a `ref()` as shown below:
 
-Size of the image in pixels. Usually the image size is auto-detected, so this only needs to be set if auto-detection fails for some reason.
+```vue
+<template>
+  <!-- ... -->
+  <ol-source-image-static :url="url" ref="sourceRef" />
+  <!-- ... -->
+</template>
 
-### url
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type ImageStatic from "ol/source/ImageStatic";
 
-- **Type**: `string`
+const sourceRef = ref<{ source: ImageStatic }>(null);
 
-Image URL.
+onMounted(() => {
+  const source: ImageStatic = sourceRef.value?.source;
+  // call your method on `source`
+});
+</script>
+```

docs/get-started.md

@@ -2,7 +2,7 @@
 
 ## Installation
 
-vue3-openlayers works with Vue.js **^3.0** and OpenLayers **^6.6.1**
+vue3-openlayers works with Vue.js **^3.0** and OpenLayers **^7.3.0**
 
 Install current **stable version**
 

package-lock.json

@@ -65,9 +65,9 @@
   "dependencies": {
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
-    "ol": "^7.3.0",
+    "ol": "^7.4.0",
     "ol-contextmenu": "^5.2.1",
-    "ol-ext": "^4.0.7",
+    "ol-ext": "^4.0.8",
     "proj4": "^2.9.0"
   },
   "browserslist": [

package.json

@@ -3,43 +3,37 @@
 </template>
 <script setup lang="ts">
 import Static, { type Options } from "ol/source/ImageStatic";
-import Projection from "ol/proj/Projection";
-import { inject, onMounted, onUnmounted, watch } from "vue";
-import type { Extent } from "ol/extent";
+import { computed, inject, onMounted, onUnmounted, watch, type Ref } from "vue";
 import type ImageLayer from "ol/layer/Image";
 import type ImageSource from "ol/source/Image";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import type { ProjectionLike } from "ol/proj";
+import eventGateway from "@/helpers/eventGateway";
+import projectionFromProperties from "@/helpers/projection";
 
-const props = withDefaults(
-  defineProps<{
-    attributions?: string;
-    crossOrigin?: string;
-    imageExtent?: Extent;
-    projection?: ProjectionLike;
-    imageSmoothing?: boolean;
-    imageSize?: number[];
-    url: string;
-  }>(),
-  {
-    imageSmoothing: true,
-  }
-);
+const props = withDefaults(defineProps<Options>(), {
+  interpolate: true,
+});
+const emit = defineEmits([]);
 
 const layer = inject<ImageLayer<ImageSource> | null>("imageLayer");
 const { properties } = usePropsAsObjectProperties(props);
 
 const createSource = () => {
-  return new Static({
+  const s = new Static({
     ...properties,
-    projection:
-      typeof properties.projection === "string"
-        ? properties.projection
-        : // @ts-ignore
-          new Projection({
-            ...properties.projection,
-          }),
-  } as Options);
+    projection: projectionFromProperties(properties.projection),
+  });
+
+  eventGateway(emit, s, [
+    "change",
+    "error",
+    "imageloadend",
+    "imageloaderror",
+    "imageloadstart",
+    "propertychange",
+  ]);
+
+  return s;
 };
 
 let source = createSource();

src/components/sources/OlSourceImageStatic.vue

@@ -7,6 +7,7 @@ export default function eventGateway(
 ) {
   events.forEach((event: string) => {
     instance.on(event, (...args: unknown[]) => {
+      console.log(event, args);
       emit(event, ...args);
     });
   });

src/helpers/eventGateway.ts

@@ -0,0 +1,8 @@
+import { Projection, type ProjectionLike } from "ol/proj";
+
+export default function projectionFromProperties(projection: ProjectionLike) {
+  if (!projection) return;
+  if (typeof projection === "string") return projection;
+  if (projection instanceof Projection) return projection;
+  return new Projection(projection);
+}