@smartnet360/svelte-components 0.0.87 → 0.0.88

package/dist/map-v3/features/selection/stores/selection.store.svelte.js

@@ -0,0 +1,174 @@
+/**
+ * Feature Selection Store - Svelte 5 Runes Implementation
+ *
+ * Manages selection of map features (cells, sites) with click detection.
+ */
+export class FeatureSelectionStore {
+    selectedFeatures = $state([]);
+    map = $state(null);
+    selectionMode = $state(false);
+    idProperty = $state('siteId');
+    queryLayers = $state([
+        'cells-layer',
+        'sites-layer'
+    ]);
+    clickHandler = null;
+    onSelectionChange;
+    /**
+     * Initialize the store with a map instance
+     */
+    setMap(mapInstance) {
+        this.map = mapInstance;
+        this.setupClickHandler();
+    }
+    /**
+     * Set which property to use as the ID
+     */
+    setIdProperty(property) {
+        this.idProperty = property;
+    }
+    /**
+     * Set which layers to query for features
+     */
+    setQueryLayers(layers) {
+        this.queryLayers = layers;
+    }
+    /**
+     * Register callback for selection changes
+     */
+    setSelectionChangeCallback(callback) {
+        this.onSelectionChange = callback;
+    }
+    /**
+     * Setup global click handler for any feature
+     */
+    setupClickHandler() {
+        if (!this.map)
+            return;
+        this.clickHandler = (e) => {
+            if (!this.selectionMode)
+                return;
+            // Query specific layers for features
+            const features = this.map.queryRenderedFeatures(e.point, {
+                layers: this.queryLayers
+            });
+            if (features && features.length > 0) {
+                // Get the topmost feature with an id
+                for (const feature of features) {
+                    // Use the configured property as the ID
+                    const featureId = feature.properties?.[this.idProperty] || feature.id;
+                    const siteId = feature.properties?.siteId;
+                    const cellName = feature.properties?.cellName;
+                    if (featureId) {
+                        this.toggleFeatureSelection(String(featureId), feature.layer?.id, feature.properties || undefined, siteId, cellName);
+                        break; // Only select the topmost feature
+                    }
+                }
+            }
+        };
+        this.map.on('click', this.clickHandler);
+    }
+    /**
+     * Enable selection mode
+     */
+    enableSelectionMode() {
+        this.selectionMode = true;
+    }
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode() {
+        this.selectionMode = false;
+    }
+    /**
+     * Toggle a feature in the selection
+     */
+    toggleFeatureSelection(id, layerId, properties, siteId, cellName) {
+        const index = this.selectedFeatures.findIndex(f => f.id === id);
+        if (index >= 0) {
+            // Remove if already selected
+            this.selectedFeatures.splice(index, 1);
+        }
+        else {
+            // Add if not selected
+            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
+        }
+        // Trigger callback
+        if (this.onSelectionChange) {
+            this.onSelectionChange(this.selectedFeatures);
+        }
+    }
+    /**
+     * Add a feature to the selection
+     */
+    addFeatureSelection(id, layerId, properties, siteId, cellName) {
+        const exists = this.selectedFeatures.some(f => f.id === id);
+        if (!exists) {
+            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
+            if (this.onSelectionChange) {
+                this.onSelectionChange(this.selectedFeatures);
+            }
+        }
+    }
+    /**
+     * Remove a feature from the selection
+     */
+    removeFeatureSelection(id) {
+        const index = this.selectedFeatures.findIndex(f => f.id === id);
+        if (index >= 0) {
+            this.selectedFeatures.splice(index, 1);
+            if (this.onSelectionChange) {
+                this.onSelectionChange(this.selectedFeatures);
+            }
+        }
+    }
+    /**
+     * Clear all selections
+     */
+    clearSelection() {
+        this.selectedFeatures = [];
+        if (this.onSelectionChange) {
+            this.onSelectionChange(this.selectedFeatures);
+        }
+    }
+    /**
+     * Get all selected features
+     */
+    getSelectedFeatures() {
+        return this.selectedFeatures;
+    }
+    /**
+     * Get selected feature IDs only
+     */
+    getSelectedIds() {
+        return this.selectedFeatures.map(f => f.id);
+    }
+    /**
+     * Check if a feature is selected
+     */
+    isFeatureSelected(id) {
+        return this.selectedFeatures.some(f => f.id === id);
+    }
+    /**
+     * Get selection count
+     */
+    get count() {
+        return this.selectedFeatures.length;
+    }
+    /**
+     * Cleanup - remove event handlers
+     */
+    destroy() {
+        if (this.map && this.clickHandler) {
+            this.map.off('click', this.clickHandler);
+        }
+        this.clearSelection();
+        this.map = null;
+    }
+}
+/**
+ * Factory function to create a new feature selection store
+ */
+export function createFeatureSelectionStore() {
+    return new FeatureSelectionStore();
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Feature Selection - Type Definitions
+ */
+export interface SelectedFeature {
+    /** Feature identifier */
+    id: string;
+    /** Optional site ID */
+    siteId?: string;
+    /** Optional cell name */
+    cellName?: string;
+    /** Layer ID where feature was selected from */
+    layerId?: string;
+    /** Feature properties */
+    properties?: Record<string, any>;
+}
+export interface SelectionStoreState {
+    /** Array of selected features */
+    selectedFeatures: SelectedFeature[];
+    /** Whether selection mode is active */
+    selectionMode: boolean;
+    /** Property name to use as feature ID */
+    idProperty: string;
+    /** Selection count */
+    count: number;
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Feature Selection - Type Definitions
+ */
+export {};

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

@@ -84,9 +84,23 @@
 		}
 		return '#3388ff';
 	}
