@smartnet360/svelte-components 0.0.130 → 0.0.132

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

@@ -0,0 +1,399 @@
+<script lang="ts">
+	/**
+	 * Custom Layer
+	 * 
+	 * Renders custom sets on the map with sizeFactor support.
+	 * Supports two geometry types:
+	 * - 'cell': Sector arcs using resolved cell's azimuth/beamwidth
+	 * - 'point': Native Mapbox circles (lightweight)
+	 * 
+	 * Each set is rendered as separate layers 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 '../../cells/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 IDs for a set (one for cells, one for points)
+	 */
+	function getSourceIds(setId: string): { cells: string; points: string } {
+		return {
+			cells: `custom-cells-${setId}`,
+			points: `custom-points-${setId}`
+		};
+	}
+
+	/**
+	 * Get layer IDs for a set
+	 */
+	function getLayerIds(setId: string): { 
+		cellFill: string; 
+		cellLine: string; 
+		pointCircle: string;
+	} {
+		return {
+			cellFill: `custom-cells-fill-${setId}`,
+			cellLine: `custom-cells-line-${setId}`,
+			pointCircle: `custom-points-circle-${setId}`
+		};
+	}
+
+	/**
+	 * Add source and layers for a set
+	 */
+	function addSetLayers(map: mapboxgl.Map, set: CustomCellSet) {
+		const sources = getSourceIds(set.id);
+		const layers = getLayerIds(set.id);
+
+		// Add cells source if not exists
+		if (!map.getSource(sources.cells)) {
+			map.addSource(sources.cells, {
+				type: 'geojson',
+				data: { type: 'FeatureCollection', features: [] }
+			});
+			activeSources.add(sources.cells);
+		}
+
+		// Add points source if not exists
+		if (!map.getSource(sources.points)) {
+			map.addSource(sources.points, {
+				type: 'geojson',
+				data: { type: 'FeatureCollection', features: [] }
+			});
+			activeSources.add(sources.points);
+		}
+
+		// Add cell fill layer
+		if (!map.getLayer(layers.cellFill)) {
+			map.addLayer({
+				id: layers.cellFill,
+				type: 'fill',
+				source: sources.cells,
+				paint: {
+					'fill-color': ['get', 'color'],
+					'fill-opacity': set.opacity
+				}
+			});
+			activeLayers.add(layers.cellFill);
+		}
+
+		// Add cell line layer
+		if (!map.getLayer(layers.cellLine)) {
+			map.addLayer({
+				id: layers.cellLine,
+				type: 'line',
+				source: sources.cells,
+				paint: {
+					'line-color': ['get', 'lineColor'],
+					'line-width': ['get', 'lineWidth'],
+					'line-opacity': ['get', 'lineOpacity']
+				}
+			});
+			activeLayers.add(layers.cellLine);
+		}
+
+		// Add points circle layer (native Mapbox - very lightweight)
+		if (!map.getLayer(layers.pointCircle)) {
+			map.addLayer({
+				id: layers.pointCircle,
+				type: 'circle',
+				source: sources.points,
+				paint: {
+					'circle-radius': ['get', 'radius'],
+					'circle-color': ['get', 'color'],
+					'circle-opacity': set.opacity,
+					'circle-stroke-width': 1,
+					'circle-stroke-color': ['get', 'strokeColor']
+				}
+			});
+			activeLayers.add(layers.pointCircle);
+		}
+	}
+
+	/**
+	 * Remove layers and source for a set
+	 */
+	function removeSetLayers(map: mapboxgl.Map, setIdToRemove: string) {
+		const sources = getSourceIds(setIdToRemove);
+		const layers = getLayerIds(setIdToRemove);
+
+		// Remove layers
+		for (const layerId of [layers.cellLine, layers.cellFill, layers.pointCircle]) {
+			if (map.getLayer(layerId)) {
+				map.removeLayer(layerId);
+				activeLayers.delete(layerId);
+			}
+		}
+
+		// Remove sources
+		for (const sourceId of [sources.cells, sources.points]) {
+			if (map.getSource(sourceId)) {
+				map.removeSource(sourceId);
+				activeSources.delete(sourceId);
+			}
+		}
+	}
+
+	/**
+	 * Render items 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 (for cell arcs)
+		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, set.baseSize);
+
+		const cellFeatures: GeoJSON.Feature[] = [];
+		const pointFeatures: GeoJSON.Feature[] = [];
+
+		for (const item of set.cells) {
+			// Check group visibility
+			if (!set.visibleGroups.has(item.customGroup)) continue;
+
+			// Get color for this group
+			const color = set.groupColors[item.customGroup] || set.defaultColor;
+
+			if (item.geometry === 'point' && item.lat !== undefined && item.lon !== undefined) {
+				// Point geometry - render as circle
+				// Viewport filter
+				if (!bounds.contains([item.lon, item.lat])) continue;
+
+				// Point radius in pixels (pointSize is in pixels)
+				const radius = set.pointSize * item.sizeFactor;
+
+				// Darken color for stroke
+				const strokeColor = darkenColor(color, 0.3);
+
+				pointFeatures.push({
+					type: 'Feature',
+					geometry: {
+						type: 'Point',
+						coordinates: [item.lon, item.lat]
+					},
+					properties: {
+						id: item.id,
+						color,
+						strokeColor,
+						radius,
+						customGroup: item.customGroup,
+						sizeFactor: item.sizeFactor,
+						setName: set.name,
+						...Object.fromEntries(
+							Object.entries(item.extraFields).map(([k, v]) => [`extra_${k}`, v])
+						)
+					}
+				});
+			} else if (item.geometry === 'cell' && item.resolvedCell) {
+				// Cell geometry - render as sector arc
+				const cell = item.resolvedCell;
+
+				// Viewport filter
+				if (!bounds.contains([cell.longitude, cell.latitude])) continue;
+
+				// Apply size factor
+				const radiusMeters = baseRadiusMeters * item.sizeFactor;
+
+				// Generate arc feature
+				const feature = generateCellArc(cell, radiusMeters, 50, color);
+
+				// Add custom properties for tooltips
+				if (feature.properties) {
+					feature.properties.customGroup = item.customGroup;
+					feature.properties.sizeFactor = item.sizeFactor;
+					feature.properties.setName = set.name;
+					
+					// Add extra fields
+					for (const [key, value] of Object.entries(item.extraFields)) {
+						feature.properties[`extra_${key}`] = value;
+					}
+				}
+
+				cellFeatures.push(feature);
+			}
+		}
+
+		// Update sources
+		const sources = getSourceIds(set.id);
+		const layers = getLayerIds(set.id);
+		
+		const cellsSource = map.getSource(sources.cells) as mapboxgl.GeoJSONSource;
+		if (cellsSource) {
+			cellsSource.setData({
+				type: 'FeatureCollection',
+				features: cellFeatures as any
+			});
+		}
+
+		const pointsSource = map.getSource(sources.points) as mapboxgl.GeoJSONSource;
+		if (pointsSource) {
+			pointsSource.setData({
+				type: 'FeatureCollection',
+				features: pointFeatures
+			});
+		}
+
+		// Update layer opacity
+		if (map.getLayer(layers.cellFill)) {
+			map.setPaintProperty(layers.cellFill, 'fill-opacity', set.opacity);
+		}
+		if (map.getLayer(layers.pointCircle)) {
+			map.setPaintProperty(layers.pointCircle, 'circle-opacity', set.opacity);
+		}
+
+		console.log(`[CustomLayer] Rendered ${cellFeatures.length} cells, ${pointFeatures.length} points for set "${set.name}"`);
+	}
+
+	/**
+	 * Darken a hex color by a factor
+	 */
+	function darkenColor(hex: string, factor: number): string {
+		const num = parseInt(hex.replace('#', ''), 16);
+		const r = Math.floor((num >> 16) * (1 - factor));
+		const g = Math.floor(((num >> 8) & 0x00FF) * (1 - factor));
+		const b = Math.floor((num & 0x0000FF) * (1 - factor));
+		return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+	}
+
+	/**
+	 * Ensure all sources and layers exist for current sets (synchronous)
+	 */
+	function ensureLayers() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		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 match = sourceId.match(/^custom-(?:cells|points)-(.+)$/);
+			if (match) {
+				const setIdFromSource = match[1];
+				if (!activeSetIds.has(setIdFromSource)) {
+					removeSetLayers(map, setIdFromSource);
+				}
+			}
+		}
+
+		// Add layers for each visible set
+		for (const set of setsToRender) {
+			if (set.visible) {
+				addSetLayers(map, set);
+			}
+		}
+	}
+
+	/**
+	 * Update layer data (debounced)
+	 */
+	function updateLayerData() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			const setsToRender = setId 
+				? setsStore.sets.filter(s => s.id === setId)
+				: setsStore.sets;
+
+			// Render each set
+			for (const set of setsToRender) {
+				if (set.visible) {
+					renderSet(map, set);
+				} else {
+					// Hide by clearing data
+					const sources = getSourceIds(set.id);
+					const cellsSource = map.getSource(sources.cells) as mapboxgl.GeoJSONSource;
+					const pointsSource = map.getSource(sources.points) as mapboxgl.GeoJSONSource;
+					if (cellsSource) {
+						cellsSource.setData({ type: 'FeatureCollection', features: [] });
+					}
+					if (pointsSource) {
+						pointsSource.setData({ type: 'FeatureCollection', features: [] });
+					}
+				}
+			}
+		}, 100);
+	}
+
+	// Setup and reactive updates
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		// When style changes, all sources/layers are removed by Mapbox
+		// We need to clear our tracking and re-add layers
+		const onStyleLoad = () => {
+			activeSources.clear();
+			activeLayers.clear();
+			ensureLayers();
+			updateLayerData();
+		};
+
+		// Initial setup
+		ensureLayers();
+		updateLayerData();
+
+		// Events
+		map.on('style.load', onStyleLoad);
+		map.on('moveend', updateLayerData);
+		map.on('zoomend', updateLayerData);
+
+		return () => {
+			map.off('style.load', onStyleLoad);
+			map.off('moveend', updateLayerData);
+			map.off('zoomend', updateLayerData);
+
+			// Cleanup all layers - extract unique set IDs
+			const setIds = new Set<string>();
+			for (const sourceId of activeSources) {
+				const match = sourceId.match(/^custom-(?:cells|points)-(.+)$/);
+				if (match) {
+					setIds.add(match[1]);
+				}
+			}
+			for (const setIdToRemove of setIds) {
+				removeSetLayers(map, setIdToRemove);
+			}
+		};
+	});
+
+	// React to store changes
+	$effect(() => {
+		// Read version to trigger on changes
+		const _version = setsStore.version;
+		const _sets = setsStore.sets;
+		
+		ensureLayers();
+		updateLayerData();
+	});
+</script>

