@smartnet360/svelte-components 0.0.129 → 0.0.131

package/dist/map-v3/features/custom/components/CustomCellSetManager.svelte

@@ -0,0 +1,692 @@
+<script lang="ts">
+	/**
+	 * Custom Layers Manager (Unified Control)
+	 * 
+	 * Single control that handles:
+	 * - CSV import
+	 * - Quick Add (paste cell names)
+	 * - Global size/opacity sliders
+	 * - Collapsible set sections with TreeView + color pickers
+	 */
+	import { untrack } from 'svelte';
+	import { MapControl } from '../../../shared';
+	import { createTreeStore, TreeView } from '../../../../core/TreeView';
+	import type { CustomCellSetsStore } from '../stores/custom-cell-sets.svelte';
+	import type { CustomCellImportResult, CustomCellSet } from '../types';
+	import { buildCustomCellTree } from '../logic/tree-adapter';
+
+	interface Props {
+		/** The custom cell sets store */
+		setsStore: CustomCellSetsStore;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { 
+		setsStore, 
+		position = 'top-left' 
+	}: Props = $props();
+
+	// Global display settings - initialized from first set if available
+	let globalSectorSize = $state(50);
+	let globalPointSize = $state(8);
+	let globalOpacity = $state(0.7);
+	let initialized = $state(false);
+
+	// Sync global sliders from first set's values on load
+	$effect(() => {
+		if (!initialized && setsStore.sets.length > 0) {
+			const firstSet = setsStore.sets[0];
+			globalSectorSize = firstSet.baseSize;
+			globalPointSize = firstSet.pointSize;
+			globalOpacity = firstSet.opacity;
+			initialized = true;
+		}
+	});
+
+	// UI State
+	let showImportModal = $state(false);
+	let importResult = $state<CustomCellImportResult | null>(null);
+	let importFileName = $state('');
+	let importError = $state('');
+	let fileInput: HTMLInputElement;
+	
+	// Quick Add state
+	let showQuickAdd = $state(false);
+	let quickAddText = $state('');
+	let quickAddName = $state('Quick Selection');
+	let quickAddResult = $state<CustomCellImportResult | null>(null);
+	
+	// Track expanded sets
+	let expandedSets = $state<Set<string>>(new Set());
+
+	// Tree stores per set (keyed by set id)
+	let treeStores = $derived.by(() => {
+		const _version = setsStore.version;
+		const stores = new Map<string, ReturnType<typeof createTreeStore>>();
+		
+		for (const set of setsStore.sets) {
+			const store = untrack(() => {
+				const nodes = buildCustomCellTree(set);
+				return createTreeStore({
+					nodes,
+					namespace: `custom-cells:${set.id}`,
+					persistState: true,
+					defaultExpandAll: true
+				});
+			});
+			stores.set(set.id, store);
+		}
+		
+		return stores;
+	});
+
+	// Sync tree selections to store visibility
+	$effect(() => {
+		for (const set of setsStore.sets) {
+			const treeStore = treeStores.get(set.id);
+			if (!treeStore) continue;
+
+			treeStore.state.nodes.forEach((nodeState) => {
+				// Skip root and folder nodes
+				if (nodeState.node.id === `root-${set.id}`) return;
+				if (nodeState.node.children && nodeState.node.children.length > 0) return;
+
+				const groupId = nodeState.node.metadata?.groupId;
+				if (!groupId) return;
+
+				const isVisible = treeStore.state.checkedPaths.has(nodeState.path);
+				const currentlyVisible = set.visibleGroups.has(groupId);
+
+				if (isVisible !== currentlyVisible) {
+					setsStore.toggleGroupVisibility(set.id, groupId);
+				}
+			});
+		}
+	});
+
+	// Apply global settings to all sets when sliders change
+	function handleGlobalSectorSizeChange(e: Event) {
+		const value = parseInt((e.target as HTMLInputElement).value);
+		globalSectorSize = value;
+		for (const set of setsStore.sets) {
+			setsStore.updateSetSettings(set.id, { baseSize: value });
+		}
+	}
+
+	function handleGlobalPointSizeChange(e: Event) {
+		const value = parseInt((e.target as HTMLInputElement).value);
+		globalPointSize = value;
+		for (const set of setsStore.sets) {
+			setsStore.updateSetSettings(set.id, { pointSize: value });
+		}
+	}
+
+	function handleGlobalOpacityChange(e: Event) {
+		const value = parseFloat((e.target as HTMLInputElement).value);
+		globalOpacity = value;
+		for (const set of setsStore.sets) {
+			setsStore.updateSetSettings(set.id, { opacity: value });
+		}
+	}
+
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		
+		if (!file) return;
+		
+		importFileName = file.name.replace(/\.csv$/i, '');
+		importError = '';
+
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			try {
+				const content = e.target?.result as string;
+				importResult = setsStore.importFromCsv(content, file.name);
+				showImportModal = true;
+			} catch (err) {
+				importError = err instanceof Error ? err.message : 'Failed to parse CSV';
+				importResult = null;
+			}
+		};
+		reader.onerror = () => {
+			importError = 'Failed to read file';
+			importResult = null;
+		};
+		reader.readAsText(file);
+		input.value = '';
+	}
+
+	function confirmImport() {
+		if (!importResult) return;
+		const newSet = setsStore.createSet(importFileName, importResult);
+		// Auto-expand newly imported set
+		expandedSets = new Set([...expandedSets, newSet.id]);
+		closeModal();
+	}
+
+	function closeModal() {
+		showImportModal = false;
+		importResult = null;
+		importFileName = '';
+		importError = '';
+	}
+
+	function triggerFileInput() {
+		fileInput?.click();
+	}
+
+	// Quick Add functions
+	function parseQuickAddText() {
+		if (!quickAddText.trim()) {
+			quickAddResult = null;
+			return;
+		}
+		
+		// Parse cell names: split by newlines, commas, semicolons, or whitespace
+		const ids = quickAddText
+			.split(/[\n,;\s]+/)
+			.map(s => s.trim())
+			.filter(s => s.length > 0);
+		
+		if (ids.length === 0) {
+			quickAddResult = null;
+			return;
+		}
+		
+		// Create a simple CSV and use existing import logic
+		const csvContent = `id,customGroup\n${ids.map(id => `${id},manual`).join('\n')}`;
+		quickAddResult = setsStore.importFromCsv(csvContent, 'quick-add');
+	}
+	
+	function confirmQuickAdd() {
+		if (!quickAddResult || quickAddResult.cells.length === 0) return;
+		
+		const newSet = setsStore.createSet(quickAddName || 'Quick Selection', quickAddResult);
+		expandedSets = new Set([...expandedSets, newSet.id]);
+		closeQuickAdd();
+	}
+	
+	function closeQuickAdd() {
+		showQuickAdd = false;
+		quickAddText = '';
+		quickAddName = 'Quick Selection';
+		quickAddResult = null;
+	}
+
+	function removeSet(setId: string) {
+		if (confirm('Remove this custom layer set?')) {
+			setsStore.removeSet(setId);
+			expandedSets.delete(setId);
+			expandedSets = new Set(expandedSets);
+		}
+	}
+
+	function toggleExpanded(setId: string) {
+		if (expandedSets.has(setId)) {
+			expandedSets.delete(setId);
+		} else {
+			expandedSets.add(setId);
+		}
+		expandedSets = new Set(expandedSets);
+	}
+
+	function handleColorChange(setId: string, groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		setsStore.setGroupColor(setId, groupId, input.value);
+	}
+
+	function getSetItemCounts(set: CustomCellSet): string {
+		const cellCount = set.cells.filter(c => c.geometry === 'cell').length;
+		const pointCount = set.cells.filter(c => c.geometry === 'point').length;
+		if (cellCount > 0 && pointCount > 0) {
+			return `${cellCount} cells, ${pointCount} points`;
+		} else if (cellCount > 0) {
+			return `${cellCount} cells`;
+		} else {
+			return `${pointCount} points`;
+		}
+	}
+</script>
+
+<MapControl {position} title="Custom Layers" icon="layers" controlWidth="320px">
+	{#snippet actions()}
+		<button
+			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
+			title="Quick Add (paste cell names)"
+			onclick={() => showQuickAdd = true}
+		>
+			<i class="bi bi-pencil-square"></i>
+		</button>
+		<button
+			class="btn btn-sm btn-outline-primary border-0 p-1 px-2"
+			title="Import CSV"
+			onclick={triggerFileInput}
+		>
+			<i class="bi bi-upload"></i>
+		</button>
+	{/snippet}
+
+	{#snippet collapsedActions()}
+		<!-- No actions when collapsed - just click icon to expand -->
+	{/snippet}
+
+	<div class="custom-layers-manager">
+		<!-- Hidden file input -->
+		<input
+			type="file"
+			accept=".csv"
+			class="d-none"
+			bind:this={fileInput}
+			onchange={handleFileSelect}
+		/>
+
+		<!-- Error message -->
+		{#if importError}
+			<div class="alert alert-danger py-1 px-2 mb-2 small">
+				<i class="bi bi-exclamation-triangle me-1"></i>
+				{importError}
+			</div>
+		{/if}
+
+		<!-- Empty state -->
+		{#if setsStore.sets.length === 0}
+			<div class="text-center p-3">
+				<i class="bi bi-layers fs-1 text-muted"></i>
+				<p class="text-muted small mt-2 mb-0">
+					No custom layers loaded.
+				</p>
+				<div class="d-flex gap-2 justify-content-center mt-2">
+					<button 
+						class="btn btn-sm btn-outline-primary"
+						onclick={() => showQuickAdd = true}
+					>
+						<i class="bi bi-pencil-square me-1"></i> Quick Add
+					</button>
+					<button 
+						class="btn btn-sm btn-outline-secondary"
+						onclick={triggerFileInput}
+					>
+						<i class="bi bi-upload me-1"></i> Import CSV
+					</button>
+				</div>
+			</div>
+		{:else}
+			<!-- Global Controls -->
+			<div class="global-controls px-2 py-2 border-bottom">
+				<div class="mb-2">
+					<label class="form-label small mb-1 d-flex justify-content-between">
+						<span><i class="bi bi-broadcast me-1"></i>Sector Size</span>
+						<span class="text-muted">{globalSectorSize}px</span>
+					</label>
+					<input
+						type="range"
+						class="form-range"
+						min="10"
+						max="200"
+						step="5"
+						value={globalSectorSize}
+						oninput={handleGlobalSectorSizeChange}
+					/>
+				</div>
+				<div class="mb-2">
+					<label class="form-label small mb-1 d-flex justify-content-between">
+						<span><i class="bi bi-geo-alt me-1"></i>Point Size</span>
+						<span class="text-muted">{globalPointSize}px</span>
+					</label>
+					<input
+						type="range"
+						class="form-range"
+						min="2"
+						max="30"
+						step="1"
+						value={globalPointSize}
+						oninput={handleGlobalPointSizeChange}
+					/>
+				</div>
+				<div>
+					<label class="form-label small mb-1 d-flex justify-content-between">
+						<span>Opacity</span>
+						<span class="text-muted">{Math.round(globalOpacity * 100)}%</span>
+					</label>
+					<input
+						type="range"
+						class="form-range"
+						min="0.1"
+						max="1"
+						step="0.1"
+						value={globalOpacity}
+						oninput={handleGlobalOpacityChange}
+					/>
+				</div>
+			</div>
+
+			<!-- Sets Accordion -->
+			<div class="sets-accordion">
+				{#each setsStore.sets as set (set.id)}
+					{@const isExpanded = expandedSets.has(set.id)}
+					{@const treeStore = treeStores.get(set.id)}
+					<div class="set-section" class:expanded={isExpanded}>
+						<!-- Set Header -->
+						<div class="set-header d-flex align-items-center justify-content-between px-2 py-2">
+							<div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
+								<button
+									class="btn btn-sm p-0 me-2 expand-btn"
+									onclick={() => toggleExpanded(set.id)}
+									title={isExpanded ? 'Collapse' : 'Expand'}
+								>
+									<i class="bi bi-chevron-{isExpanded ? 'down' : 'right'}"></i>
+								</button>
+								<button
+									class="btn btn-sm p-0 me-2"
+									title={set.visible ? 'Hide' : 'Show'}
+									onclick={() => setsStore.toggleSetVisibility(set.id)}
+								>
+									<i class="bi bi-eye{set.visible ? '-fill text-primary' : '-slash text-muted'}"></i>
+								</button>
+								<div class="set-info text-truncate" onclick={() => toggleExpanded(set.id)} style="cursor: pointer;">
+									<div class="fw-medium small text-truncate">{set.name}</div>
+									<small class="text-muted">{getSetItemCounts(set)} · {set.groups.length} groups</small>
+								</div>
+							</div>
+							<button
+								class="btn btn-sm btn-outline-danger border-0 p-1 ms-2"
+								title="Remove"
+								onclick={() => removeSet(set.id)}
+							>
+								<i class="bi bi-trash"></i>
+							</button>
+						</div>
+
+						<!-- Set Content (TreeView) -->
+						{#if isExpanded && treeStore}
+							<div class="set-content px-2 pb-2">
+								{#if set.cells.length === 0}
+									<div class="text-muted p-2 text-center small">
+										No items in this set.
+									</div>
+								{:else}
+									<TreeView showControls={false} store={treeStore} height="180px">
+										{#snippet children({ node, state })}
+											{#if (!node.children || node.children.length === 0) && node.metadata?.groupId}
+												<div 
+													class="d-flex align-items-center" 
+													role="group" 
+													onclick={(e) => e.stopPropagation()} 
+													onkeydown={(e) => e.stopPropagation()}
+												>
+													<input 
+														type="color" 
+														class="form-control form-control-color form-control-sm border-0 p-0" 
+														style="width: 16px; height: 16px; min-height: 0;"
+														value={node.metadata?.color}
+														oninput={(e) => handleColorChange(set.id, node.metadata?.groupId || '', e)}
+														title="Change color"
+													/>
+												</div>
+											{/if}
+										{/snippet}
+									</TreeView>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</MapControl>
+
+<!-- Import Result Modal -->
+{#if showImportModal && importResult}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header py-2">
+					<h6 class="modal-title">
+						<i class="bi bi-file-earmark-spreadsheet me-2"></i>
+						Import: {importFileName}
+					</h6>
+					<button type="button" class="btn-close" onclick={closeModal}></button>
+				</div>
+				<div class="modal-body">
+					<!-- Import Summary -->
+					<div class="mb-3">
+						<div class="d-flex justify-content-between align-items-center mb-2">
+							<div>
+								{#if importResult.cellCount > 0}
+									<span class="text-success me-2">
+										<i class="bi bi-broadcast me-1"></i>
+										{importResult.cellCount} cells
+									</span>
+								{/if}
+								{#if importResult.pointCount > 0}
+									<span class="text-info">
+										<i class="bi bi-geo-alt me-1"></i>
+										{importResult.pointCount} points
+									</span>
+								{/if}
+							</div>
+							<span class="badge bg-secondary">{importResult.totalRows} rows</span>
+						</div>
+
+						{#if importResult.unmatchedTxIds.length > 0}
+							<div class="text-warning small mb-2">
+								<i class="bi bi-exclamation-triangle me-1"></i>
+								{importResult.unmatchedTxIds.length} IDs not found
+								<button 
+									class="btn btn-link btn-sm p-0 ms-1"
+									type="button"
+									data-bs-toggle="collapse"
+									data-bs-target="#unmatchedList"
+								>
+									(show)
+								</button>
+							</div>
+							<div class="collapse" id="unmatchedList">
+								<div class="small bg-light p-2 rounded" style="max-height: 100px; overflow-y: auto;">
+									{importResult.unmatchedTxIds.slice(0, 20).join(', ')}
+									{#if importResult.unmatchedTxIds.length > 20}
+										<span class="text-muted">... and {importResult.unmatchedTxIds.length - 20} more</span>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Groups found -->
+					<div class="mb-3">
+						<label class="form-label small fw-medium">Groups Found ({importResult.groups.length})</label>
+						<div class="d-flex flex-wrap gap-1">
+							{#each importResult.groups as group}
+								<span class="badge bg-secondary">{group}</span>
+							{/each}
+						</div>
+					</div>
+
+					<!-- Extra columns -->
+					{#if importResult.extraColumns.length > 0}
+						<div class="mb-3">
+							<label class="form-label small fw-medium">Extra Columns (for tooltips)</label>
+							<div class="d-flex flex-wrap gap-1">
+								{#each importResult.extraColumns as col}
+									<span class="badge bg-info">{col}</span>
+								{/each}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Set Name -->
+					<div class="mb-2">
+						<label for="setName" class="form-label small fw-medium">Set Name</label>
+						<input 
+							type="text" 
+							class="form-control form-control-sm" 
+							id="setName"
+							bind:value={importFileName}
+						/>
+					</div>
+				</div>
+				<div class="modal-footer py-2">
+					<button type="button" class="btn btn-secondary btn-sm" onclick={closeModal}>
+						Cancel
+					</button>
+					<button 
+						type="button" 
+						class="btn btn-primary btn-sm"
+						onclick={confirmImport}
+						disabled={importResult.cells.length === 0}
+					>
+						<i class="bi bi-check-lg me-1"></i>
+						Import {importResult.cells.length} cells
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Quick Add Modal -->
+{#if showQuickAdd}
+	<div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content">
+				<div class="modal-header py-2">
+					<h6 class="modal-title">
+						<i class="bi bi-pencil-square me-2"></i>
+						Quick Add Cells
+					</h6>
+					<button type="button" class="btn-close" onclick={closeQuickAdd}></button>
+				</div>
+				<div class="modal-body">
+					<div class="mb-3">
+						<label for="quickAddText" class="form-label small fw-medium">
+							Paste cellName or trxId (one per line, or comma/space separated)
+						</label>
+						<textarea 
+							class="form-control form-control-sm font-monospace" 
+							id="quickAddText"
+							rows="6"
+							bind:value={quickAddText}
+							oninput={parseQuickAddText}
+						></textarea>
+					</div>
+					
+					<!-- Preview -->
+					{#if quickAddResult}
+						<div class="mb-3">
+							<div class="d-flex justify-content-between align-items-center">
+								<div>
+									{#if quickAddResult.cellCount > 0}
+										<span class="text-success">
+											<i class="bi bi-check-circle me-1"></i>
+											{quickAddResult.cellCount} cells found
+										</span>
+									{:else}
+										<span class="text-muted">No cells found</span>
+									{/if}
+								</div>
+								{#if quickAddResult.unmatchedTxIds.length > 0}
+									<span class="text-warning small">
+										<i class="bi bi-exclamation-triangle me-1"></i>
+										{quickAddResult.unmatchedTxIds.length} not found
+									</span>
+								{/if}
+							</div>
+							{#if quickAddResult.unmatchedTxIds.length > 0}
+								<div class="small text-muted mt-1" style="max-height: 60px; overflow-y: auto;">
+									Not found: {quickAddResult.unmatchedTxIds.slice(0, 10).join(', ')}
+									{#if quickAddResult.unmatchedTxIds.length > 10}
+										<span>... +{quickAddResult.unmatchedTxIds.length - 10} more</span>
+									{/if}
+								</div>
+							{/if}
+						</div>
+					{/if}
+					
+					<!-- Set Name -->
+					<div class="mb-2">
+						<label for="quickAddName" class="form-label small fw-medium">Set Name</label>
+						<input 
+							type="text" 
+							class="form-control form-control-sm" 
+							id="quickAddName"
+							bind:value={quickAddName}
+						/>
+					</div>
+				</div>
+				<div class="modal-footer py-2">
+					<button type="button" class="btn btn-secondary btn-sm" onclick={closeQuickAdd}>
+						Cancel
+					</button>
+					<button 
+						type="button" 
+						class="btn btn-primary btn-sm"
+						onclick={confirmQuickAdd}
+						disabled={!quickAddResult || quickAddResult.cells.length === 0}
+					>
+						<i class="bi bi-plus-lg me-1"></i>
+						Add {quickAddResult?.cells.length || 0} cells
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.custom-layers-manager {
+		font-size: 0.875rem;
+	}
+
+	.global-controls {
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.set-section {
+		border-bottom: 1px solid var(--bs-border-color-translucent);
+	}
+
+	.set-section:last-child {
+		border-bottom: none;
+	}
+
+	.set-header {
+		background: transparent;
+		transition: background-color 0.15s ease;
+	}
+
+	.set-header:hover {
+		background: rgba(0, 0, 0, 0.03);
+	}
+
+	.set-section.expanded .set-header {
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.expand-btn {
+		width: 20px;
+		height: 20px;
+		line-height: 1;
+		transition: transform 0.15s ease;
+	}
+
+	.set-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.set-content {
+		background: rgba(0, 0, 0, 0.01);
+	}
+
+	.modal {
+		z-index: 2000;
+	}
+
+	/* Custom form-range styling for sliders */
+	.form-range {
+		height: 1rem;
+	}
+</style>

package/dist/map-v3/features/{cells/custom → custom}/index.d.ts

@@ -12,7 +12,7 @@
  *     CustomCellSetManager,
  *     CustomCellFilterControl,
  *     createCustomCellSetsStore
- *   } from './';
+ *   } from '../cells/custom';
  *
  *   const customSetsStore = createCustomCellSetsStore(cellDataStore, 'my-namespace');
  * </script>

package/dist/map-v3/features/{cells/custom → custom}/index.js

@@ -12,7 +12,7 @@
  *     CustomCellSetManager,
  *     CustomCellFilterControl,
  *     createCustomCellSetsStore
- *   } from './';
+ *   } from '../cells/custom';
  *
  *   const customSetsStore = createCustomCellSetsStore(cellDataStore, 'my-namespace');
  * </script>