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

Author: d-koppenhagen

docs/componentsguide/interactions/clusterselect/index.md

@@ -17,7 +17,7 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view
       ref="view"
@@ -73,62 +73,47 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 import markerIcon from "@/assets/marker.png";
 
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(5);
-    const rotation = ref(0);
-
-    const overrideStyleFunction = (feature, style) => {
-      let clusteredFeatures = feature.get("features");
-      let size = clusteredFeatures.length;
-
-      let color = size > 20 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
-      var radius = Math.max(8, Math.min(size, 20));
-      let dash = (2 * Math.PI * radius) / 6;
-      let calculatedDash = [0, dash, dash, dash, dash, dash, dash];
-
-      style.getImage().getStroke().setLineDash(dash);
-      style
-        .getImage()
-        .getStroke()
-        .setColor("rgba(" + color + ",0.5)");
-      style.getImage().getStroke().setLineDash(calculatedDash);
-      style
-        .getImage()
-        .getFill()
-        .setColor("rgba(" + color + ",1)");
-
-      style.getImage().setRadius(radius);
-
-      style.getText().setText(size.toString());
-    };
-
-    const getRandomInRange = (from, to, fixed) => {
-      return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-    };
-
-    const featureSelected = (event) => {
-      console.log(event);
-    };
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      markerIcon,
-      getRandomInRange,
-      overrideStyleFunction,
-      featureSelected,
-    };
-  },
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(5);
+const rotation = ref(0);
+
+const overrideStyleFunction = (feature, style) => {
+  const clusteredFeatures = feature.get("features");
+  const size = clusteredFeatures.length;
+
+  const color = size > 20 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
+  const radius = Math.max(8, Math.min(size, 20));
+  const dash = (2 * Math.PI * radius) / 6;
+  const calculatedDash = [0, dash, dash, dash, dash, dash, dash];
+
+  style.getImage().getStroke().setLineDash(dash);
+  style
+    .getImage()
+    .getStroke()
+    .setColor("rgba(" + color + ",0.5)");
+  style.getImage().getStroke().setLineDash(calculatedDash);
+  style
+    .getImage()
+    .getFill()
+    .setColor("rgba(" + color + ",1)");
+
+  style.getImage().setRadius(radius);
+
+  style.getText().setText(size.toString());
+};
+
+const getRandomInRange = (from, to, fixed) => {
+  return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
+};
+
+const featureSelected = (event) => {
+  console.log(event);
 };
 </script>
 ```

src/components/interaction/ClusterSelectInteraction.vue

@@ -0,0 +1,89 @@
+<template lang="">
+  <slot> </slot>
+</template>
+
+<script setup>
+import { provide, inject, watch, onMounted, onUnmounted, computed } from "vue";
+
+import Select from "ol-ext/interaction/SelectCluster";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+const emit = defineEmits(["select"]);
+const props = defineProps({
+  multi: {
+    type: Boolean,
+    default: false,
+  },
+  condition: {
+    type: Function,
+  },
+  filter: {
+    type: Function,
+  },
+  pointRadius: {
+    type: Number,
+    default: 7,
+  },
+  animate: {
+    type: Boolean,
+    default: true,
+  },
+  animationDuration: {
+    type: Number,
+    default: 500,
+  },
+  spiral: {
+    type: Boolean,
+    default: true,
+  },
+  selectCluster: {
+    type: Boolean,
+    default: true,
+  },
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  circleMaxObjects: {
+    type: Number,
+  },
+  maxObjects: {
+    type: Number,
+  },
+  featureStyle: {
+    type: Function,
+  },
+});
+
+const map = inject("map");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const select = computed(() => {
+  const s = new Select(properties);
+  s.on("select", (event) => {
+    emit("select", event);
+  });
+
+  return s;
+});
+
+watch(select, (newVal, oldVal) => {
+  map.removeInteraction(oldVal);
+  map.addInteraction(newVal);
+
+  map.changed();
+});
+
+onMounted(() => {
+  map.addInteraction(select.value);
+});
+
+onUnmounted(() => {
+  map.removeInteraction(select.value);
+});
+
+provide("stylable", select);
+</script>
+
+<style lang=""></style>

src/components/interaction/OlClusterSelectInteraction.vue

@@ -1,5 +1,5 @@
+import OlClusterSelectInteraction from "./OlClusterSelectInteraction.vue";
 import SelectInteraction from "./SelectInteraction.vue";
-import ClusterSelectInteraction from "./ClusterSelectInteraction.vue";
 import DrawInteraction from "./DrawInteraction.vue";
 import SnapInteraction from "./SnapInteraction.vue";
 import ModifyInteraction from "./ModifyInteraction.vue";
@@ -13,8 +13,8 @@ function install(app) {
 
   install.installed = true;
 
+  app.component("ol-interaction-clusterselect", OlClusterSelectInteraction);
   app.component(SelectInteraction.name, SelectInteraction);
-  app.component(ClusterSelectInteraction.name, ClusterSelectInteraction);
   app.component(DrawInteraction.name, DrawInteraction);
   app.component(SnapInteraction.name, SnapInteraction);
   app.component(ModifyInteraction.name, ModifyInteraction);
@@ -29,8 +29,8 @@ export default install;
 
 export {
   install,
+  OlClusterSelectInteraction,
   SelectInteraction,
-  ClusterSelectInteraction,
   DrawInteraction,
   SnapInteraction,
   ModifyInteraction,