package/dist/map-v3/features/{cells/custom → custom}/logic/csv-parser.d.ts

@@ -1,23 +1,27 @@
 /**
- * Custom Cells - CSV Parser
+ * Custom Feature - CSV Parser
  *
- * Parses CSV files for custom cell sets.
- * Required column: cellName (or txId for backwards compatibility)
- * Optional columns: customGroup, sizeFactor, + any extras for tooltips
+ * Parses CSV files for custom sets.
+ * Supports two modes:
+ * - Cell mode: id column resolves against cell data → sector arcs
+ * - Point mode: lat/lon columns → circles
+ *
+ * Required column: id (or cellName/txId for backwards compat)
+ * Optional columns: customGroup, sizeFactor, lat, lon, + any extras for tooltips
  * Supports both comma (,) and semicolon (;) delimiters
  */
 import type { CustomCellImportResult } from '../types';
-import type { Cell } from '../../../../../shared/demo';
+import type { Cell } from '../../../../shared/demo';
 /**
  * Supported delimiters
  */
 export type CsvDelimiter = ',' | ';' | 'auto';
 /**
- * Parse a CSV string into custom cells
+ * Parse a CSV string into custom items (cells or points)
  * @param csvContent Raw CSV content
  * @param cellLookup Map of cellName -> Cell for resolving cell data
  * @param delimiter Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect)
- * @returns Import result with cells, unmatched IDs, groups, and extra columns
+ * @returns Import result with items, unmatched IDs, groups, and extra columns
  */
 export declare function parseCustomCellsCsv(csvContent: string, cellLookup: Map<string, Cell>, delimiter?: CsvDelimiter): CustomCellImportResult;
 /**

package/dist/map-v3/features/{cells/custom → custom}/logic/csv-parser.js

@@ -1,15 +1,19 @@
 /**
- * Custom Cells - CSV Parser
+ * Custom Feature - CSV Parser
  *
- * Parses CSV files for custom cell sets.
- * Required column: cellName (or txId for backwards compatibility)
- * Optional columns: customGroup, sizeFactor, + any extras for tooltips
+ * Parses CSV files for custom sets.
+ * Supports two modes:
+ * - Cell mode: id column resolves against cell data → sector arcs
+ * - Point mode: lat/lon columns → circles
+ *
+ * Required column: id (or cellName/txId for backwards compat)
+ * Optional columns: customGroup, sizeFactor, lat, lon, + any extras for tooltips
  * Supports both comma (,) and semicolon (;) delimiters
  */
 /**
  * Known/reserved column names
  */
