@smartnet360/svelte-components 0.0.79 → 0.0.81

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

@@ -232,11 +232,11 @@
 		<!-- Generic feature selection control - works with any layer -->
 		<FeatureSelectionControl
 			position="bottom-left"
-			title="Any Feature"
-			icon="cursor-fill"
+			title="Cluster Tool"
+			icon="speedometer2"
 			iconOnlyWhenCollapsed={useIconHeaders}
 			onAction={handleProcessFeatures}
-			actionButtonLabel="Process Features"
+			actionButtonLabel="Process Cluster"
 			featureIcon="pin-map-fill"
 		/>
 

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte

@@ -33,16 +33,22 @@
 		actionButtonLabel?: string;
 		/** Feature icon (default: geo-alt-fill) */
 		featureIcon?: string;
+		/** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
+		idPropertyOptions?: string[];
+		/** Default property to use as ID (default: 'id') */
+		defaultIdProperty?: string;
 	}
 	
 	let {
 		position = 'top-left',
-		title = 'Feature Selection',
-		icon = 'check2-square',
+		title = 'Cluster Tool',
+		icon = 'speedometer2',
 		iconOnlyWhenCollapsed = true,
 		onAction,
-		actionButtonLabel = 'Process',
-		featureIcon = 'geo-alt-fill'
+		actionButtonLabel = 'Process Cluster',
+		featureIcon = 'geo-alt-fill',
+		idPropertyOptions = ['siteId', 'cellName','id'],
+		defaultIdProperty = 'siteId'
 	}: Props = $props();
 	
 	// Get map from context
@@ -53,10 +59,16 @@
 	const store = createFeatureSelectionStore();
 	console.log('[FeatureSelectionControl] Store created:', store);
 	
+	// Set the ID property to use
+	store.setIdProperty(defaultIdProperty);
+	
 	let selectedFeatures = $derived(store.getSelectedFeatures());
 	let selectionCount = $derived(store.count);
 	let hasSelection = $derived(selectionCount > 0);
 	
+	// Track collapsed state
+	let isCollapsed = $state(false);
+	
 	// Subscribe to map store and initialize when map becomes available
 	let unsubscribe: (() => void) | null = null;
 	
@@ -69,6 +81,8 @@
 			if (map && !store['map']) {
 				console.log('[FeatureSelectionControl] Setting map on selection store');
 				store.setMap(map);
+				// Enable selection mode on mount (control starts collapsed=false by default)
+				store.enableSelectionMode();
 			}
 		});
 	});
@@ -82,8 +96,21 @@
 		store.destroy();
 	});
 	
-	function handleToggleMode() {
-		store.toggleSelectionMode();
+	function handleCollapseToggle(collapsed: boolean) {
+		isCollapsed = collapsed;
+		// When control is expanded, enable selection mode
+		// When control is collapsed, disable selection mode
+		if (collapsed) {
+			store.disableSelectionMode();
+		} else {
+			store.enableSelectionMode();
+		}
+	}
+	
+	function handleIdPropertyChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		store.setIdProperty(target.value);
+		console.log('[FeatureSelectionControl] ID property changed to:', target.value);
 	}
 	
 	function handleRemoveFeature(featureId: string) {
@@ -112,36 +139,27 @@
 	}
 </script>
 
-<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true}>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} onCollapseToggle={handleCollapseToggle}>
 	<div class="feature-selection-control">
