@smartnet360/svelte-components 0.0.71 → 0.0.72

package/dist/map-v2/features/repeaters/layers/RepeaterLabelsLayer.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+	/**
+	 * RepeaterLabelsLayer - Renders repeater labels positioned along azimuth
+	 * 
+	 * Features:
+	 * - Projects labels along azimuth from repeater location
+	 * - Configurable label offset (% of arc radius)
+	 * - Primary + optional secondary field display
+	 * - Zoom-reactive positioning
+	 * - Viewport filtering for performance
+	 */
+	
+	import { onMount, onDestroy } from 'svelte';
+	import { useMapbox } from '../../../core/hooks/useMapbox';
+	import { waitForStyleLoad, generateLayerId, generateSourceId } from '../../../shared/utils/mapboxHelpers';
+	import type { RepeaterStoreContext } from '../stores/repeaterStoreContext.svelte';
+	import type { Repeater } from '../types';
+	import * as turf from '@turf/turf';
+	
+	interface Props {
+		/** Repeater store context */
+		store: RepeaterStoreContext;
+		/** Unique namespace for layer/source IDs */
+		namespace: string;
+	}
+	
+	let { store, namespace }: Props = $props();
+	
+	const mapStore = useMapbox();
+	const sourceId = generateSourceId(namespace, 'repeater-labels');
+	const layerId = generateLayerId(namespace, 'repeater-labels');
+	
+	let map = $state<mapboxgl.Map | null>(null);
+	let unsubscribe: (() => void) | null = null;
+	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+	let viewportVersion = $state(0); // Increment to force $effect re-run on viewport changes
+	
+	// Viewport change handler (pan/zoom/move) with debouncing
+	function handleViewportChange() {
+		if (!map) return;
+		
+		// Debounce viewport updates to avoid excessive re-renders
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		// Wait 150ms after last pan/zoom before updating
+		viewportUpdateTimer = setTimeout(() => {
+			viewportVersion++;
+		}, 150);
+	}
+	
+	/**
+	 * Get label text for a repeater field
+	 */
+	function getRepeaterLabelText(repeater: Repeater, field: keyof Repeater | 'none'): string {
+		if (field === 'none') return '';
+		
+		const value = repeater[field];
+		return value == null ? '' : String(value);
+	}
+	
+	/**
+	 * Build GeoJSON features for repeater labels
+	 */
+	function buildLabelFeatures(): GeoJSON.FeatureCollection {
+		const features: GeoJSON.Feature[] = [];
+		
+		console.log('RepeaterLabelsLayer: Building label features', {
+			showLabels: store.showLabels,
+			filteredRepeatersCount: store.filteredRepeaters.length,
+			hasMap: !!map
+		});
+		
+		if (!store.showLabels || store.filteredRepeaters.length === 0 || !map) {
+			console.log('RepeaterLabelsLayer: Skipping labels -', {
+				showLabels: store.showLabels,
+				hasRepeaters: store.filteredRepeaters.length > 0,
+				hasMap: !!map
+			});
+			return { type: 'FeatureCollection', features: [] };
+		}
+		
+		// Get current zoom level
+		const currentZoom = map.getZoom();
+		
+		// Filter repeaters by viewport bounds
+		const bounds = map.getBounds();
+		if (!bounds) {
+			return { type: 'FeatureCollection', features: [] };
+		}
+		
+		const visibleRepeaters = store.filteredRepeaters.filter(repeater => 
+			bounds.contains([repeater.longitude, repeater.latitude])
+		);
+		
+		visibleRepeaters.forEach((repeater) => {
+			// Get label text
+			const primaryText = getRepeaterLabelText(repeater, store.primaryLabelField);
+			const secondaryText = getRepeaterLabelText(repeater, store.secondaryLabelField);
+			
+			// Build combined label (single line with separator)
+			let labelText = primaryText;
+			if (secondaryText) {
+				labelText += ` | ${secondaryText}`;
+			}
+			
+			if (!labelText.trim()) return; // Skip if no text
+			
+			// Calculate zoom-aware radius
+			const zoomMultiplier = Math.pow(1.2, currentZoom - 12);
+			const repeaterRadius = store.baseRadius * zoomMultiplier;
+			
+			// Position label at a percentage of the arc radius (configurable via labelOffset)
+			// labelOffset is treated as a percentage (e.g., 300 = 300% = beyond arc)
+			const labelDistance = (repeaterRadius * store.labelOffset) / 100;
+			
+			// Project label position along azimuth from the repeater's location
+			const origin = turf.point([repeater.longitude, repeater.latitude]);
+			const labelPosition = turf.destination(
+				origin,
+				labelDistance / 1000, // Convert meters to kilometers
+				repeater.azimuth,
+				{ units: 'kilometers' }
+			);
+			
+			features.push({
+				type: 'Feature',
+				geometry: labelPosition.geometry,
+				properties: {
+					text: labelText,
+					repeaterId: repeater.repeaterId
+				}
+			});
+		});
+		
+		console.log('RepeaterLabelsLayer: Built features', {
+			totalRepeaters: store.filteredRepeaters.length,
+			visibleInViewport: visibleRepeaters.length,
+			featuresGenerated: features.length
+		});
+		
+		return { type: 'FeatureCollection', features };
+	}
+	
+	/**
+	 * Update label layer on map
+	 */
+	function updateLabels() {
+		if (!map || !map.getSource(sourceId)) return;
+		
+		const geojson = buildLabelFeatures();
+		
+		console.log('RepeaterLabelsLayer: Updating labels', {
+			sourceExists: !!map.getSource(sourceId),
+			layerExists: !!map.getLayer(layerId),
+			featureCount: geojson.features.length,
+			currentZoom: map.getZoom(),
+			minLabelZoom: store.minLabelZoom,
+			labelSize: store.labelSize,
+			labelColor: store.labelColor
+		});
+		
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		source.setData(geojson);
+		
+		// Also update paint/layout properties when labels are refreshed
+		if (map.getLayer(layerId)) {
+			map.setLayoutProperty(layerId, 'text-size', store.labelSize);
+			map.setPaintProperty(layerId, 'text-color', store.labelColor);
+			map.setPaintProperty(layerId, 'text-halo-color', store.labelHaloColor);
+			map.setPaintProperty(layerId, 'text-halo-width', store.labelHaloWidth);
+			map.setLayerZoomRange(layerId, store.minLabelZoom, 24);
+			
+			console.log('RepeaterLabelsLayer: Updated layer properties');
+		}
+	}
+	
+	/**
+	 * Initialize or reinitialize the label layer
+	 * Called on mount and when map style changes
+	 */
+	async function initializeLayer() {
+		if (!map) return;
+		
+		// Wait for style to load
+		await waitForStyleLoad(map);
+		
+		// Add source if missing
+		if (!map.getSource(sourceId)) {
+			map.addSource(sourceId, {
+				type: 'geojson',
+				data: { type: 'FeatureCollection', features: [] }
+			});
+		}
+		
+		// Add label layer if missing
+		if (!map.getLayer(layerId)) {
+			map.addLayer({
+				id: layerId,
+				type: 'symbol',
+				source: sourceId,
+				minzoom: store.minLabelZoom,
+				layout: {
+					'text-field': ['get', 'text'],
+					'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+					'text-size': store.labelSize,
+					'text-anchor': 'center',
+					'text-allow-overlap': true,
+					'text-ignore-placement': false,
+					'text-max-width': 999,
+					'text-justify': 'center'
+				},
+				paint: {
+					'text-color': store.labelColor,
+					'text-halo-color': store.labelHaloColor,
+					'text-halo-width': store.labelHaloWidth
+				}
+			});
+		}
+		
+		// Add event listeners (remove first to avoid duplicates)
+		map.off('zoom', updateLabels);
+		map.off('moveend', handleViewportChange);
+		map.off('zoomend', handleViewportChange);
+		
+		map.on('zoom', updateLabels);
+		map.on('moveend', handleViewportChange);
+		map.on('zoomend', handleViewportChange);
+		
+		// Initial render
+		updateLabels();
+	}
+	
+	onMount(async () => {
+		unsubscribe = mapStore.subscribe(async (m) => {
+			if (!m) {
+				map = null;
+				return;
+			}
+			
+			map = m;
+			
+			// Initial layer setup
+			await initializeLayer();
+			
+			// Re-initialize layer when map style changes
+			// Mapbox removes all custom layers/sources when setStyle() is called
+			map.on('style.load', initializeLayer);
+		});
+	});
+	
+	// Watch for changes in store properties and update labels
+	$effect(() => {
+		// Track viewportVersion to force re-run on pan
+		viewportVersion;
+		
+		// Dependencies that should trigger label refresh
+		store.filteredRepeaters;
+		store.showLabels;
+		store.primaryLabelField;
+		store.secondaryLabelField;
+		store.labelOffset;
+		store.baseRadius;
+		
+		// Style properties
+		store.labelSize;
+		store.labelColor;
+		store.labelHaloColor;
+		store.labelHaloWidth;
+		store.minLabelZoom;
+		
+		updateLabels();
+	});
+	
+	onDestroy(() => {
+		unsubscribe?.();
+		
+		// Clear any pending viewport update timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		if (map) {
+			// Remove style.load listener
+			map.off('style.load', initializeLayer);
+			
+			// Remove all event listeners
+			map.off('zoom', updateLabels);
+			map.off('moveend', handleViewportChange);
+			map.off('zoomend', handleViewportChange);
+			
+			if (map.getLayer(layerId)) {
+				map.removeLayer(layerId);
+			}
+			if (map.getSource(sourceId)) {
+				map.removeSource(sourceId);
+			}
+		}
+	});
+</script>