-const RESERVED_COLUMNS = ['cellname', 'txid', 'customgroup', 'sizefactor'];
+const RESERVED_COLUMNS = ['id', 'cellname', 'txid', 'customgroup', 'sizefactor', 'lat', 'latitude', 'lon', 'lng', 'longitude'];
 /**
  * Normalize column name for matching
  */
@@ -26,11 +30,11 @@ function detectDelimiter(headerLine) {
     return semicolonCount > commaCount ? ';' : ',';
 }
 /**
- * Parse a CSV string into custom cells
+ * Parse a CSV string into custom items (cells or points)
  * @param csvContent Raw CSV content
  * @param cellLookup Map of cellName -> Cell for resolving cell data
  * @param delimiter Delimiter to use: ',' (comma), ';' (semicolon), or 'auto' (detect)
- * @returns Import result with cells, unmatched IDs, groups, and extra columns
+ * @returns Import result with items, unmatched IDs, groups, and extra columns
  */
 export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto') {
     const lines = csvContent.trim().split('\n');
@@ -40,7 +44,9 @@ export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto')
             unmatchedTxIds: [],
             groups: [],
             extraColumns: [],
-            totalRows: 0
+            totalRows: 0,
+            cellCount: 0,
+            pointCount: 0
         };
     }
     // Detect or use specified delimiter
