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

dexie progress

Browse Source
This commit is contained in:
vcoppe
2024-05-02 19:51:08 +02:00
parent 16c94eb973
commit cd919258ad
13 changed files with 277 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { filestore, fileOrder, selectedFiles, selectFiles } from '$lib/stores';
import { fileOrder, selectedFiles, selectFiles } from '$lib/stores';
import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import Sortable from 'sortablejs/Sortable';
@@ -7,6 +7,7 @@
import { afterUpdate, onMount } from 'svelte';
import { get } from 'svelte/store';
import FileListItem from './FileListItem.svelte';
import { fileObservers } from '$lib/db';
let container: HTMLDivElement;
let buttons: { [id: string]: HTMLElement } = {};
@@ -29,8 +30,8 @@
function selectAllFiles() {
selectedFiles.update((selectedFiles) => {
get(filestore).forEach((file) => {
selectedFiles.add(file._data.id);
get(fileObservers).forEach((_, id) => {
selectedFiles.add(id);
});
return selectedFiles;
});
@@ -115,7 +116,7 @@
afterUpdate(() => {
updateFileOrder();
Object.keys(buttons).forEach((fileId) => {
if (!get(filestore).find((file) => file._data.id === fileId)) {
if (!get(fileObservers).has(fileId)) {
delete buttons[fileId];
}
});
@@ -125,15 +126,17 @@
<div class="h-10 -translate-y-10 w-full pointer-events-none">
<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
<div bind:this={container} class="flex flex-row gap-1">
{#each $filestore as file}
<div
bind:this={buttons[file._data.id]}
data-id={file._data.id}
class="pointer-events-auto first:ml-1 last:mr-1 mb-1 bg-transparent"
>
<FileListItem file={filestore.getFileStore(file._data.id)} />
</div>
{/each}
{#if $fileObservers}
{#each $fileObservers.values() as file}
<div
bind:this={buttons[get(file)._data.id]}
data-id={get(file)._data.id}
class="pointer-events-auto first:ml-1 last:mr-1 mb-1 bg-transparent"
>
<FileListItem {file} />
</div>
{/each}
{/if}
</div>
</ScrollArea>
</div>

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

@@ -4,14 +4,15 @@
import Shortcut from './Shortcut.svelte';
import { Copy, Trash2 } from 'lucide-svelte';
import { get, type Writable } from 'svelte/store';
import { filestore, selectedFiles, selectFiles } from '$lib/stores';
import { get, type Readable, type Writable } from 'svelte/store';
import { selectedFiles, selectFiles } from '$lib/stores';
import { _ } from 'svelte-i18n';
import type { GPXFile } from 'gpx';
import type { FreezedObject } from 'structurajs';
import { dbUtils } from '$lib/db';
export let file: Writable<FreezedObject<GPXFile>> | undefined;
export let file: Readable<FreezedObject<GPXFile>> | undefined;
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -29,13 +30,13 @@
</Button>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item on:click={filestore.duplicateSelectedFiles}>
<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
<Copy size="16" class="mr-1" />
{$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} /></ContextMenu.Item
>
<ContextMenu.Separator />
<ContextMenu.Item on:click={filestore.deleteSelectedFiles}
<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
><Trash2 size="16" class="mr-1" />
{$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item

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

@@ -6,7 +6,6 @@
import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte';
import {
filestore,
selectedFiles,
exportAllFiles,
exportSelectedFiles,
@@ -20,6 +19,7 @@
import { _ } from 'svelte-i18n';
import { derived, get } from 'svelte/store';
import { canUndo, dbUtils, fileObservers, redo, undo } from '$lib/db';
let showDistanceMarkers = false;
let showDirectionMarkers = false;
@@ -40,9 +40,8 @@
}
}
let undoRedo = filestore.undoRedo;
let undoDisabled = derived(undoRedo, ($undoRedo) => !$undoRedo.canUndo);
let redoDisabled = derived(undoRedo, ($undoRedo) => !$undoRedo.canRedo);
let undoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
let redoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
</script>
<div class="absolute top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
@@ -71,7 +70,7 @@
>
<Menubar.Separator />
<Menubar.Item
on:click={filestore.duplicateSelectedFiles}
on:click={dbUtils.duplicateSelectedFiles}
disabled={$selectedFiles.size == 0}
>
<Copy size="16" class="mr-1" />
@@ -84,7 +83,7 @@
{$_('menu.export')}
<Shortcut key="S" ctrl={true} />
</Menubar.Item>
<Menubar.Item on:click={exportAllFiles} disabled={$filestore.length == 0}>
<Menubar.Item on:click={exportAllFiles} disabled={$fileObservers.size == 0}>
<Download size="16" class="mr-1" />
{$_('menu.export_all')}
<Shortcut key="S" ctrl={true} shift={true} />
@@ -94,12 +93,12 @@
<Menubar.Menu>
<Menubar.Trigger>{$_('menu.edit')}</Menubar.Trigger>
<Menubar.Content class="border-none">
<Menubar.Item on:click={$undoRedo.undo} disabled={$undoDisabled}>
<Menubar.Item on:click={undo} disabled={$undoDisabled}>
<Undo2 size="16" class="mr-1" />
{$_('menu.undo')}
<Shortcut key="Z" ctrl={true} />
</Menubar.Item>
<Menubar.Item on:click={$undoRedo.redo} disabled={$redoDisabled}>
<Menubar.Item on:click={redo} disabled={$redoDisabled}>
<Redo2 size="16" class="mr-1" />
{$_('menu.redo')}
<Shortcut key="Z" ctrl={true} shift={true} />
@@ -111,18 +110,15 @@
<Shortcut key="A" ctrl={true} />
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item
on:click={filestore.deleteSelectedFiles}
disabled={$selectedFiles.size == 0}
>
<Menubar.Item on:click={dbUtils.deleteSelectedFiles} disabled={$selectedFiles.size == 0}>
<Trash2 size="16" class="mr-1" />
{$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} />
</Menubar.Item>
<Menubar.Item
class="text-destructive data-[highlighted]:text-destructive"
on:click={filestore.deleteAllFiles}
disabled={$filestore.length == 0}
on:click={dbUtils.deleteAllFiles}
disabled={$fileObservers.size == 0}
>
<Trash2 size="16" class="mr-1" />
{$_('menu.delete_all')}
@@ -206,7 +202,7 @@
triggerFileInput();
e.preventDefault();
} else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
filestore.duplicateSelectedFiles();
dbUtils.duplicateSelectedFiles();
e.preventDefault();
} else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) {
@@ -217,15 +213,15 @@
e.preventDefault();
} else if ((e.key === 'z' || e.key == 'Z') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) {
$undoRedo.redo();
redo();
} else {
$undoRedo.undo();
undo();
}
} else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) {
filestore.deleteAllFiles();
dbUtils.deleteAllFiles();
} else {
filestore.deleteSelectedFiles();
dbUtils.deleteSelectedFiles();
}
e.preventDefault();
} else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {

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

@@ -1,7 +1,8 @@
import type { GPXFile } from "gpx";
import { map, selectFiles, currentTool, Tool } from "$lib/stores";
import { get, type Writable } from "svelte/store";
import { get, type Readable, type Writable } from "svelte/store";
import mapboxgl from "mapbox-gl";
import type { FreezedObject } from "structurajs";
let defaultWeight = 6;
let defaultOpacity = 1;
@@ -38,7 +39,7 @@ function decrementColor(color: string) {
export class GPXLayer {
map: mapboxgl.Map;
file: Writable<GPXFile>;
file: Readable<FreezedObject<GPXFile>>;
fileId: string;
layerColor: string;
popup: mapboxgl.Popup;
@@ -49,7 +50,7 @@ export class GPXLayer {
addBinded: () => void = this.add.bind(this);
selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
constructor(map: mapboxgl.Map, file: Readable<FreezedObject<GPXFile>>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
this.map = map;
this.file = file;
this.fileId = get(file)._data.id;
@@ -58,8 +59,6 @@ export class GPXLayer {
this.popupElement = popupElement;
this.unsubscribe = file.subscribe(this.updateData.bind(this));
get(this.file)._data.layerColor = this.layerColor;
this.add();
this.map.on('style.load', this.addBinded);
}

14
website/src/lib/components/gpx-layer/GPXLayers.svelte
View File

@@ -1,28 +1,28 @@
<script lang="ts">
import { map, filestore, selectedFiles, gpxLayers } from '$lib/stores';
import { map, selectedFiles, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer';
import { get } from 'svelte/store';
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
import WaypointPopup from './WaypointPopup.svelte';
import { fileObservers } from '$lib/db';
let popupElement: HTMLElement;
let popup: mapboxgl.Popup | null = null;
$: if ($map) {
$: if ($map && $fileObservers) {
gpxLayers.update(($layers) => {
// remove layers for deleted files
$layers.forEach((layer, fileId) => {
if (!get(filestore).find((file) => file._data.id === fileId)) {
if (!$fileObservers.has(fileId)) {
layer.remove();
$layers.delete(fileId);
}
});
// add layers for new files
$filestore.forEach((file) => {
if (!$layers.has(file._data.id)) {
let fileStore = filestore.getFileStore(file._data.id);
$layers.set(file._data.id, new GPXLayer(get(map), fileStore, popup, popupElement));
$fileObservers.forEach((file, fileId) => {
if (!$layers.has(fileId)) {
$layers.set(fileId, new GPXLayer(get(map), file, popup, popupElement));
}
});
return $layers;

5
website/src/lib/components/toolbar/Toolbar.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { Tool, filestore } from '$lib/stores';
import { Tool } from '$lib/stores';
import { dbUtils } from '$lib/db';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
import ToolbarItem from './ToolbarItem.svelte';
@@ -34,7 +35,7 @@
</ToolbarItem>
<ToolbarItem
tool={Tool.REVERSE}
on:click={() => filestore.applyToSelectedFiles((file) => file.reverse())}
on:click={() => dbUtils.applyToSelectedFiles((file) => file.reverse())}
>
<ArrowRightLeft slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.reverse_tooltip')}</span>

13
website/src/lib/components/toolbar/tools/routing/Routing.svelte
View File

@@ -6,7 +6,7 @@
import * as Alert from '$lib/components/ui/alert';
import { CircleHelp } from 'lucide-svelte';
import { filestore, map, selectedFiles, Tool } from '$lib/stores';
import { map, selectedFiles, Tool } from '$lib/stores';
import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
import { _ } from 'svelte-i18n';
@@ -15,6 +15,7 @@
import RoutingControlPopup from './RoutingControlPopup.svelte';
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
import { fileObservers } from '$lib/db';
let routingControls: Map<string, RoutingControls> = new Map();
let popupElement: HTMLElement;
@@ -22,10 +23,10 @@
let selectedId: string | null = null;
let active = false;
$: if ($map && $filestore) {
$: if ($map) {
// remove controls for deleted files
routingControls.forEach((controls, fileId) => {
if (!get(filestore).find((file) => file._data.id === fileId)) {
if (!$fileObservers.has(fileId)) {
controls.remove();
routingControls.delete(fileId);
@@ -56,11 +57,11 @@
$: if ($map && selectedId) {
if (!routingControls.has(selectedId)) {
let selectedFileStore = filestore.getFileStore(selectedId);
if (selectedFileStore) {
let selectedFileObserver = get(fileObservers).get(selectedId);
if (selectedFileObserver) {
routingControls.set(
selectedId,
new RoutingControls(get(map), selectedFileStore, popup, popupElement)
new RoutingControls(get(map), selectedFileObserver, popup, popupElement)
);
}
} else {

14
website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
View File

@@ -7,7 +7,7 @@ import { route } from "./Routing";
import { toast } from "svelte-sonner";
import { _ } from "svelte-i18n";
import { filestore } from "$lib/stores";
import { dbUtils } from "$lib/db";
export class RoutingControls {
map: mapboxgl.Map;
@@ -290,17 +290,17 @@ export class RoutingControls {
let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor);
if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it
filestore.applyToFile(get(this.file)._data.id, (file) => {
dbUtils.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchor.segmentIndex];
segment.replace(0, 0, []);
});
} else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor
filestore.applyToFile(get(this.file)._data.id, (file) => {
dbUtils.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchor.segmentIndex];
segment.replace(0, nextAnchor.point._data.index - 1, []);
});
} else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor
filestore.applyToFile(get(this.file)._data.id, (file) => {
dbUtils.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchor.segmentIndex];
segment.replace(previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []);
});
@@ -323,7 +323,7 @@ export class RoutingControls {
if (!lastAnchor) {
// TODO, create segment if it does not exist
filestore.applyToFile(get(this.file)._data.id, (file) => {
dbUtils.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[0];
segment.replace(0, 0, [newPoint]);
});
@@ -365,7 +365,7 @@ export class RoutingControls {
let segment = anchors[0].segment;
if (anchors.length === 1) { // Only one anchor, update the point in the segment
filestore.applyToFile(get(this.file)._data.id, (file) => {
dbUtils.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchors[0].segmentIndex];
segment.replace(0, 0, [new TrackPoint({
attributes: targetCoordinates[0],
@@ -425,7 +425,7 @@ export class RoutingControls {
anchor.point._data.zoom = 0; // Make these anchors permanent
});
filestore.applyToFile(get(this.file)._data.id, (file) => {
dbUtils.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchors[0].segmentIndex];
segment.replace(start, end, response);
});