@smartnet360/svelte-components 0.0.68 → 0.0.69

package/dist/map-v2/features/cells/controls/CellStyleControl.svelte

@@ -317,7 +317,7 @@
 					type="range"
 					class="form-range"
 					min="1"
-					max="15"
+					max="45"
 					step="1"
 					value={store.azimuthTolerance}
 					oninput={(e) => store.setAzimuthTolerance(Number(e.currentTarget.value))}

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

@@ -15,6 +15,8 @@
 	import { waitForStyleLoad, generateLayerId, generateSourceId } from '../../../shared/utils/mapboxHelpers';
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
 	import type { Cell } from '../types';
+	import { parseTechBand } from '../utils/techBandParser';
+	import { calculateRadius } from '../utils/zoomScaling';
 	import * as turf from '@turf/turf';
 	
 	interface Props {
@@ -75,10 +77,13 @@
 	function buildLabelFeatures(): GeoJSON.FeatureCollection {
 		const features: GeoJSON.Feature[] = [];
 		
-		if (!store.showLabels || store.filteredCells.length === 0) {
+		if (!store.showLabels || store.filteredCells.length === 0 || !map) {
 			return { type: 'FeatureCollection', features: [] };
 		}
 		
+		// Get current zoom level
+		const currentZoom = map.getZoom();
+		
 		// Group cells by site + azimuth
 		const cellGroups = groupCellsByAzimuth(store.filteredCells, store.azimuthTolerance);
 		
@@ -86,6 +91,11 @@
 			// Sort cells within group for consistent stacking
 			cells.sort((a, b) => a.id.localeCompare(b.id));
 			
+			// Calculate total height of all labels in this group
+			const totalGroupHeight = cells.length * store.labelSize * 1.5;
+			// Center offset: shift entire group up by half its height
+			const groupCenterOffset = -totalGroupHeight / 2;
+			
 			cells.forEach((cell, index) => {
 				// Determine which fields to use based on tech
 				const is2G = cell.tech === '2G';
@@ -104,17 +114,27 @@
 				
 				if (!labelText.trim()) return; // Skip if no text
 				
+				// Calculate zoom-aware radius for this cell
+				const techBandParsed = parseTechBand(cell.fband);
+				const techBandKey = techBandParsed?.key || '4G_1800'; // Fallback to default
+				const cellRadius = calculateRadius(store.baseRadius, techBandKey, currentZoom);
+				
+				// Position label at a percentage of the arc radius (configurable via labelOffset)
+				// labelOffset is treated as a percentage (e.g., 300 = 300% = beyond arc, 70 = 70% = inside arc)
+				const labelDistance = (cellRadius * store.labelOffset) / 100;
+				
 				// Project label position along azimuth
 				const origin = turf.point([cell.siteLongitude, cell.siteLatitude]);
 				const labelPosition = turf.destination(
 					origin,
-					store.labelOffset / 1000, // Convert meters to kilometers
+					labelDistance / 1000, // Convert meters to kilometers
 					cell.azimuth,
 					{ units: 'kilometers' }
 				);
 				
 				// Calculate vertical offset for stacking (pixels)
-				const stackOffset = index * (store.labelSize + 4);
+				// Position within the centered group
+				const stackOffset = groupCenterOffset + (index * store.labelSize * 1.5) + (store.labelSize * 0.75);
 				
 				features.push({
 					type: 'Feature',
@@ -140,6 +160,15 @@
 		const geojson = buildLabelFeatures();
 		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);
+		}
 	}
 	
 	onMount(async () => {
@@ -173,15 +202,15 @@
 						'text-field': ['get', 'text'],
 						'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
 						'text-size': store.labelSize,
-						'text-anchor': 'center',
+						'text-anchor': 'center', // Center horizontally only
 						'text-offset': [
 							0,
-							['/', ['get', 'stackOffset'], store.labelSize] // Dynamic vertical offset
+							['/', ['get', 'stackOffset'], store.labelSize] // Offset includes centering adjustment
 						],
 						'text-allow-overlap': true,
 						'text-ignore-placement': false,
 						'text-max-width': 999, // Essentially disable wrapping
-						'text-justify': 'center' // Center multi-line text
+						'text-justify': 'center' // Center horizontally
 					},
 					paint: {
 						'text-color': store.labelColor,
@@ -193,6 +222,9 @@
 			
 			// Initial render
 			updateLabels();
+			
+			// Listen for zoom changes to update label positions
+			map.on('zoom', updateLabels);
 		});
 	});
 	
@@ -207,25 +239,26 @@
 		store.secondaryLabelField2G;
 		store.labelOffset;
 		store.azimuthTolerance;
+		store.baseRadius; // Zoom-based radius calculation depends on baseRadius
 		
-		updateLabels();
-	});
-	
-	// Watch for style changes and update layer paint/layout properties
-	$effect(() => {
-		if (!map || !map.getLayer(layerId)) return;
+		// Also watch style properties - when they change, updateLabels() will
+		// rebuild the GeoJSON which forces Mapbox to re-read paint properties from store
+		store.labelSize;
+		store.labelColor;
+		store.labelHaloColor;
+		store.labelHaloWidth;
+		store.minLabelZoom;
 		
-		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);
+		updateLabels();
 	});
 	
 	onDestroy(() => {
 		unsubscribe?.();
 		
 		if (map) {
+			// Remove zoom listener
+			map.off('zoom', updateLabels);
+			
 			if (map.getLayer(layerId)) {
 				map.removeLayer(layerId);
 			}

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

@@ -70,7 +70,7 @@ export function createCellStoreContext(cells) {
         labelHaloColor: persistedSettings.labelHaloColor ?? '#ffffff',
         labelHaloWidth: persistedSettings.labelHaloWidth ?? 1,
         minLabelZoom: persistedSettings.minLabelZoom ?? 14,
-        azimuthTolerance: persistedSettings.azimuthTolerance ?? 5
+        azimuthTolerance: persistedSettings.azimuthTolerance ?? 25
     });
     // Derived: Filter cells by status based on includePlannedCells flag
     // IMPORTANT: This is a pure $derived - it only READS from state, never writes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.68",
+	"version": "0.0.69",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",