extensive changes

src/components/LRoutingMachine.vue

@@ -1,84 +1,73 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';
-import L from 'leaflet';
+import {
+  ref,
+  markRaw,
+  inject,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  useAttrs,
+  defineEmits,
+} from 'vue';
+
+import { routingControlProps, setupRoutingControl } from 'functions/routingControl';
+import { Utilities, InjectionKeys } from '@vue-leaflet/vue-leaflet';
+
+import 'leaflet';
 import 'leaflet-routing-machine';
 import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';
-import type { IRouter, IGeocoder, LineOptions } from 'leaflet-routing-machine';
 
-// Props
-const props = defineProps<{
-  mapObject?: any;
-  visible?: boolean;
-  waypoints: any[];
-  router?: IRouter;
-  plan?: L.Routing.Plan;
-  geocoder?: IGeocoder;
-  fitSelectedRoutes?: string | boolean;
-  lineOptions?: LineOptions;
-  routeLine?: Function;
-  autoRoute?: boolean;
-  routeWhileDragging?: boolean;
-  routeDragInterval?: number;
-  waypointMode?: string;
-  useZoomParameter?: boolean;
-  showAlternatives?: boolean;
-  altLineOptions?: LineOptions;
+import type L from 'leaflet';
+
+// ---- Emits ----
+const emit = defineEmits<{
+  (e: 'ready', value: L.Routing.Control): void;
 }>();
 
-// Defaults
-const visible = props.visible ?? true;
-const fitSelectedRoutes = props.fitSelectedRoutes ?? 'smart';
-const autoRoute = props.autoRoute ?? true;
-const routeWhileDragging = props.routeWhileDragging ?? false;
-const routeDragInterval = props.routeDragInterval ?? 500;
-const waypointMode = props.waypointMode ?? 'connect';
-const useZoomParameter = props.useZoomParameter ?? false;
-const showAlternatives = props.showAlternatives ?? false;
+// ---- Props ----
+const props = defineProps(routingControlProps);
 
-// State
-const ready = ref(false);
-const layer = ref<any>(null);
+// ---- Attrs (for events) ----
+const attrs = useAttrs();
 
-// Methods
-function add() {
-  if (!props.mapObject) return;
+// ---- Injections ----
+const { UseGlobalLeafletInjection, RegisterControlInjection } = InjectionKeys;
+const { WINDOW_OR_GLOBAL, assertInject, propsBinder, remapEvents } = Utilities;
 
-  const options = {
-    waypoints: props.waypoints,
-    fitSelectedRoutes,
-    autoRoute,
-    routeWhileDragging,
-    routeDragInterval,
-    waypointMode,
-    useZoomParameter,
-    showAlternatives,
-  };
-  console.log(L.Routing);
-  const routingLayer = L.Routing.control(options);
-  routingLayer.addTo(props.mapObject);
-  layer.value = routingLayer;
+const useGlobalLeaflet = inject(UseGlobalLeafletInjection, false);
+const registerControl = assertInject(RegisterControlInjection);
 
-  ready.value = true;
-}
+// ---- State ----
+const leafletObject = ref<L.Routing.Control | null>(null);
 
-// Watchers
-watch(
-  () => props.mapObject,
-  (val) => {
-    if (!val) return;
-    add();
-  },
-);
+// ---- Setup logic ----
+const { options, methods } = setupRoutingControl(props);
 
-// Lifecycle
-onMounted(() => {
-  add();
+onMounted(async () => {
+  const { routing } = useGlobalLeaflet
+    ? (WINDOW_OR_GLOBAL as any).L
+    : await import('leaflet/dist/leaflet-src.esm');
+
+  const { listeners } = remapEvents(attrs);
+
+  leafletObject.value = markRaw(routing.control(options));
+  leafletObject.value.on(listeners);
+
+  propsBinder(methods, leafletObject.value, props);
+  registerControl({ leafletObject: leafletObject.value });
+
+  await nextTick();
+  emit('ready', leafletObject.value);
 });
 
 onBeforeUnmount(() => {
-  if (layer.value) {
-    layer.value.remove();
+  if (leafletObject.value) {
+    leafletObject.value.setWaypoints([]);
+    leafletObject.value.remove();
   }
 });
 </script>