@smartnet360/svelte-components 0.0.100 → 0.0.102

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

@@ -1,209 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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;