@smartnet360/svelte-components 0.0.54 → 0.0.55

package/dist/map/layers/CellsLayer.svelte

@@ -1,242 +0,0 @@
-<script lang="ts">
-	/**
-	 * CellsLayer - Visualizes cellular sectors/cells as polygons on the map
-	 *
-	 * Consumes:
-	 * - Map instance from MapboxProvider
-	 * - Cells and sites data from CellDataProvider
-	 *
-	 * Features:
-	 * - Displays cell coverage as sector polygons
-	 * - Supports selection and hover states
-	 * - Click to select a cell
-	 */
-	import { onMount, onDestroy } from 'svelte';
-	import type mapboxgl from 'mapbox-gl';
-	import { useMapbox } from '../hooks/useMapbox';
-	import { useCellData } from '../hooks/useCellData';
-	import { cellsToGeoJSON } from '../utils/geojson';
-	import { LayerBase } from './LayerBase';
-	import type { Cell, Site } from '../types';
-
-	interface Props {
-		/** Namespace for layer IDs (default: 'cellular') */
-		namespace?: string;
-		/** Enable click to select cells (default: true) */
-		clickable?: boolean;
-		/** Default cell radius in meters (default: 500) */
-		defaultRadius?: number;
-		/** Cell fill color (default: '#3b82f6') */
-		fillColor?: string;
-		/** Cell fill opacity (default: 0.3) */
-		fillOpacity?: number;
-		/** Selected cell fill color (default: '#ef4444') */
-		selectedFillColor?: string;
-		/** Cell outline color (default: '#1e40af') */
-		outlineColor?: string;
-		/** Cell outline width (default: 2) */
-		outlineWidth?: number;
-	}
-
-	let {
-		namespace = 'cellular',
-		clickable = true,
-		defaultRadius = 500,
-		fillColor = '#3b82f6',
-		fillOpacity = 0.3,
-		selectedFillColor = '#ef4444',
-		outlineColor = '#1e40af',
-		outlineWidth = 2
-	}: Props = $props();
-
-	const mapStore = useMapbox();
-	const cellDataContext = useCellData();
-
-	let map: mapboxgl.Map | null = null;
-	let layerManager: LayerBase | null = null;
-	let unsubscribers: (() => void)[] = [];
-
-	onMount(() => {
-		// Subscribe to map store
-		const mapUnsub = mapStore.subscribe((m) => {
-			if (!m) return;
-			map = m;
-			initializeLayer();
-		});
-		unsubscribers.push(mapUnsub);
-
-		// Subscribe to cells data
-		const cellsUnsub = cellDataContext.cells.subscribe(() => {
-			if (map && layerManager) {
-				updateLayerData();
-			}
-		});
-		unsubscribers.push(cellsUnsub);
-
-		// Subscribe to sites data (cells need site locations)
-		const sitesUnsub = cellDataContext.sites.subscribe(() => {
-			if (map && layerManager) {
-				updateLayerData();
-			}
-		});
-		unsubscribers.push(sitesUnsub);
-
-		// Subscribe to selection state
-		const selectionUnsub = cellDataContext.selectedCellId.subscribe(() => {
-			if (map) {
-				updateLayerStyle();
-			}
-		});
-		unsubscribers.push(selectionUnsub);
-	});
-
-	onDestroy(() => {
-		cleanup();
-		unsubscribers.forEach((unsub) => unsub());
-	});
-
-	function initializeLayer(): void {
-		if (!map) return;
-
-		layerManager = new LayerBase(map, {
-			namespace,
-			layerName: 'cells',
-			sourceName: 'cells'
-		});
-
-		// Add empty GeoJSON source
-		layerManager['addGeoJSONSource']({
-			type: 'FeatureCollection',
-			features: []
-		});
-
-		// Add fill layer
-		layerManager['addLayer']({
-			id: layerManager.getLayerId(),
-			type: 'fill',
-			source: layerManager.getSourceId(),
-			paint: {
-				'fill-color': [
-					'case',
-					['boolean', ['feature-state', 'selected'], false],
-					selectedFillColor,
-					fillColor
-				],
-				'fill-opacity': fillOpacity
-			}
-		});
-
-		// Add outline layer
-		layerManager['addLayer']({
-			id: `${layerManager.getLayerId()}-outline`,
-			type: 'line',
-			source: layerManager.getSourceId(),
-			paint: {
-				'line-color': outlineColor,
-				'line-width': outlineWidth
-			}
-		});
-
-		// Add click handler
-		if (clickable) {
-			map.on('click', layerManager.getLayerId(), handleClick);
-			map.on('mouseenter', layerManager.getLayerId(), handleMouseEnter);
-			map.on('mouseleave', layerManager.getLayerId(), handleMouseLeave);
-		}
-
-		// Initial data load
-		updateLayerData();
-	}
-
-	function updateLayerData(): void {
-		if (!layerManager) return;
-
-		let currentCells: Cell[] = [];
-		let currentSites: Site[] = [];
-
-		cellDataContext.cells.subscribe((c) => {
-			currentCells = c;
-		})();
-		cellDataContext.sites.subscribe((s) => {
-			currentSites = s;
-		})();
-
-		const geojson = cellsToGeoJSON(currentCells, currentSites, defaultRadius);
-		layerManager['updateSource'](geojson);
-		updateLayerStyle();
-	}
-
-	function updateLayerStyle(): void {
-		if (!map || !layerManager) return;
-
-		let currentSelectedId: string | null = null;
-		cellDataContext.selectedCellId.subscribe((id) => {
-			currentSelectedId = id;
-		})();
-
-		// Update feature states
-		let currentCells: Cell[] = [];
-		cellDataContext.cells.subscribe((c) => {
-			currentCells = c;
-		})();
-
-		currentCells.forEach((cell) => {
-			if (map) {
-				map.setFeatureState(
-					{
-						source: layerManager!.getSourceId(),
-						id: cell.id
-					},
-					{
-						selected: cell.id === currentSelectedId
-					}
-				);
-			}
-		});
-	}
-
-	function handleClick(e: mapboxgl.MapLayerMouseEvent): void {
-		if (!e.features || e.features.length === 0) return;
-		const feature = e.features[0];
-		const cellId = feature.properties?.id;
-		const siteId = feature.properties?.siteId;
-		if (cellId) {
-			cellDataContext.selectedCellId.set(cellId);
-			if (siteId) {
-				cellDataContext.selectedSiteId.set(siteId);
-			}
-		}
-	}
-
-	function handleMouseEnter(e: mapboxgl.MapLayerMouseEvent): void {
-		if (!map) return;
-		map.getCanvas().style.cursor = 'pointer';
-		if (!e.features || e.features.length === 0) return;
-		const feature = e.features[0];
-		const cellId = feature.properties?.id;
-		if (cellId) {
-			cellDataContext.hoveredCellId.set(cellId);
-		}
-	}
-
-	function handleMouseLeave(): void {
-		if (!map) return;
-		map.getCanvas().style.cursor = '';
-		cellDataContext.hoveredCellId.set(null);
-	}
-
-	function cleanup(): void {
-		if (map && layerManager) {
-			if (clickable) {
-				map.off('click', layerManager.getLayerId(), handleClick);
-				map.off('mouseenter', layerManager.getLayerId(), handleMouseEnter);
-				map.off('mouseleave', layerManager.getLayerId(), handleMouseLeave);
-			}
-			// Remove outline layer as well
-			if (map.getLayer(`${layerManager.getLayerId()}-outline`)) {
-				map.removeLayer(`${layerManager.getLayerId()}-outline`);
-			}
-			layerManager.cleanup();
-		}
-	}
-</script>

