@smartnet360/svelte-components 0.0.130 → 0.0.132

package/dist/map-v3/features/cells/custom/layers/CustomCellsLayer.svelte

@@ -1,262 +0,0 @@
-<script lang="ts">
-	/**
-	 * Custom Cells Layer
-	 * 
-	 * Renders custom cell sets on the map with sizeFactor support.
-	 * Each set is rendered as a separate layer for independent styling.
-	 */
-	import { getContext, onMount, onDestroy } from 'svelte';
-	import type { MapStore } from '../../../../core/stores/map.store.svelte';
-	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
-	import type { CustomCellSet, CustomCell } from '../types';
-	import { generateCellArc, calculateRadiusInMeters } from '../../logic/geometry';
-	import type mapboxgl from 'mapbox-gl';
-
-	interface Props {
-		/** The custom cell sets store */
-		setsStore: CustomCellSetsStore;
-		/** Optional: specific set ID to render (if not provided, renders all) */
-		setId?: string;
-	}
-
-	let { setsStore, setId }: Props = $props();
-
-	const mapStore = getContext<MapStore>('MAP_CONTEXT');
-	
-	// Track active layer/source IDs for cleanup
-	let activeSources = new Set<string>();
-	let activeLayers = new Set<string>();
-
-	// Debounce timer
-	let updateTimeout: ReturnType<typeof setTimeout>;
-
-	/**
-	 * Get source ID for a set
-	 */
-	function getSourceId(setId: string): string {
-		return `custom-cells-${setId}`;
-	}
-
-	/**
-	 * Get layer IDs for a set
-	 */
-	function getLayerIds(setId: string): { fill: string; line: string } {
-		return {
-			fill: `custom-cells-fill-${setId}`,
-			line: `custom-cells-line-${setId}`
-		};
-	}
-
-	/**
-	 * Add source and layers for a set
-	 */
-	function addSetLayers(map: mapboxgl.Map, set: CustomCellSet) {
-		const sourceId = getSourceId(set.id);
-		const { fill, line } = getLayerIds(set.id);
-
-		// Add source if not exists
-		if (!map.getSource(sourceId)) {
-			map.addSource(sourceId, {
-				type: 'geojson',
-				data: { type: 'FeatureCollection', features: [] }
-			});
-			activeSources.add(sourceId);
-		}
-
-		// Add fill layer
-		if (!map.getLayer(fill)) {
-			map.addLayer({
-				id: fill,
-				type: 'fill',
-				source: sourceId,
-				paint: {
-					'fill-color': ['get', 'color'],
-					'fill-opacity': set.opacity
-				}
-			});
-			activeLayers.add(fill);
-		}
-
-		// Add line layer
-		if (!map.getLayer(line)) {
-			map.addLayer({
-				id: line,
-				type: 'line',
-				source: sourceId,
-				paint: {
-					'line-color': ['get', 'lineColor'],
-					'line-width': ['get', 'lineWidth'],
-					'line-opacity': ['get', 'lineOpacity']
-				}
-			});
-			activeLayers.add(line);
-		}
-	}
-
-	/**
-	 * Remove layers and source for a set
-	 */
-	function removeSetLayers(map: mapboxgl.Map, setIdToRemove: string) {
-		const sourceId = getSourceId(setIdToRemove);
-		const { fill, line } = getLayerIds(setIdToRemove);
-
-		if (map.getLayer(line)) {
-			map.removeLayer(line);
-			activeLayers.delete(line);
-		}
-		if (map.getLayer(fill)) {
-			map.removeLayer(fill);
-			activeLayers.delete(fill);
-		}
-		if (map.getSource(sourceId)) {
-			map.removeSource(sourceId);
-			activeSources.delete(sourceId);
-		}
-	}
-
-	/**
-	 * Render cells for a specific set
-	 */
-	function renderSet(map: mapboxgl.Map, set: CustomCellSet) {
-		const bounds = map.getBounds();
-		if (!bounds) return;
-
-		const zoom = map.getZoom();
-		const centerLat = map.getCenter().lat;
-
-		// Calculate base radius from pixel size
-		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, set.baseSize);
-
-		const features: GeoJSON.Feature[] = [];
-
-		for (const customCell of set.cells) {
-			const cell = customCell.resolvedCell;
-			if (!cell) continue;
-
-			// Check group visibility
-			if (!set.visibleGroups.has(customCell.customGroup)) continue;
-
-			// Viewport filter
-			if (!bounds.contains([cell.longitude, cell.latitude])) continue;
-
-			// Get color for this group
-			const color = set.groupColors[customCell.customGroup] || set.defaultColor;
-
-			// Apply size factor
-			const radiusMeters = baseRadiusMeters * customCell.sizeFactor;
-
-			// Generate arc feature
-			const feature = generateCellArc(cell, radiusMeters, 50, color);
-
-			// Add custom properties for tooltips
-			if (feature.properties) {
-				feature.properties.customGroup = customCell.customGroup;
-				feature.properties.sizeFactor = customCell.sizeFactor;
-				feature.properties.setName = set.name;
-				
-				// Add extra fields
-				for (const [key, value] of Object.entries(customCell.extraFields)) {
-					feature.properties[`extra_${key}`] = value;
-				}
-			}
-
-			features.push(feature);
-		}
-
-		// Update source
-		const sourceId = getSourceId(set.id);
-		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
-		if (source) {
-			source.setData({
-				type: 'FeatureCollection',
-				features: features as any
-			});
-		}
-
-		// Update layer opacity
-		const { fill } = getLayerIds(set.id);
-		if (map.getLayer(fill)) {
-			map.setPaintProperty(fill, 'fill-opacity', set.opacity);
-		}
-
-		console.log(`[CustomCellsLayer] Rendered ${features.length} features for set "${set.name}"`);
-	}
-
-	/**
-	 * Main update function
-	 */
-	function updateLayers() {
-		const map = mapStore.map;
-		if (!map) return;
-
-		clearTimeout(updateTimeout);
-		updateTimeout = setTimeout(() => {
-			const setsToRender = setId 
-				? setsStore.sets.filter(s => s.id === setId)
-				: setsStore.sets;
-
-			// Track which sets we're rendering
-			const activeSetIds = new Set(setsToRender.map(s => s.id));
-
-			// Remove layers for sets that no longer exist
-			for (const sourceId of activeSources) {
-				const setIdFromSource = sourceId.replace('custom-cells-', '');
-				if (!activeSetIds.has(setIdFromSource)) {
-					removeSetLayers(map, setIdFromSource);
-				}
-			}
-
-			// Render each set
-			for (const set of setsToRender) {
-				if (set.visible) {
-					addSetLayers(map, set);
-					renderSet(map, set);
-				} else {
-					// Hide by clearing data
-					const sourceId = getSourceId(set.id);
-					const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
-					if (source) {
-						source.setData({ type: 'FeatureCollection', features: [] });
-					}
-				}
-			}
-		}, 100);
-	}
-
-	// Setup and reactive updates
-	$effect(() => {
-		const map = mapStore.map;
-		if (!map) return;
-
-		const onMapEvent = () => updateLayers();
-
-		// Initial render
-		updateLayers();
-
-		// Listen to map events
-		map.on('moveend', onMapEvent);
-		map.on('zoomend', onMapEvent);
-		map.on('style.load', onMapEvent);
-
-		return () => {
-			map.off('moveend', onMapEvent);
-			map.off('zoomend', onMapEvent);
-			map.off('style.load', onMapEvent);
-
-			// Cleanup all layers
-			for (const sourceId of activeSources) {
-				const setIdFromSource = sourceId.replace('custom-cells-', '');
-				removeSetLayers(map, setIdFromSource);
-			}
-		};
-	});
-
-	// React to store changes
-	$effect(() => {
-		// Read version to trigger on changes
-		const _version = setsStore.version;
-		const _sets = setsStore.sets;
-		
-		updateLayers();
-	});
-</script>