@smartnet360/svelte-components 0.0.85 → 0.0.86

package/dist/map-v3/features/cells/components/CellSettingsPanel.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import type { CellDisplayStore } from '../stores/cell.display.svelte';
+
+	interface Props {
+		displayStore: CellDisplayStore;
+	}
+
+	let { displayStore }: Props = $props();
+</script>
+
+<div class="card border-0 shadow-sm rounded-2">
+	<div class="card-body bg-light p-3">
+		<!-- Target Pixel Size (Radius) -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Pixel Size</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.targetPixelSize}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="cell-radius-slider"
+					type="range"
+					class="form-range w-100"
+					min="10"
+					max="200"
+					step="5"
+					bind:value={displayStore.targetPixelSize}
+				/>
+			</div>
+		</div>
+
+		<!-- Line Width -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Line Width</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.lineWidth}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="cell-line-width-slider"
+					type="range"
+					class="form-range w-100"
+					min="0.5"
+					max="5"
+					step="0.5"
+					bind:value={displayStore.lineWidth}
+				/>
+			</div>
+		</div>
+
+		<!-- Fill Opacity -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Fill Opacity</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{Math.round(displayStore.fillOpacity * 100)}%</span>
+			</div>
+			<div class="col-5">
+				<input
+					id="cell-opacity-slider"
+					type="range"
+					class="form-range w-100"
+					min="0"
+					max="1"
+					step="0.1"
+					bind:value={displayStore.fillOpacity}
+				/>
+			</div>
+		</div>
+
+		<div class="border-top my-3"></div>
+
+		<!-- Show Labels -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Show Labels</div>
+			<div class="col-3"></div>
+			<div class="col-5">
+				<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
+					<input
+						id="cell-labels-toggle"
+						type="checkbox"
+						class="form-check-input"
+						role="switch"
+						bind:checked={displayStore.showLabels}
+					/>
+				</div>
+			</div>
+		</div>
+
+		{#if displayStore.showLabels}
+			<div class="ps-3 border-start border-2 mb-3">
+				<!-- 2G Labels -->
+				<div class="mb-2">
+					<div class="text-secondary fw-semibold small text-uppercase mb-1">2G Labels</div>
+					<div class="row g-1">
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels2G.primary}>
+								<option value="cellName">Name</option>
+								<option value="cellID">Cell ID</option>
+								<option value="bcch">BCCH</option>
+								<option value="siteId">Site ID</option>
+							</select>
+						</div>
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels2G.secondary}>
+								<option value="none">None</option>
+								<option value="bcch">BCCH</option>
+								<option value="cellID">Cell ID</option>
+								<option value="siteId">Site ID</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<!-- 4G/5G Labels -->
+				<div class="mb-2">
+					<div class="text-secondary fw-semibold small text-uppercase mb-1">4G/5G Labels</div>
+					<div class="row g-1">
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels4G.primary}>
+								<option value="cellName">Name</option>
+								<option value="pci1">PCI</option>
+								<option value="dlEarfn">EARFCN</option>
+								<option value="cellID">Cell ID</option>
+							</select>
+						</div>
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels4G.secondary}>
+								<option value="none">None</option>
+								<option value="pci1">PCI</option>
+								<option value="dlEarfn">EARFCN</option>
+								<option value="cellID">Cell ID</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<!-- Label Distance -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-4 text-secondary small">Distance</div>
+					<div class="col-3 text-end">
+						<span class="badge bg-white text-muted border">{displayStore.labelPixelDistance}px</span>
+					</div>
+					<div class="col-5">
+						<input
+							type="range"
+							class="form-range w-100"
+							min="10"
+							max="100"
+							step="5"
+							bind:value={displayStore.labelPixelDistance}
+						/>
+					</div>
+				</div>
+
+				<!-- Font Size -->
+				<div class="row align-items-center g-2 mb-3">
+					<div class="col-4 text-secondary small">Font Size</div>
+					<div class="col-3 text-end">
+						<span class="badge bg-white text-muted border">{displayStore.labelFontSize}px</span>
+					</div>
+					<div class="col-5">
+						<input
+							type="range"
+							class="form-range w-100"
+							min="8"
+							max="24"
+							step="1"
+							bind:value={displayStore.labelFontSize}
+						/>
+					</div>
+				</div>
+
+				<!-- Label Colors -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-4 text-secondary small">Color</div>
+					<div class="col-8">
+						<div class="input-group input-group-sm">
+							<input
+								type="color"
+								class="form-control form-control-color"
+								bind:value={displayStore.labelColor}
+								title="Label Color"
+							/>
+							<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+								{displayStore.labelColor}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- Halo Settings -->
+				<div class="row align-items-center g-2 mb-2">
+					<div class="col-4 text-secondary small">Halo</div>
+					<div class="col-8">
+						<div class="input-group input-group-sm">
+							<input
+								type="color"
+								class="form-control form-control-color"
+								bind:value={displayStore.labelHaloColor}
+								title="Halo Color"
+							/>
+							<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+								{displayStore.labelHaloColor}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<div class="row align-items-center g-2 mb-3">
+					<div class="col-4 text-secondary small">Halo Width</div>
+					<div class="col-3 text-end">
+						<span class="badge bg-white text-muted border">{displayStore.labelHaloWidth}px</span>
+					</div>
+					<div class="col-5">
+						<input
+							type="range"
+							class="form-range w-100"
+							min="0"
+							max="5"
+							step="0.5"
+							bind:value={displayStore.labelHaloWidth}
+						/>
+					</div>
+				</div>
+
+				
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/map-v3/features/cells/components/CellSettingsPanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CellDisplayStore } from '../stores/cell.display.svelte';
+interface Props {
+    displayStore: CellDisplayStore;
+}
+declare const CellSettingsPanel: import("svelte").Component<Props, {}, "">;
+type CellSettingsPanel = ReturnType<typeof CellSettingsPanel>;
+export default CellSettingsPanel;