package/dist/map/layers/CellsLayer.svelte.d.ts

@@ -1,21 +0,0 @@
-interface Props {
-    /** Namespace for layer IDs (default: 'cellular') */
-    namespace?: string;
-    /** Enable click to select cells (default: true) */
-    clickable?: boolean;
-    /** Default cell radius in meters (default: 500) */
-    defaultRadius?: number;
-    /** Cell fill color (default: '#3b82f6') */
-    fillColor?: string;
-    /** Cell fill opacity (default: 0.3) */
-    fillOpacity?: number;
-    /** Selected cell fill color (default: '#ef4444') */
-    selectedFillColor?: string;
-    /** Cell outline color (default: '#1e40af') */
-    outlineColor?: string;
-    /** Cell outline width (default: 2) */
-    outlineWidth?: number;
-}
-declare const CellsLayer: import("svelte").Component<Props, {}, "">;
-type CellsLayer = ReturnType<typeof CellsLayer>;
-export default CellsLayer;

package/dist/map/layers/CoverageLayer.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	/**
-	 * CoverageLayer - Optional aggregated coverage visualization
-	 *
-	 * This is a placeholder for future coverage/heatmap features
-	 * Can be extended to show:
-	 * - Signal strength heatmaps
-	 * - Coverage overlays
-	 * - Interference zones
-	 */
-	import { onMount, onDestroy } from 'svelte';
-	import { useMapbox } from '../hooks/useMapbox';
-	import { useCellData } from '../hooks/useCellData';
-
-	interface Props {
-		/** Namespace for layer IDs (default: 'cellular') */
-		namespace?: string;
-		/** Coverage visualization type */
-		type?: 'heatmap' | 'overlay' | 'none';
-	}
-
-	let { namespace = 'cellular', type = 'none' }: Props = $props();
-
-	const mapStore = useMapbox();
-	const cellDataContext = useCellData();
-
-	onMount(() => {
-		// Placeholder for future implementation
-		console.log('CoverageLayer mounted with type:', type);
-	});
-
-	onDestroy(() => {
-		// Cleanup logic here
-	});
-</script>
-
-<!-- Placeholder component - no visual output yet -->

