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

sortable file hierarchy progress

Browse Source
This commit is contained in:
vcoppe
2024-05-17 15:02:45 +02:00
parent 4520c929e2
commit 60f3896b8b
7 changed files with 139 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,6 @@
<Map class="h-full" />
<LayerControl />
<GPXLayers />
<FileList />
<Toaster richColors />
</div>
<div class="h-48 flex flex-row gap-2 overflow-hidden">

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

@@ -28,6 +28,7 @@
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]}

2
website/src/lib/components/collapsible-tree/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as CollapsibleTree } from './CollapsibleTree.svelte';
export { default as CollapsibleTreeNode } from './CollapsibleTreeNode.svelte';

8
website/src/lib/components/file-list/FileList2.svelte
View File

@@ -1,14 +1,12 @@
<script lang="ts">
import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import FileListItem from '$lib/components/file-list/FileListItem.svelte';
import FileListNode from './FileListNode.svelte';
import { fileObservers } from '$lib/db';
</script>
<ScrollArea class="w-fit p-1 pr-4">
<ScrollArea class="w-fit p-1 pr-4 border">
<div class="w-60 flex flex-col gap-1">
{#each Array.from($fileObservers.values()) as file}
<FileListItem {file} />
{/each}
<FileListNode node={$fileObservers} id="root" />
</div>
</ScrollArea>

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

@@ -1,45 +1,40 @@
<script lang="ts">
import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
import { Button } from '$lib/components/ui/button';
import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
import type { GPXFileWithStatistics } from '$lib/db';
import type { Readable } from 'svelte/store';
import FileListNodeContent from './FileListNodeContent.svelte';
import { createEventDispatcher } from 'svelte';
export let node: GPXTreeElement<AnyGPXTreeElement>;
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
export let id: string;
export let index: number = 0;
const dispatch = createEventDispatcher();
function forwardId() {
dispatch('click', { id });
}
</script>
{#if node instanceof GPXFile}
<CollapsibleTreeNode {id}>
<span slot="trigger" class="truncate">{node.metadata.name}</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.children as child, i}
<svelte:self node={child} id={`${id}-track-${i}`} index={i} />
{/each}
{#if node.wpt.length > 0}
<CollapsibleTreeNode id={`${id}-wpt`}>
<span slot="trigger">Waypoints</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.wpt as wpt, i}
<Button variant="ghost" class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
>
{/each}
</div>
</CollapsibleTreeNode>
{#if node instanceof Map}
<FileListNodeContent {node} {id} />
{:else}
<CollapsibleTreeNode {id} on:click={forwardId}>
<span slot="trigger" class="truncate">
{#if node instanceof GPXFile}
{node.metadata.name}
{:else if node instanceof Track}
{node.name ?? `Track ${index + 1}`}
{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
Waypoints
{/if}
</span>
<div slot="content">
<FileListNodeContent {node} {id} />
</div>
</CollapsibleTreeNode>
{:else if node instanceof Track}
<CollapsibleTreeNode {id}>
<span slot="trigger" class="truncate">{node.name ?? `Track ${index + 1}`}</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.children as child, i}
<svelte:self node={child} id={`${id}-segment-${i}`} index={i} />
{/each}
</div>
</CollapsibleTreeNode>
{:else if node instanceof TrackSegment}
<Button variant="ghost" class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
>{`Segment ${index + 1}`}</Button
>
{/if}

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

@@ -0,0 +1,95 @@
<script lang="ts">
import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import { Button } from '$lib/components/ui/button';
import { onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
import type { GPXFileWithStatistics } from '$lib/db';
import type { Readable } from 'svelte/store';
import FileListNodeStore from './FileListNodeStore.svelte';
import FileListNode from './FileListNode.svelte';
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
export let id: string;
let container: HTMLElement;
let sortableLevel =
node instanceof Map
? 'file'
: node instanceof GPXFile
? 'track'
: node instanceof Track
? 'segment'
: 'waypoint';
let sortable: Sortable;
onMount(() => {
sortable = Sortable.create(container, {
group: sortableLevel,
forceAutoScrollFallback: true,
multiDrag: true,
multiDragKey: 'Meta',
selectedClass: 'sortable-selected',
avoidImplicitDeselect: true
});
});
function handleClick(id: string) {
console.log('handle click for', id);
}
</script>
<div bind:this={container} class="flex flex-col gap-0.5">
{#if node instanceof Map}
{#each Array.from(node.values()) as file}
<div>
<FileListNodeStore {file} on:click={(e) => handleClick(e.detail.id)} />
</div>
{/each}
{:else if node instanceof GPXFile}
{#each node.children as child, i}
<div>
<FileListNode
node={child}
id={`${id}-track-${i}`}
index={i}
on:click={(e) => handleClick(e.detail.id)}
/>
</div>
{/each}
{#if node.wpt.length > 0}
<div>
<FileListNode node={node.wpt} id={`${id}-wpt`} on:click={(e) => handleClick(e.detail.id)} />
</div>
{/if}
{:else if node instanceof Track}
{#each node.children as child, i}
<div>
<Button
variant="ghost"
class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
on:click={() => handleClick(`${id}-seg-${i + 1}`)}>{`Segment ${i + 1}`}</Button
>
</div>
{/each}
{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
{#each node as wpt, i}
<div>
<Button
variant="ghost"
class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
on:click={() => handleClick(`${id}-${i + 1}`)}
><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
>
</div>
{/each}
{/if}
</div>
<style lang="postcss">
div :global(.sortable-selected) {
@apply bg-accent;
}
</style>

9
website/src/lib/components/file-list/FileListItem.svelte → website/src/lib/components/file-list/FileListNodeStore.svelte
View File

@@ -3,13 +3,20 @@
import FileListNode from '$lib/components/file-list/FileListNode.svelte';
import type { GPXFileWithStatistics } from '$lib/db';
import { createEventDispatcher } 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 });
}
</script>
{#if $file}
<CollapsibleTree side="left" margin={4} defaultState="closed">
<FileListNode node={$file.file} id={$file.file._data.id} />
<FileListNode node={$file.file} id={$file.file._data.id} on:click={forwardId} />
</CollapsibleTree>
{/if}