rework Menu Bar / Rework socketioStore

src/components/LRoutingMachine.vue

@@ -0,0 +1,84 @@
+<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 '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;
+}>();
+
+// 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;
+
+// State
+const ready = ref(false);
+const layer = ref<any>(null);
+
+// Methods
+function add() {
+  if (!props.mapObject) return;
+
+  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;
+
+  ready.value = true;
+}
+
+// Watchers
+watch(
+  () => props.mapObject,
+  (val) => {
+    if (!val) return;
+    add();
+  },
+);
+
+// Lifecycle
+onMounted(() => {
+  add();
+});
+
+onBeforeUnmount(() => {
+  if (layer.value) {
+    layer.value.remove();
+  }
+});
+</script>