@smartnet360/svelte-components 0.0.124 → 0.0.126

package/dist/map-v3/features/cells/custom/index.js

@@ -0,0 +1,35 @@
+/**
+ * Custom Cells Feature - Main Barrel Export
+ *
+ * Ad-hoc cell layers loaded from CSV files.
+ * Reference existing cells by txId with custom grouping and sizing.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     CustomCellsLayer,
+ *     CustomCellSetManager,
+ *     CustomCellFilterControl,
+ *     createCustomCellSetsStore
+ *   } from './';
+ *
+ *   const customSetsStore = createCustomCellSetsStore(cellDataStore, 'my-namespace');
+ * </script>
+ *
+ * <CustomCellSetManager setsStore={customSetsStore} position="top-left" />
+ * <CustomCellsLayer setsStore={customSetsStore} />
+ * {#each customSetsStore.sets as set (set.id)}
+ *   <CustomCellFilterControl setsStore={customSetsStore} {set} position="top-left" />
+ * {/each}
+ * ```
+ */
+export { CUSTOM_CELL_PALETTE } from './types';
+// Stores
+export { CustomCellSetsStore, createCustomCellSetsStore } from './stores';
+// Components
+export { CustomCellFilterControl, CustomCellSetManager } from './components';
+// Layers
+export { CustomCellsLayer } from './layers';
+// Logic (for advanced usage)
+export { parseCustomCellsCsv, buildCellLookup, buildCustomCellTree, getGroupCounts } from './logic';

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

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

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

@@ -0,0 +1,10 @@
+import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+interface Props {
+    /** The custom cell sets store */
+    setsStore: CustomCellSetsStore;
+    /** Optional: specific set ID to render (if not provided, renders all) */
+    setId?: string;
+}
+declare const CustomCellsLayer: import("svelte").Component<Props, {}, "">;
+type CustomCellsLayer = ReturnType<typeof CustomCellsLayer>;
+export default CustomCellsLayer;

package/dist/map-v3/features/cells/custom/layers/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Custom Cells Layers - Barrel Export
+ */
+export { default as CustomCellsLayer } from './CustomCellsLayer.svelte';

package/dist/map-v3/features/cells/custom/layers/index.js

@@ -0,0 +1,4 @@
+/**
+ * Custom Cells Layers - Barrel Export
+ */
+export { default as CustomCellsLayer } from './CustomCellsLayer.svelte';

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

@@ -0,0 +1,20 @@
+/**
+ * Custom Cells - CSV Parser
+ *
+ * Parses CSV files for custom cell sets.
+ * Required column: txId
+ * Optional columns: customGroup, sizeFactor, + any extras for tooltips
+ */
+import type { CustomCellImportResult } from '../types';
+import type { Cell } from '../../../../../shared/demo';
+/**
+ * Parse a CSV string into custom cells
+ * @param csvContent Raw CSV content
+ * @param cellLookup Map of txId -> Cell for resolving cell data
+ * @returns Import result with cells, unmatched IDs, groups, and extra columns
+ */
+export declare function parseCustomCellsCsv(csvContent: string, cellLookup: Map<string, Cell>): CustomCellImportResult;
+/**
+ * Build a cell lookup map from an array of cells
+ */
+export declare function buildCellLookup(cells: Cell[]): Map<string, Cell>;

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

