mertani-web-toolkit 0.1.63 → 0.1.65

package/dist/components/map/MapMarker.svelte

@@ -0,0 +1,424 @@
+<script lang="ts">
+	import { onDestroy, type Snippet, tick, mount, unmount } from 'svelte';
+	import type { LeafletMouseEvent } from 'leaflet';
+	import { useMapContext, useClusterContext, setMarkerItemContext } from '../../utils/mapContext.js';
+	import PopupWrapper from './PopupWrapper.svelte';
+
+	interface MarkerItem {
+		lat: number;
+		lng: number;
+		[key: string]: unknown;
+	}
+
+	interface Props {
+		item?: MarkerItem;
+		lat?: number;
+		lng?: number;
+		popupHtml?: string;
+		popup?: Snippet;
+		title?: string;
+		iconUrl?: string;
+		iconSize?: [number, number];
+		iconAnchor?: [number, number];
+		onClick?: (item: MarkerItem | undefined, event: LeafletMouseEvent) => void;
+		zoomOnClick?: boolean;
+		zoomLevel?: number;
+		children?: Snippet;
+	}
+
+	let {
+		item,
+		lat,
+		lng,
+		popupHtml,
+		popup: popupSnippet,
+		title,
+		iconUrl,
+		iconSize = [32, 32],
+		iconAnchor,
+		onClick,
+		zoomOnClick = true,
+		zoomLevel = 15,
+		children
+	}: Props = $props();
+
+	const mapStore = useMapContext();
+	const clusterStore = useClusterContext();
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let map: any = null;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let cluster: any = null;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let marker: any = null;
+	let markerElement: HTMLElement | null = $state(null);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let popupMountedInstance: any = null;
+	let unsub: (() => void) | null = null;
+	let clusterUnsub: (() => void) | null = null;
+	let popupCloseHandler: (() => void) | null = null;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let L: any = null;
+
+	if (item) {
+		setMarkerItemContext(item);
+	}
+
+	const markerLat = $derived(item?.lat ?? lat ?? 0);
+	const markerLng = $derived(item?.lng ?? lng ?? 0);
+
+	function createDefaultIcon() {
+		if (!L) {
+			throw new Error('Leaflet not initialized');
+		}
+		return L.divIcon({
+			html: `
+				<div style="
+					width: ${iconSize[0]}px;
+					height: ${iconSize[1]}px;
+					background-color: var(--color-bg-act-primary);
+					border-radius: 50% 50% 50% 0;
+					transform: rotate(-45deg);
+					border: 3px solid white;
+					box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+					position: relative;
+				">
+					<div style="
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%, -50%) rotate(45deg);
+						width: ${Math.round(iconSize[0] * 0.4)}px;
+						height: ${Math.round(iconSize[1] * 0.4)}px;
+						background-color: white;
+						border-radius: 50%;
+					"></div>
+				</div>
+			`,
+			iconSize: iconSize,
+			iconAnchor: iconAnchor ?? [Math.round(iconSize[0] / 2), iconSize[1]],
+			className: 'default-marker-icon'
+		});
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function createIconFromElement(element: HTMLElement): any {
+		if (!L) return null;
+
+		const cloned = element.cloneNode(true) as HTMLElement;
+		cloned.style.position = '';
+		cloned.style.left = '';
+		cloned.style.top = '';
+		cloned.style.visibility = '';
+		cloned.style.pointerEvents = '';
+		cloned.style.display = '';
+
+		return L.divIcon({
+			html: cloned.outerHTML,
+			iconSize: iconSize,
+			iconAnchor: iconAnchor ?? [Math.round(iconSize[0] / 2), iconSize[1]],
+			className: 'custom-marker-icon'
+		});
+	}
+
+	function createDefaultPopupContent(): string {
+		let content = '';
+		if (item) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			content += `<h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;">${(item as any).name || title || 'Marker'}</h3>`;
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			if ((item as any).id) {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				content += `<p style="margin: 0; font-size: 14px; color: #666;">ID: ${(item as any).id}</p>`;
+			}
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			if ((item as any).status) {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				content += `<p style="margin: 4px 0 0 0; font-size: 14px; color: #666;">Status: ${(item as any).status}</p>`;
+			}
+		} else if (title) {
+			content += `<h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;">${title}</h3>`;
+		} else {
+			content += `<p>Default Marker Popup</p>`;
+		}
+		return `<div style="padding: 12px;">${content}</div>`;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	async function bindPopupWithMount(e: any) {
+		if (!popupSnippet || !marker || !L || !map) return;
+
+		const popupContent = document.createElement('div');
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		let element: any;
+
+		const onClose = () => {
+			if (element) {
+				unmount(element);
+				element = null;
+			}
+			if (marker) {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				(marker as any).unbindPopup?.();
+			}
+			if (map && popupCloseHandler) {
+				map.off('popupclose', popupCloseHandler);
+				popupCloseHandler = null;
+			}
+		};
+
+		element = mount(PopupWrapper, {
+			target: popupContent,
+			props: {
+				snippet: popupSnippet
+			}
+		});
+
+		popupMountedInstance = element;
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(marker as any)
+			.bindPopup?.(popupContent, { closeButton: true, className: 'custom-popup', maxWidth: 320 })
+			.openPopup(e.latlng || [markerLat, markerLng]);
+
+		popupCloseHandler = onClose;
+		map.on('popupclose', onClose);
+	}
+
+	async function ensureMarker() {
+		if (!map || marker) return;
+
+		if (!L) {
+			const leafletMod = await import('leaflet');
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			L = (leafletMod as any).default ?? leafletMod;
+		}
+
+		if (!L) return;
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		let icon: any = undefined;
+
+		if (children) {
+			if (markerElement) {
+				icon = createIconFromElement(markerElement);
+			} else {
+				await tick();
+				await new Promise((resolve) => setTimeout(resolve, 50));
+				if (markerElement) {
+					icon = createIconFromElement(markerElement);
+				}
+			}
+		}
+
+		if (!icon && iconUrl && iconUrl.length) {
+			icon = L.icon({
+				iconUrl,
+				iconSize,
+				iconAnchor: iconAnchor ?? [Math.round(iconSize[0] / 2), iconSize[1]]
+			});
+		}
+
+		if (!icon) {
+			icon = createDefaultIcon();
+		}
+
+		marker = L.marker([markerLat, markerLng], { title, icon });
+
+		if (item) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(marker as any)._item = item;
+		}
+
+		if (!popupSnippet && popupHtml) {
+			marker.bindPopup(popupHtml, {
+				closeButton: true,
+				className: 'custom-popup',
+				maxWidth: 320
+			});
+		} else if (!popupSnippet && !popupHtml) {
+			const defaultPopup = createDefaultPopupContent();
+			marker.bindPopup(defaultPopup, {
+				closeButton: true,
+				className: 'custom-popup',
+				maxWidth: 320
+			});
+		}
+
+		if (popupSnippet) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			marker.on('click', (e: any) => {
+				if (zoomOnClick && map) {
+					map.flyTo([markerLat, markerLng], zoomLevel, {
+						animate: true,
+						duration: 0.5
+					});
+				}
+
+				if (onClick) {
+					onClick(item, e);
+				}
+
+				bindPopupWithMount(e);
+			});
+		} else {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			marker.on('click', (e: any) => {
+				if (zoomOnClick && map) {
+					map.flyTo([markerLat, markerLng], zoomLevel, {
+						animate: true,
+						duration: 0.5
+					});
+				}
+
+				if (onClick) {
+					onClick(item, e);
+				}
+			});
+		}
+
+		if (cluster) {
+			cluster.addLayer(marker);
+		} else {
+			marker.addTo(map);
+		}
+	}
+
+	function sync() {
+		if (!marker || !L) return;
+		marker.setLatLng([markerLat, markerLng]);
+		if (typeof title === 'string') {
+			marker.options.title = title;
+		}
+
+		if (children && markerElement && L) {
+			const newIcon = createIconFromElement(markerElement);
+			if (newIcon) {
+				marker.setIcon(newIcon);
+			}
+		} else if (iconUrl && iconUrl.length && L) {
+			const newIcon = L.icon({
+				iconUrl,
+				iconSize,
+				iconAnchor: iconAnchor ?? [Math.round(iconSize[0] / 2), iconSize[1]]
+			});
+			marker.setIcon(newIcon);
+		} else if (!children && !iconUrl) {
+			marker.setIcon(createDefaultIcon());
+		}
+	}
+
+	$effect(() => {
+		if (marker) {
+			sync();
+		} else {
+			ensureMarker();
+		}
+	});
+
+	$effect(() => {
+		if (marker && children && markerElement && L) {
+			(async () => {
+				await tick();
+				await new Promise((resolve) => setTimeout(resolve, 50));
+
+				if (markerElement && marker && L) {
+					const newIcon = createIconFromElement(markerElement);
+					if (newIcon) {
+						marker.setIcon(newIcon);
+					}
+				}
+			})();
+		}
+	});
+
+	$effect(() => {
+		return () => {
+			if (popupMountedInstance) {
+				unmount(popupMountedInstance);
+				popupMountedInstance = null;
+			}
+			if (popupCloseHandler && map) {
+				map.off('popupclose', popupCloseHandler);
+				popupCloseHandler = null;
+			}
+		};
+	});
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	unsub = (mapStore as any).subscribe((m: any) => {
+		map = m;
+		if (!map && marker) {
+			if (cluster) {
+				cluster.removeLayer(marker);
+			} else {
+				marker.remove?.();
+			}
+			marker = null;
+		}
+		if (map) ensureMarker();
+	});
+
+	if (clusterStore) {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		clusterUnsub = (clusterStore as any).subscribe((c: any) => {
+			cluster = c;
+			if (marker) {
+				if (cluster) {
+					marker.remove?.();
+					cluster.addLayer(marker);
+				} else if (map) {
+					if (marker._icon && marker._icon.parentNode) {
+						marker._icon.parentNode.removeChild(marker._icon);
+					}
+					marker.addTo(map);
+				}
+			} else if (map) {
+				ensureMarker();
+			}
+		});
+	}
+
+	onDestroy(() => {
+		try {
+			unsub?.();
+			clusterUnsub?.();
+		} finally {
+			unsub = null;
+			clusterUnsub = null;
+			if (marker) {
+				marker.off?.();
+				if (cluster) {
+					cluster.removeLayer(marker);
+				} else {
+					marker.remove?.();
+				}
+				marker = null;
+			}
+		}
+	});
+</script>
+
+{#if children}
+	<div
+		bind:this={markerElement}
+		style="position: absolute; left: -9999px; top: -9999px; visibility: hidden; pointer-events: none;"
+	>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	:global(.default-marker-icon) {
+		background: transparent !important;
+		border: none !important;
+	}
+
+	:global(.custom-marker-icon) {
+		background: transparent !important;
+		border: none !important;
+	}
+
+	:global(.custom-popup .leaflet-popup-content) {
+		margin: 0;
+	}
+</style>

package/dist/components/map/MapMarker.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type Snippet } from 'svelte';
+import type { LeafletMouseEvent } from 'leaflet';
+interface MarkerItem {
+    lat: number;
+    lng: number;
+    [key: string]: unknown;
+}
+interface Props {
+    item?: MarkerItem;
+    lat?: number;
+    lng?: number;
+    popupHtml?: string;
+    popup?: Snippet;
+    title?: string;
+    iconUrl?: string;
+    iconSize?: [number, number];
+    iconAnchor?: [number, number];
+    onClick?: (item: MarkerItem | undefined, event: LeafletMouseEvent) => void;
+    zoomOnClick?: boolean;
+    zoomLevel?: number;
+    children?: Snippet;
+}
+declare const MapMarker: import("svelte").Component<Props, {}, "">;
+type MapMarker = ReturnType<typeof MapMarker>;
+export default MapMarker;

