add contextmenu actions to edit menu

gpxstudio · Jun 27, 2024 · 804a155 · 804a155
1 parent aad5cf8
commit 804a155
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 27 deletions.
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
@@ -33,7 +33,13 @@
 		View,
 		FilePen,
 		HeartHandshake,
-		PersonStanding
+		PersonStanding,
+		Eye,
+		EyeOff,
+		ClipboardCopy,
+		Scissors,
+		ClipboardPaste,
+		PaintBucket
 	} from 'lucide-svelte';
 
 	import {
@@ -44,9 +50,15 @@
 		createFile,
 		loadFiles,
 		toggleSelectionVisibility,
-		updateSelectionFromKey
+		updateSelectionFromKey,
+		showSelection,
+		hideSelection,
+		anyHidden,
+		editMetadata,
+		editStyle
 	} from '$lib/stores';
 	import {
+		copied,
 		copySelection,
 		cutSelection,
 		pasteSelection,
@@ -65,6 +77,7 @@
 	import { languages } from '$lib/languages';
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
+	import { allowedPastes, ListFileItem, ListTrackItem } from './file-list/FileList';
 
 	const {
 		distanceUnits,
@@ -180,11 +193,75 @@
 						<Shortcut key="Z" ctrl={true} shift={true} />
 					</Menubar.Item>
 					<Menubar.Separator />
+					<Menubar.Item
+						disabled={$selection.size !== 1 ||
+							!$selection
+								.getSelected()
+								.every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)}
+						on:click={() => ($editMetadata = true)}
+					>
+						<Info size="16" class="mr-1" />
+						{$_('menu.metadata.button')}
+					</Menubar.Item>
+					<Menubar.Item
+						disabled={$selection.size === 0 ||
+							!$selection
+								.getSelected()
+								.every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)}
+						on:click={() => ($editStyle = true)}
+					>
+						<PaintBucket size="16" class="mr-1" />
+						{$_('menu.style.button')}
+					</Menubar.Item>
+					<Menubar.Item
+						on:click={() => {
+							if ($anyHidden) {
+								showSelection();
+							} else {
+								hideSelection();
+							}
+						}}
+						disabled={$selection.size == 0}
+					>
+						{#if $anyHidden}
+							<Eye size="16" class="mr-1" />
+							{$_('menu.unhide')}
+						{:else}
+							<EyeOff size="16" class="mr-1" />
+							{$_('menu.hide')}
+						{/if}
+						<Shortcut key="H" ctrl={true} />
+					</Menubar.Item>
+					<Menubar.Separator />
 					<Menubar.Item on:click={selectAll}>
 						<span class="w-4 mr-1"></span>
 						{$_('menu.select_all')}
 						<Shortcut key="A" ctrl={true} />
 					</Menubar.Item>
+					{#if $verticalFileView}
+						<Menubar.Separator />
+						<Menubar.Item on:click={copySelection} disabled={$selection.size === 0}>
+							<ClipboardCopy size="16" class="mr-1" />
+							{$_('menu.copy')}
+							<Shortcut key="C" ctrl={true} />
+						</Menubar.Item>
+						<Menubar.Item on:click={cutSelection} disabled={$selection.size === 0}>
+							<Scissors size="16" class="mr-1" />
+							{$_('menu.cut')}
+							<Shortcut key="X" ctrl={true} />
+						</Menubar.Item>
+						<Menubar.Item
+							disabled={$copied === undefined ||
+								$copied.length === 0 ||
+								($selection.size > 0 &&
+									!allowedPastes[$copied[0].level].includes($selection.getSelected().pop()?.level))}
+							on:click={pasteSelection}
+						>
+							<ClipboardPaste size="16" class="mr-1" />
+							{$_('menu.paste')}
+							<Shortcut key="V" ctrl={true} />
+						</Menubar.Item>
+					{/if}
 					<Menubar.Separator />
 					<Menubar.Item on:click={dbUtils.deleteSelection} disabled={$selection.size == 0}>
 						<Trash2 size="16" class="mr-1" />

diff --git a/website/src/lib/components/file-list/FileListNodeLabel.svelte b/website/src/lib/components/file-list/FileListNodeLabel.svelte
@@ -35,7 +35,15 @@
 	} from './Selection';
 	import { getContext } from 'svelte';
 	import { get } from 'svelte/store';
-	import { gpxLayers, hideSelection, map, showSelection } from '$lib/stores';
+	import {
+		anyHidden,
+		editMetadata,
+		editStyle,
+		gpxLayers,
+		hideSelection,
+		map,
+		showSelection
+	} from '$lib/stores';
 	import {
 		GPXTreeElement,
 		Track,
@@ -54,17 +62,13 @@
 		| Readonly<Waypoint>;
 	export let item: ListItem;
 	export let label: string | undefined;
-	let hidden = false;
 
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
 	const { verticalFileView } = settings;
 
 	$: singleSelection = $selection.size === 1;
 
-	let openEditMetadata: boolean = false;
-	let openEditStyle: boolean = false;
-
 	let nodeColors: string[] = [];
 
 	$: if (node && $map) {
@@ -98,6 +102,15 @@
 			}
 		}
 	}