@@ -0,0 +1,164 @@
+/**
+ * Custom Cells - CSV Parser
+ *
+ * Parses CSV files for custom cell sets.
+ * Required column: txId
+ * Optional columns: customGroup, sizeFactor, + any extras for tooltips
+ */
+/**
+ * Known/reserved column names
+ */
+const RESERVED_COLUMNS = ['txId', 'txid', 'customGroup', 'customgroup', 'sizeFactor', 'sizefactor'];
+/**
+ * Normalize column name for matching
+ */
+function normalizeColumnName(name) {
+    return name.trim().toLowerCase();
+}
+/**
+ * Parse a CSV string into custom cells
+ * @param csvContent Raw CSV content
+ * @param cellLookup Map of txId -> Cell for resolving cell data
+ * @returns Import result with cells, unmatched IDs, groups, and extra columns
+ */
+export function parseCustomCellsCsv(csvContent, cellLookup) {
+    const lines = csvContent.trim().split('\n');
+    if (lines.length < 2) {
+        return {
+            cells: [],
+            unmatchedTxIds: [],
+            groups: [],
+            extraColumns: [],
+            totalRows: 0
+        };
+    }
+    // Parse header
+    const headerLine = lines[0];
+    const headers = parseCSVLine(headerLine);
+    const normalizedHeaders = headers.map(normalizeColumnName);
+    // Find required txId column
+    const txIdIndex = normalizedHeaders.findIndex(h => h === 'txid');
+    if (txIdIndex === -1) {
+        throw new Error('CSV must contain a "txId" column');
+    }
+    // Find optional columns
+    const groupIndex = normalizedHeaders.findIndex(h => h === 'customgroup');
+    const sizeFactorIndex = normalizedHeaders.findIndex(h => h === 'sizefactor');
+    // Find extra columns (not reserved)
+    const extraColumns = [];
+    const extraIndices = [];
+    headers.forEach((header, idx) => {
+        const normalized = normalizeColumnName(header);
+        if (!RESERVED_COLUMNS.includes(normalized)) {
+            extraColumns.push(header.trim());
+            extraIndices.push(idx);
+        }
+    });
+    // Parse data rows
+    const cells = [];
+    const unmatchedTxIds = [];
+    const groupsSet = new Set();
+    for (let i = 1; i < lines.length; i++) {
+        const line = lines[i].trim();
+        if (!line)
+            continue;
+        const values = parseCSVLine(line);
+        const txId = values[txIdIndex]?.trim();
+        if (!txId)
+            continue;
+        // Get custom group (default to 'default')
+        const customGroup = groupIndex !== -1
+            ? (values[groupIndex]?.trim() || 'default')
+            : 'default';
+        groupsSet.add(customGroup);
+        // Get size factor (default to 1)
+        let sizeFactor = 1;
+        if (sizeFactorIndex !== -1) {
+            const parsed = parseFloat(values[sizeFactorIndex]);
+            if (!isNaN(parsed) && parsed > 0) {
+                sizeFactor = parsed;
+            }
+        }
+        // Collect extra fields
+        const extraFields = {};
+        extraIndices.forEach((idx, i) => {
+            const value = values[idx]?.trim() || '';
+            // Try to parse as number
+            const numValue = parseFloat(value);
+            extraFields[extraColumns[i]] = isNaN(numValue) ? value : numValue;
+        });
+        // Resolve cell from lookup
+        const resolvedCell = cellLookup.get(txId);
+        if (resolvedCell) {
+            cells.push({
+                txId,
+                customGroup,
+                sizeFactor,
+                extraFields,
+                resolvedCell
+            });
+        }
+        else {
+            unmatchedTxIds.push(txId);
+        }
+    }
+    return {
+        cells,
+        unmatchedTxIds,
+        groups: Array.from(groupsSet).sort(),
+        extraColumns,
+        totalRows: lines.length - 1
+    };
+}
+/**
+ * Parse a single CSV line, handling quoted fields
+ */
+function parseCSVLine(line) {
+    const result = [];
+    let current = '';
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        const nextChar = line[i + 1];
+        if (inQuotes) {
+            if (char === '"' && nextChar === '"') {
+                // Escaped quote
+                current += '"';
+                i++;
+            }
+            else if (char === '"') {
+                // End of quoted field
+                inQuotes = false;
+            }
+            else {
+                current += char;
+            }
+        }
+        else {
+            if (char === '"') {
+                inQuotes = true;
+            }
+            else if (char === ',') {
+                result.push(current);
+                current = '';
+            }
+            else {
+                current += char;
+            }
+        }
+    }
+    result.push(current);
+    return result;
+}
+/**
+ * Build a cell lookup map from an array of cells
+ */
+export function buildCellLookup(cells) {
+    const lookup = new Map();
+    for (const cell of cells) {
+        if (cell.txId) {
+            lookup.set(cell.txId, cell);
+        }
+    }
+    return lookup;
+}

package/dist/map-v3/features/cells/custom/logic/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Custom Cells Logic - Barrel Export
+ */
+export { parseCustomCellsCsv, buildCellLookup } from './csv-parser';
+export { buildCustomCellTree, getGroupCounts } from './tree-adapter';

package/dist/map-v3/features/cells/custom/logic/index.js

@@ -0,0 +1,5 @@
+/**
+ * Custom Cells Logic - Barrel Export
+ */
+export { parseCustomCellsCsv, buildCellLookup } from './csv-parser';
+export { buildCustomCellTree, getGroupCounts } from './tree-adapter';

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

@@ -0,0 +1,24 @@
+/**
+ * Custom Cells - Tree Adapter
+ *
+ * Builds tree structure for TreeView component, grouped by customGroup
+ */
+import type { TreeNode } from '../../../../../core/TreeView/tree.model';
+import type { CustomCellSet } from '../types';
+/**
+ * Metadata for tree nodes
+ */
+export interface CustomCellTreeMetadata {
+    color: string;
+    count: number;
+    groupId: string;
+    setId: string;
+}
+/**
+ * Build tree nodes for a custom cell set, grouped by customGroup
+ */
+export declare function buildCustomCellTree(set: CustomCellSet): TreeNode<CustomCellTreeMetadata>[];
+/**
+ * Get cell counts per group
+ */
+export declare function getGroupCounts(set: CustomCellSet): Map<string, number>;

