@smartnet360/svelte-components 0.0.87 → 0.0.88

package/dist/map-v3/core/components/MapStoreBridge.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { MapStore } from '../stores/map.store.svelte';
+	import type { Map as MapboxMap } from 'mapbox-gl';
+
+	interface Props {
+		onMapChange?: (map: MapboxMap | null) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let { onMapChange, children }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	let ready = $state(false);
+
+	$effect(() => {
+		const map = mapStore.map;
+		onMapChange?.(map);
+		ready = map !== null;
+	});
+</script>
+
+{#if ready && children}
+	{@render children()}
+{/if}

package/dist/map-v3/core/components/MapStoreBridge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Map as MapboxMap } from 'mapbox-gl';
+interface Props {
+    onMapChange?: (map: MapboxMap | null) => void;
+    children?: import('svelte').Snippet;
+}
+declare const MapStoreBridge: import("svelte").Component<Props, {}, "">;
+type MapStoreBridge = ReturnType<typeof MapStoreBridge>;
+export default MapStoreBridge;

package/dist/map-v3/core/index.d.ts

@@ -2,5 +2,6 @@ export { MapStore, createMapStore } from './stores/map.store.svelte';
 export type { ViewportStore, ViewportState } from './stores/viewport.store.svelte';
 export { createViewportStore } from './stores/viewport.store.svelte';
 export { default as Map } from './components/Map.svelte';
+export { default as MapStoreBridge } from './components/MapStoreBridge.svelte';
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 export { default as FeatureSettingsControl } from './controls/FeatureSettingsControl.svelte';

package/dist/map-v3/core/index.js

@@ -1,5 +1,6 @@
 export { MapStore, createMapStore } from './stores/map.store.svelte';
 export { createViewportStore } from './stores/viewport.store.svelte';
 export { default as Map } from './components/Map.svelte';
+export { default as MapStoreBridge } from './components/MapStoreBridge.svelte';
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 export { default as FeatureSettingsControl } from './controls/FeatureSettingsControl.svelte';

package/dist/map-v3/demo/DemoMap.svelte

@@ -19,6 +19,7 @@
 	import SiteLabelsLayer from '../features/sites/layers/SiteLabelsLayer.svelte';
 	import SiteFilterControl from '../features/sites/components/SiteFilterControl.svelte';
 	import { createSiteRegistry } from '../features/sites/stores/site.registry.svelte';
+	import FeatureSelectionControl from '../features/selection/components/FeatureSelectionControl.svelte';
 	import { demoCells } from './demo-cells';
 	import { demoRepeaters } from './demo-repeaters';
 
@@ -93,6 +94,15 @@
 		<CellLabelsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
 		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
 		<RepeaterLabelsLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
+
+		<FeatureSelectionControl
+			position="bottom-left"
+			cellDataStore={cellData}
+			cellDisplayStore={cellDisplay}
+			title="Feature Selection"
+			actionButtonLabel="Export Selected"
+			onAction={(ids) => console.log('Selected features:', ids)}
+		/>
 	</Map>
 </div>
 

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

@@ -14,17 +14,25 @@
 		registry: CellRegistry;
 		displayStore: CellDisplayStore;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		level1Options?: CellGroupingField[];
+		level2Options?: CellGroupingField[];
 	}
 
-	let { dataStore, registry, displayStore, position = 'top-left' }: Props = $props();
+	let { 
+		dataStore, 
+		registry, 
+		displayStore, 
+		position = 'top-left',
+		level1Options = ['tech', 'status', 'siteId'],
+		level2Options = ['fband', 'frq', 'status', 'none']
+	}: Props = $props();
 
 	// Local State for Grouping
-	// let level1 = $state<CellGroupingField>('tech');
-	// let level2 = $state<CellGroupingField>('fband');
 	let includePlanned = $state(false);
 
