feat(ol-interaction-transform): relay events

closes #270

Author: d-koppenhagen

docs/componentsguide/interactions/transform/index.md

@@ -74,3 +74,16 @@ import TransformDemo from "@demos/TransformDemo.vue"
 
 - **Type**: `Boolean`
 - **Default**: `true`
+
+## Events
+
+- `select`
+- `rotatestart`
+- `rotating`
+- `rotateend`
+- `translatestart`
+- `translating`
+- `translateend`
+- `scalestart`
+- `scaling`
+- `scaleend`

src/components/interaction/OlTransformInteraction.vue

@@ -8,6 +8,7 @@ import Transform from "ol-ext/interaction/Transform";
 import type { Condition } from "ol/events/condition";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import { useOpenLayersEvents } from "@/composables/useOpenLayersEvents";
 
 const props = withDefaults(
   defineProps<{
@@ -35,6 +36,11 @@ const props = withDefaults(
   },
 );
 
+// prevent warnings caused by event pass-through via useOpenLayersEvents composable
+defineOptions({
+  inheritAttrs: false,
+});
+
 const map = inject<Map>("map");
 
 const { properties } = usePropsAsObjectProperties(props);
@@ -47,6 +53,19 @@ const transform = computed(() => {
   return olTransform;
 });
 
+useOpenLayersEvents(transform, [
+  "select",
+  "rotatestart",
+  "rotating",
+  "rotateend",
+  "translatestart",
+  "translating",
+  "translateend",
+  "scalestart",
+  "scaling",
+  "scaleend",
+]);
+
 watch(transform, (newVal, oldVal) => {
   map?.removeInteraction(oldVal);
   map?.addInteraction(newVal);

src/demos/TransformDemo.vue

@@ -30,19 +30,33 @@
           @drawend="drawend"
         />
         <ol-style>
-          <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
-          <ol-style-fill color="rgba(255, 0, 0, 0.4)"></ol-style-fill>
+          <ol-style-stroke color="blue" :width="2" />
+          <ol-style-fill color="rgba(255, 0, 0, 0.4)" />
         </ol-style>
       </ol-source-vector>
     </ol-vector-layer>
 
-    <ol-interaction-transform> </ol-interaction-transform>
+    <ol-interaction-transform
+      @select="log('select', $event)"
+      @rotatestart="log('rotatestart', $event)"
+      @rotating="log('rotate', $event)"
+      @rotateend="log('rotateend', $event)"
+      @translatestart="log('translatestart', $event)"
+      @translate="log('translate', $event)"
+      @translateend="log('translateend', $event)"
+      @scalestart="log('scalestart', $event)"
+      @scaling="log('scaling', $event)"
+      @scaleend="log('scaleend', $event)"
+    />
   </ol-map>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { GeoJSON } from "ol/format";
+import type { DrawEvent } from "ol/interaction/Draw";
+import type { Feature } from "ol";
+import type { Geometry } from "ol/geom";
 
 const map = ref("");
 const center = ref([-102.13121, 40.2436]);
@@ -93,12 +107,16 @@ const geojsonObject = {
   ],
 };
 
-const zones = ref([]);
+const zones = ref<Feature<Geometry>[]>([]);
 
-const drawend = (event) => {
+const drawend = (event: DrawEvent) => {
   zones.value.push(event.feature);
   drawEnabled.value = false;
 };
 
+const log = (eventType: string, event: unknown) => {
+  console.log(eventType, event);
+};
+
 zones.value = new GeoJSON().readFeatures(geojsonObject);
 </script>