refactor(ol-interaction-dragrotate): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/interactions/dragrotate/index.md

@@ -34,21 +34,12 @@ import DragRotateDemo from "@demos/DragRotateDemo.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([-102.13121, 40.2436]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(5);
 
-    return {
-      center,
-      projection,
-      zoom,
-    };
-  },
-};
+const center = ref([-102.13121, 40.2436]);
+const projection = ref("EPSG:4326");
+const zoom = ref(5);
 </script>
 ```
 

src/components/interaction/DragRotateInteraction.vue

@@ -0,0 +1,50 @@
+<template lang="">
+  <slot> </slot>
+</template>
+
+<script setup>
+import { inject, watch, onMounted, onUnmounted, computed } from "vue";
+
+import DragRotate from "ol/interaction/DragRotate";
+
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+const props = defineProps({
+  condition: {
+    type: Function,
+  },
+  duration: {
+    type: Number,
+    default: 250,
+  },
+});
+
+const map = inject("map");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const dragrotate = computed(() => {
+  const s = new DragRotate({
+    ...properties,
+  });
+
+  return s;
+});
+
+watch(dragrotate, (newVal, oldVal) => {
+  map.removeInteraction(oldVal);
+  map.addInteraction(newVal);
+
+  map.changed();
+});
+
+onMounted(() => {
+  map.addInteraction(dragrotate.value);
+});
+
+onUnmounted(() => {
+  map.removeInteraction(dragrotate.value);
+});
+</script>
+
+<style lang=""></style>

src/components/interaction/OlDragRotateInteraction.vue

@@ -1,4 +1,5 @@
 import OlClusterSelectInteraction from "./OlClusterSelectInteraction.vue";
+import OlDragRotateInteraction from "./OlDragRotateInteraction.vue";
 import SelectInteraction from "./SelectInteraction.vue";
 import DrawInteraction from "./DrawInteraction.vue";
 import SnapInteraction from "./SnapInteraction.vue";
@@ -14,6 +15,7 @@ function install(app) {
   install.installed = true;
 
   app.component("ol-interaction-clusterselect", OlClusterSelectInteraction);
+  app.component("ol-interaction-dragrotate", OlDragRotateInteraction);
   app.component(SelectInteraction.name, SelectInteraction);
   app.component(DrawInteraction.name, DrawInteraction);
   app.component(SnapInteraction.name, SnapInteraction);
@@ -30,6 +32,7 @@ export default install;
 export {
   install,
   OlClusterSelectInteraction,
+  OlDragRotateInteraction,
   SelectInteraction,
   DrawInteraction,
   SnapInteraction,

src/components/interaction/index.js

@@ -19,19 +19,10 @@
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([-102.13121, 40.2436]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(5);
 
-    return {
-      center,
-      projection,
-      zoom,
-    };
-  },
-};
+const center = ref([-102.13121, 40.2436]);
+const projection = ref("EPSG:4326");
+const zoom = ref(5);
 </script>