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

rename "vertical file list" to "file tree"

Browse Source
This commit is contained in:
vcoppe
2024-12-28 15:52:29 +01:00
parent d7aae81c41
commit 7a80e9e104
13 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/src/lib/components/Map.svelte
View File

@@ -28,7 +28,7 @@
easing: () => 1
};
const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } =
const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
settings;
let scaleControl = new mapboxgl.ScaleControl({
unit: $distanceUnits
@@ -202,10 +202,7 @@
}
});
$: if (
$map &&
(!$verticalFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)
) {
$: if ($map && (!$treeFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize)) {
$map.resize();
}
</script>

16
website/src/lib/components/Menu.svelte
View File

@@ -22,7 +22,7 @@
Sun,
Moon,
Layers,
GalleryVertical,
ListTree,
Languages,
Settings,
Info,
@@ -83,7 +83,7 @@
velocityUnits,
temperatureUnits,
elevationProfile,
verticalFileView,
treeFileView,
currentBasemap,
previousBasemap,
currentOverlays,
@@ -243,7 +243,7 @@
{/if}
<Shortcut key="H" ctrl={true} />
</Menubar.Item>
{#if $verticalFileView}
{#if $treeFileView}
{#if $selection.getSelected().some((item) => item instanceof ListFileItem)}
<Menubar.Separator />
<Menubar.Item
@@ -284,7 +284,7 @@
{$_('menu.center')}
<Shortcut key="⏎" ctrl={true} />
</Menubar.Item>
{#if $verticalFileView}
{#if $treeFileView}
<Menubar.Separator />
<Menubar.Item on:click={copySelection} disabled={$selection.size === 0}>
<ClipboardCopy size="16" class="mr-1" />
@@ -327,9 +327,9 @@
{$_('menu.elevation_profile')}
<Shortcut key="P" ctrl={true} />
</Menubar.CheckboxItem>
<Menubar.CheckboxItem bind:checked={$verticalFileView}>
<GalleryVertical size="16" class="mr-1" />
{$_('menu.vertical_file_view')}
<Menubar.CheckboxItem bind:checked={$treeFileView}>
<ListTree size="16" class="mr-1" />
{$_('menu.tree_file_view')}
<Shortcut key="L" ctrl={true} />
</Menubar.CheckboxItem>
<Menubar.Separator />
@@ -567,7 +567,7 @@
$elevationProfile = !$elevationProfile;
e.preventDefault();
} else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
$verticalFileView = !$verticalFileView;
$treeFileView = !$treeFileView;
e.preventDefault();
} else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
if ($allHidden) {

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

@@ -17,9 +17,9 @@
setContext('orientation', orientation);
setContext('recursive', recursive);
const { verticalFileView } = settings;
const { treeFileView } = settings;
verticalFileView.subscribe(($vertical) => {
treeFileView.subscribe(($vertical) => {
if ($vertical) {
selection.update(($selection) => {
$selection.forEach((item) => {

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

@@ -39,19 +39,19 @@
node instanceof GPXFile && item instanceof ListFileItem
? node.metadata.name
: node instanceof Track
? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
? (node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`)
: node instanceof TrackSegment
? `${$_('gpx.segment')} ${(item as ListTrackSegmentItem).segmentIndex + 1}`
: node instanceof Waypoint
? node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`
? (node.name ?? `${$_('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
: node instanceof GPXFile && item instanceof ListWaypointsItem
? $_('gpx.waypoints')
: '';
const { verticalFileView } = settings;
const { treeFileView } = settings;
function openIfSelectedChild() {
if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
collapsible.openNode();
}
}

6
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -89,7 +89,7 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
</svg>`;
}
const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings;
const { directionMarkers, treeFileView, defaultOpacity, defaultWeight } = settings;
export class GPXLayer {
map: mapboxgl.Map;
@@ -271,7 +271,7 @@ export class GPXLayer {
return;
}
if (get(verticalFileView)) {
if (get(treeFileView)) {
if ((e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
} else {
@@ -415,7 +415,7 @@ export class GPXLayer {
}
let item = undefined;
if (get(verticalFileView) && file.getSegments().length > 1) { // Select inner item
if (get(treeFileView) && file.getSegments().length > 1) { // Select inner item
item = file.children[trackIndex].children.length > 1 ? new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex) : new ListTrackItem(this.fileId, trackIndex);
} else {
item = new ListFileItem(this.fileId);

4
website/src/lib/components/toolbar/tools/Waypoint.svelte
View File

@@ -34,11 +34,11 @@
label: ''
};
const { verticalFileView } = settings;
const { treeFileView } = settings;
$: canCreate = $selection.size > 0;
$: if ($verticalFileView && $selection) {
$: if ($treeFileView && $selection) {
selectedWaypoint.update(() => {
if ($selection.size === 1) {
let item = $selection.getSelected()[0];

2
website/src/lib/db.ts
View File

@@ -85,7 +85,7 @@ export const settings = {
elevationProfile: dexieSettingStore('elevationProfile', true),
additionalDatasets: dexieSettingStore<string[]>('additionalDatasets', []),
elevationFill: dexieSettingStore<'slope' | 'surface' | undefined>('elevationFill', undefined),
verticalFileView: dexieSettingStore<boolean>('fileView', false),
treeFileView: dexieSettingStore<boolean>('fileView', false),
minimizeRoutingMenu: dexieSettingStore('minimizeRoutingMenu', false),
routing: dexieSettingStore('routing', true),
routingProfile: dexieSettingStore('routingProfile', 'bike'),

8
website/src/lib/docs/en/files-and-stats.mdx
View File

@@ -37,11 +37,11 @@ You can also navigate through the files using the arrow keys on your keyboard, a
By right-clicking on a file tab, you can access the same actions as in the [edit menu](./menu/edit).
### Vertical layout
### Tree layout
As mentioned in the [view options section](./menu/view), you can switch between a horizontal and a vertical layout for the file list.
The vertical file list is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](./gpx).
Indeed, this layout allows you to inspect the content of the files through collapsible sections.
As mentioned in the [view options section](./menu/view), you can switch to a tree layout for the files list.
This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
You can also apply [edit actions](./menu/edit) and [tools](./toolbar) to internal file items.
Furthermore, you can drag and drop the inner items to reorder them, or move them in the hierarchy or even to another file.

2
website/src/lib/docs/en/getting-started.mdx
View File

@@ -25,7 +25,7 @@ This is where you can access common actions such as opening, closing, and export
At the bottom of the interface, you will find the list of files currently open in the application.
You can click on a file to select it and display its statistics below the list.
In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a vertical layout for advanced file management.
In the [dedicated section](./files-and-stats), we will explain how to select multiple files and switch to a tree layout for advanced file management.
## Toolbar

12
website/src/lib/docs/en/menu/edit.mdx
View File

@@ -10,7 +10,7 @@ title: Edit actions
# { title }
Unlike the file actions, the edit actions can potentially modify the content of the currently selected files.
Moreover, when the vertical layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
Moreover, when the tree layout of the files list is enabled (see [Files and statistics](../files-and-stats)), they can also be applied to [tracks, segments, and points of interest](../gpx).
Therefore, we will refer to the elements that can be modified by these actions as *file items*.
Note that except for the undo and redo actions, the edit actions are also accessible through the context menu (right-click) of the file items.
@@ -37,7 +37,7 @@ Create a new track in the selected file.
<DocsNote>
This action is only available when the vertical layout of the files list is enabled.
This action is only available when the tree layout of the files list is enabled.
Additionally, the selection must be a single file.
</DocsNote>
@@ -48,7 +48,7 @@ Create a new segment in the selected track.
<DocsNote>
This action is only available when the vertical layout of the files list is enabled.
This action is only available when the tree layout of the files list is enabled.
Additionally, the selection must be a single track.
</DocsNote>
@@ -67,7 +67,7 @@ Copy the selected file items to the clipboard.
<DocsNote>
This action is only available when the vertical layout of the files list is enabled.
This action is only available when the tree layout of the files list is enabled.
</DocsNote>
@@ -77,7 +77,7 @@ Cut the selected file items to the clipboard.
<DocsNote>
This action is only available when the vertical layout of the files list is enabled.
This action is only available when the tree layout of the files list is enabled.
</DocsNote>
@@ -87,7 +87,7 @@ Paste the file items from the clipboard to the current hierarchy level if they a
<DocsNote>
This action is only available when the vertical layout of the files list is enabled.
This action is only available when the tree layout of the files list is enabled.
</DocsNote>

9
website/src/lib/docs/en/menu/view.mdx
View File

@@ -3,7 +3,7 @@ title: View options
---
<script lang="ts">
import { ChartArea, GalleryVertical, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
import { ChartArea, ListTree, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
</script>
@@ -15,10 +15,11 @@ This menu provides options to rearrange the interface and the map view.
Hide the elevation profile to make room for the map, or show it to inspect the current selection.
### <GalleryVertical size="16" class="inline-block" style="margin-bottom: 2px" /> Vertical file list
### <ListTree size="16" class="inline-block" style="margin-bottom: 2px" /> File tree
Switch between a vertical and a horizontal layout for the file list.
The [vertical file list](../files-and-stats) is useful when you have many files open, or files with multiple [tracks, segments, or points of interest](../gpx).
Toggle the tree layout for the [file list](../files-and-stats).
This layout is ideal for managing a large number of open files, as it organizes them into a vertical list on the right side of the map.
In addition, the file tree view enables you to inspect the [tracks, segments, and points of interest](../gpx) contained inside the files through collapsible sections.
### <Map size="16" class="inline-block" style="margin-bottom: 2px" /> Switch to previous basemap

2
website/src/locales/en.json
View File

@@ -33,7 +33,7 @@
"select_all": "Select all",
"view": "View",
"elevation_profile": "Elevation profile",
"vertical_file_view": "Vertical file list",
"tree_file_view": "File tree",
"switch_basemap": "Switch to previous basemap",
"toggle_overlays": "Toggle overlays",
"toggle_3d": "Toggle 3D",

8
website/src/routes/[[language]]/app/+page.svelte
View File

@@ -20,7 +20,7 @@
import { _ } from 'svelte-i18n';
const {
verticalFileView,
treeFileView,
elevationProfile,
bottomPanelSize,
rightPanelSize,
@@ -95,12 +95,12 @@
>
<Toolbar />
</div>
<Map class="h-full {$verticalFileView ? '' : 'horizontal'}" />
<Map class="h-full {$treeFileView ? '' : 'horizontal'}" />
<StreetViewControl />
<LayerControl />
<GPXLayers />
<Toaster richColors />
{#if !$verticalFileView}
{#if !$treeFileView}
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
<FileList orientation="horizontal" />
</div>
@@ -129,7 +129,7 @@
{/if}
</div>
</div>
{#if $verticalFileView}
{#if $treeFileView}
<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
<FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" />
{/if}