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

Author: d-koppenhagen

docs/componentsguide/interactions/dragrotatezoom/index.md

@@ -34,21 +34,12 @@ import DragRotateZoomDemo from "@demos/DragRotateZoomDemo.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/DragRotateAndZoomInteraction.vue

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

src/components/interaction/OlDragRotateZoomInteraction.vue

@@ -1,11 +1,11 @@
 import OlClusterSelectInteraction from "./OlClusterSelectInteraction.vue";
 import OlDragRotateInteraction from "./OlDragRotateInteraction.vue";
+import OlDragRotateZoomInteraction from "./OlDragRotateZoomInteraction.vue";
 import SelectInteraction from "./SelectInteraction.vue";
 import DrawInteraction from "./DrawInteraction.vue";
 import SnapInteraction from "./SnapInteraction.vue";
 import ModifyInteraction from "./ModifyInteraction.vue";
 import TransformInteraction from "./TransformInteraction.vue";
-import DragRotateAndZoomInteraction from "./DragRotateAndZoomInteraction.vue";
 
 function install(app) {
   if (install.installed) {
@@ -16,15 +16,12 @@ function install(app) {
 
   app.component("ol-interaction-clusterselect", OlClusterSelectInteraction);
   app.component("ol-interaction-dragrotate", OlDragRotateInteraction);
+  app.component("ol-interaction-dragrotatezoom", OlDragRotateZoomInteraction);
   app.component(SelectInteraction.name, SelectInteraction);
   app.component(DrawInteraction.name, DrawInteraction);
   app.component(SnapInteraction.name, SnapInteraction);
   app.component(ModifyInteraction.name, ModifyInteraction);
   app.component(TransformInteraction.name, TransformInteraction);
-  app.component(
-    DragRotateAndZoomInteraction.name,
-    DragRotateAndZoomInteraction
-  );
 }
 
 export default install;
@@ -33,10 +30,10 @@ export {
   install,
   OlClusterSelectInteraction,
   OlDragRotateInteraction,
+  OlDragRotateZoomInteraction,
   SelectInteraction,
   DrawInteraction,
   SnapInteraction,
   ModifyInteraction,
   TransformInteraction,
-  DragRotateAndZoomInteraction,
 };

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>