@smartnet360/svelte-components 0.0.126 → 0.0.127

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

@@ -26,6 +26,12 @@
 		CustomCellSetManager, 
 		createCustomCellSetsStore 
 	} from '../features/cells/custom';
+	// Custom Sites Feature
+	import {
+		CustomSitesLayer,
+		CustomSiteSetManager,
+		CustomSiteSetsStore
+	} from '../features/sites/custom';
 	import { demoCells } from './demo-cells';
 	import { demoRepeaters } from './demo-repeaters';
 
@@ -51,6 +57,9 @@
 	// Custom Cells Store
 	const customCellSets = createCustomCellSetsStore(cellData, 'demo-map');
 
+	// Custom Sites Store
+	const customSiteSets = new CustomSiteSetsStore();
+
 	onMount(() => {
 		// Load dummy data
 		// Need to cast or map if types slightly differ, but they should match
@@ -96,6 +105,12 @@
 			setsStore={customCellSets}
 		/>
 
+		<!-- Custom Sites Manager (includes filter controls for each set) -->
+		<CustomSiteSetManager 
+			position="top-left" 
+			setsStore={customSiteSets}
+		/>
+
 		<FeatureSettingsControl 
 			position="top-right" 
 			cellDisplayStore={cellDisplay} 
@@ -117,6 +132,9 @@
 		<!-- Custom Cells Layer (renders on top of regular cells) -->
 		<CustomCellsLayer setsStore={customCellSets} />
 
+		<!-- Custom Sites Layer (renders custom point markers) -->
+		<CustomSitesLayer setsStore={customSiteSets} />
+
 		<FeatureSelectionControl
 			position="bottom-left"
 			cellDataStore={cellData}

package/dist/map-v3/features/sites/custom/components/CustomSiteFilterControl.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	/**
+	 * Custom Site Filter Control
+	 * 
+	 * TreeView with color pickers for a single custom site set.
+	 * Shows groups with their site counts and allows color customization.
+	 */
+	import { untrack, onDestroy } from 'svelte';
+	import { MapControl } from '../../../../shared';
+	import { createTreeStore, TreeView } from '../../../../../core/TreeView';
+	import type { CustomSiteSetsStore } from '../stores/custom-site-sets.svelte';
+	import type { CustomSiteSet } from '../types';
+	import { buildCustomSiteTree } from '../logic/tree-adapter';
+
+	interface Props {
+		/** The custom site sets store */
+		setsStore: CustomSiteSetsStore;
+		/** The specific set to display */
+		set: CustomSiteSet;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Callback when set is removed */
+		onremove?: (setId: string) => void;
+	}
+
+	let { 
+		setsStore, 
+		set, 
+		position = 'top-left',
+		onremove
+	}: Props = $props();
+
+	onDestroy(() => {
+		console.log(`[CustomSiteFilterControl] onDestroy called for set: ${set.id}`);
+	});
+
+	// Build tree from set
+	let treeStore = $derived.by(() => {
+		const _version = setsStore.version;
+		const _set = set;
+		
+		return untrack(() => {
+			const nodes = buildCustomSiteTree(_set);
+			return createTreeStore({
+				nodes,
+				namespace: `custom-sites:${_set.id}`,
+				persistState: true,
+				defaultExpandAll: true
+			});
+		});
+	});
+
+	// Sync tree selection -> store visibility
+	$effect(() => {
+		const val = treeStore;
+		let changes = 0;
+
+		val.state.nodes.forEach((nodeState) => {
+			// Skip root node
+			if (nodeState.node.id === `root-${set.id}`) return;
+			// Skip folder nodes
+			if (nodeState.node.children && nodeState.node.children.length > 0) return;
+
+			const groupId = nodeState.node.metadata?.groupId;
+			if (!groupId) return;
+
+			const isVisible = val.state.checkedPaths.has(nodeState.path);
+			const currentlyVisible = set.visibleGroups.has(groupId);
+
+			if (isVisible !== currentlyVisible) {
+				setsStore.toggleGroupVisibility(set.id, groupId);
+				changes++;
+			}
+		});
+
+		if (changes > 0) {
+			console.log(`[CustomSiteFilterControl] Synced ${changes} visibility changes`);
+		}
+	});
+
+	function handleColorChange(groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		setsStore.setGroupColor(set.id, groupId, input.value);
+	}
+
+	function handleRemove() {
+		if (onremove) {
+			onremove(set.id);
+		}
+	}
+
+	function handleToggleVisibility() {
+		setsStore.toggleSetVisibility(set.id);
+	}
+</script>
+
+<MapControl {position} title={set.name} icon="geo-alt" controlWidth="280px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-secondary border-0 p-1 px-2"
+			title={set.visible ? 'Hide Layer' : 'Show Layer'}
+			aria-label={set.visible ? 'Hide Layer' : 'Show Layer'}
+			onclick={handleToggleVisibility}
+		>
+			<i class="bi bi-eye{set.visible ? '-fill' : '-slash'}"></i>
+		</button>
+		<button
+			class="btn btn-sm btn-outline-danger border-0 p-1 px-2"
+			title="Remove Set"
+			aria-label="Remove Set"
+			onclick={handleRemove}
+		>
+			<i class="bi bi-trash"></i>
+		</button>
+	{/snippet}
+
+	<div class="custom-site-filter-control">
+		<!-- Set Info -->
+		<div class="set-info mb-2 px-1">
+			<small class="text-muted">
+				{set.sites.length} sites in {set.groups.length} groups
+			</small>
+		</div>
+
+		<!-- Size Slider -->
+		<div class="size-control mb-2 px-1">
+			<label for="baseSize-{set.id}" class="form-label small mb-1">
+				Base Size: {set.baseSize}px
+			</label>
+			<input
+				type="range"
+				class="form-range"
+				id="baseSize-{set.id}"
+				min="2"
+				max="30"
+				step="1"
+				value={set.baseSize}
+				oninput={(e) => setsStore.setBaseSize(set.id, parseInt((e.target as HTMLInputElement).value))}
+			/>
+		</div>
+
+		<!-- Opacity Slider -->
+		<div class="opacity-control mb-2 px-1">
+			<label for="opacity-{set.id}" class="form-label small mb-1">
+				Opacity: {Math.round(set.opacity * 100)}%
+			</label>
+			<input
+				type="range"
+				class="form-range"
+				id="opacity-{set.id}"
+				min="0.1"
+				max="1"
+				step="0.1"
+				value={set.opacity}
+				oninput={(e) => setsStore.setOpacity(set.id, parseFloat((e.target as HTMLInputElement).value))}
+			/>
+		</div>
+
+		<!-- Group Color Pickers -->
+		<div class="group-colors mb-2">
+			<div class="small text-muted mb-1 px-1">Group Colors:</div>
+			{#each set.groups as group}
+				<div class="d-flex align-items-center gap-2 px-1 py-1">
+					<input
+						type="color"
+						class="form-control form-control-color"
+						value={set.groupColors.get(group) || '#666666'}
+						onchange={(e) => handleColorChange(group, e)}
+						title="Color for {group}"
+						style="width: 28px; height: 28px; padding: 2px;"
+					/>
+					<span class="small flex-grow-1 text-truncate">{group}</span>
+					<span class="badge bg-secondary">
+						{set.sites.filter(s => s.customGroup === group).length}
+					</span>
+				</div>
+			{/each}
+		</div>
+
+		<!-- TreeView -->
+		<div class="tree-container">
+			<TreeView store={treeStore} />
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.custom-site-filter-control {
+		max-height: 400px;
+		overflow-y: auto;
+	}
+
+	.tree-container {
+		max-height: 200px;
+		overflow-y: auto;
+		border-top: 1px solid var(--bs-border-color);
+		padding-top: 0.5rem;
+	}
+
+	.form-control-color {
+		cursor: pointer;
+	}
+</style>

package/dist/map-v3/features/sites/custom/components/CustomSiteFilterControl.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CustomSiteSetsStore } from '../stores/custom-site-sets.svelte';
+import type { CustomSiteSet } from '../types';
+interface Props {
+    /** The custom site sets store */
+    setsStore: CustomSiteSetsStore;
+    /** The specific set to display */
+    set: CustomSiteSet;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Callback when set is removed */
+    onremove?: (setId: string) => void;
+}
+declare const CustomSiteFilterControl: import("svelte").Component<Props, {}, "">;
+type CustomSiteFilterControl = ReturnType<typeof CustomSiteFilterControl>;
+export default CustomSiteFilterControl;

package/dist/map-v3/features/sites/custom/components/CustomSiteSetManager.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+	/**
+	 * Custom Site Set Manager
+	 * 
+	 * Main control panel for managing custom site sets.
+	 * Provides CSV upload, set listing, and integrates filter controls.
+	 */
+	import { MapControl } from '../../../../shared';
+	import { CustomSiteSetsStore } from '../stores/custom-site-sets.svelte';
+	import CustomSiteFilterControl from './CustomSiteFilterControl.svelte';
+	import type { CustomSiteImportResult } from '../types';
+
+	interface Props {
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Optional external store (creates internal one if not provided) */
+		setsStore?: CustomSiteSetsStore;
+	}
+
+	let { 
+		position = 'top-left',
+		setsStore: externalStore
+	}: Props = $props();
+
+	// Use external store or create internal one
+	const setsStore = externalStore ?? new CustomSiteSetsStore();
+
+	// Reactive array for iteration
+	let setsArray = $derived(setsStore.sets);
+
+	// Modal state
+	let showImportModal = $state(false);
+	let importResult = $state<(CustomSiteImportResult & { setId?: string }) | null>(null);
+	let selectedFile = $state<File | null>(null);
+	let isImporting = $state(false);
+
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		selectedFile = input.files?.[0] ?? null;
+		importResult = null;
+	}
+
+	async function handleImport() {
+		if (!selectedFile) return;
+
+		isImporting = true;
+		importResult = null;
+
+		try {
+			const content = await selectedFile.text();
+			importResult = setsStore.importFromCsv(content, selectedFile.name);
+			
+			if (importResult.setId) {
+				// Success - close modal after a short delay to show results
+				setTimeout(() => {
+					showImportModal = false;
+					selectedFile = null;
+					importResult = null;
+				}, 1500);
+			}
+		} catch (e) {
+			importResult = {
+				sites: [],
+				groups: [],
+				invalidRows: 0,
+				errors: [`Failed to read file: ${e}`]
+			};
+		} finally {
+			isImporting = false;
+		}
+	}
+
+	function handleCloseModal() {
+		showImportModal = false;
+		selectedFile = null;
+		importResult = null;
+	}
+
+	function handleRemoveSet(setId: string) {
+		setsStore.removeSet(setId);
+	}
+</script>
+
+<MapControl {position} title="Custom Sites" icon="geo-alt-fill" controlWidth="300px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
+			title="Import CSV"
+			aria-label="Import CSV"
+			onclick={() => showImportModal = true}
+		>
+			<i class="bi bi-upload"></i>
+		</button>
+	{/snippet}
+
+	<div class="custom-site-manager">
+		{#if setsArray.length === 0}
+			<div class="text-center text-muted py-3">
+				<i class="bi bi-geo-alt fs-3 d-block mb-2"></i>
+				<p class="small mb-2">No custom sites loaded</p>
+				<button 
+					class="btn btn-sm btn-outline-primary"
+					onclick={() => showImportModal = true}
+				>
+					<i class="bi bi-upload me-1"></i>
+					Import CSV
+				</button>
+			</div>
+		{:else}
+			<ul class="list-group list-group-flush">
+				{#each setsArray as set (set.id)}
+					<li class="list-group-item d-flex justify-content-between align-items-center px-2 py-2">
+						<div class="d-flex align-items-center gap-2 flex-grow-1 min-w-0">
+							<button
+								class="btn btn-sm p-0 border-0"
+								title={set.visible ? 'Hide' : 'Show'}
+								aria-label={set.visible ? 'Hide' : 'Show'}
+								onclick={() => setsStore.toggleSetVisibility(set.id)}
+							>
+								<i class="bi bi-eye{set.visible ? '-fill text-primary' : '-slash text-muted'}"></i>
+							</button>
+							<span class="text-truncate small" title={set.name}>
+								{set.name}
+							</span>
+						</div>
+						<div class="d-flex align-items-center gap-1">
+							<span class="badge bg-secondary small">
+								{set.sites.length}
+							</span>
+							<button
+								class="btn btn-sm btn-outline-danger border-0 p-1"
+								title="Remove"
+								aria-label="Remove"
+								onclick={() => handleRemoveSet(set.id)}
+							>
+								<i class="bi bi-x"></i>
+							</button>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+
+		<!-- CSV Format Help -->
+		<div class="format-help mt-2 px-2">
+			<details class="small">
+				<summary class="text-muted">CSV Format</summary>
+				<div class="mt-1 text-muted" style="font-size: 0.75rem;">
+					<strong>Required:</strong> id, lat, lon<br>
+					<strong>Optional:</strong> customGroup, sizeFactor<br>
+					<em>Extra columns available in tooltips</em>
+				</div>
+			</details>
+		</div>
+	</div>
+</MapControl>
+
+<!-- Import Modal -->
+{#if showImportModal}
+	<div class="modal show d-block" tabindex="-1" role="dialog">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">
+						<i class="bi bi-upload me-2"></i>
+						Import Custom Sites
+					</h5>
+					<button type="button" class="btn-close" aria-label="Close" onclick={handleCloseModal}></button>
+				</div>
+				<div class="modal-body">
+					<!-- File Input -->
+					<div class="mb-3">
+						<label for="csvFile" class="form-label">Select CSV File</label>
+						<input
+							type="file"
+							class="form-control"
+							id="csvFile"
+							accept=".csv"
+							onchange={handleFileSelect}
+						/>
+					</div>
+
+					<!-- Format Info -->
+					<div class="alert alert-info small py-2">
+						<strong>Required columns:</strong> id, lat, lon<br>
+						<strong>Optional:</strong> customGroup (or subgroup), sizeFactor
+					</div>
+
+					<!-- Import Result -->
+					{#if importResult}
+						{#if importResult.setId}
+							<div class="alert alert-success py-2">
+								<i class="bi bi-check-circle me-1"></i>
+								Imported {importResult.sites.length} sites in {importResult.groups.length} groups
+							</div>
+						{:else if importResult.errors.length > 0}
+							<div class="alert alert-danger py-2">
+								<strong>Import failed:</strong>
+								<ul class="mb-0 ps-3 mt-1">
+									{#each importResult.errors.slice(0, 5) as error}
+										<li class="small">{error}</li>
+									{/each}
+								</ul>
+							</div>
+						{/if}
+					{/if}
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" onclick={handleCloseModal}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						class="btn btn-primary"
+						disabled={!selectedFile || isImporting}
+						onclick={handleImport}
+					>
+						{#if isImporting}
+							<span class="spinner-border spinner-border-sm me-1"></span>
+							Importing...
+						{:else}
+							<i class="bi bi-upload me-1"></i>
+							Import
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-backdrop show"></div>
+{/if}
+
+<style>
+	.custom-site-manager {
+		font-size: 0.875rem;
+	}
+
+	.list-group-item {
+		background: transparent;
+	}
+
+	.modal {
+		z-index: 2000;
+	}
+
+	.modal-backdrop {
+		z-index: 1999;
+	}
+</style>
+
+<!-- Filter Controls for each set (rendered outside the manager control) -->
+{#each setsArray as set (set.id)}
+	{#key set.id}
+		<CustomSiteFilterControl
+			{position}
+			{setsStore}
+			{set}
+			onremove={(id) => setsStore.removeSet(id)}
+		/>
+	{/key}
+{/each}

package/dist/map-v3/features/sites/custom/components/CustomSiteSetManager.svelte.d.ts

@@ -0,0 +1,10 @@
+import { CustomSiteSetsStore } from '../stores/custom-site-sets.svelte';
+interface Props {
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Optional external store (creates internal one if not provided) */
+    setsStore?: CustomSiteSetsStore;
+}
+declare const CustomSiteSetManager: import("svelte").Component<Props, {}, "">;
+type CustomSiteSetManager = ReturnType<typeof CustomSiteSetManager>;
+export default CustomSiteSetManager;

package/dist/map-v3/features/sites/custom/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom Sites Feature
+ *
+ * Allows users to upload CSV files with custom site locations
+ * and display them as styled circle markers on the map.
+ */
+export type { CustomSite, CustomSiteSet, CustomSiteImportResult, CustomSiteSetSerialized } from './types';
+export { CustomSiteSetsStore } from './stores/custom-site-sets.svelte';
+export { parseCustomSitesCsv } from './logic/csv-parser';
+export { buildCustomSiteTree, getGroupCounts } from './logic/tree-adapter';
+export { default as CustomSiteSetManager } from './components/CustomSiteSetManager.svelte';
+export { default as CustomSiteFilterControl } from './components/CustomSiteFilterControl.svelte';
+export { default as CustomSitesLayer } from './layers/CustomSitesLayer.svelte';

package/dist/map-v3/features/sites/custom/index.js

@@ -0,0 +1,16 @@
+/**
+ * Custom Sites Feature
+ *
+ * Allows users to upload CSV files with custom site locations
+ * and display them as styled circle markers on the map.
+ */
+// Store
+export { CustomSiteSetsStore } from './stores/custom-site-sets.svelte';
+// Logic
+export { parseCustomSitesCsv } from './logic/csv-parser';
+export { buildCustomSiteTree, getGroupCounts } from './logic/tree-adapter';
+// Components
+export { default as CustomSiteSetManager } from './components/CustomSiteSetManager.svelte';
+export { default as CustomSiteFilterControl } from './components/CustomSiteFilterControl.svelte';
+// Layers
+export { default as CustomSitesLayer } from './layers/CustomSitesLayer.svelte';