@smartnet360/svelte-components 0.0.80 → 0.0.82

package/dist/map-v2/demo/DemoMap.svelte

@@ -232,11 +232,11 @@
 		<!-- Generic feature selection control - works with any layer -->
 		<FeatureSelectionControl
 			position="bottom-left"
-			title="Any Feature"
-			icon="cursor-fill"
+			title="Cluster Tool"
+			icon="speedometer2"
 			iconOnlyWhenCollapsed={useIconHeaders}
 			onAction={handleProcessFeatures}
-			actionButtonLabel="Process Features"
+			actionButtonLabel="Process Cluster"
 			featureIcon="pin-map-fill"
 		/>
 

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

@@ -51,6 +51,8 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
                 cellID: cell.cellID,
                 cellName: cell.cellName,
                 siteId: cell.siteId,
+                latitude: cell.latitude,
+                longitude: cell.longitude,
                 // Cell attributes
                 tech: cell.tech,
                 band: cell.frq,

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte

@@ -14,6 +14,7 @@
 	
 	import { onMount, onDestroy, getContext } from 'svelte';
 	import { get } from 'svelte/store';
+	import mapboxgl from 'mapbox-gl';
 	import MapControl from './MapControl.svelte';
 	import { createFeatureSelectionStore, type SelectedFeature } from './featureSelectionStore.svelte';
 	import { MAP_CONTEXT_KEY, type MapStore } from '../../core/types';
@@ -41,13 +42,13 @@
 	
 	let {
 		position = 'top-left',
-		title = 'Feature Selection',
-		icon = 'check2-square',
+		title = 'Cluster Tool',
+		icon = 'speedometer2',
 		iconOnlyWhenCollapsed = true,
 		onAction,
-		actionButtonLabel = 'Process',
+		actionButtonLabel = 'Process Cluster',
 		featureIcon = 'geo-alt-fill',
-		idPropertyOptions = ['siteId', 'cellName','id'],
+		idPropertyOptions = ['siteId','sectorId', 'cellName','id'],
 		defaultIdProperty = 'siteId'
 	}: Props = $props();
 	
@@ -66,6 +67,12 @@
 	let selectionCount = $derived(store.count);
 	let hasSelection = $derived(selectionCount > 0);
 	
+	// Track collapsed state
+	let isCollapsed = $state(false);
+	
+	// Track markers for selected features
+	let markers = new Map<string, mapboxgl.Marker>();
+	
 	// Subscribe to map store and initialize when map becomes available
 	let unsubscribe: (() => void) | null = null;
 	
@@ -78,6 +85,8 @@
 			if (map && !store['map']) {
 				console.log('[FeatureSelectionControl] Setting map on selection store');
 				store.setMap(map);
+				// Enable selection mode on mount (control starts collapsed=false by default)
+				store.enableSelectionMode();
 			}
 		});
 	});
@@ -87,12 +96,72 @@
 		if (unsubscribe) {
 			unsubscribe();
 		}
+		// Remove all markers
+		clearAllMarkers();
 		// Cleanup event handlers
 		store.destroy();
 	});
 	
-	function handleToggleMode() {
-		store.toggleSelectionMode();
+	// Update markers when selected features change
+	$effect(() => {
+		updateMarkers(selectedFeatures);
+	});
+	
+	function updateMarkers(features: SelectedFeature[]) {
+		console.log('[FeatureSelectionControl] Updating markers for', features.length, 'features');
+		
+		// Get current map
+		const map = get(mapStore);
+		if (!map) return;
+		
+		// Remove markers that are no longer in the selection
+		const currentIds = new Set(features.map(f => f.id));
+		for (const [id, marker] of markers.entries()) {
+			if (!currentIds.has(id)) {
+				marker.remove();
+				markers.delete(id);
+				console.log('[FeatureSelectionControl] Removed marker for', id);
+			}
+		}
+		
+		// Add markers for new selections
+		for (const feature of features) {
+			if (!markers.has(feature.id)) {
+				// Try to extract coordinates from properties
+				const lat = feature.properties?.latitude || feature.properties?.lat;
+				const lon = feature.properties?.longitude || feature.properties?.lon || feature.properties?.lng;
+				
+				if (lat && lon) {
+					const marker = new mapboxgl.Marker({ color: '#FF6B35' })
+						.setLngLat([lon, lat])
+						.addTo(map);
+					
+					markers.set(feature.id, marker);
+					console.log('[FeatureSelectionControl] Added marker for', feature.id, 'at', [lon, lat]);
+				} else {
+					console.warn('[FeatureSelectionControl] No coordinates found for feature', feature.id);
+				}
+			}
+		}
+	}
+	
+	function clearAllMarkers() {
+		for (const marker of markers.values()) {
+			marker.remove();
+		}
+		markers.clear();
+		console.log('[FeatureSelectionControl] All markers cleared');
+	}
+	
+	function handleCollapseToggle(collapsed: boolean) {
+		isCollapsed = collapsed;
+		// When control is expanded, enable selection mode
+		// When control is collapsed, disable selection mode
+		if (collapsed) {
+			store.disableSelectionMode();
+		} else {
+			store.enableSelectionMode();
+		}
 	}
 	
 	function handleIdPropertyChange(event: Event) {
@@ -107,6 +176,7 @@
 	
 	function handleClearAll() {
 		store.clearSelection();
+		clearAllMarkers();
 	}
 	
 	async function handleCopy() {
@@ -127,32 +197,8 @@
 	}
 </script>
 
-<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true}>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} onCollapseToggle={handleCollapseToggle}>
 	<div class="feature-selection-control">
