@smartnet360/svelte-components 0.0.101 → 0.0.103

package/dist/map-v3/features/selection/components/FeatureSelectionControl.svelte

@@ -3,58 +3,58 @@
 	import { MapControl } from '../../../shared';
 	import type { MapStore } from '../../../core/stores/map.store.svelte';
 	import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
-	import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
-	import { createFeatureSelectionStore } from '../stores/selection.store.svelte';
-	import SelectionHighlightLayers from '../layers/SelectionHighlightLayers.svelte';
+	import { createFeatureSelectionStore, type SelectionMode } from '../stores/selection.store.svelte';
 	import type { SelectedFeature } from '../types';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
-		cellDataStore?: CellDataStore;
-		cellDisplayStore?: CellDisplayStore;
+		cellDataStore: CellDataStore;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		title?: string;
 		icon?: string;
 		iconOnlyWhenCollapsed?: boolean;
-		onAction?: (featureIds: string[]) => void;
-		actionButtonLabel?: string;
 		featureIcon?: string;
-		idPropertyOptions?: string[];
-		defaultIdProperty?: string;
-		highlightColor?: string;
-		highlightWidth?: number;
+		defaultSelectionMode?: SelectionMode;
+		children?: Snippet<[string[]]>;
 	}
 
 	let {
 		cellDataStore,
-		cellDisplayStore,
 		position = 'top-left',
 		title = 'Feature Selection',
 		icon = 'cursor-fill',
 		iconOnlyWhenCollapsed = true,
-		onAction,
-		actionButtonLabel = 'Process Selection',
 		featureIcon = 'geo-alt-fill',
-		idPropertyOptions = ['siteId', 'sectorId', 'cellName'],
-		defaultIdProperty = 'siteId',
-		highlightColor = '#FF6B00',
-		highlightWidth = 4
+		defaultSelectionMode = 'site',
+		children
 	}: Props = $props();
 
 	const mapStore = getContext<MapStore>('MAP_CONTEXT');
 	const store = createFeatureSelectionStore();
 
-	store.setIdProperty(defaultIdProperty);
-
+	// Initialize selection mode
+	store.setIdProperty(defaultSelectionMode);
+	
 	let selectedFeatures = $derived(store.getSelectedFeatures());
 	let selectionCount = $derived(store.count);
+	let cellCount = $derived(store.cellCount);
+	let selectedIds = $derived(store.getSelectedIds());
 	let hasSelection = $derived(selectionCount > 0);
 	let isCollapsed = $state(false);
+	let currentMode = $state<SelectionMode>(defaultSelectionMode);
+	let isInitialized = $state(false);
 
+	// Initialize store with map and cell data (run once)
 	$effect(() => {
+		if (isInitialized) return;
+		
 		const map = mapStore.map;
-		if (map && !store['map']) {
+		if (map) {
+			console.log('[FeatureSelectionControl] Initializing selection store');
 			store.setMap(map);
+			store.setCellDataStore(cellDataStore);
 			store.enableSelectionMode();
+			isInitialized = true;
 		}
 	});
 
@@ -71,9 +71,11 @@
 		}
 	}
 