-	const level1Options: CellGroupingField[] = ['tech', 'status', 'siteId'];
-	const level2Options: CellGroupingField[] = ['fband', 'frq', 'status', 'none'];
+	function toggleLabels() {
+		displayStore.showLabels = !displayStore.showLabels;
+	}
 
 	// Sync includePlanned with dataStore
 	$effect(() => {
@@ -106,7 +114,17 @@
 	}
 </script>
 
-<MapControl {position} title="Layers" icon="radioactive" controlWidth="320px">
+<MapControl {position} title="Cells" icon="grid" controlWidth="320px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-secondary border-0 p-1 px-2"
+			title={displayStore.showLabels ? 'Hide Labels' : 'Show Labels'}
+			aria-label={displayStore.showLabels ? 'Hide Labels' : 'Show Labels'}
+			onclick={toggleLabels}
+		>
+			<i class="bi bi-tag{displayStore.showLabels ? '-fill' : ''}"></i>
+		</button>
+	{/snippet}
 	<div class="cell-filter-control">
 		<!-- Status Filter Checkbox -->
 		<div class="mb-3 px-1">

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

@@ -1,11 +1,14 @@
 import type { CellDataStore } from '../stores/cell.data.svelte';
 import type { CellRegistry } from '../stores/cell.registry.svelte';
 import type { CellDisplayStore } from '../stores/cell.display.svelte';
+import type { CellGroupingField } from '../types';
 interface Props {
     dataStore: CellDataStore;
     registry: CellRegistry;
     displayStore: CellDisplayStore;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    level1Options?: CellGroupingField[];
+    level2Options?: CellGroupingField[];
 }
 declare const CellFilterControl: import("svelte").Component<Props, {}, "">;
 type CellFilterControl = ReturnType<typeof CellFilterControl>;

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

@@ -0,0 +1,14 @@
+/**
+ * Default Status Styles
+ *
+ * Visual styling for cell sector borders based on status
+ */
+import type { CellStatus } from '../types';
+export interface CellStatusStyle {
+    lineType: 'solid' | 'dashed' | 'dotted';
+    lineWidth: number;
+    lineColor: string;
+    opacity: number;
+    dashArray: number[];
+}
+export declare const DEFAULT_STATUS_STYLES: Record<CellStatus, CellStatusStyle>;

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

@@ -0,0 +1,49 @@
+/**
+ * Default Status Styles
+ *
+ * Visual styling for cell sector borders based on status
+ */
+export const DEFAULT_STATUS_STYLES = {
+    On_Air: {
+        lineType: 'solid',
+        lineWidth: 2,
+        lineColor: '#000000',
+        opacity: 1.0,
+        dashArray: []
+    },
+    On_Air_UNDER_CONSTRUCTION: {
+        lineType: 'solid',
+        lineWidth: 2,
+        lineColor: '#FFA500',
+        opacity: 0.8,
+        dashArray: []
+    },
+    On_Air_Locked: {
+        lineType: 'solid',
+        lineWidth: 2,
+        lineColor: '#FF0000',
+        opacity: 0.9,
+        dashArray: []
+    },
+    RF_Plan_Ready: {
+        lineType: 'dashed',
+        lineWidth: 2,
+        lineColor: '#666666',
+        opacity: 0.6,
+        dashArray: [5, 5]
+    },
+    'Re-Planned_RF_Plan_Ready': {
+        lineType: 'dashed',
+        lineWidth: 2,
+        lineColor: '#888888',
+        opacity: 0.5,
+        dashArray: [5, 5]
+    },
+    Tavlati_RF_Plan_Ready: {
+        lineType: 'dashed',
+        lineWidth: 2,
+        lineColor: '#999999',
+        opacity: 0.4,
+        dashArray: [5, 5]
+    }
+};

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

@@ -5,20 +5,34 @@
  * Higher frequency bands typically rendered on top
  */
 export const Z_INDEX_BY_BAND = {
-    // 2G bands
-    '2G_900': 3,
-    '2G_1800': 7,
-    // 4G bands
+    //low
     '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
+    '5G_700': 2,
+    '4G_800': 4,
+    '2G_900': 6,
+    '4G_900': 8,
+    //mid
+    '2G_1800': 10,
+    '4G_1800': 12,
+    '4G_2100': 14,
+    '5G_2100': 16,
+    '4G_2600': 18,
+    //high
+    '5G_3500': 20,
+    // //low
+    // '4G_700': 0,
+    // '5G_700': 2,
+    // '4G_800': 4,
+    // '2G_900': 6,
+    // '4G_900': 8,
+    // //mid
+    // '2G_1800': 14,
+    // '4G_1800': 16,
+    // '4G_2100': 18,
+    // '5G_2100': 20,
+    // '4G_2600': 22,
+    // //high
+    // '5G_3500': 28,
 };
 /**
  * Base Z-Index for Mapbox layer ordering

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

@@ -214,13 +214,18 @@
 			}
 		};
 
+		const handleStyleLoad = () => {
+			addLayers();
+			updateLayer();
+		};
+
 		addLayers();
-		map.on('style.load', addLayers);
+		map.on('style.load', handleStyleLoad);
 		map.on('moveend', updateLayer);
 		map.on('zoomend', updateLayer);
 
 		return () => {
-			map.off('style.load', addLayers);
+			map.off('style.load', handleStyleLoad);
 			map.off('moveend', updateLayer);
 			map.off('zoomend', updateLayer);
 			if (map.getLayer(layerId)) map.removeLayer(layerId);

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

@@ -34,9 +34,8 @@
 		if (map.getLayer(layerId)) {
 			map.setPaintProperty(layerId, 'fill-opacity', displayStore.fillOpacity);
 		}
-		if (map.getLayer(lineLayerId)) {
-			map.setPaintProperty(lineLayerId, 'line-width', displayStore.lineWidth);
-		}
+		// Note: Line styling is now data-driven from status properties
+		// but we can still apply a global multiplier via lineWidth
 	});
 
 	$effect(() => {
@@ -68,15 +67,25 @@
 			}
 
 			if (!map.getLayer(lineLayerId)) {
-				// Line Layer (Border)
+				// Line Layer (Border) - Status-based styling
 				map.addLayer({
 					id: lineLayerId,
 					type: 'line',
 					source: sourceId,
 					paint: {
-						'line-color': '#000',
-						'line-width': displayStore.lineWidth,
-						'line-opacity': 0.3
+						'line-color': ['get', 'lineColor'],
+						'line-width': [
+							'*',
+							['get', 'lineWidth'],
+							displayStore.lineWidth
+						],
+						'line-opacity': ['get', 'lineOpacity'],
+						'line-dasharray': [
+							'case',
+							['>', ['length', ['get', 'dashArray']], 0],
+							['get', 'dashArray'],
+							['literal', []]
+						]
 					}
 				});
 			}

package/dist/map-v3/features/cells/logic/geometry.js

@@ -1,4 +1,5 @@
 import * as turf from '@turf/turf';
+import { DEFAULT_STATUS_STYLES } from '../constants/statusStyles';
 /**
  * Calculates the radius in meters required to achieve a target pixel size
  * at a specific latitude and zoom level.
@@ -22,14 +23,33 @@ export function generateCellArc(cell, radiusMeters, zIndex, color) {
     const sector = turf.sector(center, radiusMeters / 1000, bearing1, bearing2, {
         steps: 10 // Low steps for performance, increase if jagged
     });
+    // Get status style
+    const statusStyle = DEFAULT_STATUS_STYLES[cell.status] || DEFAULT_STATUS_STYLES['On_Air'];
     // Attach properties for styling and interaction
     sector.properties = {
-        id: cell.id,
+        id: cell.txId,
+        txId: cell.txId,
+        cellId: cell.txId,
+        cellID: cell.cellID,
         cellName: cell.cellName,
+        siteId: cell.siteId,
+        latitude: cell.latitude,
+        longitude: cell.longitude,
+        // Cell attributes
         tech: cell.tech,
+        band: cell.frq,
+        status: cell.status,
+        type: cell.type,
+        azimuth: cell.azimuth,
+        beamwidth: cell.beamwidth,
         fband: cell.fband,
         zIndex: zIndex,
-        color: color
+        color: color,
+        // Status-based line styling
+        lineColor: statusStyle.lineColor,
+        lineWidth: statusStyle.lineWidth,
+        lineOpacity: statusStyle.opacity,
+        dashArray: statusStyle.dashArray
     };
     return sector;
 }

package/dist/map-v3/features/repeaters/components/RepeaterFilterControl.svelte

@@ -74,9 +74,23 @@
 		};
 		return labels[field] || field;
 	}
+
+	function toggleLabels() {
+		displayStore.showLabels = !displayStore.showLabels;
+	}
 </script>
 
 <MapControl {position} title="Repeaters" icon="router" controlWidth="320px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-secondary border-0 p-1 px-2"
+			title={displayStore.showLabels ? 'Hide Labels' : 'Show Labels'}
+			aria-label={displayStore.showLabels ? 'Hide Labels' : 'Show Labels'}
+			onclick={toggleLabels}
+		>
+			<i class="bi bi-tag{displayStore.showLabels ? '-fill' : ''}"></i>
+		</button>
+	{/snippet}
 	<div class="card shadow-sm border-0">
 		<!-- <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
 			<h6 class="mb-0 fw-bold text-primary">

package/dist/map-v3/features/repeaters/layers/RepeaterLabelsLayer.svelte

@@ -143,35 +143,66 @@
 			features
 		};
 
+		// 4. Update Source
 		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
-				}
-			});
 		}
 	}
+
+	// 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', '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
+					}
+				});
+			}
+		};
+
+		const handleStyleLoad = () => {
+			addLayers();
+			updateLayer();
+		};
+
+		addLayers();
+		map.on('style.load', handleStyleLoad);
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
+
+		return () => {
+			map.off('style.load', handleStyleLoad);
+			map.off('moveend', updateLayer);
+			map.off('zoomend', updateLayer);
+			if (map.getLayer(layerId)) map.removeLayer(layerId);
+			if (map.getSource(sourceId)) map.removeSource(sourceId);
+		};
+	});
 </script>