package/dist/map-v3/features/cells/constants.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Z-Index Layer Ordering by Technology-Band
+ *
+ * Controls which sectors appear on top when overlapping
+ * Higher frequency bands typically rendered on top
+ */
+import type { TechnologyBandKey } from './types';
+export declare const Z_INDEX_BY_BAND: Record<TechnologyBandKey, number>;
+/**
+ * Base Z-Index for Mapbox layer ordering
+ * Cells should render below sites but above base map features
+ */
+export declare const CELL_FILL_Z_INDEX = 100;
+export declare const CELL_LINE_Z_INDEX = 101;
+/**
+ * Default colors for cyclical palette
+ */
+export declare const DEFAULT_PALETTE: string[];

package/dist/map-v3/features/cells/constants.js

@@ -0,0 +1,37 @@
+/**
+ * Z-Index Layer Ordering by Technology-Band
+ *
+ * Controls which sectors appear on top when overlapping
+ * Higher frequency bands typically rendered on top
+ */
+export const Z_INDEX_BY_BAND = {
+    // 2G bands
+    '2G_900': 3,
+    '2G_1800': 7,
+    // 4G bands
+    '4G_700': 0,
+    '4G_800': 2,
+    '4G_900': 4,
+    '4G_1800': 8,
+    '4G_2100': 9,
+    '4G_2600': 11,
+    // 5G bands
+    '5G_700': 1,
+    '5G_2100': 10,
+    '5G_3500': 14
+};
+/**
+ * Base Z-Index for Mapbox layer ordering
+ * Cells should render below sites but above base map features
+ */
+export const CELL_FILL_Z_INDEX = 100;
+export const CELL_LINE_Z_INDEX = 101;
+/**
+ * Default colors for cyclical palette
+ */
+export const DEFAULT_PALETTE = [
+    '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+    '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe',
+    '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000',
+    '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'
+];