+
+	let openEditMetadata: boolean = false;
+	let openEditStyle: boolean = false;
+
+	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
+	$: openEditStyle =
+		$editStyle &&
+		$selection.has(item) &&
+		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -108,10 +121,6 @@
 			if (!get(selection).has(item)) {
 				selectItem(item);
 			}
-			let layer = gpxLayers.get(item.getFileId());
-			if (layer) {
-				hidden = layer.hidden;
-			}
 		}
 	}}
 >
@@ -185,25 +194,25 @@
 	</ContextMenu.Trigger>
 	<ContextMenu.Content>
 		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
-			<ContextMenu.Item disabled={!singleSelection} on:click={() => (openEditMetadata = true)}>
+			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
 				<Info size="16" class="mr-1" />
 				{$_('menu.metadata.button')}
 			</ContextMenu.Item>
-			<ContextMenu.Item on:click={() => (openEditStyle = true)}>
+			<ContextMenu.Item on:click={() => ($editStyle = true)}>
 				<PaintBucket size="16" class="mr-1" />
 				{$_('menu.style.button')}
 			</ContextMenu.Item>
 			{#if item instanceof ListFileItem}
 				<ContextMenu.Item
 					on:click={() => {
-						if (hidden) {
+						if ($anyHidden) {
 							showSelection();
 						} else {
 							hideSelection();
 						}
 					}}
 				>
-					{#if hidden}
+					{#if $anyHidden}
 						<Eye size="16" class="mr-1" />
 						{$_('menu.unhide')}
 					{:else}
@@ -252,14 +261,12 @@
 				<ContextMenu.Separator />
 			{/if}
 		{/if}
-		{#if $verticalFileView || item.level !== ListLevel.WAYPOINTS}
-			{#if item.level !== ListLevel.WAYPOINTS}
-				<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
-					<Copy size="16" class="mr-1" />
-					{$_('menu.duplicate')}
-					<Shortcut key="D" ctrl={true} /></ContextMenu.Item
-				>
-			{/if}
+		{#if $verticalFileView}
+			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+				<Copy size="16" class="mr-1" />
+				{$_('menu.duplicate')}
+				<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+			>
 			{#if $verticalFileView}
 				<ContextMenu.Item on:click={copySelection}>
 					<ClipboardCopy size="16" class="mr-1" />

diff --git a/website/src/lib/components/file-list/MetadataDialog.svelte b/website/src/lib/components/file-list/MetadataDialog.svelte
@@ -9,6 +9,7 @@
 	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
 	import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
 	import { _ } from 'svelte-i18n';
+	import { editMetadata } from '$lib/stores';
 
 	export let node:
 		| GPXTreeElement<AnyGPXTreeElement>
@@ -29,6 +30,10 @@
 			: node instanceof Track
 				? node.desc ?? ''
 				: '';
+
+	$: if (!open) {
+		$editMetadata = false;
+	}
 </script>
 
 <Popover.Root bind:open>

diff --git a/website/src/lib/components/file-list/StyleDialog.svelte b/website/src/lib/components/file-list/StyleDialog.svelte
@@ -8,7 +8,7 @@
 	import { Save } from 'lucide-svelte';
 	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
 	import { selection } from './Selection';
-	import { gpxLayers } from '$lib/stores';
+	import { editStyle, gpxLayers } from '$lib/stores';
 	import { _ } from 'svelte-i18n';
 
 	export let item: ListItem;
@@ -89,6 +89,10 @@
 	$: if ($selection && open) {
 		setStyleInputs();
 	}
+
+	$: if (!open) {
+		$editStyle = false;
+	}
 </script>
 
 <Popover.Root bind:open>

diff --git a/website/src/lib/components/toolbar/tools/Scissors.svelte b/website/src/lib/components/toolbar/tools/Scissors.svelte
@@ -22,7 +22,9 @@
 	import { Crop } from 'lucide-svelte';
 	import { dbUtils } from '$lib/db';
 
-	$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
+	$: validSelection =
+		$selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
+		$gpxStatistics.local.points.length > 0;
 
 	let maxSliderValue = 100;
 	let sliderValues = [0, 100];
@@ -82,8 +84,9 @@
 		variant="outline"
 		disabled={!validSelection || !canCrop}
 		on:click={() => dbUtils.cropSelection(sliderValues[0], sliderValues[1])}
-		><Crop size="16" class="mr-1" />{$_('toolbar.scissors.crop')}</Button
 	>
+		<Crop size="16" class="mr-1" />{$_('toolbar.scissors.crop')}
+	</Button>
 	<Separator />
 	<Label class="flex flex-row gap-3 items-center">
 		<span class="shrink-0">

diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts
@@ -446,6 +446,9 @@ export const dbUtils = {
                             let [result, _removed] = newFile.replaceTrackSegments(trackIndex, segmentIndex + 1, segmentIndex, [file.trk[trackIndex].trkseg[segmentIndex].clone()]);
                             newFile = result;
                         }
+                    } else if (level === ListLevel.WAYPOINTS) {
+                        let [result, _removed] = newFile.replaceWaypoints(file.wpt.length, file.wpt.length - 1, file.wpt.map((wpt) => wpt.clone()));
+                        newFile = result;
                     } else if (level === ListLevel.WAYPOINT) {
                         for (let item of items) {
                             let waypointIndex = (item as ListWaypointItem).getWaypointIndex();
@@ -846,7 +849,7 @@ export const dbUtils = {
         applyGlobal((draft) => {
             applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
                 let file = original(draft)?.get(fileId);
-                if (file) {
+                if (file && (level === ListLevel.FILE || level === ListLevel.TRACK)) {
                     let newFile = file;
                     if (level === ListLevel.FILE) {
                         newFile = file.setStyle(style);

diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts
@@ -344,6 +344,15 @@ export function exportFile(file: GPXFile) {
     URL.revokeObjectURL(url);
 }
 
+export const anyHidden = writable(false);
+function updateAnyHidden() {
+    anyHidden.set(get(selection).getSelected().some((item) => {
+        let layer = gpxLayers.get(item.getFileId());
+        return layer && layer.hidden;
+    }));
+}
+selection.subscribe(updateAnyHidden);
+
 export function toggleSelectionVisibility() {
     let files = new Set<string>();
     get(selection).forEach((item) => {
@@ -355,6 +364,7 @@ export function toggleSelectionVisibility() {
             layer.toggleVisibility();
         }
     });
+    updateAnyHidden();
 }
 
 export function hideSelection() {
@@ -368,6 +378,7 @@ export function hideSelection() {
             layer.toggleVisibility();
         }
     });
+    anyHidden.set(true);
 }
 
 export function showSelection() {
@@ -381,8 +392,12 @@ export function showSelection() {
             layer.toggleVisibility();
         }
     });
+    anyHidden.set(false);
 }
 
+export const editMetadata = writable(false);
+export const editStyle = writable(false);
+
 let stravaCookies: any = null;
 function refreshStravaCookies() {
     /*