@smartnet360/svelte-components 0.0.74 → 0.0.76

package/dist/map-v2/core/providers/MapboxProvider.svelte

@@ -40,6 +40,8 @@
 		navigationPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Position for scale control */
 		scalePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** List of anchor layer IDs to create (invisible background layers for positioning) */
+		anchorLayerIds?: string[];
 		/** Custom CSS class for container */
 		class?: string;
 		/** Optional child content (layers, controls, etc.) */
@@ -59,6 +61,7 @@
 		controls = [],
 		navigationPosition = 'top-right',
 		scalePosition = 'bottom-left',
+		anchorLayerIds = [],
 		class: className = '',
 		children
 	}: Props = $props();
@@ -71,6 +74,25 @@
 	let map: MapboxMap | null = null;
 	let isExternalMap = false;
 
+	/**
+	 * Creates invisible anchor layers for predictable layer ordering
+	 * These are background layers with visibility: none that serve as positioning markers
+	 */
+	function createAnchorLayers(mapInstance: MapboxMap, layerIds: string[]) {
+		layerIds.forEach((layerId) => {
+			// Check if layer already exists (e.g., when style reloads)
+			if (!mapInstance.getLayer(layerId)) {
+				mapInstance.addLayer({
+					id: layerId,
+					type: 'background',
+					layout: {
+						visibility: 'none'
+					}
+				});
+			}
+		});
+	}
+
 	onMount(() => {
 		// If external map is provided, use it instead of creating a new one
 		if (externalMap) {
@@ -129,10 +151,17 @@
 
 		// Wait for style to load before distributing map
 		const onStyleLoad = () => {
+			// Create anchor layers if specified
+			if (anchorLayerIds.length > 0 && map) {
+				createAnchorLayers(map, anchorLayerIds);
+			}
 			mapStore.set(map);
 		};
 
 		if (map.isStyleLoaded()) {
+			if (anchorLayerIds.length > 0) {
+				createAnchorLayers(map, anchorLayerIds);
+			}
 			mapStore.set(map);
 		} else {
 			map.once('style.load', onStyleLoad);

package/dist/map-v2/core/providers/MapboxProvider.svelte.d.ts

@@ -25,6 +25,8 @@ interface Props {
     navigationPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Position for scale control */
     scalePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** List of anchor layer IDs to create (invisible background layers for positioning) */
+    anchorLayerIds?: string[];
     /** Custom CSS class for container */
     class?: string;
     /** Optional child content (layers, controls, etc.) */

package/dist/map-v2/features/cells/layers/CellsLayer.svelte

@@ -14,7 +14,7 @@
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
 	import { useMapbox } from '../../../core/hooks/useMapbox';
 	import { cellsToGeoJSON } from '../utils/cellGeoJSON';
-	import { CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from '../constants/zIndex';
+	import { CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX, Z_INDEX_BY_BAND } from '../constants/zIndex';
 
 	interface Props {
 		/** Cell store context */
@@ -24,28 +24,34 @@
 	}
 
 	let { store, namespace }: Props = $props();
-	
-	const FILL_LAYER_ID = `${namespace}-cells-fill`;
-	const LINE_LAYER_ID = `${namespace}-cells-line`;
+
 	const SOURCE_ID = `${namespace}-cells`;
-	
+
 	// 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 this to force $effect re-run on viewport changes
-	
+
+	// Get all unique z-index values and sort them
+	const sortedZIndexes = [...new Set(Object.values(Z_INDEX_BY_BAND))].sort((a, b) => a - b);
+
+	// Create layer IDs for each z-index
+	const fillLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-cells-fill-${zIndex}`);
+	const lineLayerIds = sortedZIndexes.map((zIndex) => `${namespace}-cells-line-${zIndex}`);
+	const allLayerIds = [...fillLayerIds, ...lineLayerIds];
+
 	// Viewport change handler (pan/zoom/move) 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;
@@ -57,86 +63,85 @@
 			viewportVersion++;
 		}, 200);
 	}
-	
+
 	/**
 	 * Initialize or reinitialize the cell layers
 	 * Called on mount and when map style changes
 	 */
 	function initializeLayer() {
 		if (!map) return;
-		
+
 		console.log('CellsLayer: initializeLayer called');
-		
+
 		// Set initial zoom
 		store.setCurrentZoom(map.getZoom());
-		
+
 		// Add moveend listener if not already added
 		// Note: We need to be careful not to duplicate listeners
 		map.off('moveend', handleMoveEnd); // Remove if exists
-		map.on('moveend', handleMoveEnd);  // Add it back
-		
+		map.on('moveend', handleMoveEnd); // Add it back
+
 		// Mark as mounted to trigger $effect
 		mounted = true;
-		
+
 		// Force $effect to re-run by incrementing viewportVersion
 		// This is critical after style.load when layers need to be recreated
 		// but mounted/map haven't changed (they're already true/set)
 		viewportVersion++;
 	}
-	
+
 	onMount(() => {
 		console.log('CellsLayer: onMount, waiting for map...');
-		
+
 		// Subscribe to map store
 		const unsubscribe = mapStore.subscribe((mapInstance) => {
 			if (mapInstance && !map) {
 				console.log('CellsLayer: 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);
-		}
+		allLayerIds.forEach((id) => {
+			if (map.getLayer(id)) {
+				map.removeLayer(id);
+			}
+		});
 		if (map.getSource(SOURCE_ID)) {
 			map.removeSource(SOURCE_ID);
 		}
 	});
-	
+
 	// Reactive: Update GeoJSON when cells/zoom/filters/settings change
 	$effect(() => {
 		// Track viewportVersion to force re-run on pan (even without zoom change)
 		viewportVersion;
-		
+
 		console.log('CellsLayer $effect triggered:', {
 			mounted,
 			hasMap: !!map,
@@ -146,35 +151,35 @@
 			baseRadius: store.baseRadius,
 			viewportVersion
 		});
-		
-		if (!mounted || !map || !store.showCells) {
+
+		if (!mounted || !map) {
+			return;
+		}
+
+		if (!store.showCells) {
 			// Remove layers if showCells is false
-			if (mounted && map) {
-				console.log('CellsLayer: Removing layers (showCells=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);
+			allLayerIds.forEach((id) => {
+				if (map.getLayer(id)) {
+					map.removeLayer(id);
 				}
+			});
+			if (map.getSource(SOURCE_ID)) {
+				map.removeSource(SOURCE_ID);
 			}
 			return;
 		}
-		
+
 		// Filter cells by viewport bounds (only render visible cells)
 		const bounds = map.getBounds();
 		if (!bounds) {
 			console.warn('CellsLayer: Cannot get map bounds, skipping viewport filter');
 			return;
 		}
-		
-		const visibleCells = store.filteredCells.filter(cell => 
+
+		const visibleCells = store.filteredCells.filter((cell) =>
 			bounds.contains([cell.longitude, cell.latitude])
 		);
-		
+
 		console.log('CellsLayer: Viewport filtering:', {
 			totalFiltered: store.filteredCells.length,
 			visibleInViewport: visibleCells.length,
@@ -185,7 +190,7 @@
 				west: bounds.getWest()
 			}
 		});
-		
+
 		// Generate GeoJSON from visible cells only
 		const geoJSON = cellsToGeoJSON(
 			visibleCells,
@@ -194,12 +199,12 @@
 			store.groupColorMap,
 			store.cellGroupMap // Pass lookup map for O(1) color lookup
 		);
-		
+
 		console.log('CellsLayer: 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') {
@@ -212,60 +217,76 @@
 				data: geoJSON
 			});
 		}
-		
-		// Add fill layer if not exists
-		if (!map.getLayer(FILL_LAYER_ID)) {
-			console.log('CellsLayer: Creating fill layer');
-			map.addLayer({
-				id: FILL_LAYER_ID,
-				type: 'fill',
-				source: SOURCE_ID,
-				paint: {
-					'fill-color': [
-						'coalesce',
-						['get', 'groupColor'],
-						['get', 'techBandColor'],
-						'#888888' // Fallback
-					],
-					'fill-opacity': store.fillOpacity
-				},
-				metadata: {
-					zIndex: CELL_FILL_Z_INDEX
-				}
-			});
-		} else {
-			// Update fill opacity
-			console.log('CellsLayer: 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('CellsLayer: Creating line layer');
-			map.addLayer({
-				id: LINE_LAYER_ID,
-				type: 'line',
-				source: SOURCE_ID,
-				paint: {
-					'line-color': ['get', 'lineColor'],
-					'line-width': store.lineWidth,
-					'line-opacity': ['get', 'lineOpacity'],
-					'line-dasharray': [
-						'case',
-						['has', 'dashArray'],
-						['get', 'dashArray'],
-						['literal', [1, 0]] // Solid line default
-					]
-				},
-				metadata: {
-					zIndex: CELL_LINE_Z_INDEX
-				}
-			});
-		} else {
-			// Update line width
-			console.log('CellsLayer: Updating line width:', store.lineWidth);
-			map.setPaintProperty(LINE_LAYER_ID, 'line-width', store.lineWidth);
+
+		// Get all unique bands for the current z-index
+		const bandsByZIndex = new Map<number, string[]>();
+		for (const [band, zIndex] of Object.entries(Z_INDEX_BY_BAND)) {
+			if (!bandsByZIndex.has(zIndex)) {
+				bandsByZIndex.set(zIndex, []);
+			}
+			bandsByZIndex.get(zIndex)?.push(band);
 		}
+
+		// Add/update layers for each z-index level
+		sortedZIndexes.forEach((zIndex) => {
+			const fillLayerId = `${namespace}-cells-fill-${zIndex}`;
+			const lineLayerId = `${namespace}-cells-line-${zIndex}`;
+			const bands = bandsByZIndex.get(zIndex) || [];
+
+			// Add fill layer if not exists
+			if (!map.getLayer(fillLayerId)) {
+				console.log(`CellsLayer: Creating fill layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: fillLayerId,
+					type: 'fill',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'fill-color': [
+							'coalesce',
+							['get', 'groupColor'],
+							['get', 'techBandColor'],
+							'#888888' // Fallback
+						],
+						'fill-opacity': store.fillOpacity
+					},
+					metadata: {
+						zIndex: CELL_FILL_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update fill opacity
+				map.setPaintProperty(fillLayerId, 'fill-opacity', store.fillOpacity);
+			}
+
+			// Add line layer if not exists
+			if (!map.getLayer(lineLayerId)) {
+				console.log(`CellsLayer: Creating line layer for z-index ${zIndex}`);
+				map.addLayer({
+					id: lineLayerId,
+					type: 'line',
+					source: SOURCE_ID,
+					filter: ['in', ['get', 'techBandKey'], ['literal', bands]],
+					paint: {
+						'line-color': ['get', 'lineColor'],
+						'line-width': store.lineWidth,
+						'line-opacity': ['get', 'lineOpacity'],
+						'line-dasharray': [
+							'case',
+							['has', 'dashArray'],
+							['get', 'dashArray'],
+							['literal', [1, 0]] // Solid line default
+						]
+					},
+					metadata: {
+						zIndex: CELL_LINE_Z_INDEX + zIndex
+					}
+				});
+			} else {
+				// Update line width
+				map.setPaintProperty(lineLayerId, 'line-width', store.lineWidth);
+			}
+		});
 	});
 </script>
 

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.js

@@ -74,22 +74,10 @@ export function createCellStoreContext(cells) {
     });
     // Derived: Filter cells by status based on includePlannedCells flag
     // IMPORTANT: This is a pure $derived - it only READS from state, never writes
