steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

vertical and horizontal file list with same component

Browse Source
This commit is contained in:
vcoppe
2024-05-21 17:47:08 +02:00
parent 44b270e2c2
commit d50fdf20a7
7 changed files with 118 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
website/src/lib/components/App.svelte
View File

@@ -19,13 +19,16 @@
<LayerControl />
<GPXLayers />
<Toaster richColors />
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
<FileList orientation="horizontal" class="pointer-events-auto" />
</div>
</div>
<div class="h-48 flex flex-row gap-2 overflow-hidden">
<GPXStatistics />
<ElevationProfile />
</div>
</div>
<FileList />
<FileList orientation="vertical" recursive={true} class="w-60" />
</div>
<style lang="postcss">

1
website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
View File

@@ -28,7 +28,6 @@
class="w-full flex flex-row {side === 'right'
? 'justify-between'
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
on:click
>
{#if side === 'left'}
{#if $open[id]}

13
website/src/lib/components/file-list/FileList.svelte
View File

@@ -6,13 +6,22 @@
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
export let orientation: 'vertical' | 'horizontal';
export let recursive = false;
export let selected = writable(new Set<string>());
setContext('orientation', orientation);
setContext('recursive', recursive);
setContext('selected', selected);
</script>
<ScrollArea class="w-fit p-1 pr-4 border">
<div class="w-60 flex flex-col">
<ScrollArea
class={orientation === 'vertical' ? 'p-1 pr-3 border-l' : 'h-10 px-1'}
{orientation}
scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
scrollbarYClasses={orientation === 'vertical' ? '' : ''}
>
<div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}">
<FileListNode node={$fileObservers} id="root" />
</div>
</ScrollArea>

33
website/src/lib/components/file-list/FileListNode.svelte
View File

@@ -4,8 +4,8 @@
import type { GPXFileWithStatistics } from '$lib/db';
import type { Readable } from 'svelte/store';
import FileListNodeContent from './FileListNodeContent.svelte';
import { createEventDispatcher } from 'svelte';
import FileListNodeLabel from './FileListNodeLabel.svelte';
import { getContext } from 'svelte';
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
@@ -14,30 +14,27 @@
export let id: string;
export let index: number = 0;
const dispatch = createEventDispatcher();
let recursive = getContext<boolean>('recursive');
function forwardId() {
dispatch('click', { id });
}
let label =
node instanceof GPXFile
? node.metadata.name
: node instanceof Track
? node.name ?? `Track ${index + 1}`
: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
? 'Waypoints'
: '';
</script>
{#if node instanceof Map}
<FileListNodeContent {node} {id} />
{:else}
<CollapsibleTreeNode {id} on:click={forwardId}>
<FileListNodeLabel
{id}
label={node instanceof GPXFile
? node.metadata.name
: node instanceof Track
? node.name ?? `Track ${index + 1}`
: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
? 'Waypoints'
: ''}
slot="trigger"
/>
{:else if recursive}
<CollapsibleTreeNode {id}>
<FileListNodeLabel {id} {label} slot="trigger" />
<div slot="content">
<FileListNodeContent {node} {id} />
</div>
</CollapsibleTreeNode>
{:else}
<FileListNodeLabel {id} {label} />
{/if}

57
website/src/lib/components/file-list/FileListNodeContent.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import { Button } from '$lib/components/ui/button';
import { getContext, onDestroy, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
import type { GPXFileWithStatistics } from '$lib/db';
@@ -36,6 +35,7 @@
};
let sortable: Sortable;
let orientation = getContext<'vertical' | 'horizontal'>('orientation');
let selected = getContext<Writable<Set<string>>>('selected');
function onSelectChange() {
@@ -65,10 +65,6 @@
});
});
function handleClick(id: string) {
//console.log('handle click for', id);
}
const unsubscribe = selected.subscribe(($selected) => {
Object.entries(items).forEach(([id, item]) => {
if ($selected.has(id) && !item.classList.contains('sortable-selected')) {
@@ -96,61 +92,43 @@
}
</script>
<div bind:this={container} class="sortable flex flex-col">
<div
bind:this={container}
class="sortable {orientation} flex {orientation === 'vertical' ? 'flex-col' : 'flex-row gap-1'}"
>
{#if node instanceof Map}
{#each node as [fileId, file]}
<div bind:this={items[fileId]}>
<FileListNodeStore {file} on:click={(e) => handleClick(e.detail.id)} />
<FileListNodeStore {file} />
</div>
{/each}
{:else if node instanceof GPXFile}
{#if waypointRoot}
{#if node.wpt.length > 0}
<div bind:this={items[`${id}-wpt`]}>
<FileListNode
node={node.wpt}
id={`${id}-wpt`}
on:click={(e) => handleClick(e.detail.id)}
/>
<FileListNode node={node.wpt} id={`${id}-wpt`} />
</div>
{/if}
{:else}
{#each node.children as child, i}
<div bind:this={items[getChildId(i)]}>
<FileListNode
node={child}
id={getChildId(i)}
index={i}
on:click={(e) => handleClick(e.detail.id)}
/>
<FileListNode node={child} id={getChildId(i)} index={i} />
</div>
{/each}
{/if}
{:else if node instanceof Track}
{#each node.children as child, i}
<div bind:this={items[getChildId(i)]}>
<div bind:this={items[getChildId(i)]} class="ml-1">
<div>
<Button
variant="ghost"
class="p-0 px-1 h-fit w-full"
on:click={() => handleClick(getChildId(i))}
>
<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
</Button>
<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
</div>
</div>
{/each}
{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
{#each node as wpt, i}
<div bind:this={items[getChildId(i)]}>
<div bind:this={items[getChildId(i)]} class="ml-1">
<div>
<Button
variant="ghost"
class="p-0 px-1 h-fit w-full"
on:click={() => handleClick(getChildId(i))}
>
<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
</Button>
<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
</div>
</div>
{/each}
@@ -170,7 +148,16 @@
@apply leading-none;
}
div :global(.sortable-selected) {
.vertical :global(.sortable-selected) {
@apply bg-accent;
}
.horizontal :global(button) {
@apply bg-accent;
@apply hover:bg-background;
}
.horizontal :global(.sortable-selected button) {
@apply bg-background;
}
</style>

80
website/src/lib/components/file-list/FileListNodeLabel.svelte
View File

@@ -1,4 +1,12 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as ContextMenu from '$lib/components/ui/context-menu';
import Shortcut from '$lib/components/Shortcut.svelte';
import { dbUtils } from '$lib/db';
import { Copy, Trash2 } from 'lucide-svelte';
import { _ } from 'svelte-i18n';
import { getContext } from 'svelte';
import { type Writable } from 'svelte/store';
@@ -6,30 +14,56 @@
export let label: string | undefined;
let selected = getContext<Writable<Set<string>>>('selected');
let orientation = getContext<'vertical' | 'horizontal'>('orientation');
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<span
class="w-full text-left truncate py-1"
on:click={(e) => {
e.stopPropagation(); // Avoid toggling the collapsible element
}}
on:contextmenu={(e) => {
if (e.ctrlKey) {
// Add to selection instead of opening context menu
e.preventDefault();
e.stopPropagation();
selected.update((value) => {
if (value.has(id)) {
value.delete(id);
} else {
value.add(id);
}
return value;
});
}
}}
>
{label}
</span>
<ContextMenu.Root>
<ContextMenu.Trigger class="grow truncate">
<Button
variant="ghost"
class="w-full p-0 px-1 border-none focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
'vertical'
? 'h-fit'
: 'h-9 px-1.5 shadow-md'}"
>
<span
class="w-full text-left truncate py-1"
on:click={(e) => {
e.stopPropagation(); // Avoid toggling the collapsible element
}}
on:contextmenu={(e) => {
if (e.ctrlKey) {
// Add to selection instead of opening context menu
e.preventDefault();
e.stopPropagation();
selected.update((value) => {
if (value.has(id)) {
value.delete(id);
} else {
value.add(id);
}
return value;
});
}
}}
>
{label}
</span>
</Button>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
<Copy size="16" class="mr-1" />
{$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} /></ContextMenu.Item
>
<ContextMenu.Separator />
<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
><Trash2 size="16" class="mr-1" />
{$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item
>
</ContextMenu.Content>
</ContextMenu.Root>

18
website/src/lib/components/file-list/FileListNodeStore.svelte
View File

@@ -3,20 +3,20 @@
import FileListNode from '$lib/components/file-list/FileListNode.svelte';
import type { GPXFileWithStatistics } from '$lib/db';
import { createEventDispatcher } from 'svelte';
import { getContext } from 'svelte';
import type { Readable } from 'svelte/store';
export let file: Readable<GPXFileWithStatistics | undefined>;
const dispatch = createEventDispatcher();
function forwardId() {
dispatch('click', { id: $file?.file._data.id });
}
let recursive = getContext<boolean>('recursive');
</script>
{#if $file}
<CollapsibleTree side="left" margin={4} defaultState="closed">
<FileListNode node={$file.file} id={$file.file._data.id} on:click={forwardId} />
</CollapsibleTree>
{#if recursive}
<CollapsibleTree side="left" margin={4} defaultState="closed">
<FileListNode node={$file.file} id={$file.file._data.id} />
</CollapsibleTree>
{:else}
<FileListNode node={$file.file} id={$file.file._data.id} />
{/if}
{/if}