package/dist/components/map/MapMarkerGroup.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import type { Map as LMap, Marker, Icon, DivIcon, Layer } from 'leaflet';
+	import { useMapContext, createClusterContext } from '../../utils/mapContext.js';
+	import type { Writable } from 'svelte/store';
+
+	type LeafletNamespace = typeof import('leaflet');
+
+	interface MarkerClusterGroup extends Layer {
+		getChildCount(): number;
+		getAllChildMarkers(): Marker[];
+		addLayer(layer: Marker): this;
+		removeLayer(layer: Marker): this;
+		clearLayers(): this;
+	}
+
+	interface ClusterOptions {
+		chunkedLoading?: boolean;
+		chunkInterval?: number;
+		chunkDelay?: number;
+		spiderfyOnMaxZoom?: boolean;
+		showCoverageOnHover?: boolean;
+		zoomToBoundsOnClick?: boolean;
+		maxClusterRadius?: number;
+		iconCreateFunction?: (cluster: MarkerClusterGroup) => Icon | DivIcon | null;
+		[key: string]: unknown;
+	}
+
+	interface ClusterIconCreateFunction {
+		(cluster: MarkerClusterGroup, markers: Marker[]): Icon | DivIcon | null;
+	}
+
+	let {
+		clusterOptions = {},
+		iconCreateFunction,
+		children
+	}: {
+		clusterOptions?: ClusterOptions;
+		iconCreateFunction?: ClusterIconCreateFunction;
+		children?: Snippet;
+	} = $props();
+
+	const mapStore = useMapContext() as Writable<LMap | null>;
+	const clusterStore = createClusterContext() as Writable<MarkerClusterGroup | null>;
+	let map: LMap | null = null;
+	let cluster: MarkerClusterGroup | null = null;
+	let L: LeafletNamespace | null = null;
+	let unsub: (() => void) | null = null;
+
+	// Default icon create function if none provided
+	function defaultIconCreate(cluster: MarkerClusterGroup): DivIcon {
+		if (!L) {
+			throw new Error('Leaflet not initialized');
+		}
+		const count = cluster.getChildCount();
+		const size = count < 10 ? 'small' : count < 100 ? 'medium' : 'large';
+		return L.divIcon({
+			html: `<div class="cluster-icon cluster-${size}"><span>${count}</span></div>`,
+			className: 'custom-cluster-icon',
+			iconSize: L.point(40, 40)
+		});
+	}
+
+	function createCustomIcon(cluster: MarkerClusterGroup): Icon | DivIcon | null {
+		if (!iconCreateFunction || !L) {
+			return defaultIconCreate(cluster);
+		}
+
+		// Get all markers in the cluster
+		const markers: Marker[] = [];
+		cluster.getAllChildMarkers().forEach((marker: Marker) => {
+			markers.push(marker);
+		});
+
+		try {
+			const result = iconCreateFunction(cluster, markers);
+			return result || defaultIconCreate(cluster);
+		} catch (error) {
+			console.error('Error creating custom cluster icon:', error);
+			return defaultIconCreate(cluster);
+		}
+	}
+
+	async function initCluster() {
+		if (!map || cluster) return;
+
+		if (!L) {
+			const leafletMod = await import('leaflet');
+			L = (leafletMod as any).default ?? leafletMod;
+
+			await import('leaflet.markercluster');
+			await import('leaflet.markercluster/dist/MarkerCluster.css');
+			await import('leaflet.markercluster/dist/MarkerCluster.Default.css');
+		}
+
+		const defaultOptions: ClusterOptions = {
+			chunkedLoading: true,
+			chunkInterval: 200,
+			chunkDelay: 50,
+			spiderfyOnMaxZoom: true,
+			showCoverageOnHover: false,
+			zoomToBoundsOnClick: true,
+			maxClusterRadius: 80,
+			...clusterOptions
+		};
+
+		if (iconCreateFunction) {
+			defaultOptions.iconCreateFunction = (cluster: MarkerClusterGroup) => {
+				if (L) {
+					(window as typeof window & { L?: LeafletNamespace }).L = L;
+				}
+				return createCustomIcon(cluster);
+			};
+		} else if (!clusterOptions.iconCreateFunction) {
+			defaultOptions.iconCreateFunction = defaultIconCreate;
+		}
+
+		const MarkerClusterGroupClass = (
+			L as LeafletNamespace & {
+				markerClusterGroup: new (options?: ClusterOptions) => MarkerClusterGroup;
+			}
+		).markerClusterGroup;
+		cluster = new MarkerClusterGroupClass(defaultOptions);
+		map.addLayer(cluster);
+		clusterStore.set(cluster);
+	}
+
+	function destroyCluster() {
+		if (cluster && map) {
+			map.removeLayer(cluster);
+			cluster.clearLayers();
+			cluster = null;
+		}
+		clusterStore.set(null);
+	}
+
+	unsub = mapStore.subscribe((m: LMap | null) => {
+		map = m;
+		if (!map) {
+			destroyCluster();
+		} else {
+			initCluster();
+		}
+	});
+
+	onDestroy(() => {
+		try {
+			unsub?.();
+		} finally {
+			unsub = null;
+			destroyCluster();
+		}
+	});
+</script>
+
+{@render children?.()}
+
+<style>
+	:global(.custom-cluster-icon) {
+		background: transparent !important;
+		border: none !important;
+	}
+
+	:global(.cluster-icon) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		font-weight: bold;
+		color: var(--color-text-inverse);
+		text-align: center;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	}
+
+	:global(.cluster-small) {
+		width: 40px;
+		height: 40px;
+		background-color: color-mix(in srgb, var(--color-bg-act-primary), transparent 30%) !important;
+		backdrop-filter: blur(2px);
+		font-size: 14px;
+
+		&:hover {
+			background-color: color-mix(in srgb, var(--color-bg-act-primary), transparent 5%) !important;
+			backdrop-filter: blur(2px);
+		}
+	}
+
+	:global(.cluster-medium) {
+		width: 50px;
+		height: 50px;
+		background-color: color-mix(in srgb, var(--color-bg-act-primary), transparent 30%) !important;
+		backdrop-filter: blur(2px);
+		font-size: 16px;
+
+		&:hover {
+			background-color: color-mix(in srgb, var(--color-bg-act-primary), transparent 5%) !important;
+			backdrop-filter: blur(2px);
+		}
+	}
+
+	:global(.cluster-large) {
+		width: 60px;
+		height: 60px;
+		background-color: color-mix(in srgb, var(--color-bg-act-primary), transparent 30%) !important;
+		backdrop-filter: blur(2px);
+		font-size: 18px;
+
+		&:hover {
+			background-color: color-mix(in srgb, var(--color-bg-act-primary), transparent 5%) !important;
+			backdrop-filter: blur(2px);
+		}
+	}
+</style>

