@smartnet360/svelte-components 0.0.100 → 0.0.102

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

@@ -2,12 +2,15 @@
  * Feature Selection Store - Svelte 5 Runes Implementation
  *
  * Manages selection of map features (cells, sites) with click detection.
+ * Supports multi-cell selection based on site/sector hierarchy.
  */
 export class FeatureSelectionStore {
     selectedFeatures = $state([]);
+    selectedCellNames = $state(new Set()); // Track all selected cell names
     map = $state(null);
+    cellDataStore = null;
     selectionMode = $state(false);
-    idProperty = $state('siteId');
+    idProperty = $state('site'); // 'cell', 'sector', or 'site'
     queryLayers = $state([
         'cells-layer',
         'sites-layer'
@@ -22,7 +25,13 @@ export class FeatureSelectionStore {
         this.setupClickHandler();
     }
     /**
-     * Set which property to use as the ID
+     * Set the cell data store for lookup maps
+     */
+    setCellDataStore(dataStore) {
+        this.cellDataStore = dataStore;
+    }
+    /**
+     * Set which property to use as the ID (selection mode)
      */
     setIdProperty(property) {
         this.idProperty = property;
@@ -55,13 +64,16 @@ export class FeatureSelectionStore {
             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
+                    const siteId = feature.properties?.siteId;
+                    if (cellName && this.cellDataStore) {
+                        this.handleCellClick(cellName, feature.layer?.id, feature.properties || undefined);
+                        break;
+                    }
+                    else if (siteId) {
+                        // Fallback for site clicks (if sites layer exists)
+                        this.handleSiteClick(siteId, feature.layer?.id, feature.properties || undefined);
+                        break;
                     }
                 }
             }
@@ -69,64 +81,156 @@ export class FeatureSelectionStore {
         this.map.on('click', this.clickHandler);
     }
     /**
-     * Enable selection mode
+     * Handle click on a cell - expand to site/sector based on mode
      */
-    enableSelectionMode() {
-        this.selectionMode = true;
+    handleCellClick(cellName, layerId, properties) {
+        if (!this.cellDataStore)
+            return;
+        console.log('[Selection] Clicked cell:', cellName, 'Mode:', this.idProperty);
+        let cellNamesToSelect = [];
+        let selectionId;
+        switch (this.idProperty) {
+            case 'site': {
+                // Select all cells in the site (first 4 digits)
+                const siteId = this.cellDataStore.getSiteIdFromCellName(cellName);
+                cellNamesToSelect = this.cellDataStore.getCellsBySiteId(siteId);
+                selectionId = siteId;
+                console.log('[Selection] Site mode - selecting', cellNamesToSelect.length, 'cells for site', siteId);
+                break;
+            }
+            case 'sector': {
+                // Select all cells in the sector (first 5 digits)
+                const sectorId = this.cellDataStore.getSectorIdFromCellName(cellName);
+                cellNamesToSelect = this.cellDataStore.getCellsBySectorId(sectorId);
+                selectionId = sectorId;
+                console.log('[Selection] Sector mode - selecting', cellNamesToSelect.length, 'cells for sector', sectorId);
+                break;
+            }
+            case 'cell':
+            default: {
+                // Select just this cell
+                cellNamesToSelect = [cellName];
+                selectionId = cellName;
+                console.log('[Selection] Cell mode - selecting 1 cell');
+                break;
+            }
+        }
+        // Toggle the selection group
+        this.toggleGroupSelection(selectionId, cellNamesToSelect, layerId, properties);
     }
     /**
-     * Disable selection mode
+     * Handle click on a site marker (if sites layer exists)
      */
-    disableSelectionMode() {
-        this.selectionMode = false;
+    handleSiteClick(siteId, layerId, properties) {
+        if (!this.cellDataStore)
+            return;
+        // Always select all cells in the site when clicking site marker
+        const cellNamesToSelect = this.cellDataStore.getCellsBySiteId(siteId);
+        this.toggleGroupSelection(siteId, cellNamesToSelect, layerId, properties);
     }
     /**
-     * Toggle a feature in the selection
+     * Toggle a group of cells (site or sector)
      */
-    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);
+    toggleGroupSelection(groupId, cellNames, layerId, properties) {
+        // Check if this group is already selected
+        const isSelected = this.selectedFeatures.some(f => f.id === groupId);
+        if (isSelected) {
+            // Remove the group
+            this.selectedFeatures = this.selectedFeatures.filter(f => f.id !== groupId);
+            // Remove all cell names from the set
+            cellNames.forEach(name => this.selectedCellNames.delete(name));
         }
         else {
-            // Add if not selected
-            this.selectedFeatures.push({ id, layerId, properties, siteId, cellName });
+            // Add the group
+            this.selectedFeatures.push({
+                id: groupId,
+                layerId,
+                properties,
+                cellNames // Store which cells belong to this group
+            });
+            // Add all cell names to the set
+            cellNames.forEach(name => this.selectedCellNames.add(name));
         }
+        // Update feature-state for all affected cells
+        this.updateFeatureStates(cellNames, !isSelected);
         // Trigger callback
         if (this.onSelectionChange) {
             this.onSelectionChange(this.selectedFeatures);
         }
     }
     /**
-     * Add a feature to the selection
+     * Update Mapbox feature-state for cells
      */
-    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);
+    updateFeatureStates(cellNames, selected) {
+        if (!this.map || !this.cellDataStore)
+            return;
+        console.log('[Selection] Updating feature-state for', cellNames.length, 'cells, selected:', selected);
+        const startTime = performance.now();
+        let successCount = 0;
+        let failCount = 0;
+        for (const cellName of cellNames) {
+            const numericId = this.cellDataStore.getNumericId(cellName);
+            if (numericId !== undefined) {
+                try {
+                    this.map.setFeatureState({ source: 'cells-source', id: numericId }, { selected });
+                    successCount++;
+                }
+                catch (error) {
+                    console.error('[Selection] Failed to set feature-state for', cellName, numericId, error);
+                    failCount++;
+                }
+            }
+            else {
+                console.warn('[Selection] No numeric ID found for cell:', cellName);
+                failCount++;
             }
         }
+        const endTime = performance.now();
+        console.log('[Selection] Feature-state update complete:', successCount, 'success,', failCount, 'failed in', (endTime - startTime).toFixed(2), 'ms');
     }
     /**
-     * Remove a feature from the selection
+     * Enable selection mode
      */
-    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);
-            }
-        }
+    enableSelectionMode() {
+        this.selectionMode = true;
+    }
+    /**
+     * Disable selection mode
+     */
+    disableSelectionMode() {
+        this.selectionMode = false;
     }
     /**
      * Clear all selections
      */
     clearSelection() {
+        // Clear feature-state for all currently selected cells
+        if (this.map && this.cellDataStore) {
+            for (const cellName of this.selectedCellNames) {
+                const numericId = this.cellDataStore.getNumericId(cellName);
+                if (numericId !== undefined) {
+                    this.map.setFeatureState({ source: 'cells-source', id: numericId }, { selected: false });
+                }
+            }
+        }
         this.selectedFeatures = [];
+        this.selectedCellNames.clear();
+        if (this.onSelectionChange) {
+            this.onSelectionChange(this.selectedFeatures);
+        }
+    }
+    /**
+     * Remove a selection group by ID
+     */
+    removeFeatureSelection(id) {
+        const feature = this.selectedFeatures.find(f => f.id === id);
+        if (feature && feature.cellNames) {
+            // Clear feature-state for cells in this group
+            this.updateFeatureStates(feature.cellNames, false);
+            // Remove cell names from set
+            feature.cellNames.forEach(name => this.selectedCellNames.delete(name));
+        }
+        this.selectedFeatures = this.selectedFeatures.filter(f => f.id !== id);
         if (this.onSelectionChange) {
             this.onSelectionChange(this.selectedFeatures);
         }
@@ -138,11 +242,17 @@ export class FeatureSelectionStore {
         return this.selectedFeatures;
     }
     /**
-     * Get selected feature IDs only
+     * Get selected group IDs (site/sector/cell IDs)
      */
     getSelectedIds() {
         return this.selectedFeatures.map(f => f.id);
     }
+    /**
+     * Get all selected cell names (flattened from all groups)
+     */
+    getSelectedCellNames() {
+        return Array.from(this.selectedCellNames);
+    }
     /**
      * Check if a feature is selected
      */
@@ -150,11 +260,23 @@ export class FeatureSelectionStore {
         return this.selectedFeatures.some(f => f.id === id);
     }
     /**
-     * Get selection count
+     * Check if a specific cell is selected
+     */
+    isCellSelected(cellName) {
+        return this.selectedCellNames.has(cellName);
+    }
+    /**
+     * Get selection count (number of groups, not individual cells)
      */
     get count() {
         return this.selectedFeatures.length;
     }
+    /**
+     * Get total number of selected cells
+     */
+    get cellCount() {
+        return this.selectedCellNames.size;
+    }
     /**
      * Cleanup - remove event handlers
      */
@@ -164,6 +286,7 @@ export class FeatureSelectionStore {
         }
         this.clearSelection();
         this.map = null;
+        this.cellDataStore = null;
     }
 }
 /**

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

@@ -2,12 +2,14 @@
  * Feature Selection - Type Definitions
  */
 export interface SelectedFeature {
-    /** Feature identifier */
+    /** Feature identifier (can be site ID, sector ID, or cell name) */
     id: string;
     /** Optional site ID */
     siteId?: string;
-    /** Optional cell name */
+    /** Optional cell name (for single cell selections) */
     cellName?: string;
+    /** Array of cell names (for site/sector selections) */
+    cellNames?: string[];
     /** Layer ID where feature was selected from */
     layerId?: string;
     /** Feature properties */

package/dist/shared/ResizableSplitPanel.svelte

@@ -0,0 +1,175 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/** Namespace for localStorage persistence */
+		namespace?: string;
+		/** Initial left panel width percentage (default: 25) */
+		defaultLeftWidth?: number;
+		/** Minimum left panel width percentage (default: 15) */
+		minLeftWidth?: number;
+		/** Maximum left panel width percentage (default: 60) */
+		maxLeftWidth?: number;
+		/** Left panel content */
+		left: import('svelte').Snippet;
+		/** Right panel content */
+		right: import('svelte').Snippet;
+	}
+
+	let {
+		namespace = 'split-panel',
+		defaultLeftWidth = 25,
+		minLeftWidth = 15,
+		maxLeftWidth = 60,
+		left,
+		right
+	}: Props = $props();
+
+	// State
+	let leftWidth = $state(defaultLeftWidth);
+	let isDragging = $state(false);
+	let containerRef: HTMLDivElement;
+
+	// Load saved split position from localStorage
+	onMount(() => {
+		const storageKey = `${namespace}:splitPosition`;
+		const saved = localStorage.getItem(storageKey);
+		if (saved) {
+			const parsed = parseFloat(saved);
+			if (!isNaN(parsed) && parsed >= minLeftWidth && parsed <= maxLeftWidth) {
+				leftWidth = parsed;
+			}
+		}
+	});
+
+	// Handle resize drag
+	function handleResizeStart(e: MouseEvent) {
+		isDragging = true;
+		e.preventDefault();
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!isDragging || !containerRef) return;
+
+			const rect = containerRef.getBoundingClientRect();
+			const newWidth = ((e.clientX - rect.left) / rect.width) * 100;
+
+			// Clamp between min and max
+			leftWidth = Math.max(minLeftWidth, Math.min(maxLeftWidth, newWidth));
+		};
+
+		const handleMouseUp = () => {
+			isDragging = false;
+			// Save to localStorage
+			const storageKey = `${namespace}:splitPosition`;
+			localStorage.setItem(storageKey, leftWidth.toString());
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+		};
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	}
+</script>
+
+<div class="resizable-container" bind:this={containerRef} class:dragging={isDragging}>
+	<!-- Left Panel -->
+	<div class="left-panel" style="width: {leftWidth}%;">
+		{@render left()}
+	</div>
+
+	<!-- Vertical Resize Handle -->
+	<button
+		class="resize-handle"
+		class:dragging={isDragging}
+		onmousedown={handleResizeStart}
+		aria-label="Resize split between panels"
+		type="button"
+	>
+		<div class="resize-handle-indicator"></div>
+	</button>
+
+	<!-- Right Panel -->
+	<div class="right-panel" style="width: {100 - leftWidth}%;">
+		{@render right()}
+	</div>
+</div>
+
+<style>
+	.resizable-container {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.left-panel {
+		position: relative;
+		border-right: 1px solid #dee2e6;
+		min-width: 200px;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.right-panel {
+		position: relative;
+		flex: 1;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	/* Vertical Resize Handle */
+	.resize-handle {
+		position: relative;
+		width: 8px;
+		cursor: col-resize;
+		z-index: 100;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+		border: none;
+		padding: 0;
+		background-color: transparent;
+		height: 100%;
+	}
+
+	.resize-handle:hover {
+		background-color: rgba(13, 110, 253, 0.1);
+	}
+
+	.resize-handle.dragging {
+		background-color: rgba(13, 110, 253, 0.2);
+	}
+
+	.resize-handle-indicator {
+		width: 2px;
+		height: 40px;
+		background-color: #dee2e6;
+		border-radius: 1px;
+		transition: all 0.2s;
+	}
+
+	.resize-handle:hover .resize-handle-indicator {
+		background-color: #0d6efd;
+		height: 60px;
+		width: 3px;
+	}
+
+	.resize-handle.dragging .resize-handle-indicator {
+		background-color: #0d6efd;
+		height: 80px;
+		width: 4px;
+	}
+
+	/* Prevent text selection during drag */
+	.resizable-container.dragging,
+	.resizable-container.dragging * {
+		user-select: none !important;
+		-webkit-user-select: none !important;
+	}
+</style>

package/dist/shared/ResizableSplitPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Namespace for localStorage persistence */
+    namespace?: string;
+    /** Initial left panel width percentage (default: 25) */
+    defaultLeftWidth?: number;
+    /** Minimum left panel width percentage (default: 15) */
+    minLeftWidth?: number;
+    /** Maximum left panel width percentage (default: 60) */
+    maxLeftWidth?: number;
+    /** Left panel content */
+    left: import('svelte').Snippet;
+    /** Right panel content */
+    right: import('svelte').Snippet;
+}
+declare const ResizableSplitPanel: import("svelte").Component<Props, {}, "">;
+type ResizableSplitPanel = ReturnType<typeof ResizableSplitPanel>;
+export default ResizableSplitPanel;

package/package.json

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