+
+	function toggleLabels() {
+		displayStore.showLabels = !displayStore.showLabels;
+	}
 </script>
 
 <MapControl {position} title="Sites" icon="broadcast-pin" controlWidth="300px">
+	{#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="p-2">
 		<!-- <div class="mb-2 text-muted small">
 			{dataStore.sites.length} Sites

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

@@ -118,35 +118,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>

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

@@ -24,6 +24,7 @@ export { default as SiteSettingsPanel } from './features/sites/components/SiteSe
 export * from './features/sites/stores/site.data.svelte';
 export * from './features/sites/stores/site.display.svelte';
 export * from './features/sites/stores/site.registry.svelte';
+export * from './features/selection';
 export { default as DemoMap } from './demo/DemoMap.svelte';
 export { demoCells } from './demo/demo-cells';
 export { demoRepeaters } from './demo/demo-repeaters';

package/dist/map-v3/index.js

@@ -29,6 +29,8 @@ export { default as SiteSettingsPanel } from './features/sites/components/SiteSe
 export * from './features/sites/stores/site.data.svelte';
 export * from './features/sites/stores/site.display.svelte';
 export * from './features/sites/stores/site.registry.svelte';
+// Features - Selection
+export * from './features/selection';
 // Demo
 export { default as DemoMap } from './demo/DemoMap.svelte';
 export { demoCells } from './demo/demo-cells';

package/dist/map-v3/shared/controls/MapControl.svelte

@@ -28,6 +28,8 @@
 		class?: string;
 		/** Child content */
 		children?: import('svelte').Snippet;
+		/** Optional action buttons in header */
+		actions?: import('svelte').Snippet;
 		/** Optional offset from map edge (e.g., '12px') */
 		edgeOffset?: string;
 		/** Width of the map control (e.g., '360px') */
@@ -44,6 +46,7 @@
 		onCollapseToggle,
 		class: className = '',
 		children,
+		actions,
 		edgeOffset = '12px',
 		controlWidth = '420px'
 	}: Props = $props();
@@ -127,16 +130,21 @@
 					{/if}
 				{/if}
 			</span>
-			{#if collapsible}
-				<button
-					class="map-control-toggle"
-					onclick={toggleCollapse}
-					aria-label={collapsed ? 'Expand' : 'Collapse'}
-					title={collapsed ? 'Expand' : 'Collapse'}
-				>
-					<i class="bi bi-chevron-{collapsed ? 'down' : 'up'}"></i>
-				</button>
-			{/if}
+			<div class="map-control-actions">
+				{#if actions}
+					{@render actions()}
+				{/if}
+				{#if collapsible}
+					<button
+						class="map-control-toggle"
+						onclick={toggleCollapse}
+						aria-label={collapsed ? 'Expand' : 'Collapse'}
+						title={collapsed ? 'Expand' : 'Collapse'}
+					>
+						<i class="bi bi-chevron-{collapsed ? 'down' : 'up'}"></i>
+					</button>
+				{/if}
+			</div>
 		</div>
 	{/if}
 
@@ -186,6 +194,25 @@
 		font-size: 1.1rem;
 	}
 
+	.map-control-actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.map-control-actions :global(.btn) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 28px;
+		height: 28px;
+	}
+
+	.map-control-actions :global(.btn i) {
+		font-size: 14px;
+		line-height: 1;
+	}
+
 	.map-control-toggle {
 		background: none;
 		border: none;

package/dist/map-v3/shared/controls/MapControl.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     class?: string;
     /** Child content */
     children?: import('svelte').Snippet;
+    /** Optional action buttons in header */
+    actions?: import('svelte').Snippet;
     /** Optional offset from map edge (e.g., '12px') */
     edgeOffset?: string;
     /** Width of the map control (e.g., '360px') */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.87",
+	"version": "0.0.88",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",