-		<!-- Selection Mode Toggle -->
-		<div class="selection-mode-toggle mb-3">
-			<div class="form-check form-switch">
-				<input
-					type="checkbox"
-					class="form-check-input"
-					id="feature-selection-mode-toggle"
-					checked={store.selectionMode}
-					onchange={handleToggleMode}
-				/>
-				<label class="form-check-label" for="feature-selection-mode-toggle">
-					Selection Mode
-					<span class="badge ms-2" class:bg-success={store.selectionMode} class:bg-secondary={!store.selectionMode}>
-						{store.selectionMode ? 'ON' : 'OFF'}
-					</span>
-				</label>
-			</div>
-			{#if store.selectionMode}
-				<small class="text-muted d-block mt-1">
-					Click any feature on the map to select
-				</small>
-			{/if}
-		</div>
-		
 		<!-- ID Property Selector -->
 		<div class="mb-3">
 			<label for="id-property-select" class="form-label small">Select By</label>
@@ -171,7 +217,7 @@
 		<!-- Selection Stats -->
 		<div class="selection-stats mb-2">
 			<strong>{selectionCount}</strong> 
-			{selectionCount === 1 ? 'feature' : 'features'} selected
+			{selectionCount === 1 ? 'item' : 'items'} selected
 		</div>
 		
 		<!-- Action Buttons -->
@@ -225,7 +271,8 @@
 		{:else}
 			<div class="text-muted small text-center py-2">
 				<i class="bi bi-inbox"></i>
-				<div class="mt-1">No features selected</div>
+				<div class="mt-1">No items selected</div>
+				<div class="mt-1">Click on cells or sites</div>
 			</div>
 		{/if}
 		

package/dist/map-v2/shared/controls/MapControl.svelte

@@ -27,6 +27,8 @@
 		collapsible?: boolean;
 		/** Initial collapsed state */
 		initiallyCollapsed?: boolean;
+		/** Optional callback when collapse state changes */
+		onCollapseToggle?: (collapsed: boolean) => void;
 		/** Custom CSS class for the container */
 		className?: string;
 		/** Child content */
@@ -44,13 +46,12 @@
 		iconOnlyWhenCollapsed = true,
 		collapsible = true,
 		initiallyCollapsed = true,
+		onCollapseToggle,
 		className = '',
 		children,
 		edgeOffset = '12px',
 		controlWidth = '420px'
 	}: Props = $props();
-
-
 	const mapStore = tryUseMapbox();
 	
 	if (!mapStore) {
@@ -113,6 +114,10 @@
 
 	function toggleCollapse() {
 		collapsed = !collapsed;
+		// Call the callback if provided
+		if (onCollapseToggle) {
+			onCollapseToggle(collapsed);
+		}
 	}
 </script>
 

package/dist/map-v2/shared/controls/MapControl.svelte.d.ts

@@ -11,6 +11,8 @@ interface Props {
     collapsible?: boolean;
     /** Initial collapsed state */
     initiallyCollapsed?: boolean;
+    /** Optional callback when collapse state changes */
+    onCollapseToggle?: (collapsed: boolean) => void;
     /** Custom CSS class for the container */
     className?: string;
     /** Child content */

package/package.json

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