refactor: ts and composition api for base components

src/renderer/components/BaseMap.vue

@@ -1,95 +1,93 @@
 <template>
    <div id="map" class="map" />
 </template>
-<script>
-import L from 'leaflet';
+
+<script setup lang="ts">
+import { onMounted, PropType, Ref, ref } from 'vue';
+import * as L from 'leaflet';
 import {
    point,
    lineString,
    polygon
 } from '@turf/helpers';
+import { GeoJsonObject } from 'geojson';
 import { getArrayDepth } from 'common/libs/getArrayDepth';
 
-export default {
-   name: 'BaseMap',
-   props: {
-      points: [Object, Array],
-      isMultiSpatial: Boolean
-   },
-   data () {
-      return {
-         map: null,
-         markers: [],
-         center: null
-      };
-   },
-   mounted () {
-      if (this.isMultiSpatial) {
-         for (const element of this.points)
-            this.markers.push(this.getMarkers(element));
-      }
-      else {
-         this.markers = this.getMarkers(this.points);
+interface Coordinates { x: number; y: number }
 
-         if (!Array.isArray(this.points))
-            this.center = [this.points.y, this.points.x];
-      }
+const props = defineProps({
+   points: [Object, Array] as PropType<Coordinates | Coordinates[]>,
+   isMultiSpatial: Boolean
+});
+const map: Ref<L.Map> = ref(null);
+const markers: Ref<GeoJsonObject | GeoJsonObject[]> = ref(null);
+const center: Ref<[number, number]> = ref(null);
 
-      this.map = L.map('map', {
-         center: this.center || [0, 0],
-         zoom: 15,
-         minZoom: 1,
-         attributionControl: false
-      });
-
-      L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(this.map);
-
-      const geoJsonObj = L.geoJSON(this.markers, {
-         style: function () {
-            return {
-               weight: 2,
-               fillColor: '#ff7800',
-               color: '#ff7800',
-               opacity: 0.8,
-               fillOpacity: 0.4
-            };
-         },
-         pointToLayer: function (feature, latlng) {
-            return L.circleMarker(latlng, {
-               radius: 7,
-               weight: 2,
-               fillColor: '#ff7800',
-               color: '#ff7800',
-               opacity: 0.8,
-               fillOpacity: 0.4
-            });
-         }
-      }).addTo(this.map);
-
-      const southWest = L.latLng(-90, -180);
-      const northEast = L.latLng(90, 180);
-      const bounds = L.latLngBounds(southWest, northEast);
-      this.map.setMaxBounds(bounds);
-
-      if (!this.center) this.map.fitBounds(geoJsonObj.getBounds());
-
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-         attribution: '&copy; <b>OpenStreetMap</b>'
-      }).addTo(this.map);
-   },
-   methods: {
-      getMarkers (points) {
-         if (Array.isArray(points)) {
-            if (getArrayDepth(points) === 1)
-               return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
-            else
-               return polygon(points.map(arr => arr.reduce((acc, curr) => [...acc, [curr.x, curr.y]], [])));
-         }
-         else
-            return point([points.x, points.y]);
-      }
+const getMarkers = (points: Coordinates) => {
+   if (Array.isArray(points)) {
+      if (getArrayDepth(points) === 1)
+         return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+      else
+         return polygon(points.map(arr => arr.reduce((acc: Coordinates[], curr: Coordinates) => [...acc, [curr.x, curr.y]], [])));
    }
+   else
+      return point([points.x, points.y]);
 };
+
+onMounted(() => {
+   if (props.isMultiSpatial) {
+      for (const element of props.points as Coordinates[])
+         (markers.value as GeoJsonObject[]).push(getMarkers(element));
+   }
+   else {
+      markers.value = getMarkers(props.points as Coordinates);
+
+      if (!Array.isArray(props.points))
+         center.value = [props.points.y, props.points.x];
+   }
+
+   map.value = L.map('map', {
+      center: center.value || [0, 0],
+      zoom: 15,
+      minZoom: 1,
+      attributionControl: false
+   });
+
+   L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(map.value);
+
+   const geoJsonObj = L.geoJSON((markers.value as GeoJsonObject), {
+      style: function () {
+         return {
+            weight: 2,
+            fillColor: '#ff7800',
+            color: '#ff7800',
+            opacity: 0.8,
+            fillOpacity: 0.4
+         };
+      },
+      pointToLayer: function (feature, latlng) {
+         return L.circleMarker(latlng, {
+            radius: 7,
+            weight: 2,
+            fillColor: '#ff7800',
+            color: '#ff7800',
+            opacity: 0.8,
+            fillOpacity: 0.4
+         });
+      }
+   }).addTo(map.value);
+
+   const southWest = L.latLng(-90, -180);
+   const northEast = L.latLng(90, 180);
+   const bounds = L.latLngBounds(southWest, northEast);
+   map.value.setMaxBounds(bounds);
+
+   if (!center.value) map.value.fitBounds(geoJsonObj.getBounds());
+
+   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <b>OpenStreetMap</b>'
+   }).addTo(map.value);
+});
 </script>
 
 <style lang="scss">