package/dist/map/layers/CoverageLayer.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    /** Namespace for layer IDs (default: 'cellular') */
-    namespace?: string;
-    /** Coverage visualization type */
-    type?: 'heatmap' | 'overlay' | 'none';
-}
-declare const CoverageLayer: import("svelte").Component<Props, {}, "">;
-type CoverageLayer = ReturnType<typeof CoverageLayer>;
-export default CoverageLayer;

package/dist/map/layers/LayerBase.d.ts

@@ -1,42 +0,0 @@
-/**
- * Shared utilities for Mapbox layer components
- */
-export interface LayerConfig {
-    namespace: string;
-    layerName: string;
-    sourceName: string;
-}
-/**
- * Base class for managing Mapbox layers with consistent patterns
- */
-export declare class LayerBase {
-    protected map: mapboxgl.Map;
-    protected config: LayerConfig;
-    protected layerId: string;
-    protected sourceId: string;
-    constructor(map: mapboxgl.Map, config: LayerConfig);
-    /**
-     * Adds a GeoJSON source to the map
-     */
-    protected addGeoJSONSource(data: GeoJSON.FeatureCollection | GeoJSON.Feature): void;
-    /**
-     * Adds a layer to the map
-     */
-    protected addLayer(layer: mapboxgl.AnyLayer, beforeId?: string): void;
-    /**
-     * Updates the GeoJSON source data
-     */
-    protected updateSource(data: GeoJSON.FeatureCollection | GeoJSON.Feature): void;
-    /**
-     * Removes the layer and source from the map
-     */
-    cleanup(): void;
-    /**
-     * Gets the layer ID
-     */
-    getLayerId(): string;
-    /**
-     * Gets the source ID
-     */
-    getSourceId(): string;
-}

package/dist/map/layers/LayerBase.js

@@ -1,58 +0,0 @@
-/**
- * Shared utilities for Mapbox layer components
- */
-import { addSourceIfMissing, addLayerIfMissing, removeLayerAndSource, generateLayerId, generateSourceId, updateGeoJSONSource } from '../utils/mapboxHelpers';
-/**
- * Base class for managing Mapbox layers with consistent patterns
- */
-export class LayerBase {
-    map;
-    config;
-    layerId;
-    sourceId;
-    constructor(map, config) {
-        this.map = map;
-        this.config = config;
-        this.layerId = generateLayerId(config.namespace, config.layerName);
-        this.sourceId = generateSourceId(config.namespace, config.sourceName);
-    }
-    /**
-     * Adds a GeoJSON source to the map
-     */
-    addGeoJSONSource(data) {
-        addSourceIfMissing(this.map, this.sourceId, {
-            type: 'geojson',
-            data
-        });
-    }
-    /**
-     * Adds a layer to the map
-     */
-    addLayer(layer, beforeId) {
-        addLayerIfMissing(this.map, layer, beforeId);
-    }
-    /**
-     * Updates the GeoJSON source data
-     */
-    updateSource(data) {
-        updateGeoJSONSource(this.map, this.sourceId, data);
-    }
-    /**
-     * Removes the layer and source from the map
-     */
-    cleanup() {
-        removeLayerAndSource(this.map, this.layerId, this.sourceId);
-    }
-    /**
-     * Gets the layer ID
-     */
-    getLayerId() {
-        return this.layerId;
-    }
-    /**
-     * Gets the source ID
-     */
-    getSourceId() {
-        return this.sourceId;
-    }
-}

package/dist/map/layers/SitesLayer.svelte