-    // Memoized to avoid re-filtering when cells array reference hasn't changed
-    let lastCellsRef = null;
-    let lastIncludePlanned = null;
-    let cachedFilteredCells = [];
-    let cellsFilteredByStatus = $derived.by(() => {
-        // Only recompute if cells reference or flag changed
-        if (state.cells === lastCellsRef && state.includePlannedCells === lastIncludePlanned) {
-            return cachedFilteredCells;
-        }
-        lastCellsRef = state.cells;
-        lastIncludePlanned = state.includePlannedCells;
-        cachedFilteredCells = state.includePlannedCells
-            ? state.cells // Include all cells
-            : state.cells.filter(cell => cell.status.startsWith('On_Air')); // Only On Air cells
-        return cachedFilteredCells;
-    });
+    let cellsFilteredByStatus = $derived(state.includePlannedCells
+        ? state.cells // Include all cells
+        : state.cells.filter(cell => cell.status.startsWith('On_Air')) // Only On Air cells
+    );
     // Auto-save settings when they change
     $effect(() => {
         // Convert Map to plain object for serialization

package/dist/map-v2/features/cells/utils/cellGeoJSON.js

@@ -5,6 +5,7 @@
  */
 import { TECHNOLOGY_BAND_COLORS } from '../constants/colors';
 import { DEFAULT_STATUS_STYLES } from '../constants/statusStyles';
+import { Z_INDEX_BY_BAND } from '../constants/zIndex';
 import { calculateRadius } from './zoomScaling';
 import { createArcPolygon } from './arcGeometry';
 /**
@@ -61,6 +62,7 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
                 techBandKey,
                 techBandColor: defaultColor, // Default color from constants
                 groupColor: groupColor, // Custom color (if set)
+                zIndex: Z_INDEX_BY_BAND[techBandKey] || 0, // Z-index for layer ordering
                 // Line (border) styling from status
                 lineColor: statusStyle.lineColor,
                 lineWidth: statusStyle.lineWidth,

package/dist/map-v2/features/repeaters/constants/techBandZOrder.d.ts

@@ -1,25 +1,12 @@
 /**
  * Z-Index ordering for repeater tech-band combinations
  *
+ * This uses the same Z_INDEX_BY_BAND constant as cells for consistency.
  * Higher frequency bands are rendered on top when repeaters overlap.
- * This follows the same pattern as cells.
  */
+import type { TechnologyBandKey } from '../../cells/types';
 /**
- * Z-index ordering for tech:fband combinations
+ * Shared z-index ordering by technology-band key
  * Higher number = rendered on top
- *
- * Organized by frequency (low to high):
- * - Lower frequencies (700-900) at bottom
- * - Mid frequencies (1800-2100) in middle
- * - Higher frequencies (2600-3500) on top
- */
-export declare const REPEATER_TECH_BAND_Z_ORDER: Record<string, number>;
-/**
- * Get z-order index for a tech:fband combination
- * Used to set the sort key for layering overlapping repeaters
- *
- * @param tech - Technology (2G, 4G, 5G)
- * @param fband - Frequency band (e.g., "LTE1800", "GSM900")
- * @returns Z-order index (defaults to 0 if not found)
  */
-export declare function getRepeaterZOrder(tech: string, fband: string): number;
+export declare const Z_INDEX_BY_BAND: Record<TechnologyBandKey, number>;

package/dist/map-v2/features/repeaters/constants/techBandZOrder.js

@@ -1,43 +1,26 @@
 /**
  * Z-Index ordering for repeater tech-band combinations
  *
+ * This uses the same Z_INDEX_BY_BAND constant as cells for consistency.
  * Higher frequency bands are rendered on top when repeaters overlap.
- * This follows the same pattern as cells.
  */
 /**
- * Z-index ordering for tech:fband combinations
+ * Shared z-index ordering by technology-band key
  * Higher number = rendered on top
- *
- * Organized by frequency (low to high):
- * - Lower frequencies (700-900) at bottom
- * - Mid frequencies (1800-2100) in middle
- * - Higher frequencies (2600-3500) on top
  */
-export const REPEATER_TECH_BAND_Z_ORDER = {
-    // 2G bands (lowest)
-    '2G:GSM900': 1,
-    '2G:GSM1800': 2,
-    // 4G bands (medium)
-    '4G:LTE700': 3,
-    '4G:LTE800': 4,
-    '4G:LTE900': 5,
-    '4G:LTE1800': 6,
-    '4G:LTE2100': 7,
-    '4G:LTE2600': 8,
-    // 5G bands (highest)
-    '5G:5G-700': 9,
-    '5G:5G-2100': 10,
-    '5G:5G-3500': 11,
+export const Z_INDEX_BY_BAND = {
+    // 2G bands
+    '2G_900': 5,
+    '2G_1800': 4,
+    // 4G bands
+    '4G_700': 2,
+    '4G_800': 3,
+    '4G_900': 4,
+    '4G_1800': 8,
+    '4G_2100': 9,
+    '4G_2600': 11,
+    // 5G bands
+    '5G_700': 9,
+    '5G_2100': 10,
+    '5G_3500': 12
 };
-/**
- * Get z-order index for a tech:fband combination
- * Used to set the sort key for layering overlapping repeaters
- *
- * @param tech - Technology (2G, 4G, 5G)
- * @param fband - Frequency band (e.g., "LTE1800", "GSM900")
- * @returns Z-order index (defaults to 0 if not found)
- */
-export function getRepeaterZOrder(tech, fband) {
-    const key = `${tech}:${fband}`;
-    return REPEATER_TECH_BAND_Z_ORDER[key] ?? 0;
-}

package/dist/map-v2/features/repeaters/index.d.ts

@@ -13,4 +13,4 @@ export { repeatersToGeoJSON } from './utils/repeaterGeoJSON';
 export { buildRepeaterTree, getFilteredRepeaters } from './utils/repeaterTree';
 export { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX } from './constants/zIndex';
 export { REPEATER_RADIUS_MULTIPLIER, getRepeaterRadiusMultiplier } from './constants/radiusMultipliers';
-export { REPEATER_TECH_BAND_Z_ORDER, getRepeaterZOrder } from './constants/techBandZOrder';
+export { Z_INDEX_BY_BAND } from './constants/techBandZOrder';

package/dist/map-v2/features/repeaters/index.js

@@ -16,4 +16,4 @@ export { buildRepeaterTree, getFilteredRepeaters } from './utils/repeaterTree';
 // Constants
 export { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX, REPEATER_LABEL_Z_INDEX } from './constants/zIndex';
 export { REPEATER_RADIUS_MULTIPLIER, getRepeaterRadiusMultiplier } from './constants/radiusMultipliers';
-export { REPEATER_TECH_BAND_Z_ORDER, getRepeaterZOrder } from './constants/techBandZOrder';
+export { Z_INDEX_BY_BAND } from './constants/techBandZOrder';