package/dist/map-v2/features/repeaters/layers/RepeaterLabelsLayer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { RepeaterStoreContext } from '../stores/repeaterStoreContext.svelte';
+interface Props {
+    /** Repeater store context */
+    store: RepeaterStoreContext;
+    /** Unique namespace for layer/source IDs */
+    namespace: string;
+}
+declare const RepeaterLabelsLayer: import("svelte").Component<Props, {}, "">;
+type RepeaterLabelsLayer = ReturnType<typeof RepeaterLabelsLayer>;
+export default RepeaterLabelsLayer;

package/dist/map-v2/features/repeaters/layers/RepeatersLayer.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	/**
+	 * RepeatersLayer - Renders repeater sectors as arc polygons
+	 * 
+	 * Features:
+	 * - Fixed 30° beamwidth for all repeaters
+	 * - Mapbox fill layer (colored by tech:fband)
+	 * - Mapbox line layer (borders)
+	 * - Zoom-reactive: Regenerates arcs on zoom
+	 * - Viewport filtering: Only renders visible repeaters
+	 * - Style-change resilient: Reinitializes on map style load
+	 */
+
+	import { onDestroy, onMount } from 'svelte';
+	import type { Map as MapboxMap } from 'mapbox-gl';
+	import type { RepeaterStoreContext } from '../stores/repeaterStoreContext.svelte';
+	import { useMapbox } from '../../../core/hooks/useMapbox';
+	import { repeatersToGeoJSON } from '../utils/repeaterGeoJSON';
+	import { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX } from '../constants/zIndex';
+
+	interface Props {
+		/** Repeater store context */
+		store: RepeaterStoreContext;
+		/** Unique namespace for layer IDs */
+		namespace: string;
+	}
+
+	let { store, namespace }: Props = $props();
+	
+	const FILL_LAYER_ID = `${namespace}-repeaters-fill`;
+	const LINE_LAYER_ID = `${namespace}-repeaters-line`;
+	const SOURCE_ID = `${namespace}-repeaters`;
+	
+	// Get map from mapbox hook
+	const mapStore = useMapbox();
+	
+	let map = $state<MapboxMap | null>(null);
+	let mounted = $state(false);
+	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+	let viewportVersion = $state(0); // Increment to force $effect re-run on viewport changes
+	
+	// Viewport change handler with debouncing
+	function handleMoveEnd() {
+		if (!map) return;
+		
+		// Clear any existing timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		// Debounce: wait 200ms after last move event before re-rendering
+		viewportUpdateTimer = setTimeout(() => {
+			if (!map) return;
+			const newZoom = map.getZoom();
+			console.log('RepeatersLayer: Viewport changed, updating to zoom:', newZoom);
+			// Update zoom
+			store.setCurrentZoom(newZoom);
+			// Force $effect to re-run
+			viewportVersion++;
+		}, 200);
+	}
+	
+	/**
+	 * Initialize or reinitialize the repeater layers
+	 * Called on mount and when map style changes
+	 */
+	function initializeLayer() {
+		if (!map) return;
+		
+		console.log('RepeatersLayer: initializeLayer called');
+		
+		// Set initial zoom
+		store.setCurrentZoom(map.getZoom());
+		
+		// Add moveend listener (remove first to avoid duplicates)
+		map.off('moveend', handleMoveEnd);
+		map.on('moveend', handleMoveEnd);
+		
+		// Mark as mounted to trigger $effect
+		mounted = true;
+		
+		// Force $effect to re-run
+		viewportVersion++;
+	}
+	
+	onMount(() => {
+		console.log('RepeatersLayer: onMount, waiting for map...');
+		
+		// Subscribe to map store
+		const unsubscribe = mapStore.subscribe((mapInstance) => {
+			if (mapInstance && !map) {
+				console.log('RepeatersLayer: Map available, initializing...');
+				map = mapInstance;
+				
+				// Initial layer setup
+				initializeLayer();
+				
+				// Re-initialize layer when map style changes
+				// Mapbox removes all custom layers/sources when setStyle() is called
+				map.on('style.load', initializeLayer);
+			}
+		});
+		
+		return () => {
+			unsubscribe();
+		};
+	});
+	
+	onDestroy(() => {
+		if (!map) return;
+		
+		// Clean up timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		// Remove style.load listener
+		map.off('style.load', initializeLayer);
+		
+		map.off('moveend', handleMoveEnd);
+		
+		// Clean up layers and source
+		if (map.getLayer(LINE_LAYER_ID)) {
+			map.removeLayer(LINE_LAYER_ID);
+		}
+		if (map.getLayer(FILL_LAYER_ID)) {
+			map.removeLayer(FILL_LAYER_ID);
+		}
+		if (map.getSource(SOURCE_ID)) {
+			map.removeSource(SOURCE_ID);
+		}
+	});
+	
+	// Reactive: Update GeoJSON when repeaters/zoom/settings change
+	$effect(() => {
+		// Track viewportVersion to force re-run on pan
+		viewportVersion;
+		
+		console.log('RepeatersLayer $effect triggered:', {
+			mounted,
+			hasMap: !!map,
+			showRepeaters: store.showRepeaters,
+			filteredRepeatersCount: store.filteredRepeaters.length,
+			currentZoom: store.currentZoom,
+			baseRadius: store.baseRadius,
+			viewportVersion
+		});
+		
+		if (!mounted || !map || !store.showRepeaters) {
+			// Remove layers if showRepeaters is false
+			if (mounted && map) {
+				console.log('RepeatersLayer: Removing layers (showRepeaters=false or not mounted)');
+				if (map.getLayer(LINE_LAYER_ID)) {
+					map.removeLayer(LINE_LAYER_ID);
+				}
+				if (map.getLayer(FILL_LAYER_ID)) {
+					map.removeLayer(FILL_LAYER_ID);
+				}
+				if (map.getSource(SOURCE_ID)) {
+					map.removeSource(SOURCE_ID);
+				}
+			}
+			return;
+		}
+		
+		// Filter repeaters by viewport bounds (only render visible repeaters)
+		const bounds = map.getBounds();
+		if (!bounds) {
+			console.warn('RepeatersLayer: Cannot get map bounds, skipping viewport filter');
+			return;
+		}
+		
+		const visibleRepeaters = store.filteredRepeaters.filter(repeater => 
+			bounds.contains([repeater.longitude, repeater.latitude])
+		);
+		
+		console.log('RepeatersLayer: Viewport filtering:', {
+			totalFiltered: store.filteredRepeaters.length,
+			visibleInViewport: visibleRepeaters.length
+		});
+		
+		// Generate GeoJSON from visible repeaters only
+		const geoJSON = repeatersToGeoJSON(
+			visibleRepeaters,
+			store.currentZoom,
+			store.baseRadius,
+			store.techBandColorMap
+		);
+		
+		console.log('RepeatersLayer: Generated GeoJSON:', {
+			featureCount: geoJSON.features.length,
+			firstFeature: geoJSON.features[0]
+		});
+		
+		// Update or create source
+		const source = map.getSource(SOURCE_ID);
+		if (source && source.type === 'geojson') {
+			console.log('RepeatersLayer: Updating existing source');
+			source.setData(geoJSON);
+		} else {
+			console.log('RepeatersLayer: Creating new source');
+			map.addSource(SOURCE_ID, {
+				type: 'geojson',
+				data: geoJSON
+			});
+		}
+		
+		// Add fill layer if not exists
+		if (!map.getLayer(FILL_LAYER_ID)) {
+			console.log('RepeatersLayer: Creating fill layer');
+			map.addLayer({
+				id: FILL_LAYER_ID,
+				type: 'fill',
+				source: SOURCE_ID,
+				layout: {
+					'fill-sort-key': ['get', 'sortKey'] // Use sortKey for z-ordering
+				},
+				paint: {
+					'fill-color': ['get', 'techBandColor'],
+					'fill-opacity': store.fillOpacity
+				},
+				metadata: {
+					zIndex: REPEATER_FILL_Z_INDEX
+				}
+			});
+		} else {
+			// Update fill opacity
+			console.log('RepeatersLayer: Updating fill opacity:', store.fillOpacity);
+			map.setPaintProperty(FILL_LAYER_ID, 'fill-opacity', store.fillOpacity);
+		}
+		
+		// Add line layer if not exists
+		if (!map.getLayer(LINE_LAYER_ID)) {
+			console.log('RepeatersLayer: Creating line layer');
+			map.addLayer({
+				id: LINE_LAYER_ID,
+				type: 'line',
+				source: SOURCE_ID,
+				layout: {
+					'line-sort-key': ['get', 'sortKey'] // Use sortKey for z-ordering
+				},
+				paint: {
+					'line-color': ['get', 'lineColor'],
+					'line-width': store.lineWidth,
+					'line-opacity': ['get', 'lineOpacity']
+				},
+				metadata: {
+					zIndex: REPEATER_LINE_Z_INDEX
+				}
+			});
+		} else {
+			// Update line width
+			console.log('RepeatersLayer: Updating line width:', store.lineWidth);
+			map.setPaintProperty(LINE_LAYER_ID, 'line-width', store.lineWidth);
+		}
+	});
+</script>
+
+<!-- This component doesn't render DOM, only Mapbox layers -->

