hide file

website/src/lib/components/Menu.svelte

@@ -34,7 +34,8 @@
 		exportSelectedFiles,
 		triggerFileInput,
 		createFile,
-		loadFiles
+		loadFiles,
+		toggleSelectionVisibility
 	} from '$lib/stores';
 	import { selectAll, selection } from '$lib/components/file-list/Selection';
 	import { derived } from 'svelte/store';
@@ -337,6 +338,9 @@
 		} else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
 			$verticalFileView = !$verticalFileView;
 			e.preventDefault();
+		} else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
+			toggleSelectionVisibility();
+			e.preventDefault();
 		} else if (e.key === 'F1') {
 			switchBasemaps();
 			e.preventDefault();

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -8,7 +8,18 @@
 	import * as Popover from '$lib/components/ui/popover';
 	import Shortcut from '$lib/components/Shortcut.svelte';
 	import { dbUtils, getFile, settings } from '$lib/db';
-	import { Copy, Info, MapPin, PaintBucket, Plus, Save, Trash2, Waypoints } from 'lucide-svelte';
+	import {
+		Copy,
+		Info,
+		MapPin,
+		PaintBucket,
+		Plus,
+		Save,
+		Trash2,
+		Waypoints,
+		Eye,
+		EyeOff
+	} from 'lucide-svelte';
 	import {
 		ListFileItem,
 		ListLevel,
@@ -19,7 +30,7 @@
 	import { selectItem, selection } from './Selection';
 	import { getContext } from 'svelte';
 	import { get } from 'svelte/store';
-	import { gpxLayers, map } from '$lib/stores';
+	import { gpxLayers, map, toggleSelectionVisibility } from '$lib/stores';
 	import {
 		GPXTreeElement,
 		Track,
@@ -37,6 +48,7 @@
 	export let item: ListItem;
 	export let label: string | undefined;
 	let nodeColors: string[] = [];
+	let hidden = false;
 
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
@@ -169,9 +181,15 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <ContextMenu.Root
 	onOpenChange={(open) => {
-		if (open && !get(selection).has(item)) {
+		if (open) {
+			if (!get(selection).has(item)) {
 				selectItem(item);
 			}
+			let layer = gpxLayers.get(item.getFileId());
+			if (layer) {
+				hidden = layer.hidden;
+			}
+		}
 	}}
 >
 	<ContextMenu.Trigger class="grow truncate">
@@ -347,6 +365,18 @@
 				<PaintBucket size="16" class="mr-1" />
 				{$_('menu.style.button')}
 			</ContextMenu.Item>
+			{#if item instanceof ListFileItem}
+				<ContextMenu.Item on:click={toggleSelectionVisibility}>
+					{#if hidden}
+						<Eye size="16" class="mr-1" />
+						{$_('menu.unhide')}
+					{:else}
+						<EyeOff size="16" class="mr-1" />
+						{$_('menu.hide')}
+					{/if}
+					<Shortcut key="H" ctrl={true} />
+				</ContextMenu.Item>
+			{/if}
 			<ContextMenu.Separator />
 		{/if}
 		{#if $verticalFileView}
@@ -394,10 +424,10 @@
 			>
 			<ContextMenu.Separator />
 		{/if}
-		<ContextMenu.Item on:click={dbUtils.deleteSelection}
+		<ContextMenu.Item on:click={dbUtils.deleteSelection}>
-			><Trash2 size="16" class="mr-1" />
+			<Trash2 size="16" class="mr-1" />
 			{$_('menu.delete')}
-			<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item
+			<Shortcut key="⌫" ctrl={true} />
-		>
+		</ContextMenu.Item>
 	</ContextMenu.Content>
 </ContextMenu.Root>

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -50,6 +50,7 @@ export class GPXLayer {
     fileId: string;
     file: Readable<GPXFileWithStatistics | undefined>;
     layerColor: string;
+    hidden: boolean = false;
     markers: mapboxgl.Marker[] = [];
     selected: boolean = false;
     draggable: boolean;
@@ -362,6 +363,17 @@ export class GPXLayer {
         }
     }
 
+    toggleVisibility() {
+        this.hidden = !this.hidden;
+        if (this.hidden) {
+            this.map.setLayoutProperty(this.fileId, 'visibility', 'none');
+            this.markers.forEach(marker => marker.remove());
+        } else {
+            this.map.setLayoutProperty(this.fileId, 'visibility', 'visible');
+            this.markers.forEach(marker => marker.addTo(this.map));
+        }
+    }
+
     getGeoJSON(): GeoJSON.FeatureCollection {
         let file = get(this.file)?.file;
         if (!file) {

website/src/lib/stores.ts

@@ -255,6 +255,19 @@ export function exportFile(file: GPXFile) {
     URL.revokeObjectURL(url);
 }
 
+export function toggleSelectionVisibility() {
+    let files = new Set<string>();
+    get(selection).forEach((item) => {
+        files.add(item.getFileId());
+    });
+    files.forEach((fileId) => {
+        let layer = gpxLayers.get(fileId);
+        if (layer) {
+            layer.toggleVisibility();
+        }
+    });
+}
+
 let stravaCookies: any = null;
 function refreshStravaCookies() {
     /*

website/src/locales/en.json

@@ -52,7 +52,9 @@
             "color": "Color",
             "opacity": "Opacity",
             "weight": "Weight"
-        }
+        },
+        "hide": "Hide",
+        "unhide": "Unhide"
     },
     "toolbar": {
         "routing": {