@@ -49,19 +55,24 @@ export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto')
     // Parse header
     const headers = parseCSVLine(headerLine, actualDelimiter);
     const normalizedHeaders = headers.map(normalizeColumnName);
-    // Find cell identifier column - prefer cellName, fallback to txId
-    let idIndex = normalizedHeaders.findIndex(h => h === 'cellname');
-    let usesCellName = true;
+    // Find ID column - prefer 'id', then 'cellname', then 'txid'
+    let idIndex = normalizedHeaders.findIndex(h => h === 'id');
+    if (idIndex === -1) {
+        idIndex = normalizedHeaders.findIndex(h => h === 'cellname');
+    }
     if (idIndex === -1) {
         idIndex = normalizedHeaders.findIndex(h => h === 'txid');
-        usesCellName = false;
     }
     if (idIndex === -1) {
-        throw new Error('CSV must contain a "cellName" or "txId" column');
+        throw new Error('CSV must contain an "id", "cellName", or "txId" column');
     }
     // Find optional columns
     const groupIndex = normalizedHeaders.findIndex(h => h === 'customgroup');
     const sizeFactorIndex = normalizedHeaders.findIndex(h => h === 'sizefactor');
+    // Find lat/lon columns for point geometry
+    let latIndex = normalizedHeaders.findIndex(h => h === 'lat' || h === 'latitude');
+    let lonIndex = normalizedHeaders.findIndex(h => h === 'lon' || h === 'lng' || h === 'longitude');
+    const hasLatLon = latIndex !== -1 && lonIndex !== -1;
     // Find extra columns (not reserved)
     const extraColumns = [];
     const extraIndices = [];
@@ -76,13 +87,15 @@ export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto')
     const cells = [];
     const unmatchedTxIds = [];
     const groupsSet = new Set();
