@smartnet360/svelte-components 0.0.95 → 0.0.97

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

@@ -111,12 +111,102 @@
 						<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>
-		{/if}
 
-		<div class="border-top my-3"></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.5"
+						max="3.0"
+						step="0.1"
+						bind:value={displayStore.autoSizeBase}
+					/>
+				</div>
+			</div>
+		{:else}
+			<!-- Density-Based Caps (Manual Mode Only) -->
+			<div class="ps-3 border-start border-2 mb-3">
+				<!-- Min Cap -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-7 text-secondary small">Min Size Cap (Density)</div>
+					<div class="col-5">
+						<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
+							<input
+								id="cell-mincap-toggle"
+								type="checkbox"
+								class="form-check-input"
+								role="switch"
+								bind:checked={displayStore.useMinCap}
+							/>
+						</div>
+					</div>
+				</div>
+
+				<!-- Max Cap -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-7 text-secondary small">Max Size Cap (Density)</div>
+					<div class="col-5">
+						<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
+							<input
+								id="cell-maxcap-toggle"
+								type="checkbox"
+								class="form-check-input"
+								role="switch"
+								bind:checked={displayStore.useMaxCap}
+							/>
+						</div>
+					</div>
+				</div>
+
+				{#if displayStore.useMinCap || displayStore.useMaxCap}
+					<!-- Cap Mode (shares auto-size settings) -->
+					<div class="row align-items-center g-2 mb-2 mt-2">
+						<div class="col-4 text-secondary small">Cap Mode</div>
+						<div class="col-8">
+							<select 
+								class="form-select form-select-sm" 
+								bind:value={displayStore.autoSizeMode}
+							>
+								<option value="logarithmic">Logarithmic</option>
+								<option value="percentage">Proportional</option>
+								<option value="tiered">Tiered</option>
+								<option value="hybrid">Hybrid</option>
+							</select>
+						</div>
+					</div>
+
+					<!-- Cap Base -->
+					<div class="row align-items-center g-2 mb-2">
+						<div class="col-4 text-secondary small">Cap Base</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-cap-base-slider"
+								type="range"
+								class="form-range w-100"
+								min="0.5"
+								max="3.0"
+								step="0.1"
+								bind:value={displayStore.autoSizeBase}
+							/>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}		<div class="border-top my-3"></div>
 
 		<!-- Show Labels -->
 		<div class="row align-items-center g-2 mb-3">

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,9 @@
 		const _layerGrouping = displayStore.layerGrouping;
 		const _useAutoSize = displayStore.useAutoSize;
 		const _autoSizeMode = displayStore.autoSizeMode;
+		const _autoSizeBase = displayStore.autoSizeBase;
+		const _useMinCap = displayStore.useMinCap;
+		const _useMaxCap = displayStore.useMaxCap;
 		
 		updateLayer();
 	});
@@ -144,17 +151,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 +180,70 @@
 			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;
+				// 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;
 					
-					if (displayStore.useAutoSize) {
-						// Auto-size mode: get target radius for this site
+					// Apply density-based caps if enabled
+					if (displayStore.useMinCap || displayStore.useMaxCap) {
 						const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
 						const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
+						const baseAdjusted = autoRadius * displayStore.autoSizeBase;
+						const scaledAuto = baseAdjusted * scaleFactor;
 						
-						// 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;
+						// Apply caps: min = 60% of auto-size, max = 140% of auto-size
+						const minCap = scaledAuto * 0.6;
+						const maxCap = scaledAuto * 1.4;
+						
+						if (displayStore.useMinCap && radiusMeters < minCap) {
+							radiusMeters = minCap;
+						}
+						if (displayStore.useMaxCap && radiusMeters > maxCap) {
+							radiusMeters = maxCap;
+						}
 					}
+				}
 
-					// 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,9 @@ export declare class CellDisplayStore {
     layerGrouping: LayerGroupingPreset;
     useAutoSize: boolean;
     autoSizeMode: AutoSizeMode;
+    autoSizeBase: number;
+    useMinCap: boolean;
+    useMaxCap: boolean;
     level1: CellGroupingField;
     level2: CellGroupingField;
     currentZIndex: Record<string, number>;

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

@@ -11,6 +11,10 @@ export class CellDisplayStore {
     // Auto-size settings
     useAutoSize = $state(false);
     autoSizeMode = $state('logarithmic');
+    autoSizeBase = $state(1.0);
+    // Density-based caps (for manual mode)
+    useMinCap = $state(false);
+    useMaxCap = $state(false);
     // Grouping
     level1 = $state('tech');
     level2 = $state('fband');
@@ -40,6 +44,9 @@ 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.useMinCap = parsed.useMinCap ?? false;
+                    this.useMaxCap = parsed.useMaxCap ?? false;
                     this.level1 = parsed.level1 ?? 'tech';
                     this.level2 = parsed.level2 ?? 'fband';
                     this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
@@ -64,6 +71,9 @@ export class CellDisplayStore {
                     layerGrouping: this.layerGrouping,
                     useAutoSize: this.useAutoSize,
                     autoSizeMode: this.autoSizeMode,
+                    autoSizeBase: this.autoSizeBase,
+                    useMinCap: this.useMinCap,
+                    useMaxCap: this.useMaxCap,
                     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.97",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",