@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/map-v3/features/repeaters/types.d.ts

@@ -0,0 +1,18 @@
+export interface Repeater {
+    repeaterId: string;
+    donorCellId: string;
+    donorCellName: string;
+    latitude: number;
+    longitude: number;
+    azimuth: number;
+    beamwidth: number;
+    tech: string;
+    fband: string;
+    type: 'REPEATER';
+    height: number;
+    factory_nbr: string;
+    provider: string;
+    featureGroup: string;
+    [key: string]: any;
+}
+export type RepeaterGroupingField = 'tech' | 'fband' | 'provider' | 'featureGroup' | 'none';

package/dist/map-v3/features/repeaters/types.js

@@ -0,0 +1 @@
+export {};

package/dist/map-v3/features/sites/components/SiteFilterControl.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { MapControl } from '../../../shared';
+	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import type { SiteDataStore } from '../stores/site.data.svelte';
+	import type { SiteRegistry } from '../stores/site.registry.svelte';
+	import type { SiteDisplayStore } from '../stores/site.display.svelte';
+	import { buildSiteTree } from '../logic/tree-adapter';
+
+	interface Props {
+		dataStore: SiteDataStore;
+		registry: SiteRegistry;
+		displayStore: SiteDisplayStore;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { dataStore, registry, displayStore, position = 'top-left' }: Props = $props();
+
+	// Create Tree Store
+	let treeStore = $derived.by(() => {
+		const _sites = dataStore.sites;
+
+		return untrack(() => {
+			const nodes = buildSiteTree(_sites);
+			return createTreeStore({
+				nodes,
+				namespace: `${registry.namespace}:site-tree`,
+				persistState: true,
+				defaultExpandAll: false
+			});
+		});
+	});
+
+	// Sync Tree Selection -> Site Registry Visibility
+	$effect(() => {
+		const unsubscribe = treeStore.subscribe((val) => {
+			// Iterate all leaf nodes to sync visibility
+			
+			// Collect all site IDs from the tree
+			const allSiteIds: string[] = [];
+			const visibleSiteIds: string[] = [];
+
+			val.state.nodes.forEach((nodeState) => {
+				// Check if it's a leaf node (Level 2 group)
+				if (nodeState.node.children && nodeState.node.children.length > 0) return; 
+				
+				// It's a leaf (Level 2 group)
+				const siteIds = nodeState.node.metadata?.siteIds || [];
+				allSiteIds.push(...siteIds);
+
+				if (val.state.checkedPaths.has(nodeState.path)) {
+					visibleSiteIds.push(...siteIds);
+				}
+			});
+
+			// Update registry
+			const hiddenIds = allSiteIds.filter(id => !visibleSiteIds.includes(id));
+			
+			// Optimization: Check if anything actually changed
+			let needsUpdate = false;
+			// Simple check: if counts match, assume mostly correct, but better to check content
+			// For now, just update. Registry handles diffing somewhat.
+			registry.setVisible(visibleSiteIds, true);
+			registry.setVisible(hiddenIds, false);
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	function handleColorChange(node: any, event: Event) {
+		const input = event.target as HTMLInputElement;
+		const color = input.value;
+		if (node.metadata?.level1 && node.metadata?.level2) {
+			registry.setGroupColor(node.metadata.level1, node.metadata.level2, color);
+		}
+	}
+
+	function getGroupColor(node: any): string {
+		if (node.metadata?.level1 && node.metadata?.level2) {
+			return registry.getColor(node.metadata.level1, node.metadata.level2, node.metadata.color);
+		}
+		return '#3388ff';
+	}
+</script>
+
+<MapControl {position} title="Sites" icon="broadcast-pin" controlWidth="300px">
+	<div class="p-2">
+		<!-- <div class="mb-2 text-muted small">
+			{dataStore.sites.length} Sites
+		</div> -->
+		<div class="border rounded bg-white" style="max-height: 400px; overflow-y: auto;">
+			<TreeView showControls={false} store={$treeStore}>
+				{#snippet children({ node, state })}
+					<!-- Color Picker (Only for leaves / Level 2) -->
+					{#if !node.children || node.children.length === 0}
+						<div 
+							class="d-flex align-items-center" 
+							role="group" 
+							onclick={(e) => e.stopPropagation()} 
+							onkeydown={(e) => e.stopPropagation()}
+						>
+							<input 
+								type="color" 
+								class="form-control form-control-color form-control-sm border-0 p-0" 
+								style="width: 16px; height: 16px; min-height: 0;"
+								value={getGroupColor(node)}
+								oninput={(e) => handleColorChange(node, e)}
+								title="Change color"
+							/>
+						</div>
+					{/if}
+				{/snippet}
+			</TreeView>
+		</div>
+	</div>
+</MapControl>

package/dist/map-v3/features/sites/components/SiteFilterControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SiteDataStore } from '../stores/site.data.svelte';
+import type { SiteRegistry } from '../stores/site.registry.svelte';
+import type { SiteDisplayStore } from '../stores/site.display.svelte';
+interface Props {
+    dataStore: SiteDataStore;
+    registry: SiteRegistry;
+    displayStore: SiteDisplayStore;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const SiteFilterControl: import("svelte").Component<Props, {}, "">;
+type SiteFilterControl = ReturnType<typeof SiteFilterControl>;
+export default SiteFilterControl;

package/dist/map-v3/features/sites/components/SiteSettingsPanel.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+	import type { SiteDisplayStore } from '../stores/site.display.svelte';
+
+	interface Props {
+		displayStore: SiteDisplayStore;
+	}
+
+	let { displayStore }: Props = $props();
+</script>
+
+<div class="card border-0 shadow-sm rounded-2">
+	<div class="card-body bg-light p-3">
+		<!-- Radius -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Radius</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.radius}px</span>
+			</div>
+			<div class="col-5">
+				<input
+					type="range"
+					class="form-range w-100"
+					min="2"
+					max="20"
+					step="1"
+					bind:value={displayStore.radius}
+				/>
+			</div>
+		</div>
+
+		<!-- Fill Color -->
+		<div class="row align-items-center g-2 mb-2">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Fill 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.color}
+						title="Fill Color"
+					/>
+					<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+						{displayStore.color}
+					</span>
+				</div>
+			</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">Opacity</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{Math.round(displayStore.opacity * 100)}%</span>
+			</div>
+			<div class="col-5">
+				<input
+					type="range"
+					class="form-range w-100"
+					min="0"
+					max="1"
+					step="0.1"
+					bind:value={displayStore.opacity}
+				/>
+			</div>
+		</div>
+
+		<!-- Stroke Color -->
+		<div class="row align-items-center g-2 mb-2">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Stroke</div>
+			<div class="col-8">
+				<div class="input-group input-group-sm">
+					<input
+						type="color"
+						class="form-control form-control-color"
+						bind:value={displayStore.strokeColor}
+						title="Stroke Color"
+					/>
+					<span class="input-group-text bg-white text-muted small flex-grow-1 font-monospace">
+						{displayStore.strokeColor}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<!-- Stroke Width -->
+		<div class="row align-items-center g-2 mb-3">
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Stroke Width</div>
+			<div class="col-3 text-end">
+				<span class="badge bg-white text-muted border">{displayStore.strokeWidth}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.strokeWidth}
+				/>
+			</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
+						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">
+				<!-- Label Fields -->
+				<div class="mb-2">
+					<div class="text-secondary fw-semibold small text-uppercase mb-1">Label Fields</div>
+					<div class="row g-1">
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels.primary}>
+								<option value="siteId">Site ID</option>
+								<option value="siteName">Name</option>
+								<option value="provider">Provider</option>
+								<option value="cellCount">Cell Count</option>
+							</select>
+						</div>
+						<div class="col-6">
+							<select class="form-select form-select-sm" bind:value={displayStore.labels.secondary}>
+								<option value="none">None</option>
+								<option value="siteId">Site ID</option>
+								<option value="siteName">Name</option>
+								<option value="provider">Provider</option>
+								<option value="cellCount">Cell Count</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<!-- Label Settings -->
+				<div class="mt-3">
+					<!-- 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="5"
+								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>
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/map-v3/features/sites/components/SiteSettingsPanel.svelte.d.ts

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

package/dist/map-v3/features/sites/layers/SiteLabelsLayer.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.svelte';
+	import type { SiteDataStore } from '../stores/site.data.svelte';
+	import type { SiteDisplayStore } from '../stores/site.display.svelte';
+	import type { SiteRegistry } from '../stores/site.registry.svelte';
+	import type { Site } from '../types';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: SiteDataStore;
+		displayStore: SiteDisplayStore;
+		registry: SiteRegistry;
+	}
+
+	let { dataStore, displayStore, registry }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let sourceId = 'site-labels-source';
+	let layerId = 'site-labels-layer';
+	let updateTimeout: any;
+
+	// Helper to get label text
+	function getLabelText(site: Site, config: { primary: string, secondary: string }): string {
+		const pVal = site[config.primary as keyof Site];
+		const sVal = config.secondary !== 'none' ? site[config.secondary as keyof Site] : null;
+		
+		let text = pVal != null ? String(pVal) : '';
+		if (sVal != null) {
+			text += ` | ${sVal}`;
+		}
+		return text;
+	}
+
+	// React to changes
+	$effect(() => {
+		// Read dependencies
+		const _sites = dataStore.sites;
+		const _show = displayStore.showLabels;
+		const _dist = displayStore.labelPixelDistance;
+		const _size = displayStore.labelFontSize;
+		const _lPrim = displayStore.labels.primary;
+		const _lSec = displayStore.labels.secondary;
+		const _color = displayStore.labelColor;
+		const _haloColor = displayStore.labelHaloColor;
+		const _haloWidth = displayStore.labelHaloWidth;
+		const _version = 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;
+
+		const sites = dataStore.sites;
+		const features: GeoJSON.Feature[] = [];
+		
+		// Convert pixel distance to ems (approx 1em = 16px or labelFontSize)
+		const distEm = displayStore.labelPixelDistance / displayStore.labelFontSize;
+
+		for (const site of sites) {
+			if (!registry.isVisible(site.siteId)) continue;
+			if (!bounds.contains([site.longitude, site.latitude])) continue;
+
+			const labelText = getLabelText(site, displayStore.labels);
+			if (!labelText) continue;
+
+			// For sites (circles), we usually place label on top or bottom
+			// Let's place it on top (offset Y negative)
+			const offsetX = 0;
+			const offsetY = -distEm;
+
+			features.push({
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [site.longitude, site.latitude]
+				},
+				properties: {
+					label: labelText,
+					offset: [offsetX, offsetY]
+				}
+			});
+		}
+
+		const geojson: GeoJSON.FeatureCollection = {
+			type: 'FeatureCollection',
+			features
+		};
+
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData(geojson);
+		} else {
+			map.addSource(sourceId, {
+				type: 'geojson',
+				data: geojson
+			});
+
+			map.addLayer({
+				id: layerId,
+				type: 'symbol',
+				source: sourceId,
+				layout: {
+					'text-field': ['get', 'label'],
+					'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+					'text-size': displayStore.labelFontSize,
+					'text-offset': ['get', 'offset'],
+					'text-anchor': 'center',
+					'text-justify': 'auto',
+					'text-allow-overlap': false,
+					'text-ignore-placement': false
+				},
+				paint: {
+					'text-color': displayStore.labelColor,
+					'text-halo-color': displayStore.labelHaloColor,
+					'text-halo-width': displayStore.labelHaloWidth
+				}
+			});
+		}
+	}
+</script>

package/dist/map-v3/features/sites/layers/SiteLabelsLayer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SiteDataStore } from '../stores/site.data.svelte';
+import type { SiteDisplayStore } from '../stores/site.display.svelte';
+import type { SiteRegistry } from '../stores/site.registry.svelte';
+interface Props {
+    dataStore: SiteDataStore;
+    displayStore: SiteDisplayStore;
+    registry: SiteRegistry;
+}
+declare const SiteLabelsLayer: import("svelte").Component<Props, {}, "">;
+type SiteLabelsLayer = ReturnType<typeof SiteLabelsLayer>;
+export default SiteLabelsLayer;