@smartnet360/svelte-components 0.0.95 → 0.0.96

package/dist/map-v3/features/cells/components/CellSettingsPanel.svelte

@@ -111,9 +111,29 @@
 						<option value="logarithmic">Logarithmic (smooth)</option>
 						<option value="percentage">Proportional (40%)</option>
 						<option value="tiered">Tiered (4 levels)</option>
+						<option value="hybrid">Hybrid (stepped proportional)</option>
 					</select>
 				</div>
 			</div>
+
+			<!-- Auto Size Base Multiplier -->
+			<div class="row align-items-center g-2 mb-3 ps-3">
+				<div class="col-4 text-secondary small">Base Size</div>
+				<div class="col-3 text-end">
+					<span class="badge bg-white text-muted border">{displayStore.autoSizeBase.toFixed(1)}x</span>
+				</div>
+				<div class="col-5">
+					<input
+						id="cell-autosize-base-slider"
+						type="range"
+						class="form-range w-100"
+						min="0.3"
+						max="2.0"
+						step="0.1"
+						bind:value={displayStore.autoSizeBase}
+					/>
+				</div>
+			</div>
 		{/if}
 
 		<div class="border-top my-3"></div>

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

@@ -100,10 +100,14 @@
 		// Initial setup
 		addLayers();
 
-		// Events for updating
+		// Events for updating - conditional based on auto-size
 		map.on('style.load', addLayers);
-		map.on('moveend', updateLayer);
-		map.on('zoomend', updateLayer);
+		
+		// Only listen to zoom/move events if NOT using auto-size
+		if (!displayStore.useAutoSize) {
+			map.on('moveend', updateLayer);
+			map.on('zoomend', updateLayer);
+		}
 
 		// Cleanup
 		return () => {
@@ -129,6 +133,7 @@
 		const _layerGrouping = displayStore.layerGrouping;
 		const _useAutoSize = displayStore.useAutoSize;
 		const _autoSizeMode = displayStore.autoSizeMode;
+		const _autoSizeBase = displayStore.autoSizeBase;
 		
 		updateLayer();
 	});
@@ -144,17 +149,17 @@
 	}
 
 	function renderCells(map: mapboxgl.Map) {
-		const bounds = map.getBounds();
-		if (!bounds) return;
-
 		const zoom = map.getZoom();
 		const centerLat = map.getCenter().lat;
 		
 		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
 
-		// 1. Calculate base radius
+		// 1. Calculate base radius (only used in manual mode)
 		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
-		console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
+		
+		if (!displayStore.useAutoSize) {
+			console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
+		}
 
 		// 2. Group cells (Level 1=Tech, Level 2=Band for now hardcoded)
 		// In real app, this comes from a store
@@ -173,43 +178,51 @@
 			if (!style.visible) continue;
 
 			for (const cell of cells) {
-				// 4. BBox Filter (Simple point check)
-				if (bounds.contains([cell.longitude, cell.latitude])) {
-					// 5. Z-Index Lookup
-					const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
-					const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
-
-					// 6. Calculate radius with z-index scaling
-					const MAX_Z = 35;
-					let radiusMeters: number;
-					
-					if (displayStore.useAutoSize) {
-						// Auto-size mode: get target radius for this site
-						const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
-						const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
-						
-						// Scale based on z-index for stacking visibility
-						// Lower z-index (background) = larger, higher z-index (foreground) = smaller
-						const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08; // 8% per layer
-						radiusMeters = autoRadius * scaleFactor;
-					} else {
-						// Manual mode: base from pixel size, then scale by z-index
-						const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
-						radiusMeters = baseRadiusMeters * scaleFactor;
+				// 4. BBox Filter - SKIP if auto-size is enabled
+				if (!displayStore.useAutoSize) {
+					const bounds = map.getBounds();
+					if (!bounds || !bounds.contains([cell.longitude, cell.latitude])) {
+						continue;
 					}
+				}
+				
+				// 5. Z-Index Lookup
+				const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
+				const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
+
+				// 6. Calculate radius with z-index scaling
+				const MAX_Z = 35;
+				let radiusMeters: number;
+				
+				if (displayStore.useAutoSize) {
+					// Auto-size mode: get target radius for this site
+					const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
+					const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
+					
+					// Apply base size multiplier
+					const baseAdjusted = autoRadius * displayStore.autoSizeBase;
+					
+					// Scale based on z-index for stacking visibility
+					// Lower z-index (background) = larger, higher z-index (foreground) = smaller
+					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08; // 8% per layer
+					radiusMeters = baseAdjusted * scaleFactor;
+				} else {
+					// Manual mode: base from pixel size, then scale by z-index
+					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
+					radiusMeters = baseRadiusMeters * scaleFactor;
+				}
 
-					// 7. Apply beamwidth boost from displayStore preset
-					const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
-					const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
+				// 7. Apply beamwidth boost from displayStore preset
+				const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
+				const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
 
-					// 8. Generate Arc
-					const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
-					features.push(feature);
-				}
+				// 8. Generate Arc
+				const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
+				features.push(feature);
 			}
 		}
 
-		console.log(`[CellsLayer] Generated ${features.length} features in view`);
+		console.log(`[CellsLayer] Generated ${features.length} features ${displayStore.useAutoSize ? '(all cells)' : 'in view'}`);
 
 		// 8. Update Source
 		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;

package/dist/map-v3/features/cells/logic/geometry.js

@@ -38,6 +38,29 @@ export function calculateAutoRadius(nearestSiteDistance, mode = 'logarithmic') {
                 return 120;
             return 180;
         }
+        case 'hybrid': {
+            // Stepped proportional - tiers with proportional scaling within each tier
+            if (nearestSiteDistance < 300) {
+                // Tier 1: 0-300m → 30-50m radius
+                const ratio = nearestSiteDistance / 300;
+                return 30 + (ratio * 20);
+            }
+            else if (nearestSiteDistance < 600) {
+                // Tier 2: 300-600m → 50-80m radius
+                const ratio = (nearestSiteDistance - 300) / 300;
+                return 50 + (ratio * 30);
+            }
+            else if (nearestSiteDistance < 1200) {
+                // Tier 3: 600-1200m → 80-120m radius
+                const ratio = (nearestSiteDistance - 600) / 600;
+                return 80 + (ratio * 40);
+            }
+            else {
+                // Tier 4: 1200m+ → 120-180m radius
+                const ratio = Math.min((nearestSiteDistance - 1200) / 1200, 1);
+                return 120 + (ratio * 60);
+            }
+        }
         default:
             return 80;
     }

