@smartnet360/svelte-components 0.0.87 → 0.0.89

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

@@ -0,0 +1,309 @@
+<script lang="ts">
+	import { onMount, onDestroy, getContext } from 'svelte';
+	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 type { SelectedFeature } from '../types';
+
+	interface Props {
+		cellDataStore?: CellDataStore;
+		cellDisplayStore?: CellDisplayStore;
+		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;
+	}
+
+	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
+	}: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	const store = createFeatureSelectionStore();
+
+	store.setIdProperty(defaultIdProperty);
+
+	let selectedFeatures = $derived(store.getSelectedFeatures());
+	let selectionCount = $derived(store.count);
+	let hasSelection = $derived(selectionCount > 0);
+	let isCollapsed = $state(false);
+
+	$effect(() => {
+		const map = mapStore.map;
+		if (map && !store['map']) {
+			store.setMap(map);
+			store.enableSelectionMode();
+		}
+	});
+
+	onDestroy(() => {
+		store.destroy();
+	});
+
+	function handleCollapseToggle(collapsed: boolean) {
+		isCollapsed = collapsed;
+		if (collapsed) {
+			store.disableSelectionMode();
+		} else {
+			store.enableSelectionMode();
+		}
+	}
+
+	function handleIdPropertyChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		store.setIdProperty(target.value);
+	}
+
+	function handleRemoveFeature(featureId: string) {
+		store.removeFeatureSelection(featureId);
+	}
+
+	function handleClearAll() {
+		store.clearSelection();
+	}
+
+	async function handleCopy() {
+		const ids = store.getSelectedIds().join(',');
+		try {
+			await navigator.clipboard.writeText(ids);
+			console.log('[FeatureSelection] Copied to clipboard:', ids);
+		} catch (err) {
+			console.error('[FeatureSelection] Failed to copy:', err);
+		}
+	}
+
+	function handleAction() {
+		if (onAction && hasSelection) {
+			const ids = store.getSelectedIds();
+			onAction(ids);
+		}
+	}
+</script>
+
+<MapControl
+	{position}
+	{title}
+	{icon}
+	{iconOnlyWhenCollapsed}
+	collapsible={true}
+	onCollapseToggle={handleCollapseToggle}
+	controlWidth="300px"
+>
+	<div class="feature-selection-control">
+		<!-- ID Property Selector -->
+		<div class="mb-3">
+			<label for="id-property-select" class="form-label small fw-semibold">Select By</label>
+			<select
+				id="id-property-select"
+				class="form-select form-select-sm"
+				value={store.idProperty}
+				onchange={handleIdPropertyChange}
+			>
+				{#each idPropertyOptions as option}
+					<option value={option}>{option}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Selection Stats -->
+		<div class="selection-stats mb-2 text-secondary">
+			<strong>{selectionCount}</strong>
+			{selectionCount === 1 ? 'item' : 'items'} selected
+		</div>
+
+		<!-- Action Buttons -->
+		{#if hasSelection}
+			<div class="action-buttons mb-3">
+				<div class="btn-group w-100" role="group">
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-danger"
+						onclick={handleClearAll}
+						title="Clear all"
+					>
+						<i class="bi bi-trash"></i> Clear
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={handleCopy}
+						title="Copy feature IDs"
+					>
+						<i class="bi bi-clipboard"></i> Copy
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Feature List -->
+		{#if hasSelection}
+			<div class="feature-list">
+				{#each selectedFeatures as feature (feature.id)}
+					<div class="feature-item">
+						<i class="bi bi-{featureIcon} 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>
+							{/if}
+						</div>
+						<button
+							type="button"
+							class="btn-remove"
+							onclick={() => handleRemoveFeature(feature.id)}
+							title="Remove"
+							aria-label="Remove {feature.id}"
+						>
+							<i class="bi bi-x"></i>
+						</button>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<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>
+		{/if}
+
+		<!-- Action Button -->
+		{#if onAction}
+			<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>
+			</div>
+		{/if}
+	</div>
+</MapControl>
+
+<!-- Highlight Layers -->
+<SelectionHighlightLayers
+	{selectedFeatures}
+	{cellDataStore}
+	{cellDisplayStore}
+	{highlightColor}
+	{highlightWidth}
+/>
+
+<style>
+	.feature-selection-control {
+		width: 100%;
+	}
+
+	.selection-stats {
+		font-size: 0.875rem;
+		color: #495057;
+	}
+
+	.feature-list {
+		max-height: 300px;
+		overflow-y: auto;
+		border: 1px solid #dee2e6;
+		border-radius: 4px;
+		padding: 0.5rem;
+		background: #fff;
+	}
+
+	.feature-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		border-bottom: 1px solid #f1f3f5;
+		transition: background-color 0.15s;
+	}
+
+	.feature-item:last-child {
+		border-bottom: none;
+	}
+
+	.feature-item:hover {
+		background-color: #f8f9fa;
+	}
+
+	.feature-icon {
+		font-size: 1rem;
+		flex-shrink: 0;
+		color: #0d6efd;
+	}
+
+	.feature-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	.feature-id {
+		font-family: 'Monaco', 'Courier New', monospace;
+		font-size: 0.875rem;
+		color: #212529;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.feature-layer {
+		font-size: 0.75rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.btn-remove {
+		background: none;
+		border: none;
+		color: #6c757d;
+		font-size: 1.25rem;
+		line-height: 1;
+		padding: 0;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		border-radius: 4px;
+		transition: all 0.15s;
+		flex-shrink: 0;
+	}
+
+	.btn-remove:hover {
+		background-color: #ffe6e6;
+		color: #dc3545;
+	}
+
+	.btn-remove:active {
+		background-color: #ffcccc;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
+import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
+interface Props {
+    cellDataStore?: CellDataStore;
+    cellDisplayStore?: CellDisplayStore;
+    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;
+}
+declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
+type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;
+export default FeatureSelectionControl;

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

@@ -0,0 +1,9 @@
+/**
+ * Feature Selection - Public API
+ *
+ * Exports all selection-related components, stores, and types.
+ */
+export type { SelectedFeature, SelectionStoreState } from './types';
+export { createFeatureSelectionStore, FeatureSelectionStore } 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

@@ -0,0 +1,10 @@
+/**
+ * Feature Selection - Public API
+ *
+ * Exports all selection-related components, stores, and types.
+ */
+// Store
+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/layers/SelectionHighlightLayers.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	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 type { SelectedFeature } from '../types';
+	import { generateCellArc, calculateRadiusInMeters } from '../../cells/logic/geometry';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		selectedFeatures: SelectedFeature[];
+		cellDataStore?: CellDataStore;
+		cellDisplayStore?: CellDisplayStore;
+		highlightColor?: string;
+		highlightWidth?: number;
+	}
+
+	let {
+		selectedFeatures,
+		cellDataStore,
+		cellDisplayStore,
+		highlightColor = '#FF6B00',
+		highlightWidth = 4
+	}: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	
+	let cellsSourceId = 'cells-selection-source';
+	let cellsLayerId = 'cells-selection-highlight';
+	let sitesSourceId = 'sites-selection-source';
+	let sitesLayerId = 'sites-selection-highlight';
+
+	// Track current zoom level for radius calculation
+	let currentZoom = $state(13);
+	let centerLat = $state(0);
+
+	// Update zoom level when map changes
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const updateZoom = () => {
+			currentZoom = map.getZoom();
+			centerLat = map.getCenter().lat;
+		};
+
+		updateZoom();
+		map.on('zoom', updateZoom);
+		map.on('move', updateZoom);
+
+		return () => {
+			map.off('zoom', updateZoom);
+			map.off('move', updateZoom);
+		};
+	});
+
+	// Derive highlighted cells based on selected features
+	let highlightedCells = $derived.by(() => {
+		if (!cellDataStore) return [];
+		
+		const cellIds = selectedFeatures
+			.filter(f => f.layerId === 'cells-layer')
+			.map(f => f.id);
+		
+		if (cellIds.length === 0) return [];
+		
+		return cellDataStore.filteredCells.filter(cell => 
+			cellIds.includes(cell.siteId) || 
+			cellIds.includes(cell.cellName) ||
+			cellIds.includes(cell.cellID)
+		);
+	});
+
+	// Derive highlighted sites based on selected features
+	// TODO: Add site highlighting when SiteDataStore is available
+	let highlightedSites = $derived.by(() => {
+		return [];
+	});
+
+	// Generate GeoJSON for cell highlights
+	let cellHighlightGeoJSON = $derived.by(() => {
+		if (!cellDisplayStore || highlightedCells.length === 0) {
+			return { type: 'FeatureCollection', features: [] };
+		}
+		
+		// Calculate radius for current zoom level (same as CellsLayer does)
+		const radiusMeters = calculateRadiusInMeters(centerLat, currentZoom, cellDisplayStore.targetPixelSize);
+		
+		const features = highlightedCells.map(cell =>
+			generateCellArc(cell, radiusMeters, 100, highlightColor)
+		);
+		
+		return {
+			type: 'FeatureCollection' as const,
+			features
+		};
+	});
+
+	// Generate GeoJSON for site highlights
+	let siteHighlightGeoJSON = $derived.by(() => {
+		if (highlightedSites.length === 0) {
+			return { type: 'FeatureCollection', features: [] };
+		}
+		
+		const features = highlightedSites.map((site: any) => ({
+			type: 'Feature' as const,
+			geometry: {
+				type: 'Point' as const,
+				coordinates: [site.longitude, site.latitude]
+			},
+			properties: { siteId: site.siteId }
+		}));
+		
+		return {
+			type: 'FeatureCollection' as const,
+			features
+		};
+	});
+
+	// Initialize and manage layers
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const addLayers = () => {
+			// Cell Selection Highlight Layer
+			if (!map.getSource(cellsSourceId)) {
+				map.addSource(cellsSourceId, {
+					type: 'geojson',
+					data: { type: 'FeatureCollection', features: [] }
+				});
+			}
+
+			if (!map.getLayer(cellsLayerId)) {
+				map.addLayer({
+					id: cellsLayerId,
+					type: 'line',
+					source: cellsSourceId,
+					paint: {
+						'line-color': highlightColor,
+						'line-width': highlightWidth,
+						'line-opacity': 1
+					}
+				});
+			}
+
+			// Site Selection Highlight Layer
+			if (!map.getSource(sitesSourceId)) {
+				map.addSource(sitesSourceId, {
+					type: 'geojson',
+					data: { type: 'FeatureCollection', features: [] }
+				});
+			}
+
+			if (!map.getLayer(sitesLayerId)) {
+				map.addLayer({
+					id: sitesLayerId,
+					type: 'circle',
+					source: sitesSourceId,
+					paint: {
+						'circle-radius': 12,
+						'circle-color': 'transparent',
+						'circle-stroke-color': highlightColor,
+						'circle-stroke-width': highlightWidth,
+						'circle-stroke-opacity': 1
+					}
+				});
+			}
+		};
+
+		// Initial setup
+		addLayers();
+
+		// Events
+		map.on('style.load', addLayers);
+
+		// Cleanup
+		return () => {
+			map.off('style.load', addLayers);
+			
+			if (map.getLayer(cellsLayerId)) map.removeLayer(cellsLayerId);
+			if (map.getLayer(sitesLayerId)) map.removeLayer(sitesLayerId);
+			if (map.getSource(cellsSourceId)) map.removeSource(cellsSourceId);
+			if (map.getSource(sitesSourceId)) map.removeSource(sitesSourceId);
+		};
+	});
+
+	// Update cell highlight source
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const source = map.getSource(cellsSourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData(cellHighlightGeoJSON as any);
+		}
+	});
+
+	// Update site highlight source
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const source = map.getSource(sitesSourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData(siteHighlightGeoJSON as any);
+		}
+	});
+</script>

