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

Author: d-koppenhagen

docs/componentsguide/interactions/transform/index.md

@@ -53,86 +53,67 @@ import TransformDemo from "@demos/TransformDemo.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 import { GeoJSON } from "ol/format";
 
-export default {
-  setup() {
-    const map = ref("");
-    const center = ref([-102.13121, 40.2436]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(5);
-    const rotation = ref(0);
-
-    const drawEnabled = ref(false);
-
-    const geojsonObject = {
-      type: "FeatureCollection",
-      crs: {
-        type: "name",
-        properties: {
-          name: "EPSG:4326",
-        },
-      },
-      features: [
-        {
-          type: "Feature",
-          geometry: {
-            type: "Polygon",
-            coordinates: [
-              [
-                [-103.86923852630616, 43.45599322423934],
-                [-103.90891107984544, 39.34240191087722],
-                [-98.76630637117387, 39.558687199211114],
-                [-98.89435771175386, 43.945405844902986],
-                [-103.86923852630616, 43.45599322423934],
-              ],
-            ],
-          },
-        },
-        {
-          type: "Feature",
-          geometry: {
-            type: "Polygon",
-            coordinates: [
-              [
-                [-103.85636392303468, 38.10970692739486],
-                [-103.86770698495866, 33.218572724914544],
-                [-98.20654544301988, 33.6532810221672],
-                [-98.4408283538437, 38.31894739375114],
-                [-103.85636392303468, 38.10970692739486],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    const zones = ref([]);
-
-    const drawend = (event) => {
-      zones.value.push(event.feature);
-      drawEnabled.value = false;
-    };
-
-    zones.value = new GeoJSON().readFeatures(geojsonObject);
-
-    const geoJsonFormat = new GeoJSON();
-
-    return {
-      map,
-      geoJsonFormat,
-      zones,
-      center,
-      projection,
-      zoom,
-      rotation,
-      drawEnabled,
-      drawend,
-    };
+const map = ref("");
+const center = ref([-102.13121, 40.2436]);
+const projection = ref("EPSG:4326");
+const zoom = ref(5);
+const rotation = ref(0);
+const drawEnabled = ref(false);
+
+const geojsonObject = {
+  type: "FeatureCollection",
+  crs: {
+    type: "name",
+    properties: {
+      name: "EPSG:4326",
+    },
   },
+  features: [
+    {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [-103.86923852630616, 43.45599322423934],
+            [-103.90891107984544, 39.34240191087722],
+            [-98.76630637117387, 39.558687199211114],
+            [-98.89435771175386, 43.945405844902986],
+            [-103.86923852630616, 43.45599322423934],
+          ],
+        ],
+      },
+    },
+    {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [-103.85636392303468, 38.10970692739486],
+            [-103.86770698495866, 33.218572724914544],
+            [-98.20654544301988, 33.6532810221672],
+            [-98.4408283538437, 38.31894739375114],
+            [-103.85636392303468, 38.10970692739486],
+          ],
+        ],
+      },
+    },
+  ],
 };
+
+const zones = ref([]);
+
+const drawend = (event) => {
+  zones.value.push(event.feature);
+  drawEnabled.value = false;
+};
+
+zones.value = new GeoJSON().readFeatures(geojsonObject);
 </script>
 ```
 

src/components/interaction/OlClusterSelectInteraction.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <slot> </slot>
+  <slot></slot>
 </template>
 
 <script setup>

src/components/interaction/OlDragRotateInteraction.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <slot> </slot>
+  <slot></slot>
 </template>
 
 <script setup>

src/components/interaction/OlDragRotateZoomInteraction.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <slot> </slot>
+  <slot></slot>
 </template>
 
 <script setup>

src/components/interaction/OlDrawInteraction.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <slot> </slot>
+  <slot></slot>
 </template>
 
 <script setup>

src/components/interaction/OlModifyInteraction.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <slot> </slot>
+  <slot></slot>
 </template>
 
 <script setup>

src/components/interaction/OlSelectInteraction.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <slot> </slot>
+  <slot></slot>
 </template>
 
 <script setup>

src/components/interaction/OlTransformInteraction.vue

@@ -0,0 +1,89 @@
+<template lang="">
+  <slot></slot>
+</template>
+
+<script setup>
+import { provide, inject, watch, onMounted, onUnmounted, computed } from "vue";
+
+import Transform from "ol-ext/interaction/Transform";
+
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+const props = defineProps({
+  enableRotatedTransform: {
+    type: Boolean,
+    default: false,
+  },
+  condition: {
+    type: Function,
+  },
+  addCondition: {
+    type: Function,
+  },
+  filter: {
+    type: Function,
+  },
+  layers: {
+    type: Array,
+  },
+  hitTolerance: {
+    type: Number,
+    default: 2,
+  },
+  translateFeature: {
+    type: Boolean,
+    default: true,
+  },
+  scale: {
+    type: Boolean,
+    default: true,
+  },
+  rotate: {
+    type: Boolean,
+    default: true,
+  },
+  keepAspectRatio: {
+    type: Boolean,
+    default: false,
+  },
+  translate: {
+    type: Boolean,
+    default: true,
+  },
+  stretch: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const map = inject("map");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const transform = computed(() => {
+  const interaction = new Transform({
+    ...properties,
+  });
+
+  return interaction;
+});
+
+watch(transform, (newVal, oldVal) => {
+  map.removeInteraction(oldVal);
+  map.addInteraction(newVal);
+
+  map.changed();
+});
+
+onMounted(() => {
+  map.addInteraction(transform.value);
+});
+
+onUnmounted(() => {
+  map.removeInteraction(transform.value);
+});
+
+provide("stylable", transform);
+</script>
+
+<style lang=""></style>

src/components/interaction/TransformInteraction.vue

@@ -5,7 +5,7 @@ import OlSelectInteraction from "./OlSelectInteraction.vue";
 import OlDrawInteraction from "./OlDrawInteraction.vue";
 import OlModifyInteraction from "./OlModifyInteraction.vue";
 import OlSnapInteraction from "./OlSnapInteraction.vue";
-import TransformInteraction from "./TransformInteraction.vue";
+import OlTransformInteraction from "./OlTransformInteraction.vue";
 
 function install(app) {
   if (install.installed) {
@@ -21,7 +21,7 @@ function install(app) {
   app.component("ol-interaction-draw", OlDrawInteraction);
   app.component("ol-interaction-modify", OlModifyInteraction);
   app.component("ol-interaction-snap", OlSnapInteraction);
-  app.component(TransformInteraction.name, TransformInteraction);
+  app.component("ol-interaction-transform", OlTransformInteraction);
 }
 
 export default install;
@@ -35,5 +35,5 @@ export {
   OlDrawInteraction,
   OlModifyInteraction,
   OlSnapInteraction,
-  TransformInteraction,
+  OlTransformInteraction,
 };