package/dist/map-v3/features/cells/custom/logic/tree-adapter.js

@@ -0,0 +1,67 @@
+/**
+ * Custom Cells - Tree Adapter
+ *
+ * Builds tree structure for TreeView component, grouped by customGroup
+ */
+/**
+ * Build tree nodes for a custom cell set, grouped by customGroup
+ */
+export function buildCustomCellTree(set) {
+    // Group cells by customGroup
+    const groupMap = new Map();
+    for (const cell of set.cells) {
+        if (!cell.resolvedCell)
+            continue; // Skip unresolved cells
+        if (!groupMap.has(cell.customGroup)) {
+            groupMap.set(cell.customGroup, []);
+        }
+        groupMap.get(cell.customGroup).push(cell);
+    }
+    // Build leaf nodes for each group
+    const groupNodes = [];
+    for (const [group, cells] of groupMap) {
+        const color = set.groupColors[group] || set.defaultColor;
+        const isVisible = set.visibleGroups.has(group);
+        groupNodes.push({
+            id: `${set.id}__${group}`,
+            label: `${group} (${cells.length})`,
+            metadata: {
+                color,
+                count: cells.length,
+                groupId: group,
+                setId: set.id
+            },
+            defaultChecked: isVisible
+        });
+    }
+    // Sort groups alphabetically
+    groupNodes.sort((a, b) => a.label.localeCompare(b.label));
+    // Wrap in root node
+    const rootNode = {
+        id: `root-${set.id}`,
+        label: `${set.name} (${set.cells.length})`,
+        children: groupNodes,
+        defaultExpanded: true,
+        defaultChecked: set.visible,
+        metadata: {
+            color: set.defaultColor,
+            count: set.cells.length,
+            groupId: '__root__',
+            setId: set.id
+        }
+    };
+    return [rootNode];
+}
+/**
+ * Get cell counts per group
+ */
+export function getGroupCounts(set) {
+    const counts = new Map();
+    for (const cell of set.cells) {
+        if (!cell.resolvedCell)
+            continue;
+        const current = counts.get(cell.customGroup) || 0;
+        counts.set(cell.customGroup, current + 1);
+    }
+    return counts;
+}

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

@@ -0,0 +1,78 @@
+/**
+ * Custom Cell Sets Store
+ *
+ * Manages multiple custom cell sets, each loaded from a CSV file.
+ * Resolves cell data from the parent CellDataStore.
+ */
+import type { CellDataStore } from '../../stores/cell.data.svelte';
+import type { CustomCellSet, CustomCellImportResult } from '../types';
+/**
+ * Store for managing custom cell sets
+ */
+export declare class CustomCellSetsStore {
+    /** All custom cell sets */
+    sets: CustomCellSet[];
+    /** Version counter for reactivity */
+    version: number;
+    /** Reference to parent cell data store */
+    private cellDataStore;
+    /** Storage key for persistence */
+    private storageKey;
+    constructor(cellDataStore: CellDataStore, namespace?: string);
+    /**
+     * Import a CSV file and create a new custom cell set
+     */
+    importFromCsv(csvContent: string, fileName: string): CustomCellImportResult;
+    /**
+     * Create a new set from import result
+     */
+    createSet(name: string, importResult: CustomCellImportResult): CustomCellSet;
+    /**
+     * Remove a set by ID
+     */
+    removeSet(setId: string): boolean;
+    /**
+     * Get a set by ID
+     */
+    getSet(setId: string): CustomCellSet | undefined;
+    /**
+     * Toggle set visibility
+     */
+    toggleSetVisibility(setId: string): void;
+    /**
+     * Toggle group visibility within a set
+     */
+    toggleGroupVisibility(setId: string, group: string): void;
+    /**
+     * Set group color
+     */
+    setGroupColor(setId: string, group: string, color: string): void;
+    /**
+     * Update set display settings
+     */
+    updateSetSettings(setId: string, settings: Partial<Pick<CustomCellSet, 'baseSize' | 'opacity' | 'defaultColor'>>): void;
+    /**
+     * Rename a set
+     */
+    renameSet(setId: string, newName: string): void;
+    /**
+     * Get visible cells for a set (filtered by visible groups)
+     */
+    getVisibleCells(setId: string): import("..").CustomCell[];
+    /**
+     * Re-resolve cells after main cell data changes
+     */
+    refreshResolutions(): void;
+    /**
+     * Load from localStorage
+     */
+    private load;
+    /**
+     * Save to localStorage
+     */
+    private save;
+}
+/**
+ * Factory function to create a custom cell sets store
+ */
+export declare function createCustomCellSetsStore(cellDataStore: CellDataStore, namespace?: string): CustomCellSetsStore;