@@ -1,282 +0,0 @@
-<script lang="ts">
-	/**
-	 * SitesLayer - Visualizes cellular sites as points on the map
-	 *
-	 * Consumes:
-	 * - Map instance from MapboxProvider
-	 * - Sites data from CellDataProvider
-	 *
-	 * Features:
-	 * - Displays sites as circles
-	 * - Supports selection and hover states
-	 * - Click to select a site
-	 */
-	import { onMount, onDestroy } from 'svelte';
-	import mapboxgl from 'mapbox-gl';
-	import { useMapbox } from '../hooks/useMapbox';
-	import { useCellData } from '../hooks/useCellData';
-	import { sitesToGeoJSON } from '../utils/geojson';
-	import { LayerBase } from './LayerBase';
-	import type { Site } from '../types';
-
-	interface Props {
-		/** Namespace for layer IDs (default: 'cellular') */
-		namespace?: string;
-		/** Enable click to select sites (default: true) */
-		clickable?: boolean;
-		/** Show popup on click (default: true) */
-		showPopup?: boolean;
-		/** Site circle radius (default: 8) */
-		circleRadius?: number;
-		/** Site circle color (default: '#3b82f6') */
-		circleColor?: string;
-		/** Selected site color (default: '#ef4444') */
-		selectedColor?: string;
-		/** Hovered site color (default: '#8b5cf6') */
-		hoverColor?: string;
-	}
-
-	let {
-		namespace = 'cellular',
-		clickable = true,
-		showPopup = true,
-		circleRadius = 8,
-		circleColor = '#3b82f6',
-		selectedColor = '#ef4444',
-		hoverColor = '#8b5cf6'
-	}: Props = $props();
-
-	const mapStore = useMapbox();
-	const cellDataContext = useCellData();
-
-	let map: mapboxgl.Map | null = null;
-	let layerManager: LayerBase | null = null;
-	let popup: mapboxgl.Popup | null = null;
-	let unsubscribers: (() => void)[] = [];
-
-	onMount(() => {
-		// Subscribe to map store
-		const mapUnsub = mapStore.subscribe((m) => {
-			if (!m) return;
-			map = m;
-			initializeLayer();
-		});
-		unsubscribers.push(mapUnsub);
-
-		// Subscribe to sites data
-		const sitesUnsub = cellDataContext.sites.subscribe((sites) => {
-			if (map && layerManager) {
-				updateLayerData(sites);
-			}
-		});
-		unsubscribers.push(sitesUnsub);
-
-		// Subscribe to selection state
-		const selectionUnsub = cellDataContext.selectedSiteId.subscribe(() => {
-			if (map) {
-				updateLayerStyle();
-			}
-		});
-		unsubscribers.push(selectionUnsub);
-
-		// Subscribe to hover state
-		const hoverUnsub = cellDataContext.hoveredSiteId.subscribe(() => {
-			if (map) {
-				updateLayerStyle();
-			}
-		});
-		unsubscribers.push(hoverUnsub);
-	});
-
-	onDestroy(() => {
-		cleanup();
-		unsubscribers.forEach((unsub) => unsub());
-	});
-
-	function initializeLayer(): void {
-		if (!map) return;
-
-		layerManager = new LayerBase(map, {
-			namespace,
-			layerName: 'sites',
-			sourceName: 'sites'
-		});
-
-		// Add empty GeoJSON source
-		layerManager['addGeoJSONSource']({
-			type: 'FeatureCollection',
-			features: []
-		});
-
-		// Add circle layer
-		layerManager['addLayer']({
-			id: layerManager.getLayerId(),
-			type: 'circle',
-			source: layerManager.getSourceId(),
-			paint: {
-				'circle-radius': circleRadius,
-				'circle-color': [
-					'case',
-					['boolean', ['feature-state', 'selected'], false],
-					selectedColor,
-					['boolean', ['feature-state', 'hovered'], false],
-					hoverColor,
-					circleColor
-				],
-				'circle-stroke-width': 2,
-				'circle-stroke-color': '#ffffff'
-			}
-		});
-
-		// Add click handler
-		if (clickable) {
-			map.on('click', layerManager.getLayerId(), handleClick);
-			map.on('mouseenter', layerManager.getLayerId(), handleMouseEnter);
-			map.on('mouseleave', layerManager.getLayerId(), handleMouseLeave);
-		}
-
-		// Initial data load
-		const sites = cellDataContext.sites;
-		let currentSites: Site[] = [];
-		sites.subscribe((s) => {
-			currentSites = s;
-		})();
-		updateLayerData(currentSites);
-	}
-
-	function updateLayerData(sites: Site[]): void {
-		if (!layerManager) return;
-		const geojson = sitesToGeoJSON(sites);
-		layerManager['updateSource'](geojson);
-		updateLayerStyle();
-	}
-
-	function updateLayerStyle(): void {
-		if (!map || !layerManager) return;
-
-		const selectedId = cellDataContext.selectedSiteId;
-		const hoveredId = cellDataContext.hoveredSiteId;
-
-		let currentSelectedId: string | null = null;
-		let currentHoveredId: string | null = null;
-
-		selectedId.subscribe((id) => {
-			currentSelectedId = id;
-		})();
-		hoveredId.subscribe((id) => {
-			currentHoveredId = id;
-		})();
-
-		// Update feature states
-		const sites = cellDataContext.sites;
-		let currentSites: Site[] = [];
-		sites.subscribe((s) => {
-			currentSites = s;
-		})();
-
-		currentSites.forEach((site) => {
-			if (map) {
-				map.setFeatureState(
-					{
-						source: layerManager!.getSourceId(),
-						id: site.id
-					},
-					{
-						selected: site.id === currentSelectedId,
-						hovered: site.id === currentHoveredId
-					}
-				);
-			}
-		});
-	}
-
-	function handleClick(e: mapboxgl.MapLayerMouseEvent): void {
-		if (!e.features || e.features.length === 0) return;
-		const feature = e.features[0];
-		const siteId = feature.properties?.id;
-		if (siteId) {
-			cellDataContext.selectedSiteId.set(siteId);
-			cellDataContext.selectedCellId.set(null);
-
-			// Show popup if enabled
-			if (showPopup && map && e.lngLat) {
-				createSitePopup(feature.properties, e.lngLat);
-			}
-		}
-	}
-
-	function createSitePopup(siteProps: any, lngLat: mapboxgl.LngLat): void {
-		if (!map) return;
-
-		// Remove existing popup
-		if (popup) {
-			popup.remove();
-		}
-
-		// Build popup HTML
-		const fbands = siteProps.fbands ? JSON.parse(siteProps.fbands) : [];
-		const fbandsHtml = fbands.length > 0 
-			? `<div><strong>Bands:</strong> ${fbands.join(', ')} MHz</div>`
-			: '';
-
-		const html = `
-			<div style="font-family: system-ui, -apple-system, sans-serif; font-size: 13px;">
-				<h6 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">${siteProps.name}</h6>
-				<div style="color: #666; line-height: 1.6;">
-					<div><strong>ID:</strong> ${siteProps.id}</div>
-					<div><strong>Technology:</strong> <span class="badge bg-primary">${siteProps.technology}</span></div>
-					${fbandsHtml}
-					<div><strong>Provider:</strong> ${siteProps.provider}</div>
-					<div><strong>Group:</strong> ${siteProps.featureGroup}</div>
-					<div><strong>Cells:</strong> ${siteProps.cellNames ? JSON.parse(siteProps.cellNames).length : 0}</div>
-					<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 11px;">
-						<strong>Coordinates:</strong><br/>
-						${siteProps.latitude.toFixed(6)}, ${siteProps.longitude.toFixed(6)}
-					</div>
-				</div>
-			</div>
-		`;
-
-		// Create and add popup
-		popup = new mapboxgl.Popup({
-			closeButton: true,
-			closeOnClick: false,
-			maxWidth: '300px'
-		})
-			.setLngLat(lngLat)
-			.setHTML(html)
-			.addTo(map);
-	}
-
-	function handleMouseEnter(e: mapboxgl.MapLayerMouseEvent): void {
-		if (!map) return;
-		map.getCanvas().style.cursor = 'pointer';
-		if (!e.features || e.features.length === 0) return;
-		const feature = e.features[0];
-		const siteId = feature.properties?.id;
-		if (siteId) {
-			cellDataContext.hoveredSiteId.set(siteId);
-		}
-	}
-
-	function handleMouseLeave(): void {
-		if (!map) return;
-		map.getCanvas().style.cursor = '';
-		cellDataContext.hoveredSiteId.set(null);
-	}
-
-	function cleanup(): void {
-		if (popup) {
-			popup.remove();
-			popup = null;
-		}
-		if (map && layerManager) {
-			if (clickable) {
-				map.off('click', layerManager.getLayerId(), handleClick);
-				map.off('mouseenter', layerManager.getLayerId(), handleMouseEnter);
-				map.off('mouseleave', layerManager.getLayerId(), handleMouseLeave);
-			}
-			layerManager.cleanup();
-		}
-	}
-</script>