package/dist/map-v3/features/cells/stores/cell.display.svelte.d.ts

@@ -9,6 +9,7 @@ export declare class CellDisplayStore {
     layerGrouping: LayerGroupingPreset;
     useAutoSize: boolean;
     autoSizeMode: AutoSizeMode;
+    autoSizeBase: number;
     level1: CellGroupingField;
     level2: CellGroupingField;
     currentZIndex: Record<string, number>;

package/dist/map-v3/features/cells/stores/cell.display.svelte.js

@@ -11,6 +11,7 @@ export class CellDisplayStore {
     // Auto-size settings
     useAutoSize = $state(false);
     autoSizeMode = $state('logarithmic');
+    autoSizeBase = $state(1.0);
     // Grouping
     level1 = $state('tech');
     level2 = $state('fband');
@@ -40,6 +41,7 @@ export class CellDisplayStore {
                     this.layerGrouping = parsed.layerGrouping ?? 'frequency';
                     this.useAutoSize = parsed.useAutoSize ?? false;
                     this.autoSizeMode = parsed.autoSizeMode ?? 'logarithmic';
+                    this.autoSizeBase = parsed.autoSizeBase ?? 1.0;
                     this.level1 = parsed.level1 ?? 'tech';
                     this.level2 = parsed.level2 ?? 'fband';
                     this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
@@ -64,6 +66,7 @@ export class CellDisplayStore {
                     layerGrouping: this.layerGrouping,
                     useAutoSize: this.useAutoSize,
                     autoSizeMode: this.autoSizeMode,
+                    autoSizeBase: this.autoSizeBase,
                     level1: this.level1,
                     level2: this.level2,
                     labelPixelDistance: this.labelPixelDistance,

package/dist/map-v3/features/cells/types.d.ts

@@ -63,7 +63,7 @@ export type CellGroupingField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' |
 /**
  * Auto-size calculation modes
  */
-export type AutoSizeMode = 'logarithmic' | 'percentage' | 'tiered';
+export type AutoSizeMode = 'logarithmic' | 'percentage' | 'tiered' | 'hybrid';
 /**
  * Site distance data for auto-sizing
  */

package/package.json

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