adt-js-components 1.9.3 → 1.9.5

package/package.json

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

package/src/Map/index.js

@@ -7,6 +7,7 @@ import {RouteSetting, defaultRouteSettings} from './route.types.js';
 
 let siteKey;
 let markerImg;
+const svgCache = new Map();
 const mapInstances = new WeakMap();
 const selectedMarkers = new WeakMap();
 const selectionOrder = new WeakMap();
@@ -16,6 +17,8 @@ const routeSettingsMap = new WeakMap();
 const markersDataMap = new WeakMap();
 const markerClusters = new WeakMap();
 const onSelectionChangeMap = new WeakMap();
+const onBeforeRouteCalculationMap = new WeakMap();
+const onAfterRouteCalculationMap = new WeakMap();
 
 const DEPOT_TYPE = {
 	START: 'depot-start',
@@ -40,6 +43,8 @@ async function run(options) {
 			customMarkers = {},
 			showSelectionOrder = false,
 			markerInfoCallback = null,
+			onBeforeRouteCalculation = null,
+			onAfterRouteCalculation = null,
 		} = JSON.parse(el.dataset.adtMap);
 
 		/** @type {RouteSetting} */
@@ -63,6 +68,8 @@ async function run(options) {
 		routeSettingsMap.set(map, routeSettings);
 		markersDataMap.set(map, markers);
 		onSelectionChangeMap.set(map, onSelectionChange);
+		onBeforeRouteCalculationMap.set(map, onBeforeRouteCalculation);
+		onAfterRouteCalculationMap.set(map, onAfterRouteCalculation);
 
 		L.tileLayer("https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=" + siteKey, {
 			minZoom: 0,
@@ -157,9 +164,7 @@ async function run(options) {
 		}
 
 		if (routeSettings.enabled) {
-			setTimeout(() => {
-				calculateRoute(map);
-			}, 500);
+			calculateRoute(map);
 		}
 
 		if (callback) {
@@ -175,11 +180,10 @@ async function run(options) {
 			if (mutation.type === "childList") {
 				mutation.addedNodes.forEach(node => {
 					if (node.nodeType === 1) {
-						// Zkontroluj samotný node
 						if (node.hasAttribute("data-adt-map")) {
 							applyEventHandlers(node);
 						}
-						// Zkontroluj všechny potomky
+
 						node.querySelectorAll?.('[data-adt-map]').forEach(el => {
 							applyEventHandlers(el);
 						});
@@ -344,9 +348,7 @@ function addMarkers(map, markers, options, selectedOptions, position, selectable
 	map.addLayer(cluster);
 
 	if (loadedCount === totalMarkers) {
-		setTimeout(() => {
-			checkAndApplyPreselection(map, markers, showSelectionOrder, onSelectionChange, selectable);
-		}, 200);
+		checkAndApplyPreselection(map, markers, showSelectionOrder, onSelectionChange, selectable);
 	}
 }
 
@@ -371,7 +373,7 @@ function createMarker(marker, options, selectedOptions, cluster = null, selectab
 		const markers = markerInstances.get(map);
 		markers.set(marker.id, mapMarker);
 
-		mapMarker.on('add', function() {
+		mapMarker.on('add', function () {
 			const el = mapMarker.getElement();
 			if (el) {
 				el.style.cursor = 'pointer';
@@ -512,22 +514,29 @@ async function updateMarkerOrderDisplay(map, marker, orderNumber, isSelected, co
 
 async function createMarkerIcon(map, iconUrl, orderNumber, color = null) {
 	let inlineStyle = null;
-	const response = await fetch(iconUrl);
-	const svg = await response.text();
 	const settings = routeSettingsMap.get(map);
 
 	if ((settings && settings.enabled) || color) {
 		inlineStyle = `--marker-fill: ${color ?? settings.color};`;
 	}
 
+	let svg;
+	if (svgCache.has(iconUrl)) {
+		svg = svgCache.get(iconUrl);
+	} else {
+		const response = await fetch(iconUrl);
+		svg = await response.text();
+		svgCache.set(iconUrl, svg);
+	}
+
 	return L.divIcon({
 		className: 'marker-icon-wrapper',
 		html: `
-			<div class="marker-icon" style="${inlineStyle}">
-				${svg}
-				${orderNumber ? `<span class="selection-order-label">${orderNumber}</span>` : ''}
-			</div>
-		`,
+            <div class="marker-icon" style="${inlineStyle}">
+                ${svg}
+                ${orderNumber ? `<span class="selection-order-label">${orderNumber}</span>` : ''}
+            </div>
+        `,
 		iconSize: [43, 58],
 		iconAnchor: [21, 58]
 	});
@@ -581,68 +590,134 @@ async function calculateRoute(map) {
 		return;
 	}
 
-	if (selectedSet && selectedSet.size > 0) {
-		const orderedIds = Array.from(order.entries())
-			.sort((a, b) => a[1] - b[1])
-			.map(entry => entry[0]);
-		const routeMarkers = orderedIds
-			.map(id => markers.find(m => m.id === id))
-			.filter(m => m !== undefined);
+	const hasCustomStart = routeSettings.startPoint !== null && routeSettings.startPoint !== undefined;
+	const hasCustomEnd = routeSettings.endPoint !== null && routeSettings.endPoint !== undefined;
 
-		if (routeMarkers.length < 2) {
-			return;
-		}
+	if (hasCustomStart) addDepotMarker(map, routeSettings.startPoint, DEPOT_TYPE.START);
+	if (hasCustomEnd) addDepotMarker(map, routeSettings.endPoint, DEPOT_TYPE.END);
 
-		let startPoint = routeMarkers[0].position;
-		const hasCustomStart = routeSettings.startPoint !== null && routeSettings.startPoint !== undefined;
-		if (hasCustomStart) {
-			startPoint = routeSettings.startPoint;
-		}
+	if (!selectedSet || selectedSet.size === 0) return;
 
-		let endPoint = routeMarkers[routeMarkers.length - 1].position;
-		const hasCustomEnd = routeSettings.endPoint !== null && routeSettings.endPoint !== undefined;
-		if (hasCustomEnd) {
-			endPoint = routeSettings.endPoint;
-		}
+	const orderedIds = Array.from(order.entries())
+		.sort((a, b) => a[1] - b[1])
+		.map(entry => entry[0]);
+	const routeMarkers = orderedIds
+		.map(id => markers.find(m => m.id === id))
+		.filter(m => m !== undefined);
 
-		if (hasCustomStart) {
-			addDepotMarker(map, startPoint, DEPOT_TYPE.START);
-		}
-		if (hasCustomEnd) {
-			addDepotMarker(map, endPoint, DEPOT_TYPE.END);
-		}
+	if (routeMarkers.length < 2) return;
 
-		const params = new URLSearchParams({
-			start: `${startPoint.lon},${startPoint.lat}`,
-			end: `${endPoint.lon},${endPoint.lat}`,
-			routeType: routeSettings.routeType,
-			apikey: siteKey
-		});
+	const beforeCallback = onBeforeRouteCalculationMap.get(map);
+	if (beforeCallback && window[beforeCallback]) {
+		window[beforeCallback]();
+	}
 
-		routeMarkers.forEach(m => {
-			params.append('waypoints', `${m.position.lon},${m.position.lat}`);
-		});
+	let startPoint = hasCustomStart ? routeSettings.startPoint : routeMarkers[0].position;
+	let endPoint = hasCustomEnd ? routeSettings.endPoint : routeMarkers[routeMarkers.length - 1].position;
+
+	const WAYPOINTS_LIMIT = 15;
+	const allCoords = [];
+	const allParts = [];
+	let totalDuration = 0;
+	let totalLength = 0;
+
+	try {
+		if (routeMarkers.length <= WAYPOINTS_LIMIT) {
+			const params = new URLSearchParams({
+				start: `${startPoint.lon},${startPoint.lat}`,
+				end: `${endPoint.lon},${endPoint.lat}`,
+				routeType: routeSettings.routeType,
+				apikey: siteKey
+			});
+			routeMarkers.forEach(m => params.append('waypoints', `${m.position.lon},${m.position.lat}`));
 
-		try {
-			const response = await fetch(
-				`https://api.mapy.cz/v1/routing/route?${params.toString()}`
-			);
+			const response = await fetch(`https://api.mapy.cz/v1/routing/route?${params.toString()}`);
 			const data = await response.json();
 
 			if (data.geometry?.geometry?.coordinates) {
-				const coords = data.geometry.geometry.coordinates.map(c => [c[1], c[0]]);
-				const polyline = L.polyline(coords, {
-					color: routeSettings.color,
-					weight: routeSettings.weight,
-					opacity: routeSettings.opacity
-				}).addTo(map);
-
-				routePolylines.set(map, polyline);
+				allCoords.push(...data.geometry.geometry.coordinates.map(c => [c[1], c[0]]));
+			}
+			if (data.parts) {
+				allParts.push(...data.parts);
+			}
+			if (data.duration) {
+				totalDuration += data.duration;
+			}
+			if (data.length) {
+				totalLength += data.length;
+			}
+		} else {
+			const chunks = [];
+			for (let i = 0; i < routeMarkers.length; i += WAYPOINTS_LIMIT) {
+				chunks.push(routeMarkers.slice(i, i + WAYPOINTS_LIMIT));
+			}
+
+			for (let i = 0; i < chunks.length; i++) {
+				const chunk = chunks[i];
+				const isFirstChunk = i === 0;
+				const isLastChunk = i === chunks.length - 1;
+
+				const chunkStart = isFirstChunk ? startPoint : chunks[i - 1][chunks[i - 1].length - 1].position;
+				const chunkEnd = isLastChunk ? endPoint : chunk[chunk.length - 1].position;
+
+				const params = new URLSearchParams({
+					start: `${chunkStart.lon},${chunkStart.lat}`,
+					end: `${chunkEnd.lon},${chunkEnd.lat}`,
+					routeType: routeSettings.routeType,
+					apikey: siteKey
+				});
+
+				const markersToAdd = isFirstChunk ? chunk : chunk.slice(1);
+				markersToAdd.forEach(m => params.append('waypoints', `${m.position.lon},${m.position.lat}`));
+
+				const response = await fetch(`https://api.mapy.cz/v1/routing/route?${params.toString()}`);
+				const data = await response.json();
+
+				if (data.geometry?.geometry?.coordinates) {
+					allCoords.push(...data.geometry.geometry.coordinates.map(c => [c[1], c[0]]));
+				}
+				if (data.parts) {
+					allParts.push(...data.parts);
+				}
+				if (data.duration) {
+					totalDuration += data.duration;
+				}
+				if (data.length) {
+					totalLength += data.length;
+				}
 			}
-		} catch (error) {
-			console.error('Error calculating route:', error);
 		}
+	} catch (error) {
+		console.error('Error calculating route:', error);
+		const afterCallback = onAfterRouteCalculationMap.get(map);
+		if (afterCallback && window[afterCallback]) window[afterCallback]({}, 0, 0);
+
+		return;
+	}
+
+	if (allCoords.length > 0) {
+		const polyline = L.polyline(allCoords, {
+			color: routeSettings.color,
+			weight: routeSettings.weight,
+			opacity: routeSettings.opacity
+		}).addTo(map);
+		routePolylines.set(map, polyline);
 	}
+
+	// @type {TRouteParts}
+	const routeParts = {};
+	allParts.forEach((part, index) => {
+		if (index < orderedIds.length) {
+			const markerId = orderedIds[index];
+			routeParts[markerId] = {
+				duration: part.duration,
+				length: part.length,
+			};
+		}
+	});
+
+	const afterCallback = onAfterRouteCalculationMap.get(map);
+	if (afterCallback && window[afterCallback]) window[afterCallback](routeParts, totalLength, totalDuration);
 }
 
 function addDepotMarker(map, position, depotType) {
@@ -659,7 +734,7 @@ function addDepotMarker(map, position, depotType) {
 			iconAnchor: [img.width / 2, img.height]
 		});
 
-		L.marker(position, { icon: icon }).addTo(map);
+		L.marker(position, {icon: icon}).addTo(map);
 	};
 }
 
@@ -740,10 +815,31 @@ function setOrder(mapElement, markerId, orderNumber) {
 	updateMarkerOrderDisplay(mapElement, marker, orderNumber, true, color);
 }
 
+function onBeforeRouteCalculation(mapElement, callbackName) {
+	const map = mapInstances.get(mapElement);
+	if (!map) return;
+	onBeforeRouteCalculationMap.set(map, callbackName);
+}
+
+function onAfterRouteCalculation(mapElement, callbackName) {
+	const map = mapInstances.get(mapElement);
+	if (!map) return;
+	onAfterRouteCalculationMap.set(map, callbackName);
+}
+
+function recalculateRoute(mapElement) {
+	const map = mapInstances.get(mapElement);
+	if (!map) return;
+	calculateRoute(map);
+}
+
 export default {
 	run,
 	getSelectedMarkers,
 	clearSelection,
 	toggleMarker,
 	setOrder,
+	onBeforeRouteCalculation,
+	onAfterRouteCalculation,
+	recalculateRoute,
 }