@smartnet360/svelte-components 0.0.55 → 0.0.56

package/dist/map-v2/features/sites/controls/SiteFilterControl.svelte

@@ -43,7 +43,7 @@
 		
 		if (store.allSites.length > 0) {
 			console.log('SiteFilterControl: Building tree...');
-			const treeNodes = buildSiteTree(store.allSites);
+			const treeNodes = buildSiteTree(store.allSites, store.groupColorMap);
 
 			treeStore = createTreeStore({
 				nodes: [treeNodes],
@@ -71,12 +71,30 @@
 			}
 		}
 	});
+
+	function handleColorChange(groupKey: string, color: string) {
+		store.setGroupColor(groupKey, color);
+	}
 </script>
 
 <MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
 	{#if treeStore && $treeStore}
 		<div class="site-filter-tree">
-			<TreeView store={$treeStore} showControls={false} />
+			<TreeView store={$treeStore} showControls={false}>
+				{#snippet children({ node, state })}
+					<!-- Custom node rendering with color picker for leaf nodes -->
+					{#if node.metadata?.type === 'featureGroup'}
+						<input
+							type="color"
+							class="color-picker"
+							value={node.metadata.color || store.color}
+							oninput={(e) => handleColorChange(node.id, e.currentTarget.value)}
+							onclick={(e) => e.stopPropagation()}
+							title="Choose color for this group"
+						/>
+					{/if}
+				{/snippet}
+			</TreeView>
 			
 			<div class="site-filter-stats">
 				<small class="text-muted">
@@ -102,8 +120,25 @@
 		text-align: center;
 	}
 
+	.color-picker {
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+
+	.color-picker:hover {
+		border-color: #0d6efd;
+	}
+
 	:global(.site-filter-tree .tree-node-label) {
 		font-size: 13px;
+		display: flex;
+		align-items: center;
+		flex: 1;
 	}
 
 	:global(.site-filter-tree .tree-node-checkbox) {

package/dist/map-v2/features/sites/controls/SiteSizeSlider.svelte

@@ -43,7 +43,7 @@
 		<!-- Size slider -->
 		<div class="control-row">
 			<label for="site-size-slider" class="control-label">
-				Circle Radius: <strong>{store.size}px</strong>
+				Site Radius: <strong>{store.size}px</strong>
 			</label>
 			<input
 				id="site-size-slider"
@@ -75,7 +75,7 @@
 		<!-- Circle Color -->
 		<div class="control-row">
 			<label for="site-color-picker" class="control-label">
-				Circle Color
+				Base Color
 			</label>
 			<input
 				id="site-color-picker"
@@ -129,6 +129,40 @@
 					bind:value={store.labelColor}
 				/>
 			</div>
+
+			<!-- Label offset slider -->
+			<div class="control-row">
+				<label for="label-offset-slider" class="control-label">
+					Label Offset: <strong>{store.labelOffset.toFixed(1)}</strong>
+				</label>
+				<input
+					id="label-offset-slider"
+					type="range"
+					class="form-range"
+					min="-3"
+					max="3"
+					step="0.1"
+					bind:value={store.labelOffset}
+				/>
+			</div>
+
+			<!-- Label property dropdown -->
+			<div class="control-row">
+				<label for="label-property-select" class="control-label">
+					Label Field
+				</label>
+				<select
+					id="label-property-select"
+					class="form-select"
+					bind:value={store.labelProperty}
+				>
+					<option value="name">Name</option>
+					<option value="id">ID</option>
+					<option value="provider">Provider</option>
+					<option value="technology">Technology</option>
+					<option value="featureGroup">Feature Group</option>
+				</select>
+			</div>
 		{/if}
 	</div>
 </MapControl>
@@ -182,4 +216,21 @@
 		border-radius: 4px;
 		cursor: pointer;
 	}
+
+	.form-select {
+		flex: 1;
+		min-width: 0;
+		font-size: 12px;
+		padding: 4px 8px;
+		border: 1px solid #dee2e6;
+		border-radius: 4px;
+		background-color: white;
+		cursor: pointer;
+	}
+
+	.form-select:focus {
+		border-color: #0d6efd;
+		outline: none;
+		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+	}
 </style>

package/dist/map-v2/features/sites/layers/SitesLayer.svelte

@@ -60,6 +60,9 @@
 		const showLabels = store.showLabels;
 		const labelSize = store.labelSize;
 		const labelColor = store.labelColor;
+		const labelOffset = store.labelOffset;
+		const labelProperty = store.labelProperty;
+		const groupColorMap = store.groupColorMap; // Track color map changes
 		
 		if (map) {
 			updateLayer();
@@ -107,10 +110,18 @@
 			source: sourceId,
 			paint: {
 				'circle-radius': store.size,
-				'circle-color': store.color,
+				'circle-color': [
+					'coalesce',
+					['get', 'groupColor'], // Use group-specific color if available
+					store.color // Fallback to global color
+				],
 				'circle-opacity': store.opacity,
 				'circle-stroke-width': 2,
-				'circle-stroke-color': '#ffffff',
+				'circle-stroke-color': [
+					'coalesce',
+					['get', 'groupColor'], // Use group-specific color if available
+					store.color // Fallback to global color
+				],
 				'circle-stroke-opacity': store.opacity
 			}
 		});
@@ -121,9 +132,9 @@
 			type: 'symbol',
 			source: sourceId,
 			layout: {
-				'text-field': ['get', 'name'],
+				'text-field': ['get', store.labelProperty],
 				'text-size': store.labelSize,
-				'text-offset': [0, 1.5],
+				'text-offset': [0, store.labelOffset],
 				'text-anchor': 'top',
 				'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular']
 			},
@@ -151,18 +162,24 @@
 	function updateLayer(): void {
 		if (!map) return;
 
-		// Update data
-		const geojson = sitesToGeoJSON(store.filteredSites);
+		// Update data with color information
+		const geojson = sitesToGeoJSON(store.filteredSites, store.groupColorMap);
 		updateGeoJSONSource(map, sourceId, geojson);
 
 		// Update circle visual properties
 		map.setPaintProperty(layerId, 'circle-radius', store.size);
-		map.setPaintProperty(layerId, 'circle-color', store.color);
+		map.setPaintProperty(layerId, 'circle-color', [
+			'coalesce',
+			['get', 'groupColor'],
+			store.color
+		]);
 		map.setPaintProperty(layerId, 'circle-opacity', store.opacity);
 		map.setPaintProperty(layerId, 'circle-stroke-opacity', store.opacity);
 
 		// Update label properties
+		map.setLayoutProperty(labelLayerId, 'text-field', ['get', store.labelProperty]);
 		map.setLayoutProperty(labelLayerId, 'text-size', store.labelSize);
+		map.setLayoutProperty(labelLayerId, 'text-offset', [0, store.labelOffset]);
 		map.setPaintProperty(labelLayerId, 'text-color', store.labelColor);
 		map.setLayoutProperty(labelLayerId, 'visibility', store.showLabels ? 'visible' : 'none');
 	}

package/dist/map-v2/features/sites/stores/siteStoreContext.svelte.d.ts

@@ -3,6 +3,7 @@
  *
  * Uses Svelte 5 runes ($state) to create a directly bindable reactive object.
  * This allows components to use bind:value instead of manual event handlers.
+ * Persists visual settings to localStorage.
  */
 import type { Site, SiteStoreValue } from '../types';
 export declare function createSiteStoreContext(initialSites?: Site[]): {
@@ -15,14 +16,20 @@ export declare function createSiteStoreContext(initialSites?: Site[]): {
     showOnHover: boolean;
     labelSize: number;
     labelColor: string;
+    labelOffset: number;
+    labelProperty: string;
     strokeWidth: number;
     strokeColor: string;
+    groupColorMap: Map<string, string>;
     setAllSites(sites: Site[]): void;
     setFilteredSites(sites: Site[]): void;
     setSize(size: number): void;
     setColor(color: string): void;
     setOpacity(opacity: number): void;
     setShowLabels(show: boolean): void;
+    getGroupColor(groupKey: string): string | undefined;
+    setGroupColor(groupKey: string, color: string): void;
+    clearGroupColor(groupKey: string): void;
     reset(): void;
     getState(): SiteStoreValue;
 };

package/dist/map-v2/features/sites/stores/siteStoreContext.svelte.js

@@ -3,21 +3,81 @@
  *
  * Uses Svelte 5 runes ($state) to create a directly bindable reactive object.
  * This allows components to use bind:value instead of manual event handlers.
+ * Persists visual settings to localStorage.
  */
+const STORAGE_KEY = 'siteVisualSettings';
+function loadSettings() {
+    if (typeof window === 'undefined')
+        return {};
+    try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+            return JSON.parse(saved);
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load site settings from localStorage:', error);
+    }
+    return {};
+}
+function saveSettings(settings) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+    }
+    catch (error) {
+        console.warn('Failed to save site settings to localStorage:', error);
+    }
+}
 export function createSiteStoreContext(initialSites = []) {
+    // Load persisted settings
+    const persistedSettings = loadSettings();
+    // Convert persisted groupColors object back to Map
+    const initialColorMap = new Map();
+    if (persistedSettings.groupColors) {
+        Object.entries(persistedSettings.groupColors).forEach(([key, value]) => {
+            initialColorMap.set(key, value);
+        });
+    }
     // Internal reactive state
     let state = $state({
         allSites: initialSites,
         filteredSites: initialSites,
-        size: 10,
-        color: '#3b82f6',
-        opacity: 1.0,
-        showLabels: false,
+        size: persistedSettings.size ?? 10,
+        color: persistedSettings.color ?? '#3b82f6',
+        opacity: persistedSettings.opacity ?? 1.0,
+        showLabels: persistedSettings.showLabels ?? false,
         showOnHover: true,
-        labelSize: 12,
-        labelColor: '#000000',
-        strokeWidth: 2,
-        strokeColor: '#ffffff'
+        labelSize: persistedSettings.labelSize ?? 12,
+        labelColor: persistedSettings.labelColor ?? '#000000',
+        labelOffset: persistedSettings.labelOffset ?? 1.5,
+        labelProperty: persistedSettings.labelProperty ?? 'name',
+        groupColorMap: initialColorMap,
+        strokeWidth: persistedSettings.strokeWidth ?? 2,
+        strokeColor: persistedSettings.strokeColor ?? '#ffffff'
+    });
+    // Auto-save settings when they change
+    $effect(() => {
+        // Convert Map to plain object for serialization
+        const groupColorsObj = {};
+        state.groupColorMap.forEach((color, key) => {
+            groupColorsObj[key] = color;
+        });
+        const settings = {
+            size: state.size,
+            color: state.color,
+            opacity: state.opacity,
+            showLabels: state.showLabels,
+            labelSize: state.labelSize,
+            labelColor: state.labelColor,
+            labelOffset: state.labelOffset,
+            labelProperty: state.labelProperty,
+            strokeWidth: state.strokeWidth ?? 2,
+            strokeColor: state.strokeColor ?? '#ffffff',
+            groupColors: groupColorsObj
+        };
+        saveSettings(settings);
     });
     // Return object with getters/setters for direct binding
     return {
@@ -40,10 +100,16 @@ export function createSiteStoreContext(initialSites = []) {
         set labelSize(value) { state.labelSize = value; },
         get labelColor() { return state.labelColor; },
         set labelColor(value) { state.labelColor = value; },
+        get labelOffset() { return state.labelOffset; },
+        set labelOffset(value) { state.labelOffset = value; },
+        get labelProperty() { return state.labelProperty; },
+        set labelProperty(value) { state.labelProperty = value; },
         get strokeWidth() { return state.strokeWidth ?? 2; },
         set strokeWidth(value) { state.strokeWidth = value; },
         get strokeColor() { return state.strokeColor ?? '#ffffff'; },
         set strokeColor(value) { state.strokeColor = value; },
+        get groupColorMap() { return state.groupColorMap; },
+        set groupColorMap(value) { state.groupColorMap = value; },
         // Convenience methods (optional, but nice to have)
         setAllSites(sites) { state.allSites = sites; },
         setFilteredSites(sites) { state.filteredSites = sites; },
@@ -51,6 +117,19 @@ export function createSiteStoreContext(initialSites = []) {
         setColor(color) { state.color = color; },
         setOpacity(opacity) { state.opacity = opacity; },
         setShowLabels(show) { state.showLabels = show; },
+        // Group color methods
+        getGroupColor(groupKey) {
+            return state.groupColorMap.get(groupKey);
+        },
+        setGroupColor(groupKey, color) {
+            state.groupColorMap.set(groupKey, color);
+            // Trigger reactivity by reassigning
+            state.groupColorMap = new Map(state.groupColorMap);
+        },
+        clearGroupColor(groupKey) {
+            state.groupColorMap.delete(groupKey);
+            state.groupColorMap = new Map(state.groupColorMap);
+        },
         // Reset to defaults
         reset() {
             state.allSites = initialSites;
@@ -62,8 +141,11 @@ export function createSiteStoreContext(initialSites = []) {
             state.showOnHover = true;
             state.labelSize = 12;
             state.labelColor = '#000000';
+            state.labelOffset = 1.5;
+            state.labelProperty = 'name';
             state.strokeWidth = 2;
             state.strokeColor = '#ffffff';
+            state.groupColorMap = new Map();
         },
         // Get snapshot of current state (useful for debugging)
         getState() {

package/dist/map-v2/features/sites/types.d.ts

@@ -29,6 +29,9 @@ export interface SiteStoreValue {
     showOnHover: boolean;
     labelSize: number;
     labelColor: string;
+    labelOffset: number;
+    labelProperty: string;
+    groupColorMap: Map<string, string>;
     hoverColor?: string;
     selectedColor?: string;
     strokeWidth?: number;

package/dist/map-v2/features/sites/utils/siteGeoJSON.d.ts

@@ -23,8 +23,10 @@ export interface FeatureCollection<T> {
 /**
  * Converts an array of sites to a GeoJSON FeatureCollection
  * Sites are represented as Point features (circles will be drawn by Mapbox)
+ * @param sites - Array of sites to convert
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
  */
-export declare function sitesToGeoJSON(sites: Site[]): FeatureCollection<SiteFeature>;
+export declare function sitesToGeoJSON(sites: Site[], colorMap?: Map<string, string>): FeatureCollection<SiteFeature>;
 /**
  * Converts a single site to a GeoJSON Feature
  */

package/dist/map-v2/features/sites/utils/siteGeoJSON.js

@@ -4,16 +4,25 @@
 /**
  * Converts an array of sites to a GeoJSON FeatureCollection
  * Sites are represented as Point features (circles will be drawn by Mapbox)
+ * @param sites - Array of sites to convert
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
  */
-export function sitesToGeoJSON(sites) {
-    const features = sites.map((site) => ({
-        type: 'Feature',
-        geometry: {
-            type: 'Point',
-            coordinates: [site.longitude, site.latitude]
-        },
-        properties: site
-    }));
+export function sitesToGeoJSON(sites, colorMap) {
+    const features = sites.map((site) => {
+        const groupKey = `${site.provider}:${site.featureGroup}`;
+        const groupColor = colorMap?.get(groupKey);
+        return {
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: [site.longitude, site.latitude]
+            },
+            properties: {
+                ...site,
+                groupColor // Add groupColor property for Mapbox styling
+            }
+        };
+    });
     return {
         type: 'FeatureCollection',
         features

package/dist/map-v2/features/sites/utils/siteTreeUtils.d.ts

@@ -6,8 +6,10 @@ import type { TreeNode } from '../../../../core/TreeView/tree.model';
 /**
  * Builds a hierarchical tree from flat site array
  * Structure: All Sites -> Provider -> Feature Group
+ * @param sites - Array of sites to build tree from
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
  */
-export declare function buildSiteTree(sites: Site[]): TreeNode;
+export declare function buildSiteTree(sites: Site[], colorMap?: Map<string, string>): TreeNode;
 /**
  * Filters sites based on checked tree paths
  */

package/dist/map-v2/features/sites/utils/siteTreeUtils.js

@@ -4,8 +4,10 @@
 /**
  * Builds a hierarchical tree from flat site array
  * Structure: All Sites -> Provider -> Feature Group
+ * @param sites - Array of sites to build tree from
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
  */
-export function buildSiteTree(sites) {
+export function buildSiteTree(sites, colorMap) {
     // Group sites by provider, then by feature group
     const providerGroups = new Map();
     sites.forEach((site) => {
@@ -30,6 +32,7 @@ export function buildSiteTree(sites) {
         sortedFeatureGroups.forEach((featureGroup) => {
             const groupSites = featureGroups.get(featureGroup);
             const nodeId = `${provider}:${featureGroup}`;
+            const groupKey = nodeId; // Use same key format for color lookup
             providerChildren.push({
                 id: nodeId,
                 label: `${featureGroup} (${groupSites.length})`,
@@ -39,7 +42,8 @@ export function buildSiteTree(sites) {
                     type: 'featureGroup',
                     provider,
                     featureGroup,
-                    siteIds: groupSites.map((s) => s.id)
+                    siteIds: groupSites.map((s) => s.id),
+                    color: colorMap?.get(groupKey) // Add color from map if available
                 }
             });
         });

package/package.json

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