refactor(ol-animation-shake): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/animations/shake/index.md

@@ -15,7 +15,7 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:700px"
+    style="height: 700px"
   >
     <ol-view
       ref="view"
@@ -53,27 +53,16 @@ import ShakeAnimation from "@demos/ShakeAnimation.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(6);
-    const rotation = ref(0);
-    const getRandomInRange = (from, to, fixed) => {
-      return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-    };
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      getRandomInRange,
-      starIcon,
-    };
-  },
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6);
+const rotation = ref(0);
+const getRandomInRange = (from, to, fixed) => {
+  return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
 };
 </script>
 ```

src/components/animations/OlAnimationShake.vue

@@ -0,0 +1,36 @@
+<template lang="">
+  <slot></slot>
+</template>
+
+<script setup>
+import Shake from "ol-ext/featureanimation/Shake";
+import useAnimation from "@/composables/useAnimation";
+import useAnimationProps from "@/composables/useAnimationProps";
+
+const props = defineProps({
+  ...useAnimationProps(),
+  bounce: {
+    type: Number,
+    default: 6,
+  },
+  amplitude: {
+    type: Number,
+    default: 40,
+  },
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { map, vectorLayer, properties, animation } = useAnimation(Shake, props);
+
+defineExpose({
+  map,
+  vectorLayer,
+  properties,
+  animation,
+});
+</script>
+
+<style lang=""></style>

src/components/animations/ShakeAnimation.vue

@@ -2,7 +2,7 @@ import OLAnimationDrop from "./OLAnimationDrop.vue";
 import OlAnimationFade from "./OlAnimationFade.vue";
 import OlAnimationFeature from "./OlAnimationFeature.vue";
 import OlAnimationPath from "./OlAnimationPath.vue";
-import ShakeAnimation from "./ShakeAnimation.vue";
+import OlAnimationShake from "./OlAnimationShake.vue";
 import ZoomAnimation from "./ZoomAnimation.vue";
 import TeleportAnimation from "./TeleportAnimation.vue";
 import SlideAnimation from "./SlideAnimation.vue";
@@ -18,7 +18,7 @@ function install(app) {
   app.component("ol-animation-fade", OlAnimationFade);
   app.component("ol-animation-feature", OlAnimationFeature);
   app.component("ol-animation-path", OlAnimationPath);
-  app.component(ShakeAnimation.name, ShakeAnimation);
+  app.component("ol-animation-shake", OlAnimationShake);
   app.component(ZoomAnimation.name, ZoomAnimation);
   app.component(TeleportAnimation.name, TeleportAnimation);
   app.component(SlideAnimation.name, SlideAnimation);
@@ -32,7 +32,7 @@ export {
   OlAnimationFade,
   OlAnimationFeature,
   OlAnimationPath,
-  ShakeAnimation,
+  OlAnimationShake,
   ZoomAnimation,
   TeleportAnimation,
   SlideAnimation,

src/components/animations/index.js

@@ -40,26 +40,15 @@
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 import starIcon from "@/assets/star.png";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(6);
-    const rotation = ref(0);
-    const getRandomInRange = (from, to, fixed) => {
-      return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-    };
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      getRandomInRange,
-      starIcon,
-    };
-  },
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6);
+const rotation = ref(0);
+const getRandomInRange = (from, to, fixed) => {
+  return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
 };
 </script>