@smartnet360/svelte-components 0.0.85 → 0.0.87

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

@@ -16,6 +16,7 @@
 	import type { RepeaterStoreContext } from '../stores/repeaterStoreContext.svelte';
 	import type { Repeater } from '../types';
 	import * as turf from '@turf/turf';
+	import { log } from '../../../../core/logger';
 	
 	interface Props {
 		/** Repeater store context */
@@ -66,18 +67,7 @@
 	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: [] };
 		}
 		
@@ -134,11 +124,7 @@
 			});
 		});
 		
-		console.log('RepeaterLabelsLayer: Built features', {
-			totalRepeaters: store.filteredRepeaters.length,
-			visibleInViewport: visibleRepeaters.length,
-			featuresGenerated: features.length
-		});
+		log('RepeaterLabelsLayer features:', features.length, 'of', visibleRepeaters.length, 'visible repeaters');
 		
 		return { type: 'FeatureCollection', features };
 	}
@@ -151,15 +137,7 @@
 		
 		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
-		});
+		log('RepeaterLabelsLayer: Updating', geojson.features.length, 'labels');
 		
 		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
 		source.setData(geojson);
@@ -171,8 +149,6 @@
 			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');
 		}
 	}
 	

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

@@ -18,6 +18,7 @@
 	import { repeatersToGeoJSON } from '../utils/repeaterGeoJSON';
 	import { REPEATER_FILL_Z_INDEX, REPEATER_LINE_Z_INDEX } from '../constants/zIndex';
 	import { Z_INDEX_BY_BAND } from '../constants/techBandZOrder';
+	import { log } from '../../../../core/logger';
 
 	interface Props {
 		/** Repeater store context */
@@ -59,7 +60,7 @@
 		viewportUpdateTimer = setTimeout(() => {
 			if (!map) return;
 			const newZoom = map.getZoom();
-			console.log('RepeatersLayer: Viewport changed, updating to zoom:', newZoom);
+			log('RepeatersLayer: Viewport changed, updating to zoom:', newZoom);
 			// Update zoom
 			store.setCurrentZoom(newZoom);
 			// Force $effect to re-run
@@ -74,8 +75,6 @@
 	function initializeLayer() {
 		if (!map) return;
 
-		console.log('RepeatersLayer: initializeLayer called');
-
 		// Set initial zoom
 		store.setCurrentZoom(map.getZoom());
 
@@ -91,12 +90,9 @@
 	}
 
 	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
@@ -137,19 +133,16 @@
 		}
 	});
 	