+    let cellCount = 0;
+    let pointCount = 0;
     for (let i = 1; i < lines.length; i++) {
         const line = lines[i].trim();
         if (!line)
             continue;
         const values = parseCSVLine(line, actualDelimiter);
-        const cellIdentifier = values[idIndex]?.trim();
-        if (!cellIdentifier)
+        const itemId = values[idIndex]?.trim();
+        if (!itemId)
             continue;
         // Get custom group (default to 'default')
         const customGroup = groupIndex !== -1
@@ -105,19 +118,48 @@ export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto')
             const numValue = parseFloat(value);
             extraFields[extraColumns[i]] = isNaN(numValue) ? value : numValue;
         });
-        // Resolve cell from lookup
-        const resolvedCell = cellLookup.get(cellIdentifier);
+        // Determine geometry type and create item
+        let geometry = 'cell';
+        let resolvedCell;
+        let lat;
+        let lon;
+        if (hasLatLon) {
+            // Try to parse lat/lon for point geometry
+            const parsedLat = parseFloat(values[latIndex]);
+            const parsedLon = parseFloat(values[lonIndex]);
+            if (!isNaN(parsedLat) && !isNaN(parsedLon)) {
+                // Valid coordinates - use point geometry
+                geometry = 'point';
+                lat = parsedLat;
+                lon = parsedLon;
+                pointCount++;
+                cells.push({
+                    id: itemId,
+                    customGroup,
+                    sizeFactor,
+                    extraFields,
+                    geometry,
+                    lat,
+                    lon
+                });
+                continue;
+            }
+        }
+        // No valid lat/lon - try to resolve as cell
+        resolvedCell = cellLookup.get(itemId);
         if (resolvedCell) {
+            cellCount++;
             cells.push({
-                txId: resolvedCell.txId, // Always store the txId from resolved cell
+                id: itemId,
                 customGroup,
                 sizeFactor,
                 extraFields,
+                geometry: 'cell',
                 resolvedCell
             });
         }
         else {
-            unmatchedTxIds.push(cellIdentifier);
+            unmatchedTxIds.push(itemId);
         }
     }
     return {
@@ -125,7 +167,9 @@ export function parseCustomCellsCsv(csvContent, cellLookup, delimiter = 'auto')
         unmatchedTxIds,
         groups: Array.from(groupsSet).sort(),
         extraColumns,
-        totalRows: lines.length - 1
+        totalRows: lines.length - 1,
+        cellCount,
+        pointCount
     };
 }
 /**

package/dist/map-v3/features/{cells/custom → custom}/logic/tree-adapter.d.ts

@@ -3,7 +3,7 @@
  *
  * Builds tree structure for TreeView component, grouped by customGroup
  */
-import type { TreeNode } from '../../../../../core/TreeView/tree.model';
+import type { TreeNode } from '../../../../core/TreeView/tree.model';
 import type { CustomCellSet } from '../types';
 /**
  * Metadata for tree nodes

package/dist/map-v3/features/{cells/custom → custom}/stores/custom-cell-sets.svelte.d.ts

@@ -4,8 +4,8 @@
  * Manages multiple custom cell sets, each loaded from a CSV file.
  * Resolves cell data from a provided cell array.
  */
-import type { Cell } from '../../types';
-import type { CellDataStore } from '../../stores/cell.data.svelte';
+import type { Cell } from '../../../../shared/demo';
+import type { CellDataStore } from '../../cells/stores/cell.data.svelte';
 import type { CustomCellSet, CustomCellImportResult } from '../types';
 /** Function that returns the current cells array */
 type CellsGetter = () => Cell[];
@@ -58,7 +58,7 @@ export declare class CustomCellSetsStore {
     /**
      * Update set display settings
      */
-    updateSetSettings(setId: string, settings: Partial<Pick<CustomCellSet, 'baseSize' | 'opacity' | 'defaultColor'>>): void;
+    updateSetSettings(setId: string, settings: Partial<Pick<CustomCellSet, 'baseSize' | 'pointSize' | 'opacity' | 'defaultColor'>>): void;
     /**
      * Rename a set
      */
@@ -69,6 +69,7 @@ export declare class CustomCellSetsStore {
     getVisibleCells(setId: string): import("..").CustomCell[];
     /**
      * Re-resolve cells after main cell data changes
+     * Only affects items with 'cell' geometry
      */
     refreshResolutions(): void;
     /**