package/dist/components/map/MapMarkerGroup.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Snippet } from 'svelte';
+import type { Marker, Icon, DivIcon, Layer } from 'leaflet';
+interface MarkerClusterGroup extends Layer {
+    getChildCount(): number;
+    getAllChildMarkers(): Marker[];
+    addLayer(layer: Marker): this;
+    removeLayer(layer: Marker): this;
+    clearLayers(): this;
+}
+interface ClusterOptions {
+    chunkedLoading?: boolean;
+    chunkInterval?: number;
+    chunkDelay?: number;
+    spiderfyOnMaxZoom?: boolean;
+    showCoverageOnHover?: boolean;
+    zoomToBoundsOnClick?: boolean;
+    maxClusterRadius?: number;
+    iconCreateFunction?: (cluster: MarkerClusterGroup) => Icon | DivIcon | null;
+    [key: string]: unknown;
+}
+interface ClusterIconCreateFunction {
+    (cluster: MarkerClusterGroup, markers: Marker[]): Icon | DivIcon | null;
+}
+type $$ComponentProps = {
+    clusterOptions?: ClusterOptions;
+    iconCreateFunction?: ClusterIconCreateFunction;
+    children?: Snippet;
+};
+declare const MapMarkerGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type MapMarkerGroup = ReturnType<typeof MapMarkerGroup>;
+export default MapMarkerGroup;