mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 15:43:25 +00:00
dexie progress
This commit is contained in:
vcoppe
6
website/package-lock.json
generated
6
website/package-lock.json
generated
@@ -12,6 +12,7 @@
|
||||
"bits-ui": "^0.21.5",
|
||||
"chart.js": "^4.4.2",
|
||||
"clsx": "^2.1.0",
|
||||
"dexie": "^4.0.4",
|
||||
"gpx": "file:../gpx",
|
||||
"lucide-svelte": "^0.365.0",
|
||||
"mapbox-gl": "^3.2.0",
|
||||
@@ -2433,6 +2434,11 @@
|
||||
"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/dexie": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.4.tgz",
|
||||
"integrity": "sha512-wFzwWSUdi+MC3jiFeQcCp9nInR7EaX8edzYY+4wmiITkQAiSnHpe4Wo2o5Ce5tJZe2nqt7mLW91MsW4GYx3ziQ=="
|
||||
},
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
"bits-ui": "^0.21.5",
|
||||
"chart.js": "^4.4.2",
|
||||
"clsx": "^2.1.0",
|
||||
"dexie": "^4.0.4",
|
||||
"gpx": "file:../gpx",
|
||||
"lucide-svelte": "^0.365.0",
|
||||
"mapbox-gl": "^3.2.0",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
191
website/src/lib/db.ts
Normal file
191
website/src/lib/db.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
import Dexie, { liveQuery } from 'dexie';
|
||||
import { GPXFile } from 'gpx';
|
||||
import { type FreezedObject, type Patch, produceWithPatches, applyPatches } from 'structurajs';
|
||||
import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
|
||||
import { fileOrder, selectedFiles } from './stores';
|
||||
|
||||
class Database extends Dexie {
|
||||
|
||||
files!: Dexie.Table<FreezedObject<GPXFile>, string>;
|
||||
patches!: Dexie.Table<{ patch: Patch[], inversePatch: Patch[] }, number>;
|
||||
settings!: Dexie.Table<any, string>;
|
||||
|
||||
constructor() {
|
||||
super("Database");
|
||||
this.version(1).stores({
|
||||
files: ',file',
|
||||
patches: '++id,patch,inversePatch',
|
||||
settings: ',value'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const db = new Database();
|
||||
|
||||
function dexieStore<T>(querier: () => T | Promise<T>): Readable<T> {
|
||||
const dexieObservable = liveQuery(querier)
|
||||
return {
|
||||
subscribe(run, invalidate) {
|
||||
return dexieObservable.subscribe(run, invalidate).unsubscribe
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function updateFiles(files: FreezedObject<GPXFile>[]) {
|
||||
console.log(files);
|
||||
return db.files.bulkPut(files, files.map(file => file._data.id));
|
||||
}
|
||||
|
||||
export const fileObservers: Writable<Map<string, Readable<FreezedObject<GPXFile>>>> = writable(new Map());
|
||||
export const fileState: Map<string, FreezedObject<GPXFile>> = new Map(); // Used to generate patches
|
||||
|
||||
liveQuery(() => db.files.toArray()).subscribe(dbFiles => {
|
||||
// Find new files to observe
|
||||
let newFiles = dbFiles.map(file => file._data.id).filter(id => !get(fileObservers).has(id));
|
||||
// Find deleted files to stop observing
|
||||
let deletedFiles = Array.from(get(fileObservers).keys()).filter(id => !dbFiles.find(file => file._data.id === id));
|
||||
// Update the store
|
||||
if (newFiles.length > 0 || deletedFiles.length > 0) {
|
||||
fileObservers.update($files => {
|
||||
newFiles.forEach(id => {
|
||||
$files.set(id, dexieStore(() => db.files.get(id)));
|
||||
});
|
||||
deletedFiles.forEach(id => {
|
||||
$files.delete(id);
|
||||
fileState.delete(id);
|
||||
});
|
||||
return $files;
|
||||
});
|
||||
console.log(get(fileObservers));
|
||||
}
|
||||
|
||||
// Update fileState
|
||||
dbFiles.forEach(file => {
|
||||
fileState.set(file._data.id, file);
|
||||
});
|
||||
});
|
||||
|
||||
const patchIndex = dexieStore(() => db.settings.get('patchIndex') ?? -1);
|
||||
const patches = dexieStore(() => db.patches.toArray());
|
||||
export const canUndo = derived(patchIndex, $patchIndex => $patchIndex >= 0);
|
||||
export const canRedo = derived([patchIndex, patches], ([$patchIndex, $patches]) => $patchIndex < $patches.length - 1);
|
||||
|
||||
export function applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
|
||||
const [newFileState, patch, inversePatch] = produceWithPatches(fileState, callback);
|
||||
|
||||
appendPatches(patch, inversePatch, true);
|
||||
|
||||
return updateFiles(Array.from(newFileState.values()));
|
||||
}
|
||||
|
||||
function applyToFiles(fileIds: string[], callback: (file: GPXFile) => void) {
|
||||
const [newFileState, patch, inversePatch] = produceWithPatches(fileState, (draft) => {
|
||||
fileIds.forEach((fileId) => {
|
||||
callback(draft.get(fileId));
|
||||
});
|
||||
});
|
||||
|
||||
appendPatches(patch, inversePatch, false);
|
||||
|
||||
return updateFiles(fileIds.map((fileId) => newFileState.get(fileId)));
|
||||
}
|
||||
|
||||
function appendPatches(patch: Patch[], inversePatch: Patch[], global: boolean) {
|
||||
db.patches.where('id').above(patchIndex).delete();
|
||||
db.patches.add({
|
||||
patch,
|
||||
inversePatch
|
||||
});
|
||||
db.settings.put(get(patchIndex) + 1, 'patchIndex');
|
||||
}
|
||||
|
||||
function applyPatch(patch: Patch[]) {
|
||||
let newFileState = applyPatches(fileState, patch);
|
||||
let changedFiles = [];
|
||||
for (let p of patch) {
|
||||
let fileId = p.p?.toString();
|
||||
if (fileId) {
|
||||
let newFile = newFileState.get(fileId);
|
||||
if (newFile) {
|
||||
changedFiles.push(newFile);
|
||||
}
|
||||
}
|
||||
}
|
||||
return updateFiles(changedFiles);
|
||||
}
|
||||
|
||||
function getFileId() {
|
||||
for (let index = 0; ; index++) {
|
||||
let id = `gpx-${index}`;
|
||||
if (!get(fileObservers).has(id)) {
|
||||
return id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function undo() {
|
||||
if (get(canUndo)) {
|
||||
let index = get(patchIndex);
|
||||
applyPatch(get(patches)[index].inversePatch);
|
||||
db.settings.put(index - 1, 'patchIndex');
|
||||
}
|
||||
}
|
||||
|
||||
export function redo() {
|
||||
if (get(canRedo)) {
|
||||
let index = get(patchIndex) + 1;
|
||||
applyPatch(get(patches)[index].patch);
|
||||
db.settings.put(index, 'patchIndex');
|
||||
}
|
||||
}
|
||||
|
||||
export const dbUtils = {
|
||||
add: (file: GPXFile) => {
|
||||
file._data.id = getFileId();
|
||||
console.log(file._data.id);
|
||||
let result = applyGlobal((draft) => {
|
||||
draft.set(file._data.id, file);
|
||||
});
|
||||
console.log(result);
|
||||
},
|
||||
addMultiple: (files: GPXFile[]) => {
|
||||
applyGlobal((draft) => {
|
||||
files.forEach((file) => {
|
||||
file._data.id = getFileId();
|
||||
draft.set(file._data.id, file);
|
||||
});
|
||||
});
|
||||
},
|
||||
applyToFile: (id: string, callback: (file: GPXFile) => void) => {
|
||||
applyToFiles([id], callback);
|
||||
},
|
||||
applyToSelectedFiles: (callback: (file: GPXFile) => void) => {
|
||||
applyToFiles(get(fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback);
|
||||
},
|
||||
duplicateSelectedFiles: () => {
|
||||
applyGlobal((draft) => {
|
||||
get(fileOrder).forEach((fileId) => {
|
||||
if (get(selectedFiles).has(fileId)) {
|
||||
let file = draft.get(fileId);
|
||||
if (file) {
|
||||
let clone = file.clone();
|
||||
clone._data.id = getFileId();
|
||||
draft.set(clone._data.id, clone);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteSelectedFiles: () => {
|
||||
applyGlobal((draft) => {
|
||||
get(selectedFiles).forEach((fileId) => {
|
||||
draft.delete(fileId);
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteAllFiles: () => {
|
||||
applyGlobal((draft) => {
|
||||
draft.clear();
|
||||
});
|
||||
},
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
import { writable, get, type Readable, type Writable } from "svelte/store";
|
||||
import { GPXFile } from "gpx";
|
||||
import { produceWithPatches, type FreezedObject, type UnFreezedObject, applyPatches, type Patch } from "structurajs";
|
||||
import { fileOrder, selectedFiles } from "./stores";
|
||||
|
||||
export type UndoRedoStore = {
|
||||
canUndo: boolean;
|
||||
canRedo: boolean;
|
||||
undo: () => void;
|
||||
redo: () => void;
|
||||
}
|
||||
|
||||
export type GPXFileStore = Readable<GPXFile[]> & {
|
||||
undoRedo: Writable<UndoRedoStore>;
|
||||
add: (file: GPXFile) => void;
|
||||
addMultiple: (files: GPXFile[]) => void;
|
||||
applyToFile: (id: string, callback: (file: GPXFile) => void) => void;
|
||||
applyToSelectedFiles: (callback: (file: GPXFile) => void) => void;
|
||||
duplicateSelectedFiles: () => void;
|
||||
deleteSelectedFiles: () => void;
|
||||
deleteAllFiles: () => void;
|
||||
getFileStore: (id: string) => Writable<FreezedObject<GPXFile>> | undefined;
|
||||
}
|
||||
|
||||
export function createGPXFileStore(): GPXFileStore {
|
||||
let files: ReadonlyMap<string, FreezedObject<GPXFile>> = new Map();
|
||||
let subscribers: Set<Function> = new Set();
|
||||
|
||||
function notifySubscriber(run: Function) {
|
||||
run(Array.from(files.values()));
|
||||
}
|
||||
|
||||
function notify() {
|
||||
subscribers.forEach((run) => {
|
||||
notifySubscriber(run);
|
||||
});
|
||||
}
|
||||
|
||||
let filestores = new Map<string, Writable<FreezedObject<GPXFile>>>();
|
||||
let patches: { patch: Patch[], inversePatch: Patch[], global: boolean }[] = [];
|
||||
let patchIndex = -1;
|
||||
|
||||
function updateUndoRedo() {
|
||||
undoRedo.update($undoRedo => {
|
||||
$undoRedo.canUndo = patchIndex >= 0;
|
||||
$undoRedo.canRedo = patchIndex < patches.length - 1;
|
||||
return $undoRedo;
|
||||
});
|
||||
}
|
||||
|
||||
function appendPatches(patch: Patch[], inversePatch: Patch[], global: boolean) {
|
||||
patches = patches.slice(0, patchIndex + 1);
|
||||
patches.push({
|
||||
patch,
|
||||
inversePatch,
|
||||
global
|
||||
});
|
||||
patchIndex++;
|
||||
updateUndoRedo();
|
||||
}
|
||||
|
||||
let undoRedo: Writable<UndoRedoStore> = writable({
|
||||
canUndo: false,
|
||||
canRedo: false,
|
||||
undo: () => {
|
||||
if (patchIndex >= 0) {
|
||||
applyPatch(patches[patchIndex].inversePatch, patches[patchIndex].global);
|
||||
patchIndex--;
|
||||
updateUndoRedo();
|
||||
}
|
||||
},
|
||||
redo: () => {
|
||||
if (patchIndex < patches.length - 1) {
|
||||
patchIndex++;
|
||||
applyPatch(patches[patchIndex].patch, patches[patchIndex].global);
|
||||
updateUndoRedo();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function applyPatch(patch: Patch[], global: boolean) {
|
||||
files = applyPatches(files, patch);
|
||||
for (let p of patch) {
|
||||
let fileId = p.p?.toString();
|
||||
if (fileId) {
|
||||
let filestore = filestores.get(fileId), newFile = files.get(fileId);
|
||||
if (filestore && newFile) {
|
||||
filestore.set(newFile);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (global) {
|
||||
notify();
|
||||
}
|
||||
}
|
||||
|
||||
function applyToGlobalStore(callback: (files: Map<string, GPXFile>) => void) {
|
||||
const [newFiles, patch, inversePatch] = produceWithPatches(files, callback);
|
||||
files = newFiles;
|
||||
appendPatches(patch, inversePatch, true);
|
||||
notify();
|
||||
}
|
||||
|
||||
function applyToFiles(fileIds: string[], callback: (file: UnFreezedObject<FreezedObject<GPXFile>>) => void) {
|
||||
const [newFiles, patch, inversePatch] = produceWithPatches(files, (draft) => {
|
||||
fileIds.forEach((fileId) => {
|
||||
callback(draft.get(fileId));
|
||||
});
|
||||
});
|
||||
files = newFiles;
|
||||
appendPatches(patch, inversePatch, false);
|
||||
fileIds.forEach((fileId) => {
|
||||
let filestore = filestores.get(fileId), newFile = newFiles.get(fileId);
|
||||
if (filestore && newFile) {
|
||||
filestore.set(newFile);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
subscribers.add(() => {
|
||||
// remove filestores that are no longer in the files map
|
||||
filestores.forEach((_, fileId) => {
|
||||
if (!files.has(fileId)) {
|
||||
filestores.delete(fileId);
|
||||
}
|
||||
});
|
||||
// add filestores that are in the files map but not in the filestores map
|
||||
files.forEach((file, fileId) => {
|
||||
if (!filestores.has(fileId)) {
|
||||
filestores.set(fileId, writable(file));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
subscribe: (run) => {
|
||||
subscribers.add(run);
|
||||
notifySubscriber(run);
|
||||
return () => {
|
||||
subscribers.delete(run);
|
||||
}
|
||||
},
|
||||
undoRedo,
|
||||
add: (file: GPXFile) => {
|
||||
file._data.id = getLayerId();
|
||||
applyToGlobalStore((draft) => {
|
||||
draft.set(file._data.id, file);
|
||||
});
|
||||
},
|
||||
addMultiple: (files: GPXFile[]) => {
|
||||
applyToGlobalStore((draft) => {
|
||||
files.forEach((file) => {
|
||||
file._data.id = getLayerId();
|
||||
draft.set(file._data.id, file);
|
||||
});
|
||||
});
|
||||
},
|
||||
applyToFile: (id: string, callback: (file: GPXFile) => void) => {
|
||||
applyToFiles([id], callback);
|
||||
},
|
||||
applyToSelectedFiles: (callback: (file: GPXFile) => void) => {
|
||||
applyToFiles(get(fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback);
|
||||
},
|
||||
duplicateSelectedFiles: () => {
|
||||
applyToGlobalStore((draft) => {
|
||||
get(fileOrder).forEach((fileId) => {
|
||||
if (get(selectedFiles).has(fileId)) {
|
||||
let file = draft.get(fileId);
|
||||
if (file) {
|
||||
let clone = file.clone();
|
||||
clone._data.id = getLayerId();
|
||||
draft.set(clone._data.id, clone);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteSelectedFiles: () => {
|
||||
applyToGlobalStore((draft) => {
|
||||
get(selectedFiles).forEach((fileId) => {
|
||||
draft.delete(fileId);
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteAllFiles: () => {
|
||||
applyToGlobalStore((draft) => {
|
||||
draft.clear();
|
||||
});
|
||||
},
|
||||
getFileStore: (id: string) => {
|
||||
return filestores.get(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let id = 0;
|
||||
function getLayerId() {
|
||||
return `gpx-${id++}`;
|
||||
}
|
||||
@@ -1,27 +1,25 @@
|
||||
import { writable, get, type Writable, derived } from 'svelte/store';
|
||||
import { writable, get, type Writable } from 'svelte/store';
|
||||
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
import { GPXFile, buildGPX, parseGPX, type AnyGPXTreeElement, GPXFiles } from 'gpx';
|
||||
import { GPXFile, buildGPX, parseGPX, GPXFiles } from 'gpx';
|
||||
import { tick } from 'svelte';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
|
||||
import { createGPXFileStore } from './filestore';
|
||||
import { dbUtils, fileObservers, fileState } from './db';
|
||||
|
||||
export const map = writable<mapboxgl.Map | null>(null);
|
||||
|
||||
export const filestore = createGPXFileStore();
|
||||
export const fileOrder = writable<string[]>([]);
|
||||
export const selectedFiles = writable<Set<string>>(new Set());
|
||||
export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
|
||||
|
||||
filestore.subscribe((files) => { // Update selectedFiles automatically when files are deleted (either by action or by undo-redo)
|
||||
fileObservers.subscribe((files) => { // Update selectedFiles automatically when files are deleted (either by action or by undo-redo)
|
||||
let deletedFileIds: string[] = [];
|
||||
get(selectedFiles).forEach((fileId) => {
|
||||
if (!files.find((f) => f._data.id === fileId)) {
|
||||
if (!files.has(fileId)) {
|
||||
deletedFileIds.push(fileId);
|
||||
}
|
||||
});
|
||||
|
||||
if (deletedFileIds.length > 0) {
|
||||
selectedFiles.update((selectedFiles) => {
|
||||
deletedFileIds.forEach((fileId) => selectedFiles.delete(fileId));
|
||||
@@ -35,7 +33,7 @@ export const gpxData = writable(new GPXFiles([]).getTrackPointsAndStatistics());
|
||||
function updateGPXData() {
|
||||
let fileIds: string[] = get(fileOrder).filter((f) => get(selectedFiles).has(f));
|
||||
let files: GPXFile[] = fileIds
|
||||
.map((id) => get(filestore).find((f) => f._data.id === id))
|
||||
.map((id) => fileState.get(id))
|
||||
.filter((f) => f) as GPXFile[];
|
||||
let gpxFiles = new GPXFiles(files);
|
||||
gpxData.set(gpxFiles.getTrackPointsAndStatistics());
|
||||
@@ -45,9 +43,9 @@ let selectedFilesUnsubscribe: Function[] = [];
|
||||
selectedFiles.subscribe((selectedFiles) => {
|
||||
selectedFilesUnsubscribe.forEach((unsubscribe) => unsubscribe());
|
||||
selectedFiles.forEach((fileId) => {
|
||||
let fileStore = filestore.getFileStore(fileId);
|
||||
if (fileStore) {
|
||||
let unsubscribe = fileStore.subscribe(() => {
|
||||
let fileObserver = get(fileObservers).get(fileId);
|
||||
if (fileObserver) {
|
||||
let unsubscribe = fileObserver.subscribe(() => {
|
||||
updateGPXData();
|
||||
});
|
||||
selectedFilesUnsubscribe.push(unsubscribe);
|
||||
@@ -82,7 +80,7 @@ export function createFile() {
|
||||
let file = new GPXFile();
|
||||
file.metadata.name = get(_)("menu.new_filename");
|
||||
|
||||
filestore.add(file);
|
||||
dbUtils.add(file);
|
||||
|
||||
tick().then(() => get(selectFiles).select(file._data.id));
|
||||
currentTool.set(Tool.ROUTING);
|
||||
@@ -105,7 +103,7 @@ export function triggerFileInput() {
|
||||
export async function loadFiles(list: FileList) {
|
||||
let bounds = new mapboxgl.LngLatBounds();
|
||||
let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
|
||||
if (get(filestore).length > 0) {
|
||||
if (fileState.size > 0) {
|
||||
mapBounds = get(map)?.getBounds() ?? mapBounds;
|
||||
bounds.extend(mapBounds);
|
||||
}
|
||||
@@ -123,7 +121,7 @@ export async function loadFiles(list: FileList) {
|
||||
}
|
||||
}
|
||||
|
||||
filestore.addMultiple(files);
|
||||
dbUtils.addMultiple(files);
|
||||
|
||||
if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) {
|
||||
get(map)?.fitBounds(bounds, {
|
||||
@@ -161,7 +159,7 @@ export async function loadFile(file: File): Promise<GPXFile | null> {
|
||||
}
|
||||
|
||||
export async function exportSelectedFiles() {
|
||||
for (let file of get(filestore)) {
|
||||
for (let file of fileState.values()) {
|
||||
if (get(selectedFiles).has(file._data.id)) {
|
||||
exportFile(file);
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
@@ -170,7 +168,7 @@ export async function exportSelectedFiles() {
|
||||
}
|
||||
|
||||
export async function exportAllFiles() {
|
||||
for (let file of get(filestore)) {
|
||||
for (let file of fileState.values()) {
|
||||
exportFile(file);
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user