progress

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

@@ -1,89 +1,93 @@
 <script lang="ts">
-    import {
-        GPXFile,
-        Track,
-        TrackSegment,
-        Waypoint,
-        type AnyGPXTreeElement,
-        type GPXTreeElement,
-    } from 'gpx';
     import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
-    import { type Readable } from 'svelte/store';
     import FileListNodeContent from './FileListNodeContent.svelte';
     import FileListNodeLabel from './FileListNodeLabel.svelte';
     import { getContext } from 'svelte';
-    import {
-        ListFileItem,
-        ListTrackSegmentItem,
-        ListWaypointItem,
-        ListWaypointsItem,
-        type ListItem,
-        type ListTrackItem,
-    } from './file-list';
     import { i18n } from '$lib/i18n.svelte';
     import { settings } from '$lib/logic/settings';
-    import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
-    import { selection } from '$lib/logic/selection';
+    import { engine, type FileState } from '$lib/engine';
+    import {
+        elementId,
+        hasSelectionWithin,
+        isSelected,
+        type FileTreeNode,
+    } from '$lib/selection-helpers';
 
     let {
+        fileState,
         node,
-        item,
     }: {
-        node:
-            | Map<string, Readable<GPXFileWithStatistics | undefined>>
-            | GPXTreeElement<AnyGPXTreeElement>
-            | Waypoint[]
-            | Waypoint;
-        item: ListItem;
+        fileState: FileState;
+        node: FileTreeNode;
     } = $props();
 
     let recursive = getContext<boolean>('recursive');
 
     let collapsible: CollapsibleTreeNode | undefined = $state();
 
-    let label = $derived(
-        node instanceof GPXFile && item instanceof ListFileItem
-            ? node.metadata.name
-            : node instanceof Track
-              ? (node.name ?? `${i18n._('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`)
-              : node instanceof TrackSegment
-                ? `${i18n._('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
-                : node instanceof Waypoint
-                  ? (node.name ??
-                    `${i18n._('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
-                  : node instanceof GPXFile && item instanceof ListWaypointsItem
-                    ? i18n._('gpx.waypoints')
-                    : ''
-    );
+    let label = $derived.by(() => {
+        const { structure } = fileState;
+        switch (node.type) {
+            case 'file':
+                return structure.name;
+            case 'track': {
+                const trackIndex = structure.tracks.findIndex((t) => t.id === node.trackId);
+                return (
+                    structure.tracks[trackIndex]?.name ?? `${i18n._('gpx.track')} ${trackIndex + 1}`
+                );
+            }
+            case 'segment': {
+                const track = structure.tracks.find((t) => t.id === node.trackId);
+                const segmentIndex =
+                    track?.segments.findIndex((s) => s.id === node.segmentId) ?? -1;
+                return `${i18n._('gpx.segment')} ${segmentIndex + 1}`;
+            }
+            case 'waypoints':
+                return i18n._('gpx.waypoints');
+            case 'waypoint': {
+                const waypointIndex = structure.waypoints.findIndex(
+                    (w) => w.id === node.waypointId
+                );
+                return (
+                    structure.waypoints[waypointIndex]?.name ??
+                    `${i18n._('gpx.waypoint')} ${waypointIndex + 1}`
+                );
+            }
+        }
+    });
+
+    // identifies the node in the tree
+    let id = $derived(elementId(node));
 
     const { treeFileView } = settings;
+    const { selection } = engine;
 
     $effect(() => {
-        if (collapsible && $treeFileView && $selection.hasAnyChildren(item, false)) {
+        // open the node when something below it is selected
+        if (
+            collapsible &&
+            $treeFileView &&
+            hasSelectionWithin($selection, node) &&
+            !isSelected($selection, node)
+        ) {
             collapsible.openNode();
         }
     });
 </script>
 
-{#if node instanceof Map}
-    <FileListNodeContent {node} {item} />
-{:else if node instanceof TrackSegment}
-    <FileListNodeLabel {node} {item} {label} />
-{:else if node instanceof Waypoint}
-    <FileListNodeLabel {node} {item} {label} />
+{#if node.type === 'segment' || node.type === 'waypoint'}
+    <FileListNodeLabel {fileState} {node} {label} />
 {:else if recursive}
-    <CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
+    <CollapsibleTreeNode {id} bind:this={collapsible}>
         {#snippet trigger()}
-            <FileListNodeLabel {node} {item} {label} />
+            <FileListNodeLabel {fileState} {node} {label} />
         {/snippet}
         {#snippet content()}
             <div class="ml-4">
-                {#key node}
-                    <FileListNodeContent {node} {item} />
-                {/key}
+                <FileListNodeContent {fileState} {node} />
             </div>
         {/snippet}
     </CollapsibleTreeNode>
 {:else}
-    <FileListNodeLabel {node} {item} {label} />
+    <FileListNodeLabel {fileState} {node} {label} />
 {/if}