package/dist/map-v3/features/cells/layers/CellLabelsLayer.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.svelte';
+	import type { CellDataStore } from '../stores/cell.data.svelte';
+	import type { CellDisplayStore } from '../stores/cell.display.svelte';
+	import type { CellRegistry } from '../stores/cell.registry.svelte';
+	import { groupCells, getColorForGroup } from '../logic/grouping';
+	import type { Cell } from '../types';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: CellDataStore;
+		displayStore: CellDisplayStore;
+		registry: CellRegistry;
+	}
+
+	let { dataStore, displayStore, registry }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let sourceId = 'cell-labels-source';
+	let layerId = 'cell-labels-layer';
+	let updateTimeout: any;
+
+	// Helper to get label text
+	function getLabelText(cell: Cell, config: { primary: string, secondary: string }): string {
+		const pVal = cell[config.primary as keyof Cell];
+		const sVal = config.secondary !== 'none' ? cell[config.secondary as keyof Cell] : null;
+		
+		let text = pVal != null ? String(pVal) : '';
+		if (sVal != null) {
+			text += ` | ${sVal}`;
+		}
+		return text;
+	}
+
+	// Helper to round azimuth
+	function roundAzimuth(azimuth: number, tolerance: number): number {
+		return Math.round(azimuth / tolerance) * tolerance;
+	}
+
+	// React to changes
+	$effect(() => {
+		// Read dependencies
+		const _cells = dataStore.filteredCells;
+		const _show = displayStore.showLabels;
+		const _dist = displayStore.labelPixelDistance;
+		const _size = displayStore.labelFontSize;
+		const _tol = displayStore.labelAzimuthTolerance;
+		const _l2g = displayStore.labels2G;
+		const _l4g = displayStore.labels4G;
+		const _color = displayStore.labelColor;
+		const _haloColor = displayStore.labelHaloColor;
+		const _haloWidth = displayStore.labelHaloWidth;
+		const _registryVersion = registry.version;
+		
+		const map = mapStore.map;
+		if (map && map.getLayer(layerId)) {
+			map.setPaintProperty(layerId, 'text-color', displayStore.labelColor);
+			map.setPaintProperty(layerId, 'text-halo-color', displayStore.labelHaloColor);
+			map.setPaintProperty(layerId, 'text-halo-width', displayStore.labelHaloWidth);
+		}
+
+		updateLayer();
+	});
+
+	function updateLayer() {
+		const map = mapStore.map;
+		if (!map) return;
+
+		clearTimeout(updateTimeout);
+		updateTimeout = setTimeout(() => {
+			renderLabels(map);
+		}, 150);
+	}
+
+	function renderLabels(map: mapboxgl.Map) {
+		if (!displayStore.showLabels) {
+			if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'none');
+			return;
+		}
+
+		if (map.getLayer(layerId)) map.setLayoutProperty(layerId, 'visibility', 'visible');
+		
+		// Update text size if changed
+		if (map.getLayer(layerId)) {
+			map.setLayoutProperty(layerId, 'text-size', displayStore.labelFontSize);
+		}
+
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
+		// 1. Filter visible cells (Bounds + Registry Visibility)
+		const visibleCells: Cell[] = [];
+		
+		// Group cells using the same logic as CellsLayer to determine visibility
+		const cellGroups = groupCells(dataStore.filteredCells, displayStore.level1, displayStore.level2);
+		let groupIndex = 0;
+
+		for (const [groupId, cells] of cellGroups) {
+			const defaultColor = getColorForGroup(groupIndex++);
+			const style = registry.getStyle(groupId, defaultColor);
+
+			if (style.visible) {
+				for (const cell of cells) {
+					if (bounds.contains([cell.longitude, cell.latitude])) {
+						visibleCells.push(cell);
+					}
+				}
+			}
+		}
+
+		// 2. Group by Site + Azimuth
+		const groups = new Map<string, Cell[]>();
+		for (const cell of visibleCells) {
+			const az = roundAzimuth(cell.azimuth, displayStore.labelAzimuthTolerance);
+			const key = `${cell.siteId}_${az}`;
+			if (!groups.has(key)) groups.set(key, []);
+			groups.get(key)?.push(cell);
+		}
+
+		const features: GeoJSON.Feature[] = [];
+		const distEm = displayStore.labelPixelDistance / displayStore.labelFontSize;
+
+		// 3. Generate Features
+		for (const [key, cells] of groups) {
+			// Sort cells (e.g. by band/tech) to have consistent order
+			cells.sort((a, b) => {
+				const ta = a.tech + a.fband;
+				const tb = b.tech + b.fband;
+				return ta.localeCompare(tb);
+			});
+
+			// Calculate base offset for the group
+			const az = roundAzimuth(cells[0].azimuth, displayStore.labelAzimuthTolerance);
+			const azRad = (az * Math.PI) / 180;
+			
+			// Mapbox text-offset: [x, y] in ems. 
+			// x is right, y is down.
+			// 0 deg (N) -> x=0, y=-1
+			const baseX = Math.sin(azRad) * distEm;
+			const baseY = -Math.cos(azRad) * distEm;
+
+			// Center the stack vertically around the base point
+			const totalHeight = cells.length * 1.2; // 1.2 em line height
+			const startY = baseY - (totalHeight / 2) + 0.6; // +0.6 to center first line
+
+			cells.forEach((cell, index) => {
+				const is2G = cell.tech.includes('2G');
+				const config = is2G ? displayStore.labels2G : displayStore.labels4G;
+				const text = getLabelText(cell, config);
+
+				if (!text) return;
+
+				const stackY = startY + (index * 1.2);
+
+				features.push({
+					type: 'Feature',
+					geometry: {
+						type: 'Point',
+						coordinates: [cell.longitude, cell.latitude]
+					},
+					properties: {
+						text,
+						offset: [baseX, stackY], // Array property
+						color: '#333333'
+					}
+				});
+			});
+		}
+
+		// 4. Update Source
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData({
+				type: 'FeatureCollection',
+				features: features as any
+			});
+		}
+	}
+
+	// Initial Setup
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+
+		const addLayers = () => {
+			if (!map.getSource(sourceId)) {
+				map.addSource(sourceId, {
+					type: 'geojson',
+					data: { type: 'FeatureCollection', features: [] }
+				});
+			}
+
+			if (!map.getLayer(layerId)) {
+				map.addLayer({
+					id: layerId,
+					type: 'symbol',
+					source: sourceId,
+					layout: {
+						'text-field': ['get', 'text'],
+						'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+						'text-size': displayStore.labelFontSize,
+						'text-offset': ['get', 'offset'],
+						'text-allow-overlap': true,
+						'text-ignore-placement': true,
+						'text-anchor': 'center'
+					},
+					paint: {
+						'text-color': displayStore.labelColor,
+						'text-halo-color': displayStore.labelHaloColor,
+						'text-halo-width': displayStore.labelHaloWidth
+					}
+				});
+			}
+		};
+
+		addLayers();
+		map.on('style.load', addLayers);
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
+
+		return () => {
+			map.off('style.load', addLayers);
+			map.off('moveend', updateLayer);
+			map.off('zoomend', updateLayer);
+			if (map.getLayer(layerId)) map.removeLayer(layerId);
+			if (map.getSource(sourceId)) map.removeSource(sourceId);
+		};
+	});
+</script>

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

@@ -0,0 +1,11 @@
+import type { CellDataStore } from '../stores/cell.data.svelte';
+import type { CellDisplayStore } from '../stores/cell.display.svelte';
+import type { CellRegistry } from '../stores/cell.registry.svelte';
+interface Props {
+    dataStore: CellDataStore;
+    displayStore: CellDisplayStore;
+    registry: CellRegistry;
+}
+declare const CellLabelsLayer: import("svelte").Component<Props, {}, "">;
+type CellLabelsLayer = ReturnType<typeof CellLabelsLayer>;
+export default CellLabelsLayer;