adt-js-components 1.10.6 → 1.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adt-js-components",
-  "version": "1.10.6",
+  "version": "1.10.8",
   "description": "JavaScript components for Nette framework",
   "main": "index.js",
   "scripts": {

package/src/Map/index.js

@@ -10,6 +10,7 @@ let siteKey;
 let markerImg;
 let mapProvider;
 const svgCache = new Map();
+const mapInstancesById = new Map();
 const mapInstances = new WeakMap();
 const selectedMarkers = new WeakMap();
 const selectionOrder = new WeakMap();
@@ -58,6 +59,7 @@ async function run(options) {
 			disableClickZoom = false
 		} = JSON.parse(el.dataset.adtMap);
 
+		/** @type {RouteSetting} */
 		const routeSettings = {
 			...defaultRouteSettings,
 			...route,
@@ -65,13 +67,20 @@ async function run(options) {
 			mapProvider,
 		};
 
-		if (mapInstances.has(el)) {
-			mapInstances.get(el).remove();
-			mapInstances.delete(el);
+		const elId = el.id;
+		if (elId && mapInstancesById.has(elId)) {
+			const oldMap = mapInstancesById.get(elId);
+			oldMap.remove();
+			mapInstancesById.delete(elId);
 		}
 
 		const map = L.map(el);
 		mapInstances.set(el, map);
+
+		if (elId) {
+			mapInstancesById.set(elId, map);
+		}
+
 		selectedMarkers.set(map, new Set());
 		selectionOrder.set(map, new Map());
 		markerInstances.set(map, new Map());
@@ -204,9 +213,21 @@ async function run(options) {
 				mutation.addedNodes.forEach(node => {
 					if (node.nodeType === 1) {
 						if (node.hasAttribute("data-adt-map")) {
+							const oldMapElement = document.querySelector('[data-adt-map]');
+							if (oldMapElement && oldMapElement !== node && mapInstances.has(oldMapElement)) {
+								mapInstances.get(oldMapElement).remove();
+								mapInstances.delete(oldMapElement);
+							}
 							applyEventHandlers(node);
 						}
-						node.querySelectorAll?.('[data-adt-map]').forEach(el => applyEventHandlers(el));
+						node.querySelectorAll?.('[data-adt-map]').forEach(el => {
+							const oldMapElement = document.querySelector('[data-adt-map]');
+							if (oldMapElement && oldMapElement !== el && mapInstances.has(oldMapElement)) {
+								mapInstances.get(oldMapElement).remove();
+								mapInstances.delete(oldMapElement);
+							}
+							applyEventHandlers(el);
+						});
 					}
 				});
 			}
@@ -354,7 +375,11 @@ function addMarkers(map, markers, options, selectedOptions, position, selectable
 	}
 
 	if (!position.length && positionsOfMarkers.length) {
-		map.fitBounds(positionsOfMarkers);
+		const rs = routeSettingsMap.get(map);
+		const allBounds = [...positionsOfMarkers];
+		if (rs?.startPoint) allBounds.push([rs.startPoint.lat, rs.startPoint.lon]);
+		if (rs?.endPoint) allBounds.push([rs.endPoint.lat, rs.endPoint.lon]);
+		map.fitBounds(allBounds);
 	}
 	map.addLayer(cluster);
 
@@ -611,7 +636,7 @@ async function calculateRoute(map, invalidateCache = false) {
 	}
 
 	if (oldPolyline) {
-		map.removeLayer(oldPolyline);
+		oldPolyline.remove();
 		routePolylines.set(map, null);
 	}
 
@@ -632,11 +657,12 @@ async function calculateRoute(map, invalidateCache = false) {
 			return;
 		}
 
+		cachedRouteLoaded.set(map, true);
+
 		try {
 			const response = await fetch(routeSettings.cachedRouteUrl);
 			console.log('Loading cached route from:', routeSettings.cachedRouteUrl);
 			if (response.ok) {
-				cachedRouteLoaded.set(map, true);
 				const coords = await response.json();
 
 				if (coords && coords.length > 0) {
@@ -653,7 +679,10 @@ async function calculateRoute(map, invalidateCache = false) {
 					return;
 				}
 			}
+
+			cachedRouteLoaded.set(map, false);
 		} catch (e) {
+			cachedRouteLoaded.set(map, false);
 			console.error('Error loading cached route:', e);
 		}
 	}
@@ -819,14 +848,14 @@ function addDepotMarker(map, position, depotType) {
 }
 
 function getSelectedMarkers(mapElement) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	if (!map) return [];
 	const order = selectionOrder.get(map);
 	return Array.from(order.entries()).sort((a, b) => a[1] - b[1]).map(e => e[0]);
 }
 
 function clearSelection(mapElement) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	if (!map) return;
 	const selected = selectedMarkers.get(map);
 	const order = selectionOrder.get(map);
@@ -839,7 +868,7 @@ function clearSelection(mapElement) {
 }
 
 async function toggleMarker(mapElement, markerId, selected, recalculate = true) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	const markers = markerInstances.get(map);
 	const marker = markers?.get(markerId);
 	if (!marker) return;
@@ -868,7 +897,7 @@ async function toggleMarker(mapElement, markerId, selected, recalculate = true)
 
 function setOrder(mapElement, markerId, orderNumber) {
 	let color = null;
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	const settings = $(mapElement).data('adt-map');
 	const markers = markerInstances.get(map);
 	const marker = markers?.get(markerId);
@@ -880,19 +909,19 @@ function setOrder(mapElement, markerId, orderNumber) {
 }
 
 function onBeforeRouteCalculation(mapElement, callbackName) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	if (!map) return;
 	onBeforeRouteCalculationMap.set(map, callbackName);
 }
 
 function onAfterRouteCalculation(mapElement, callbackName) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	if (!map) return;
 	onAfterRouteCalculationMap.set(map, callbackName);
 }
 
 function recalculateRoute(mapElement) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 
 	if (!map) return;
 
@@ -900,7 +929,7 @@ function recalculateRoute(mapElement) {
 }
 
 function removeMarker(mapElement, markerId, recalculate = true) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 	if (!map) return;
 
 	const markers = markerInstances.get(map);
@@ -936,7 +965,7 @@ function removeMarker(mapElement, markerId, recalculate = true) {
 }
 
 function addMarkerAndSelect(mapElement, markerData, recalculate = true) {
-	const map = mapInstances.get(mapElement);
+	const map = mapInstancesById.get(mapElement.id) ?? mapInstances.get(mapElement);
 
 	if (!map) return;