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

Author: d-koppenhagen

docs/componentsguide/interactions/modify/index.md

@@ -63,119 +63,99 @@ import SnapModifyDemo from "@demos/SnapModifyDemo.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref, inject } from "vue";
 import { GeoJSON } from "ol/format";
 import { Fill, Stroke, Style } from "ol/style";
 import { Collection } from "ol";
-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 modifyEnabled = ref(false);
-    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 selectedFeatures = ref(new Collection());
-
-    const drawend = (event) => {
-      zones.value.push(event.feature);
-      selectedFeatures.value.push(event.feature);
-
-      modifyEnabled.value = true;
-      drawEnabled.value = false;
-    };
-
-    zones.value = new GeoJSON().readFeatures(geojsonObject);
-
-    function vectorStyle() {
-      const style = new Style({
-        stroke: new Stroke({
-          color: "blue",
-          width: 3,
-        }),
-        fill: new Fill({
-          color: "rgba(0, 0, 255, 0.4)",
-        }),
-      });
-      return style;
-    }
-
-    const geoJsonFormat = new GeoJSON();
-    const selectConditions = inject("ol-selectconditions");
-    const selectCondition = selectConditions.click;
-
-    function featureSelected(event) {
-      modifyEnabled.value = false;
-      if (event.selected.length > 0) {
-        modifyEnabled.value = true;
-      }
-      selectedFeatures.value = event.target.getFeatures();
-    }
-
-    return {
-      map,
-      vectorStyle,
-      geoJsonFormat,
-      featureSelected,
-      selectCondition,
-      zones,
-      center,
-      projection,
-      zoom,
-      rotation,
-      modifyEnabled,
-      drawEnabled,
-      drawend,
-      selectedFeatures,
-    };
+
+const map = ref("");
+const center = ref([-102.13121, 40.2436]);
+const projection = ref("EPSG:4326");
+const zoom = ref(5);
+const rotation = ref(0);
+const modifyEnabled = ref(false);
+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 selectedFeatures = ref(new Collection());
+
+const drawend = (event) => {
+  zones.value.push(event.feature);
+  selectedFeatures.value.push(event.feature);
+
+  modifyEnabled.value = true;
+  drawEnabled.value = false;
+};
+
+zones.value = new GeoJSON().readFeatures(geojsonObject);
+
+function vectorStyle() {
+  const style = new Style({
+    stroke: new Stroke({
+      color: "blue",
+      width: 3,
+    }),
+    fill: new Fill({
+      color: "rgba(0, 0, 255, 0.4)",
+    }),
+  });
+  return style;
+}
+
+const geoJsonFormat = new GeoJSON();
+const selectConditions = inject("ol-selectconditions");
+const selectCondition = selectConditions.click;
+
+function featureSelected(event) {
+  modifyEnabled.value = false;
+  if (event.selected.length > 0) {
+    modifyEnabled.value = true;
+  }
+  selectedFeatures.value = event.target.getFeatures();
+}
 </script>
 ```