-	// Reactive: Update GeoJSON when repeaters/zoom/settings change
+	// Reactive: Update GeoJSON when repeaters/zoom/filters/settings change
 	$effect(() => {
-		// Track viewportVersion to force re-run on pan
+		// Track viewportVersion to force re-run on viewport changes
 		viewportVersion;
 
-		console.log('RepeatersLayer $effect triggered:', {
+		log('RepeatersLayer update:', {
 			mounted,
 			hasMap: !!map,
 			showRepeaters: store.showRepeaters,
-			filteredRepeatersCount: store.filteredRepeaters.length,
-			currentZoom: store.currentZoom,
-			baseRadius: store.baseRadius,
-			viewportVersion
+			filteredCount: store.filteredRepeaters.length
 		});
 
 		if (!mounted || !map) {
@@ -180,10 +173,7 @@
 			bounds.contains([repeater.longitude, repeater.latitude])
 		);
 
-		console.log('RepeatersLayer: Viewport filtering:', {
-			totalFiltered: store.filteredRepeaters.length,
-			visibleInViewport: visibleRepeaters.length
-		});
+		log('RepeatersLayer viewport filter:', visibleRepeaters.length, 'of', store.filteredRepeaters.length);
 
 		// Generate GeoJSON from visible repeaters only
 		const geoJSON = repeatersToGeoJSON(
@@ -193,18 +183,13 @@
 			store.techBandColorMap
 		);
 
-		console.log('RepeatersLayer: Generated GeoJSON:', {
-			featureCount: geoJSON.features.length,
-			firstFeature: geoJSON.features[0]
-		});
+		log('RepeatersLayer GeoJSON:', geoJSON.features.length, 'features');
 
 		// 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
@@ -228,7 +213,6 @@
 
 			// Add fill layer if not exists
 			if (!map.getLayer(fillLayerId)) {
-				console.log(`RepeatersLayer: Creating fill layer for z-index ${zIndex}`);
 				map.addLayer({
 					id: fillLayerId,
 					type: 'fill',
@@ -249,7 +233,6 @@
 
 			// Add line layer if not exists
 			if (!map.getLayer(lineLayerId)) {
-				console.log(`RepeatersLayer: Creating line layer for z-index ${zIndex}`);
 				map.addLayer({
 					id: lineLayerId,
 					type: 'line',

package/dist/map-v2/features/repeaters/utils/repeaterTree.js

@@ -75,10 +75,8 @@ export function buildRepeaterTree(repeaters, colorMap) {
  */
 export function getFilteredRepeaters(checkedPaths) {
     const selected = new Set();
-    console.log('getFilteredRepeaters - checkedPaths:', Array.from(checkedPaths));
     // If only root is checked, all tech:fbands are visible
     if (checkedPaths.has('root') && checkedPaths.size === 1) {
-        console.log('Only root checked - returning empty set for "all visible"');
         return selected;
     }
     // Check each path - leaf nodes have tech:fband in their ID
@@ -86,14 +84,12 @@ export function getFilteredRepeaters(checkedPaths) {
         // Paths are like "root:2G:2G:GSM900" where the node ID is the last segment
         // The node ID for leaf nodes is "tech:fband" format
         const parts = path.split(':');
-        console.log('Processing path:', path, 'parts:', parts);
         // Check if this is a leaf node (contains tech:fband format)
         // Leaf node IDs are like "2G:GSM900", "4G:LTE1800"
         // The path would be "root:2G:2G:GSM900" (root -> tech -> tech:fband)
         if (parts.length === 4 && parts[0] === 'root') {
             // This is a leaf node: root:tech:tech:fband
             const techBandKey = `${parts[2]}:${parts[3]}`;
-            console.log('Adding tech:fband key:', techBandKey);
             selected.add(techBandKey);
         }
         else if (parts.length === 3 && parts[0] === 'root') {
@@ -101,11 +97,9 @@ export function getFilteredRepeaters(checkedPaths) {
             const nodeId = parts[2];
             if (nodeId && nodeId.includes(':')) {
                 // This is already in tech:fband format
-                console.log('Adding tech:fband key (alternative format):', nodeId);
                 selected.add(nodeId);
             }
         }
     }
-    console.log('getFilteredRepeaters - selected tech:bands:', Array.from(selected));
     return selected;
 }

package/dist/map-v2/features/sites/controls/SiteFilterControl.svelte

@@ -45,10 +45,7 @@
 	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
 
 	onMount(() => {
-		console.log('SiteFilterControl: Mounted with', store.allSites.length, 'sites');
-		
 		if (store.allSites.length > 0) {
-			console.log('SiteFilterControl: Building tree...');
 			const treeNodes = buildSiteTree(store.allSites, store.groupColorMap);
 
 			treeStore = createTreeStore({
@@ -57,17 +54,12 @@
 				persistState: true,
 				defaultExpandAll: false
 			});
-			
-			console.log('SiteFilterControl: Tree store created');
 
 			// Subscribe to tree changes and update siteStore
 			if (treeStore) {
 				const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
 					const checkedPaths = treeValue.getCheckedPaths();
-					console.log('TreeStore updated, checked paths:', checkedPaths);
-					
 					const newFilteredSites = getFilteredSites(checkedPaths, store.allSites);
-					console.log('Filtered sites count:', newFilteredSites.length, 'of', store.allSites.length);
 					
 					// Update the site store directly
 					store.filteredSites = newFilteredSites;

package/dist/map-v2/features/sites/utils/siteTreeUtils.js

@@ -74,7 +74,6 @@ export function buildSiteTree(sites, colorMap) {
  * Filters sites based on checked tree paths
  */
 export function getFilteredSites(checkedPaths, allSites) {
-    console.log('getFilteredSites called with paths:', checkedPaths);
     const checkedGroups = new Set();
     const checkedProviders = new Set();
     checkedPaths.forEach((path) => {
@@ -97,16 +96,12 @@ export function getFilteredSites(checkedPaths, allSites) {
             checkedProviders.add(filteredParts[0]);
         }
     });
-    console.log('Checked groups:', Array.from(checkedGroups));
-    console.log('Checked providers:', Array.from(checkedProviders));
     // If "all-sites" is checked and it's the only thing, return all
     if (checkedPaths.includes('all-sites') && checkedGroups.size === 0 && checkedProviders.size === 0) {
-        console.log('All sites root checked, returning all');
         return allSites;
     }
     // If nothing is checked, return empty
     if (checkedGroups.size === 0 && checkedProviders.size === 0) {
-        console.log('Nothing checked, returning empty');
         return [];
     }
     // Filter sites based on checked groups or providers
@@ -116,6 +111,5 @@ export function getFilteredSites(checkedPaths, allSites) {
         const included = checkedGroups.has(key) || checkedProviders.has(site.provider);
         return included;
     });
-    console.log('Filtered:', filtered.length, 'of', allSites.length, 'sites');
     return filtered;
 }

package/dist/map-v3/core/components/Map.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { setContext, onMount, onDestroy } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import 'mapbox-gl/dist/mapbox-gl.css';
+	import { createMapStore } from '../stores/map.store.svelte';
+	import { createViewportStore } from '../stores/viewport.store.svelte';
+
+	interface Props {
+		accessToken: string;
+		style?: string;
+		center?: [number, number];
+		zoom?: number;
+		class?: string;
+		children?: import('svelte').Snippet;
+		namespace?: string;
+	}
+
+	let {
+		accessToken,
+		style = 'mapbox://styles/mapbox/streets-v12',
+		center = [0, 0],
+		zoom = 2,
+		class: className = '',
+		children,
+		namespace = 'map'
+	}: Props = $props();
+
+	let mapContainer: HTMLDivElement;
+	const mapStore = createMapStore();
+	
+	// Initialize viewport store with defaults from props
+	const viewportStore = createViewportStore(namespace, { center, zoom });
+
+	setContext('MAP_CONTEXT', mapStore);
+
+	onMount(() => {
+		mapboxgl.accessToken = accessToken;
+
+		// Use viewport store values for initialization
+		mapStore.init(mapContainer, {
+			style,
+			center: viewportStore.center,
+			zoom: viewportStore.zoom,
+			bearing: viewportStore.bearing,
+			pitch: viewportStore.pitch
+		});
+
+		// Sync Map -> Store
+		const map = mapStore.map;
+		if (map) {
+			const updateStore = () => {
+				viewportStore.updateViewport({
+					center: map.getCenter().toArray() as [number, number],
+					zoom: map.getZoom(),
+					bearing: map.getBearing(),
+					pitch: map.getPitch()
+				});
+			};
+
+			map.on('moveend', updateStore);
+			map.on('zoomend', updateStore);
+			map.on('rotateend', updateStore);
+			map.on('pitchend', updateStore);
+		}
+	});
+
+	onDestroy(() => {
+		mapStore.destroy();
+	});
+</script>
+
+<div class="map-wrapper {className}">
+	<div bind:this={mapContainer} class="map-instance"></div>
+	{#if mapStore.loaded}
+		{@render children?.()}
+	{/if}
+</div>
+
+<style>
+	.map-wrapper {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.map-instance {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/map-v3/core/components/Map.svelte.d.ts

@@ -0,0 +1,13 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+interface Props {
+    accessToken: string;
+    style?: string;
+    center?: [number, number];
+    zoom?: number;
+    class?: string;
+    children?: import('svelte').Snippet;
+    namespace?: string;
+}
+declare const Map: import("svelte").Component<Props, {}, "">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/map-v3/core/controls/FeatureSettingsControl.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { MapControl } from '../../shared';
+	import CellSettingsPanel from '../../features/cells/components/CellSettingsPanel.svelte';
+	import RepeaterSettingsPanel from '../../features/repeaters/components/RepeaterSettingsPanel.svelte';
+	import SiteSettingsPanel from '../../features/sites/components/SiteSettingsPanel.svelte';
+	import type { CellDisplayStore } from '../../features/cells/stores/cell.display.svelte';
+	import type { RepeaterDisplayStore } from '../../features/repeaters/stores/repeater.display.svelte';
+	import type { SiteDisplayStore } from '../../features/sites/stores/site.display.svelte';
+
+	interface Props {
+		cellDisplayStore: CellDisplayStore;
+		repeaterDisplayStore?: RepeaterDisplayStore;
+		siteDisplayStore?: SiteDisplayStore;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		title?: string;
+		icon?: string;
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		cellDisplayStore,
+		repeaterDisplayStore,
+		siteDisplayStore,
+		position = 'top-right',
+		title = 'Feature Settings',
+		icon = 'sliders',
+		initiallyCollapsed = true
+	}: Props = $props();
+</script>
+
+<MapControl {position} {title} {icon} {initiallyCollapsed} controlWidth="380px" edgeOffset="12px">
+	<div class="d-flex flex-column p-0">
+		<ul class="nav nav-tabs" id="settings-tabs" role="tablist">
+			<!-- Cell Tab -->
+			<li class="nav-item" role="presentation">
+				<button class="nav-link active" id="cell-tab" data-bs-toggle="tab" data-bs-target="#cell" type="button" role="tab">Cells</button>
+			</li>
+			<!-- Site Tab -->
+			{#if siteDisplayStore}
+				<li class="nav-item" role="presentation">
+					<button class="nav-link" id="site-tab" data-bs-toggle="tab" data-bs-target="#site" type="button" role="tab">Sites</button>
+				</li>
+			{/if}
+			<!-- Repeater Tab -->
+			{#if repeaterDisplayStore}
+				<li class="nav-item" role="presentation">
+					<button class="nav-link" id="repeater-tab" data-bs-toggle="tab" data-bs-target="#repeater" type="button" role="tab">Repeaters</button>
+				</li>
+			{/if}
+		</ul>
+		
+		<div class="tab-content rounded-2 shadow-sm bg-white border p-2" id="settings-tab-content">
+			<!-- Cell Panel -->
+			<div class="tab-pane show active" id="cell" role="tabpanel">
+				<CellSettingsPanel displayStore={cellDisplayStore} />
+			</div>
+			<!-- Site Panel -->
+			{#if siteDisplayStore}
+				<div class="tab-pane" id="site" role="tabpanel">
+					<SiteSettingsPanel displayStore={siteDisplayStore} />
+				</div>
+			{/if}
+			<!-- Repeater Panel -->
+			{#if repeaterDisplayStore}
+				<div class="tab-pane" id="repeater" role="tabpanel">
+					<RepeaterSettingsPanel displayStore={repeaterDisplayStore} />
+				</div>
+			{/if}
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	:global(.map-control-content) {
+		padding: 0.25rem;
+	}
+
+	.nav-tabs {
+		border-bottom: 1px solid #dee2e6;
+	}
+
+	.nav-link {
+		border: 1px solid transparent;
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
+		font-size: 0.95rem;
+		font-weight: 500;
+		padding: 0.5rem 1rem;
+		color: #6c757d;
+		white-space: nowrap;
+		min-width: fit-content;
+	}
+
+	.nav-link.active {
+		color: #495057;
+		background-color: #fff;
+		border-color: #dee2e6 #dee2e6 #fff;
+	}
+
+	.tab-content {
+		padding: 0;
+	}
+</style>

package/dist/map-v3/core/controls/FeatureSettingsControl.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CellDisplayStore } from '../../features/cells/stores/cell.display.svelte';
+import type { RepeaterDisplayStore } from '../../features/repeaters/stores/repeater.display.svelte';
+import type { SiteDisplayStore } from '../../features/sites/stores/site.display.svelte';
+interface Props {
+    cellDisplayStore: CellDisplayStore;
+    repeaterDisplayStore?: RepeaterDisplayStore;
+    siteDisplayStore?: SiteDisplayStore;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    title?: string;
+    icon?: string;
+    initiallyCollapsed?: boolean;
+}
+declare const FeatureSettingsControl: import("svelte").Component<Props, {}, "">;
+type FeatureSettingsControl = ReturnType<typeof FeatureSettingsControl>;
+export default FeatureSettingsControl;