package/dist/map-v2/features/repeaters/layers/RepeatersLayer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { RepeaterStoreContext } from '../stores/repeaterStoreContext.svelte';
+interface Props {
+    /** Repeater store context */
+    store: RepeaterStoreContext;
+    /** Unique namespace for layer IDs */
+    namespace: string;
+}
+declare const RepeatersLayer: import("svelte").Component<Props, {}, "">;
+type RepeatersLayer = ReturnType<typeof RepeatersLayer>;
+export default RepeatersLayer;

package/dist/map-v2/features/repeaters/stores/repeaterStoreContext.svelte.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Repeater Store Context - Reactive state for repeater feature
+ *
+ * Simplified store with fixed Tech → FBand tree structure
+ * Supports leaf-level coloring for each tech:fband combination
+ */
+import type { Repeater } from '../types';
+export interface RepeaterStoreValue {
+    repeaters: Repeater[];
+    visibleTechBands: Set<string>;
+    techBandColorMap: Map<string, string>;
+    showRepeaters: boolean;
+    baseRadius: number;
+    fillOpacity: number;
+    lineWidth: number;
+    showLabels: boolean;
+    primaryLabelField: keyof Repeater;
+    secondaryLabelField: keyof Repeater | 'none';
+    labelSize: number;
+    labelColor: string;
+    labelOffset: number;
+    labelHaloColor: string;
+    labelHaloWidth: number;
+    minLabelZoom: number;
+    currentZoom: number;
+}
+export interface RepeaterStoreContext {
+    readonly repeaters: Repeater[];
+    readonly filteredRepeaters: Repeater[];
+    readonly visibleTechBands: Set<string>;
+    readonly techBandColorMap: Map<string, string>;
+    readonly showRepeaters: boolean;
+    readonly baseRadius: number;
+    readonly fillOpacity: number;
+    readonly lineWidth: number;
+    readonly currentZoom: number;
+    readonly showLabels: boolean;
+    readonly primaryLabelField: keyof Repeater;
+    readonly secondaryLabelField: keyof Repeater | 'none';
+    readonly labelSize: number;
+    readonly labelColor: string;
+    readonly labelOffset: number;
+    readonly labelHaloColor: string;
+    readonly labelHaloWidth: number;
+    readonly minLabelZoom: number;
+    setRepeaters(repeaters: Repeater[]): void;
+    toggleTechBand(tech: string, fband: string): void;
+    isTechBandVisible(tech: string, fband: string): boolean;
+    getTechBandColor(tech: string, fband: string): string;
+    setTechBandColor(tech: string, fband: string, color: string): void;
+    setShowRepeaters(value: boolean): void;
+    setBaseRadius(value: number): void;
+    setFillOpacity(value: number): void;
+    setLineWidth(value: number): void;
+    setCurrentZoom(value: number): void;
+    setShowLabels(value: boolean): void;
+    setPrimaryLabelField(field: keyof Repeater): void;
+    setSecondaryLabelField(field: keyof Repeater | 'none'): void;
+    setLabelSize(value: number): void;
+    setLabelColor(value: string): void;
+    setLabelOffset(value: number): void;
+    setLabelHaloColor(value: string): void;
+    setLabelHaloWidth(value: number): void;
+    setMinLabelZoom(value: number): void;
+}
+/**
+ * Create a repeater store context with reactive state
+ */
+export declare function createRepeaterStoreContext(repeaters: Repeater[]): RepeaterStoreContext;