mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-30 23:30:04 +00:00
rename "vertical file list" to "file tree"
This commit is contained in:
@@ -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>
|
||||
|
@@ -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) {
|
||||
|
@@ -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) => {
|
||||
|
@@ -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();
|
||||
}
|
||||
}
|
||||
|
@@ -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);
|
||||
|
@@ -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];
|
||||
|
@@ -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'),
|
||||
|
@@ -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.
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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>
|
||||
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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",
|
||||
|
@@ -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}
|
||||
|
Reference in New Issue
Block a user