@smartnet360/svelte-components 0.0.84 → 0.0.86

package/dist/map-v3/core/stores/viewport.store.svelte.js

@@ -0,0 +1,107 @@
+/**
+ * Viewport Store - Manages and persists map viewport state (center, zoom, pitch, bearing)
+ *
+ * Features:
+ * - Reactive state using Svelte 5 runes
+ * - Auto-persists to localStorage via $effect
+ * - Namespace isolation for multiple map instances
+ */
+const DEFAULT_STATE = {
+    center: [0, 0],
+    zoom: 2,
+    bearing: 0,
+    pitch: 0
+};
+/**
+ * Load viewport state from localStorage
+ */
+function loadViewportState(namespace, defaults) {
+    if (typeof window === 'undefined') {
+        return { ...DEFAULT_STATE, ...defaults };
+    }
+    try {
+        const key = `${namespace}:viewport`;
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            return {
+                center: parsed.center || defaults.center || DEFAULT_STATE.center,
+                zoom: parsed.zoom ?? defaults.zoom ?? DEFAULT_STATE.zoom,
+                bearing: parsed.bearing ?? defaults.bearing ?? DEFAULT_STATE.bearing,
+                pitch: parsed.pitch ?? defaults.pitch ?? DEFAULT_STATE.pitch
+            };
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load viewport state:', error);
+    }
+    return { ...DEFAULT_STATE, ...defaults };
+}
+/**
+ * Save viewport state to localStorage
+ */
+function saveViewportState(namespace, state) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        const key = `${namespace}:viewport`;
+        localStorage.setItem(key, JSON.stringify(state));
+    }
+    catch (error) {
+        console.warn('Failed to save viewport state:', error);
+    }
+}
+/**
+ * Create a viewport store with persistence
+ *
+ * @param namespace - Unique identifier for localStorage key
+ * @param defaults - Default viewport values (used if no saved state exists)
+ * @returns ViewportStore instance
+ */
+export function createViewportStore(namespace, defaults = {}) {
+    // Load initial state
+    let state = $state(loadViewportState(namespace, defaults));
+    // Auto-save to localStorage on any change
+    $effect(() => {
+        saveViewportState(namespace, state);
+    });
+    return {
+        // Getters
+        get center() { return state.center; },
+        get zoom() { return state.zoom; },
+        get bearing() { return state.bearing; },
+        get pitch() { return state.pitch; },
+        // Setters
+        setCenter(center) {
+            state.center = center;
+        },
+        setZoom(zoom) {
+            state.zoom = zoom;
+        },
+        setBearing(bearing) {
+            state.bearing = bearing;
+        },
+        setPitch(pitch) {
+            state.pitch = pitch;
+        },
+        // Bulk update (more efficient than individual setters)
+        updateViewport(updates) {
+            if (updates.center !== undefined)
+                state.center = updates.center;
+            if (updates.zoom !== undefined)
+                state.zoom = updates.zoom;
+            if (updates.bearing !== undefined)
+                state.bearing = updates.bearing;
+            if (updates.pitch !== undefined)
+                state.pitch = updates.pitch;
+        },
+        // Reset to defaults
+        reset() {
+            const resetState = { ...DEFAULT_STATE, ...defaults };
+            state.center = resetState.center;
+            state.zoom = resetState.zoom;
+            state.bearing = resetState.bearing;
+            state.pitch = resetState.pitch;
+        }
+    };
+}

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Map, MapStyleControl } from '../core';
+	import { CellsLayer, CellLabelsLayer } from '../features/cells/layers';
+	import { createCellDataStore } from '../features/cells/stores/cell.data.svelte';
+	import { createCellRegistry } from '../features/cells/stores/cell.registry.svelte';
+	import { CellDisplayStore } from '../features/cells/stores/cell.display.svelte';
+	import FeatureSettingsControl from '../core/controls/FeatureSettingsControl.svelte';
+	import CellFilterControl from '../features/cells/components/CellFilterControl.svelte';
+	import { createRepeaterDataStore } from '../features/repeaters/stores/repeater.data.svelte';
+	import { createRepeaterRegistry } from '../features/repeaters/stores/repeater.registry.svelte';
+	import { RepeaterDisplayStore } from '../features/repeaters/stores/repeater.display.svelte';
+	import RepeaterFilterControl from '../features/repeaters/components/RepeaterFilterControl.svelte';
+	import RepeatersLayer from '../features/repeaters/layers/RepeatersLayer.svelte';
+	import RepeaterLabelsLayer from '../features/repeaters/layers/RepeaterLabelsLayer.svelte';
+	import { createSiteDataStore } from '../features/sites/stores/site.data.svelte';
+	import { createSiteDisplayStore } from '../features/sites/stores/site.display.svelte';
+	import SitesLayer from '../features/sites/layers/SitesLayer.svelte';
+	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 { demoCells } from './demo-cells';
+	import { demoRepeaters } from './demo-repeaters';
+
+	interface Props {
+		accessToken: string;
+	}
+
+	let { accessToken }: Props = $props();
+
+	// Initialize stores
+	const cellData = createCellDataStore();
+	const cellRegistry = createCellRegistry('demo-map');
+	const cellDisplay = new CellDisplayStore();
+
+	const siteData = createSiteDataStore(cellData);
+	const siteRegistry = createSiteRegistry('demo-map');
+	const siteDisplay = createSiteDisplayStore();
+
+	const repeaterData = createRepeaterDataStore();
+	const repeaterRegistry = createRepeaterRegistry('demo-map');
+	const repeaterDisplay = new RepeaterDisplayStore();
+
+	onMount(() => {
+		// Load dummy data
+		// Need to cast or map if types slightly differ, but they should match
+		cellData.setCells(demoCells as any);
+		repeaterData.setRepeaters(demoRepeaters);
+	});
+</script>
+
+<div class="map-wrapper">
+	<Map
+
+		{accessToken}
+		center={[19.0402, 47.4979]}
+		zoom={13}
+		namespace="demo-map"
+	>
+		<MapStyleControl position="top-right" namespace="demo-map" />
+		
+		<CellFilterControl 
+			position="top-left" 
+			dataStore={cellData} 
+			registry={cellRegistry} 
+			displayStore={cellDisplay}
+		/>
+
+		<SiteFilterControl 
+			position="top-left" 
+			dataStore={siteData} 
+			registry={siteRegistry} 
+			displayStore={siteDisplay}
+		/>
+
+		<RepeaterFilterControl 
+			position="top-left" 
+			dataStore={repeaterData} 
+			registry={repeaterRegistry} 
+			displayStore={repeaterDisplay}
+		/>
+
+		<FeatureSettingsControl 
+			position="top-right" 
+			cellDisplayStore={cellDisplay} 
+			repeaterDisplayStore={repeaterDisplay}
+			siteDisplayStore={siteDisplay}
+		/>
+		
+		<SitesLayer dataStore={siteData} displayStore={siteDisplay} registry={siteRegistry} />
+		<SiteLabelsLayer dataStore={siteData} displayStore={siteDisplay} registry={siteRegistry} />
+		<CellsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
+		<CellLabelsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
+		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
+		<RepeaterLabelsLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />
+	</Map>
+</div>
+
+<style>
+	.map-wrapper {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,6 @@
+interface Props {
+    accessToken: string;
+}
+declare const DemoMap: import("svelte").Component<Props, {}, "">;
+type DemoMap = ReturnType<typeof DemoMap>;
+export default DemoMap;

package/dist/map-v3/demo/demo-cells.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Demo Cell Data
+ *
+ * 100 sites across San Francisco Bay Area
+ * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
+ * Each sector has 12 cells (all tech-band combinations)
+ * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+import type { Cell } from '../features/cells/types';
+/**
+ * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+export declare const demoCells: Cell[];

package/dist/map-v3/demo/demo-cells.js

@@ -0,0 +1,130 @@
+/**
+ * Demo Cell Data
+ *
+ * 100 sites across San Francisco Bay Area
+ * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
+ * Each sector has 12 cells (all tech-band combinations)
+ * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+const BASE_LAT = 47.4979;
+const BASE_LNG = 19.0402;
+// Grid parameters for distributing sites
+const NUM_SITES = 1700;
+const GRID_SIZE = 10; // 10×10 grid
+const LAT_SPACING = 0.01; // ~1.1 km spacing
+const LNG_SPACING = 0.015; // ~1.1 km spacing (adjusted for longitude)
+// Standard beamwidth for sectors
+const BEAMWIDTH = 65;
+// Cell tech-band definitions with proper fband format
+const TECH_BANDS = [
+    // 2G bands
+    { tech: '2G', band: '900', fband: 'GSM900' },
+    { tech: '2G', band: '1800', fband: 'GSM1800' },
+    // 4G bands
+    { tech: '4G', band: '700', fband: 'LTE700' },
+    { tech: '4G', band: '800', fband: 'LTE800' },
+    { tech: '4G', band: '900', fband: 'LTE900' },
+    { tech: '4G', band: '1800', fband: 'LTE1800' },
+    { tech: '4G', band: '2100', fband: 'LTE2100' },
+    { tech: '4G', band: '2600', fband: 'LTE2600' },
+    // 5G bands
+    { tech: '5G', band: '700', fband: '5G-700' },
+    { tech: '5G', band: '2100', fband: '5G-2100' },
+    { tech: '5G', band: '3500', fband: '5G-3500' }
+];
+// Three sector azimuths
+const AZIMUTHS = [0, 120, 240];
+// Status rotation for variety
+const STATUSES = [
+    'On_Air',
+    'On_Air',
+    'On_Air',
+    'On_Air',
+    'On_Air_UNDER_CONSTRUCTION',
+    'On_Air_Locked',
+    'RF_Plan_Ready',
+    'RF_Plan_Ready',
+    'Re-Planned_RF_Plan_Ready',
+    'Tavlati_RF_Plan_Ready',
+    'On_Air',
+    'On_Air'
+];
+/**
+ * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+export const demoCells = [];
+let cellCounter = 1;
+// Generate sites in a grid pattern
+for (let siteIndex = 0; siteIndex < NUM_SITES; siteIndex++) {
+    const row = Math.floor(siteIndex / GRID_SIZE);
+    const col = siteIndex % GRID_SIZE;
+    // Calculate site position (centered grid around base location)
+    const siteLat = BASE_LAT + (row - GRID_SIZE / 2) * LAT_SPACING;
+    const siteLng = BASE_LNG + (col - GRID_SIZE / 2) * LNG_SPACING;
+    const siteId = `DEMO-SITE-${String(siteIndex + 1).padStart(3, '0')}`;
+    // Generate 3 sectors per site
+    AZIMUTHS.forEach((azimuth, sectorIndex) => {
+        // Generate 12 tech-bands per sector
+        TECH_BANDS.forEach((techBand, techIndex) => {
+            const cellId = `CELL-${String(cellCounter).padStart(4, '0')}`;
+            const status = STATUSES[techIndex];
+            demoCells.push({
+                // Core properties
+                id: cellId,
+                txId: `TX-${String(cellCounter).padStart(4, '0')}`,
+                cellID: cellId,
+                cellID2G: techBand.tech === '2G' ? cellId : '',
+                cellName: `${siteId} ${techBand.tech}${techBand.band} S${sectorIndex + 1}`,
+                siteId: siteId,
+                tech: techBand.tech,
+                fband: techBand.fband,
+                frq: techBand.band,
+                type: 'MACRO',
+                status: status,
+                onAirDate: '2024-01-15',
+                // 2G specific
+                bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
+                ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+                // 4G specific
+                dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+                // Physical properties
+                antenna: 'DEMO-ANTENNA-MODEL',
+                azimuth: azimuth,
+                height: 30, // 30 meters antenna height
+                electricalTilt: '3',
+                beamwidth: BEAMWIDTH,
+                latitude: siteLat,
+                longitude: siteLng,
+                dx: 0,
+                dy: 0,
+                siteLatitude: siteLat,
+                siteLongitude: siteLng,
+                // Planning
+                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+                planner: 'Demo User',
+                // Atoll properties
+                atollETP: 43.0,
+                atollPW: 20.0,
+                atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
+                atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
+                // Network properties
+                cellId3: `${cellId}-3G`,
+                nwtP1: 20,
+                nwtP2: 40,
+                pci1: (cellCounter % 504), // Physical Cell ID for LTE
+                nwtRS: 450.0,
+                nwtBW: 10.0,
+                // Other
+                other: {
+                    demoCell: true,
+                    siteNumber: siteIndex + 1,
+                    sector: sectorIndex + 1,
+                    techBandKey: `${techBand.tech}_${techBand.band}`,
+                    gridPosition: { row, col }
+                },
+                customSubgroup: `Sector-${sectorIndex + 1}`
+            });
+            cellCounter++;
+        });
+    });
+}

package/dist/map-v3/demo/demo-data.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+import type { Site } from '../features/sites/types';
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export declare const demoSites: Site[];

package/dist/map-v3/demo/demo-data.js

@@ -0,0 +1,104 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export const demoSites = [
+    {
+        siteId: 'site-001',
+        siteName: 'Downtown Tower',
+        longitude: -122.4194,
+        latitude: 37.7749,
+        fbands: ['2100', '1800'],
+        techs: ['5G'],
+        provider: 'Verizon',
+        level1: 'Urban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-002',
+        siteName: 'Financial District',
+        longitude: -122.4008,
+        latitude: 37.7946,
+        fbands: ['1800', '850'],
+        techs: ['LTE'],
+        provider: 'AT&T',
+        level1: 'Urban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-003',
+        siteName: 'Mission Bay',
+        longitude: -122.3912,
+        latitude: 37.7699,
+        fbands: ['2600'],
+        techs: ['5G'],
+        provider: 'T-Mobile',
+        level1: 'Small Cell',
+        level2: 'San Francisco',
+        cellCount: 2
+    },
+    {
+        siteId: 'site-004',
+        siteName: 'Golden Gate Park',
+        longitude: -122.4862,
+        latitude: 37.7694,
+        fbands: ['850', '700'],
+        techs: ['LTE'],
+        provider: 'Verizon',
+        level1: 'Rural Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-005',
+        siteName: 'Presidio Heights',
+        longitude: -122.4545,
+        latitude: 37.7881,
+        fbands: ['2100', '850'],
+        techs: ['5G'],
+        provider: 'AT&T',
+        level1: 'Suburban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-006',
+        siteName: 'Castro District',
+        longitude: -122.4352,
+        latitude: 37.7609,
+        fbands: ['1800'],
+        techs: ['LTE'],
+        provider: 'T-Mobile',
+        level1: 'Small Cell',
+        level2: 'San Francisco',
+        cellCount: 2
+    },
+    {
+        siteId: 'site-007',
+        siteName: 'Embarcadero',
+        longitude: -122.3959,
+        latitude: 37.7956,
+        fbands: ['2600', '2100'],
+        techs: ['5G'],
+        provider: 'Verizon',
+        level1: 'Urban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-008',
+        siteName: 'Sunset District',
+        longitude: -122.4944,
+        latitude: 37.7599,
+        fbands: ['850', '700'],
+        techs: ['LTE'],
+        provider: 'AT&T',
+        level1: 'Suburban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    }
+];

package/dist/map-v3/demo/demo-repeaters.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Demo Repeater Data
+ *
+ * 15 repeaters strategically placed near demo sites
+ * Mix of 2G, 4G, and 5G technologies across various frequency bands
+ * Fixed 30° beamwidth
+ */
+import type { Repeater } from '../features/repeaters/types';
+/**
+ * Generate demo repeater data
+ * Creates 15 repeaters with various tech:fband combinations
+ */
+export declare const demoRepeaters: Repeater[];

package/dist/map-v3/demo/demo-repeaters.js

@@ -0,0 +1,73 @@
+/**
+ * Demo Repeater Data
+ *
+ * 15 repeaters strategically placed near demo sites
+ * Mix of 2G, 4G, and 5G technologies across various frequency bands
+ * Fixed 30° beamwidth
+ */
+const BASE_LAT = 47.4979;
+const BASE_LNG = 19.0402;
+// Repeater positions (distributed across demo area)
+const REPEATER_POSITIONS = [
+    { lat: BASE_LAT + 0.015, lng: BASE_LNG - 0.020 },
+    { lat: BASE_LAT + 0.025, lng: BASE_LNG + 0.010 },
+    { lat: BASE_LAT - 0.010, lng: BASE_LNG + 0.025 },
+    { lat: BASE_LAT - 0.020, lng: BASE_LNG - 0.015 },
+    { lat: BASE_LAT + 0.005, lng: BASE_LNG + 0.030 },
+    { lat: BASE_LAT + 0.030, lng: BASE_LNG - 0.005 },
+    { lat: BASE_LAT - 0.025, lng: BASE_LNG + 0.015 },
+    { lat: BASE_LAT + 0.010, lng: BASE_LNG - 0.030 },
+    { lat: BASE_LAT - 0.015, lng: BASE_LNG - 0.025 },
+    { lat: BASE_LAT + 0.020, lng: BASE_LNG + 0.020 },
+    { lat: BASE_LAT - 0.005, lng: BASE_LNG - 0.010 },
+    { lat: BASE_LAT + 0.035, lng: BASE_LNG + 0.005 },
+    { lat: BASE_LAT - 0.030, lng: BASE_LNG + 0.020 },
+    { lat: BASE_LAT + 0.012, lng: BASE_LNG - 0.018 },
+    { lat: BASE_LAT - 0.018, lng: BASE_LNG + 0.012 }
+];
+// Repeater tech-band combinations
+const REPEATER_CONFIGS = [
+    // 2G repeaters
+    { tech: '2G', fband: 'GSM900', azimuth: 45 },
+    { tech: '2G', fband: 'GSM1800', azimuth: 180 },
+    { tech: '2G', fband: 'GSM900', azimuth: 270 },
+    // 4G repeaters
+    { tech: '4G', fband: 'LTE700', azimuth: 90 },
+    { tech: '4G', fband: 'LTE800', azimuth: 225 },
+    { tech: '4G', fband: 'LTE1800', azimuth: 135 },
+    { tech: '4G', fband: 'LTE2100', azimuth: 315 },
+    { tech: '4G', fband: 'LTE2600', azimuth: 60 },
+    // 5G repeaters
+    { tech: '5G', fband: '5G-700', azimuth: 150 },
+    { tech: '5G', fband: '5G-2100', azimuth: 210 },
+    { tech: '5G', fband: '5G-3500', azimuth: 330 },
+    { tech: '5G', fband: '5G-3500', azimuth: 0 },
+    { tech: '5G', fband: '5G-2100', azimuth: 120 },
+    { tech: '5G', fband: '5G-700', azimuth: 240 },
+    { tech: '5G', fband: '5G-3500', azimuth: 180 }
+];
+/**
+ * Generate demo repeater data
+ * Creates 15 repeaters with various tech:fband combinations
+ */
+export const demoRepeaters = REPEATER_POSITIONS.map((pos, idx) => {
+    const config = REPEATER_CONFIGS[idx];
+    const repeaterId = `REP-${String(idx + 1).padStart(3, '0')}`;
+    const donorCellId = `CELL-${String((idx * 7) % 100).padStart(3, '0')}`;
+    return {
+        repeaterId,
+        donorCellId,
+        donorCellName: `Cell-${config.tech}-${config.fband}-${idx + 1}`,
+        latitude: pos.lat,
+        longitude: pos.lng,
+        azimuth: config.azimuth,
+        beamwidth: 30, // Fixed 30° beamwidth
+        tech: config.tech,
+        fband: config.fband,
+        type: 'REPEATER',
+        height: 15 + (idx % 5) * 5, // Heights between 15-35m
+        factory_nbr: `FN-${String(1000 + idx).padStart(6, '0')}`,
+        provider: idx % 2 === 0 ? 'Operator-A' : 'Operator-B',
+        featureGroup: config.tech === '5G' ? 'High-Priority' : config.tech === '4G' ? 'Standard' : 'Legacy'
+    };
+});