-	function handleIdPropertyChange(event: Event) {
+	function handleModeChange(event: Event) {
 		const target = event.target as HTMLSelectElement;
-		store.setIdProperty(target.value);
+		const mode = target.value as SelectionMode;
+		currentMode = mode;
+		store.setIdProperty(mode);
 	}
 
 	function handleRemoveFeature(featureId: string) {
@@ -85,7 +87,7 @@
 	}
 
 	async function handleCopy() {
-		const ids = store.getSelectedIds().join(',');
+		const ids = selectedIds.join(',');
 		try {
 			await navigator.clipboard.writeText(ids);
 			console.log('[FeatureSelection] Copied to clipboard:', ids);
@@ -94,14 +96,22 @@
 		}
 	}
 
-	function handleAction() {
-		if (onAction && hasSelection) {
-			const ids = store.getSelectedIds();
-			onAction(ids);
+	// Get display label for selection mode
+	function getModeLabel(mode: SelectionMode): string {
+		switch (mode) {
+			case 'site': return 'Site (all sectors)';
+			case 'sector': return 'Sector (all bands)';
+			case 'cell': return 'Individual Cell';
 		}
 	}
-</script>
 
+	// Get cell count description for a feature
+	function getCellCountText(feature: SelectedFeature): string {
+		const count = feature.cellNames?.length || 0;
+		if (count <= 1) return '';
+		return ` (${count} cells)`;
+	}
+</script>
 <MapControl
 	{position}
 	{title}
@@ -109,28 +119,45 @@
 	{iconOnlyWhenCollapsed}
 	collapsible={true}
 	onCollapseToggle={handleCollapseToggle}
-	controlWidth="300px"
+	controlWidth="320px"
 >
 	<div class="feature-selection-control">
-		<!-- ID Property Selector -->
+		<!-- Selection Mode Selector -->
 		<div class="mb-3">
-			<label for="id-property-select" class="form-label small fw-semibold">Select By</label>
+			<label for="mode-select" class="form-label small fw-semibold">Selection Mode</label>
 			<select
-				id="id-property-select"
+				id="mode-select"
 				class="form-select form-select-sm"
-				value={store.idProperty}
-				onchange={handleIdPropertyChange}
+				value={currentMode}
+				onchange={handleModeChange}
 			>
-				{#each idPropertyOptions as option}
-					<option value={option}>{option}</option>
-				{/each}
+				<option value="site">{getModeLabel('site')}</option>
+				<option value="sector">{getModeLabel('sector')}</option>
+				<option value="cell">{getModeLabel('cell')}</option>
 			</select>
+			<div class="form-text small mt-1">
+				{#if currentMode === 'site'}
+					Click any cell to select all cells at that site
+				{:else if currentMode === 'sector'}
+					Click any cell to select all cells in that sector
+				{:else}
+					Click to select individual cells
+				{/if}
+			</div>
 		</div>
 
 		<!-- Selection Stats -->
-		<div class="selection-stats mb-2 text-secondary">
-			<strong>{selectionCount}</strong>
-			{selectionCount === 1 ? 'item' : 'items'} selected
+		<div class="selection-stats mb-2">
+			<div class="d-flex justify-content-between align-items-center">
+				<span class="text-secondary">
+					<strong>{selectionCount}</strong> {selectionCount === 1 ? 'group' : 'groups'}
+				</span>
+				{#if cellCount > selectionCount}
+					<span class="badge bg-secondary">
+						{cellCount} {cellCount === 1 ? 'cell' : 'cells'} total
+					</span>
+				{/if}
+			</div>
 		</div>
 
 		<!-- Action Buttons -->
@@ -162,11 +189,17 @@
 			<div class="feature-list">
 				{#each selectedFeatures as feature (feature.id)}
 					<div class="feature-item">
-						<i class="bi bi-{featureIcon} feature-icon"></i>
+						<i class="bi bi-grid-3x3-gap-fill feature-icon"></i>
 						<div class="feature-info">
-							<span class="feature-id">{feature.id}</span>
-							{#if feature.layerId}
-								<small class="feature-layer text-muted">{feature.layerId}</small>
+							<span class="feature-id">
+								{feature.id}{getCellCountText(feature)}
+							</span>
+							{#if currentMode === 'site'}
+								<small class="feature-layer text-muted">Site</small>
+							{:else if currentMode === 'sector'}
+								<small class="feature-layer text-muted">Sector</small>
+							{:else}
+								<small class="feature-layer text-muted">Cell</small>
 							{/if}
 						</div>
 						<button
@@ -185,35 +218,19 @@
 			<div class="text-muted small text-center py-3">
 				<i class="bi bi-inbox" style="font-size: 2rem; opacity: 0.3;"></i>
 				<div class="mt-2">No items selected</div>
-				<div class="mt-1">Click on features to select</div>
+				<div class="mt-1">Click on map to select</div>
 			</div>
 		{/if}
 
-		<!-- Action Button -->
-		{#if onAction}
+		<!-- Custom Action Buttons (snippet) -->
+		{#if children}
 			<div class="mt-3">
-				<button
-					type="button"
-					class="btn btn-primary w-100"
-					disabled={!hasSelection}
-					onclick={handleAction}
-				>
-					<i class="bi bi-lightning-charge-fill"></i> {actionButtonLabel}
-				</button>
+				{@render children(selectedIds)}
 			</div>
 		{/if}
 	</div>
 </MapControl>
 
-<!-- Highlight Layers -->
-<SelectionHighlightLayers
-	{selectedFeatures}
-	{cellDataStore}
-	{cellDisplayStore}
-	{highlightColor}
-	{highlightWidth}
-/>
-
 <style>
 	.feature-selection-control {
 		width: 100%;

package/dist/map-v3/features/selection/components/FeatureSelectionControl.svelte.d.ts

@@ -1,19 +1,15 @@
 import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
-import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
+import { type SelectionMode } from '../stores/selection.store.svelte';
+import type { Snippet } from 'svelte';
 interface Props {
-    cellDataStore?: CellDataStore;
-    cellDisplayStore?: CellDisplayStore;
+    cellDataStore: CellDataStore;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     title?: string;
     icon?: string;
     iconOnlyWhenCollapsed?: boolean;
-    onAction?: (featureIds: string[]) => void;
-    actionButtonLabel?: string;
     featureIcon?: string;
-    idPropertyOptions?: string[];
-    defaultIdProperty?: string;
-    highlightColor?: string;
-    highlightWidth?: number;
+    defaultSelectionMode?: SelectionMode;
+    children?: Snippet<[string[]]>;
 }
 declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
 type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;

package/dist/map-v3/features/selection/index.d.ts

@@ -4,6 +4,5 @@
  * Exports all selection-related components, stores, and types.
  */
 export type { SelectedFeature, SelectionStoreState } from './types';
-export { createFeatureSelectionStore, FeatureSelectionStore } from './stores/selection.store.svelte';
+export { createFeatureSelectionStore, FeatureSelectionStore, type SelectionMode } from './stores/selection.store.svelte';
 export { default as FeatureSelectionControl } from './components/FeatureSelectionControl.svelte';
-export { default as SelectionHighlightLayers } from './layers/SelectionHighlightLayers.svelte';

package/dist/map-v3/features/selection/index.js

@@ -7,4 +7,3 @@
 export { createFeatureSelectionStore, FeatureSelectionStore } from './stores/selection.store.svelte';
 // Components
 export { default as FeatureSelectionControl } from './components/FeatureSelectionControl.svelte';
-export { default as SelectionHighlightLayers } from './layers/SelectionHighlightLayers.svelte';

package/dist/map-v3/features/selection/stores/selection.store.svelte.d.ts

@@ -2,14 +2,19 @@
  * Feature Selection Store - Svelte 5 Runes Implementation
  *
  * Manages selection of map features (cells, sites) with click detection.
+ * Supports multi-cell selection based on site/sector hierarchy.
  */
 import type { Map as MapboxMap } from 'mapbox-gl';
 import type { SelectedFeature } from '../types';
+import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
+export type SelectionMode = 'cell' | 'sector' | 'site';
 export declare class FeatureSelectionStore {
     private selectedFeatures;
+    private selectedCellNames;
     private map;
+    private cellDataStore;
     selectionMode: boolean;
-    idProperty: string;
+    idProperty: SelectionMode;
     queryLayers: string[];
     private clickHandler;
     private onSelectionChange?;
@@ -18,9 +23,13 @@ export declare class FeatureSelectionStore {
      */
     setMap(mapInstance: MapboxMap): void;
     /**
-     * Set which property to use as the ID
+     * Set the cell data store for lookup maps
      */
-    setIdProperty(property: string): void;
+    setCellDataStore(dataStore: CellDataStore): void;
+    /**
+     * Set which property to use as the ID (selection mode)
+     */
+    setIdProperty(property: SelectionMode): void;
     /**
      * Set which layers to query for features
      */
@@ -34,45 +43,65 @@ export declare class FeatureSelectionStore {
      */
     private setupClickHandler;
     /**
-     * Enable selection mode
+     * Handle click on a cell - expand to site/sector based on mode
      */
-    enableSelectionMode(): void;
+    private handleCellClick;
     /**
-     * Disable selection mode
+     * Handle click on a site marker (if sites layer exists)
      */
-    disableSelectionMode(): void;
+    private handleSiteClick;
     /**
-     * Toggle a feature in the selection
+     * Toggle a group of cells (site or sector)
      */
-    toggleFeatureSelection(id: string, layerId?: string, properties?: Record<string, any>, siteId?: string, cellName?: string): void;
+    private toggleGroupSelection;
     /**
-     * Add a feature to the selection
+     * Update Mapbox feature-state for cells
      */
-    addFeatureSelection(id: string, layerId?: string, properties?: Record<string, any>, siteId?: string, cellName?: string): void;
+    private updateFeatureStates;
     /**
-     * Remove a feature from the selection
+     * Enable selection mode
      */
-    removeFeatureSelection(id: string): void;
+    enableSelectionMode(): void;
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode(): void;
     /**
      * Clear all selections
      */
     clearSelection(): void;
+    /**
+     * Remove a selection group by ID
+     */
+    removeFeatureSelection(id: string): void;
     /**
      * Get all selected features
      */
     getSelectedFeatures(): SelectedFeature[];
     /**
-     * Get selected feature IDs only
+     * Get selected group IDs (site/sector/cell IDs)
      */
     getSelectedIds(): string[];
+    /**
+     * Get all selected cell names (flattened from all groups)
+     */
+    getSelectedCellNames(): string[];
     /**
      * Check if a feature is selected
      */
     isFeatureSelected(id: string): boolean;
     /**
-     * Get selection count
+     * Check if a specific cell is selected
+     */
+    isCellSelected(cellName: string): boolean;
+    /**
+     * Get selection count (number of groups, not individual cells)
      */
     get count(): number;
+    /**
+     * Get total number of selected cells
+     */
+    get cellCount(): number;
     /**
      * Cleanup - remove event handlers
      */