-		<!-- Selection Mode Toggle -->
-		<div class="selection-mode-toggle mb-3">
-			<div class="form-check form-switch">
-				<input
-					type="checkbox"
-					class="form-check-input"
-					id="feature-selection-mode-toggle"
-					checked={store.selectionMode}
-					onchange={handleToggleMode}
-				/>
-				<label class="form-check-label" for="feature-selection-mode-toggle">
-					Selection Mode
-					<span class="badge ms-2" class:bg-success={store.selectionMode} class:bg-secondary={!store.selectionMode}>
-						{store.selectionMode ? 'ON' : 'OFF'}
-					</span>
-				</label>
-			</div>
-			{#if store.selectionMode}
-				<small class="text-muted d-block mt-1">
-					Click any feature on the map to select
-				</small>
-			{/if}
+		<!-- ID Property Selector -->
+		<div class="mb-3">
+			<label for="id-property-select" class="form-label small">Select By</label>
+			<select
+				id="id-property-select"
+				class="form-select form-select-sm"
+				value={store.idProperty}
+				onchange={handleIdPropertyChange}
+			>
+				{#each idPropertyOptions as option}
+					<option value={option}>{option}</option>
+				{/each}
+			</select>
 		</div>
 		
 		<!-- Selection Stats -->
 		<div class="selection-stats mb-2">
 			<strong>{selectionCount}</strong> 
-			{selectionCount === 1 ? 'feature' : 'features'} selected
+			{selectionCount === 1 ? 'item' : 'items'} selected
 		</div>
 		
 		<!-- Action Buttons -->
@@ -195,7 +213,8 @@
 		{:else}
 			<div class="text-muted small text-center py-2">
 				<i class="bi bi-inbox"></i>
-				<div class="mt-1">No features selected</div>
+				<div class="mt-1">No items selected</div>
+				<div class="mt-1">Click on cells or sites</div>
 			</div>
 		{/if}
 		

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte.d.ts

@@ -13,6 +13,10 @@ interface Props {
     actionButtonLabel?: string;
     /** Feature icon (default: geo-alt-fill) */
     featureIcon?: string;
+    /** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
+    idPropertyOptions?: string[];
+    /** Default property to use as ID (default: 'id') */
+    defaultIdProperty?: string;
 }
 declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
 type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;

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

@@ -27,6 +27,8 @@
 		collapsible?: boolean;
 		/** Initial collapsed state */
 		initiallyCollapsed?: boolean;
+		/** Optional callback when collapse state changes */
+		onCollapseToggle?: (collapsed: boolean) => void;
 		/** Custom CSS class for the container */
 		className?: string;
 		/** Child content */
@@ -44,13 +46,12 @@
 		iconOnlyWhenCollapsed = true,
 		collapsible = true,
 		initiallyCollapsed = true,
+		onCollapseToggle,
 		className = '',
 		children,
 		edgeOffset = '12px',
 		controlWidth = '420px'
 	}: Props = $props();
-
-
 	const mapStore = tryUseMapbox();
 	
 	if (!mapStore) {
@@ -113,6 +114,10 @@
 
 	function toggleCollapse() {
 		collapsed = !collapsed;
+		// Call the callback if provided
+		if (onCollapseToggle) {
+			onCollapseToggle(collapsed);
+		}
 	}
 </script>
 

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

@@ -11,6 +11,8 @@ interface Props {
     collapsible?: boolean;
     /** Initial collapsed state */
     initiallyCollapsed?: boolean;
+    /** Optional callback when collapse state changes */
+    onCollapseToggle?: (collapsed: boolean) => void;
     /** Custom CSS class for the container */
     className?: string;
     /** Child content */

package/dist/map-v2/shared/controls/featureSelectionStore.svelte.d.ts

@@ -16,12 +16,17 @@ export declare class FeatureSelectionStore {
     private selectedFeatures;
     private map;
     selectionMode: boolean;
+    idProperty: string;
     private clickHandler;
     constructor();
     /**
      * Initialize the store with a map instance
      */
     setMap(mapInstance: MapboxMap): void;
+    /**
+     * Set which property to use as the ID
+     */
+    setIdProperty(property: string): void;
     /**
      * Setup global click handler for any feature
      */

package/dist/map-v2/shared/controls/featureSelectionStore.svelte.js

@@ -8,6 +8,7 @@ export class FeatureSelectionStore {
     selectedFeatures = $state([]);
     map = $state(null);
     selectionMode = $state(false);
+    idProperty = $state('siteId'); // Default property to use as ID
     clickHandler = null;
     constructor() { }
     /**
@@ -18,6 +19,13 @@ export class FeatureSelectionStore {
         this.map = mapInstance;
         this.setupClickHandler();
     }
+    /**
+     * Set which property to use as the ID
+     */
+    setIdProperty(property) {
+        this.idProperty = property;
+        console.log('[FeatureSelection] ID property set to:', property);
+    }
     /**
      * Setup global click handler for any feature
      */
@@ -39,16 +47,17 @@ export class FeatureSelectionStore {
                         properties: feature.properties,
                         id: feature.id
                     });
-                    const featureId = feature.properties?.id || feature.id;
+                    // 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) {
-                        console.log('[FeatureSelection] Found feature with ID:', featureId, 'siteId:', siteId, 'cellName:', cellName);
+                        console.log('[FeatureSelection] Found feature with ID (using', this.idProperty + '):', featureId, 'siteId:', siteId, 'cellName:', cellName);
                         this.toggleFeatureSelection(String(featureId), feature.layer?.id, feature.properties || undefined, siteId, cellName);
                         break; // Only select the topmost feature
                     }
                     else {
-                        console.log('[FeatureSelection] Feature has no id property');
+                        console.log('[FeatureSelection] Feature has no', this.idProperty, 'property');
                     }
                 }
             }

package/package.json

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