package/dist/map-v3/features/selection/layers/SelectionHighlightLayers.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
+import type { CellDisplayStore } from '../../cells/stores/cell.display.svelte';
+import type { SelectedFeature } from '../types';
+interface Props {
+    selectedFeatures: SelectedFeature[];
+    cellDataStore?: CellDataStore;
+    cellDisplayStore?: CellDisplayStore;
+    highlightColor?: string;
+    highlightWidth?: number;
+}
+declare const SelectionHighlightLayers: import("svelte").Component<Props, {}, "">;
+type SelectionHighlightLayers = ReturnType<typeof SelectionHighlightLayers>;
+export default SelectionHighlightLayers;

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

@@ -0,0 +1,84 @@
+/**
+ * Feature Selection Store - Svelte 5 Runes Implementation
+ *
+ * Manages selection of map features (cells, sites) with click detection.
+ */
+import type { Map as MapboxMap } from 'mapbox-gl';
+import type { SelectedFeature } from '../types';
+export declare class FeatureSelectionStore {
+    private selectedFeatures;
+    private map;
+    selectionMode: boolean;
+    idProperty: string;
+    queryLayers: string[];
+    private clickHandler;
+    private onSelectionChange?;
+    /**
+     * Initialize the store with a map instance
+     */
+    setMap(mapInstance: MapboxMap): void;
+    /**
+     * Set which property to use as the ID
+     */
+    setIdProperty(property: string): void;
+    /**
+     * Set which layers to query for features
+     */
+    setQueryLayers(layers: string[]): void;
+    /**
+     * Register callback for selection changes
+     */
+    setSelectionChangeCallback(callback: (selected: SelectedFeature[]) => void): void;
+    /**
+     * Setup global click handler for any feature
+     */
+    private setupClickHandler;
+    /**
+     * Enable selection mode
+     */
+    enableSelectionMode(): void;
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode(): void;
+    /**
+     * Toggle a feature in the selection
+     */
+    toggleFeatureSelection(id: string, layerId?: string, properties?: Record<string, any>, siteId?: string, cellName?: string): void;
+    /**
+     * Add a feature to the selection
+     */
+    addFeatureSelection(id: string, layerId?: string, properties?: Record<string, any>, siteId?: string, cellName?: string): void;
+    /**
+     * Remove a feature from the selection
+     */
+    removeFeatureSelection(id: string): void;
+    /**
+     * Clear all selections
+     */
+    clearSelection(): void;
+    /**
+     * Get all selected features
+     */
+    getSelectedFeatures(): SelectedFeature[];
+    /**
+     * Get selected feature IDs only
+     */
+    getSelectedIds(): string[];
+    /**
+     * Check if a feature is selected
+     */
+    isFeatureSelected(id: string): boolean;
+    /**
+     * Get selection count
+     */
+    get count(): number;
+    /**
+     * Cleanup - remove event handlers
+     */
+    destroy(): void;
+}
+/**
+ * Factory function to create a new feature selection store
+ */
+export declare function createFeatureSelectionStore(): FeatureSelectionStore;