steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-03 01:02:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic file operations

Browse Source
This commit is contained in:
vcoppe
2024-04-18 15:30:19 +02:00
parent d800ff5540
commit 78258454be
7 changed files with 218 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
website/src/lib/components/FileList.svelte
View File

@@ -1,16 +1,30 @@
<script lang="ts">
import { files } from '$lib/stores';
import { files, selectedFiles, addSelectFile, selectFile } from '$lib/stores';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { Button } from '$lib/components/ui/button';
import { Label } from '$lib/components/ui/label';
</script>
<ScrollArea class="w-full h-full">
<div class="flex flex-col">
{#each $files as file}
<Button variant="outline" class="w-full">
{file.metadata.name}
</Button>
{/each}
</div>
</ScrollArea>
<div class="flex flex-col h-full w-full">
<Label class="w-full">Files</Label>
<ScrollArea class="w-full h-full">
<div class="flex flex-col">
{#each $files as file}
<Button
variant={$selectedFiles.has(file) ? 'outline' : 'secondary'}
class="w-full {$selectedFiles.has(file) ? 'hover:bg-background' : 'hover:bg-secondary'}"
on:click={(e) => {
if (e.shiftKey) {
addSelectFile(file);
} else {
selectFile(file);
}
}}
>
{file.metadata.name}
</Button>
{/each}
</div>
</ScrollArea>
</div>

49
website/src/lib/components/GPX.svelte
View File

@@ -32,17 +32,42 @@
colorCount[color]++;
return color;
}
function decrementColor(color: string) {
colorCount[color]--;
}
</script>
<script lang="ts">
import { GPXFile } from 'gpx';
import { map } from '$lib/stores';
import { map, selectedFiles, addSelectFile, selectFile } from '$lib/stores';
import { onDestroy } from 'svelte';
export let file: GPXFile;
let layerId = getLayerId();
let layerColor = getColor();
function selectOnClick(e: any) {
if (e.originalEvent.shiftKey) {
addSelectFile(file);
} else {
selectFile(file);
}
}
function toPointerCursor() {
if ($map) {
$map.getCanvas().style.cursor = 'pointer';
}
}
function toDefaultCursor() {
if ($map) {
$map.getCanvas().style.cursor = '';
}
}
function addGPXLayer() {
if ($map) {
if (!$map.getSource(layerId)) {
@@ -80,6 +105,10 @@
'line-opacity': ['get', 'opacity']
}
});
$map.on('click', layerId, selectOnClick);
$map.on('mouseenter', layerId, toPointerCursor);
$map.on('mouseleave', layerId, toDefaultCursor);
}
}
}
@@ -91,4 +120,22 @@
addGPXLayer();
});
}
$: if ($selectedFiles.has(file)) {
if ($map) {
$map.moveLayer(layerId);
}
}
onDestroy(() => {
if ($map) {
$map.off('click', layerId, selectOnClick);
$map.off('mouseenter', layerId, toPointerCursor);
$map.off('mouseleave', layerId, toDefaultCursor);
$map.removeLayer(layerId);
$map.removeSource(layerId);
}
decrementColor(layerColor);
});
</script>

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

@@ -15,7 +15,16 @@
import Fa from 'svelte-fa';
import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
import { triggerFileInput } from '$lib/stores';
import {
files,
selectedFiles,
duplicateSelectedFiles,
exportAllFiles,
exportSelectedFiles,
removeAllFiles,
removeSelectedFiles,
triggerFileInput
} from '$lib/stores';
let distanceUnits = 'metric';
let velocityUnits = 'speed';
@@ -45,14 +54,14 @@
Load from Google Drive...</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item>
<Menubar.Item on:click={duplicateSelectedFiles} disabled={$selectedFiles.size == 0}>
<Copy size="16" class="mr-1" /> Duplicate <Menubar.Shortcut>⌘D</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>
<Menubar.Item on:click={exportSelectedFiles} disabled={$selectedFiles.size == 0}>
<Download size="16" class="mr-1" /> Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>
<Menubar.Item on:click={exportAllFiles} disabled={$files.length == 0}>
<Download size="16" class="mr-1" /> Export all... <Menubar.Shortcut
>⇧⌘S</Menubar.Shortcut
>
@@ -69,12 +78,16 @@
<Redo2 size="16" class="mr-1" /> Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item
><Trash2 size="16" class="mr-1" /> Delete <Menubar.Shortcut>⌘⌫</Menubar.Shortcut
<Menubar.Item on:click={removeSelectedFiles} disabled={$selectedFiles.size == 0}>
<Trash2 size="16" class="mr-1" /> Delete <Menubar.Shortcut>⌘⌫</Menubar.Shortcut
></Menubar.Item
>
<Menubar.Item class="text-destructive data-[highlighted]:text-destructive"
><Trash2 size="16" class="mr-1" /> Delete all<Menubar.Shortcut>⇧⌘⌫</Menubar.Shortcut
<Menubar.Item
class="text-destructive data-[highlighted]:text-destructive"
on:click={removeAllFiles}
disabled={$files.length == 0}
>
<Trash2 size="16" class="mr-1" /> Delete all<Menubar.Shortcut>⇧⌘⌫</Menubar.Shortcut
></Menubar.Item
>
</Menubar.Content>
@@ -134,6 +147,34 @@
</div>
</div>
<svelte:window
on:keydown={(e) => {
e.stopImmediatePropagation();
if (e.key === 'o' && (e.metaKey || e.ctrlKey)) {
triggerFileInput();
e.preventDefault();
} else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
duplicateSelectedFiles();
e.preventDefault();
} else if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) {
exportAllFiles();
} else {
exportSelectedFiles();
}
e.preventDefault();
} else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) {
console.log('removeAllFiles');
removeAllFiles();
} else {
removeSelectedFiles();
}
e.preventDefault();
}
}}
/>
<style lang="postcss">
div :global(button) {
@apply hover:bg-accent;

11
website/src/lib/components/ToolbarItem.svelte
View File

@@ -1,11 +1,18 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
import { selectedFiles } from '$lib/stores';
</script>
<Tooltip.Root openDelay="300">
<Tooltip.Root openDelay={300}>
<Tooltip.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="h-fit px-1 py-1.5">
<Button
builders={[builder]}
variant="ghost"
class="h-fit px-1 py-1.5"
disabled={$selectedFiles.size == 0}
>
<slot name="icon" />
</Button>
</Tooltip.Trigger>

12
website/src/lib/components/custom-control/CustomControl.svelte
View File

@@ -9,11 +9,13 @@
$: if ($map && container) {
$map.on('load', () => {
if (position.includes('right')) container.classList.add('float-right');
else container.classList.add('float-left');
container.classList.remove('hidden');
let control = new CustomControl(container);
$map.addControl(control, position);
if ($map && container) {
if (position.includes('right')) container.classList.add('float-right');
else container.classList.add('float-left');
container.classList.remove('hidden');
let control = new CustomControl(container);
$map.addControl(control, position);
}
});
}
</script>