2 Commits

Author SHA1 Message Date
vcoppe
30e72db5ea hide horizontal scroll bar 2025-11-12 09:05:20 +01:00
vcoppe
c4c64c8fe8 load files from urls/ids once local ones are loaded 2025-11-12 09:02:09 +01:00
3 changed files with 66 additions and 58 deletions

View File

@@ -45,7 +45,7 @@
<ScrollArea <ScrollArea
class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}" class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
{orientation} {orientation}
scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'} scrollbarXClasses={orientation === 'vertical' ? '' : 'hidden'}
scrollbarYClasses={orientation === 'vertical' ? '' : ''} scrollbarYClasses={orientation === 'vertical' ? '' : ''}
> >
<div <div

View File

@@ -56,43 +56,51 @@ export class GPXFileStateCollection {
this._files = writable(new Map()); this._files = writable(new Map());
} }
connectToDatabase(db: Database) { connectToDatabase(db: Database): Promise<void> {
if (this._subscription) return; return new Promise((resolve) => {
this._subscription = liveQuery(() => db.fileids.toArray()).subscribe((dbFileIds) => { if (this._subscription) {
const currentFiles = get(this._files); resolve();
// Find new files to observe return;
let newFiles = dbFileIds
.filter((id) => !currentFiles.has(id))
.sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
// Find deleted files to stop observing
let deletedFiles = Array.from(currentFiles.keys()).filter(
(id) => !dbFileIds.find((fileId) => fileId === id)
);
if (newFiles.length > 0 || deletedFiles.length > 0) {
// Update the map of file states
this._files.update(($files) => {
newFiles.forEach((id) => {
const fileState = new GPXFileState(id);
fileState.connectToDatabase(db);
$files.set(id, fileState);
});
deletedFiles.forEach((id) => {
$files.get(id)?.destroy();
$files.delete(id);
});
return $files;
});
// Update the file order
let fileOrder = get(settings.fileOrder).filter((id) => !deletedFiles.includes(id));
newFiles.forEach((id) => {
if (!fileOrder.includes(id)) {
fileOrder.push(id);
}
});
settings.fileOrder.set(fileOrder);
} }
this._subscription = liveQuery(() => db.fileids.toArray()).subscribe((dbFileIds) => {
const currentFiles = get(this._files);
// Find new files to observe
let newFiles = dbFileIds
.filter((id) => !currentFiles.has(id))
.sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
// Find deleted files to stop observing
let deletedFiles = Array.from(currentFiles.keys()).filter(
(id) => !dbFileIds.find((fileId) => fileId === id)
);
if (newFiles.length > 0 || deletedFiles.length > 0) {
// Update the map of file states
this._files.update(($files) => {
newFiles.forEach((id) => {
const fileState = new GPXFileState(id);
fileState.connectToDatabase(db);
$files.set(id, fileState);
});
deletedFiles.forEach((id) => {
$files.get(id)?.destroy();
$files.delete(id);
});
return $files;
});
// Update the file order
let fileOrder = get(settings.fileOrder).filter(
(id) => !deletedFiles.includes(id)
);
newFiles.forEach((id) => {
if (!fileOrder.includes(id)) {
fileOrder.push(id);
}
});
settings.fileOrder.set(fileOrder);
}
resolve();
});
}); });
} }

View File

@@ -32,28 +32,28 @@
elevationFill, elevationFill,
} = settings; } = settings;
onMount(() => { onMount(async () => {
let files: string[] = JSON.parse(page.url.searchParams.get('files') || '[]');
let ids: string[] = JSON.parse(page.url.searchParams.get('ids') || '[]');
let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
if (urls.length > 0) {
let downloads: Promise<File | null>[] = [];
urls.forEach((url) => {
downloads.push(
fetch(url)
.then((response) => response.blob())
.then((blob) => new File([blob], url.split('/').pop() ?? ''))
);
});
Promise.all(downloads).then((files) => {
loadFiles(files.filter((file) => file !== null));
});
}
settings.connectToDatabase(db); settings.connectToDatabase(db);
fileStateCollection.connectToDatabase(db); fileStateCollection.connectToDatabase(db).then(() => {
let files: string[] = JSON.parse(page.url.searchParams.get('files') || '[]');
let ids: string[] = JSON.parse(page.url.searchParams.get('ids') || '[]');
let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
if (urls.length > 0) {
let downloads: Promise<File | null>[] = [];
urls.forEach((url) => {
downloads.push(
fetch(url)
.then((response) => response.blob())
.then((blob) => new File([blob], url.split('/').pop() ?? ''))
);
});
Promise.all(downloads).then((files) => {
loadFiles(files.filter((file) => file !== null));
});
}
});
}); });
onDestroy(() => { onDestroy(() => {