steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

functional dnd

Browse Source
This commit is contained in:
vcoppe
2024-06-05 21:08:01 +02:00
parent a70fbe4f64
commit df03f78c09
5 changed files with 150 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
website/src/lib/components/file-list/FileList.ts
View File

@@ -1,8 +1,9 @@
import { dbUtils, fileObservers } from "$lib/db";
import { castDraft } from "immer";
import { castDraft, freeze } from "immer";
import { Track, TrackSegment, Waypoint } from "gpx";
import { selection } from "./Selection";
import { get } from "svelte/store";
import { newGPXFile } from "$lib/stores";
export enum ListLevel {
ROOT,
@@ -273,7 +274,7 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
}
});
dbUtils.applyEachToFiles([fromParent.getFileId(), toParent.getFileId()], [
dbUtils.applyEachToFilesAndGlobal([fromParent.getFileId(), toParent.getFileId()], [
(file, context: (Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
let newFile = file;
fromItems.forEach((item) => {
@@ -301,15 +302,27 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
(file, context: (Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
let newFile = file;
toItems.forEach((item, i) => {
if (item instanceof ListTrackItem && context[i] instanceof Track) {
let [result, _removed] = newFile.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [context[i]]);
newFile = castDraft(result);
if (item instanceof ListTrackItem) {
if (context[i] instanceof Track) {
let [result, _removed] = newFile.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [context[i]]);
newFile = castDraft(result);
} else if (context[i] instanceof TrackSegment) {
let [result, _removed] = newFile.replaceTracks(item.getTrackIndex(), item.getTrackIndex() - 1, [new Track({
trkseg: [context[i]]
})]);
newFile = castDraft(result);
}
} else if (item instanceof ListTrackSegmentItem && context[i] instanceof TrackSegment) {
let [result, _removed] = newFile.replaceTrackSegments(item.getTrackIndex(), item.getSegmentIndex(), item.getSegmentIndex() - 1, [context[i]]);
newFile = castDraft(result);
} else if (item instanceof ListWaypointsItem && Array.isArray(context[i]) && context[i].length > 0 && context[i][0] instanceof Waypoint) {
let [result, _removed] = newFile.replaceWaypoints(newFile.wpt.length, newFile.wpt.length - 1, context[i]);
newFile = castDraft(result);
} else if (item instanceof ListWaypointsItem) {
if (Array.isArray(context[i]) && context[i].length > 0 && context[i][0] instanceof Waypoint) {
let [result, _removed] = newFile.replaceWaypoints(newFile.wpt.length, newFile.wpt.length - 1, context[i]);
newFile = castDraft(result);
} else if (context[i] instanceof Waypoint) {
let [result, _removed] = newFile.replaceWaypoints(newFile.wpt.length, newFile.wpt.length - 1, [context[i]]);
newFile = castDraft(result);
}
} else if (item instanceof ListWaypointItem && context[i] instanceof Waypoint) {
let [result, _removed] = newFile.replaceWaypoints(item.getWaypointIndex(), item.getWaypointIndex() - 1, [context[i]]);
newFile = castDraft(result);
@@ -317,13 +330,26 @@ export function moveItems(fromParent: ListItem, toParent: ListItem, fromItems: L
});
return newFile;
}
], []);
selection.update(($selection) => {
$selection.clear();
toItems.forEach((item) => {
$selection.set(item, true);
], (files, context: (Track | TrackSegment | Waypoint[] | Waypoint)[]) => {
toItems.forEach((item, i) => {
if (item instanceof ListFileItem) {
if (context[i] instanceof Track) {
let newFile = newGPXFile();
newFile._data.id = item.getFileId();
if (context[i].name) {
newFile.metadata.name = context[i].name;
}
newFile = newFile.replaceTracks(0, 0, [context[i]])[0];
files.set(item.getFileId(), freeze(newFile));
} else if (context[i] instanceof TrackSegment) {
let newFile = newGPXFile();
newFile._data.id = item.getFileId();
newFile = newFile.replaceTracks(0, 0, [new Track({
trkseg: [context[i]]
})])[0];
files.set(item.getFileId(), freeze(newFile));
}
}
});
return $selection;
});
}, []);
}

133
website/src/lib/components/file-list/FileListNodeContent.svelte
View File

@@ -1,12 +1,25 @@
<script lang="ts" context="module">
let pull: Record<ListLevel, ListLevel[]> = {
[ListLevel.ROOT]: [],
[ListLevel.FILE]: [ListLevel.FILE],
[ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
[ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
[ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
[ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT]
};
let dragging: Writable<ListLevel | null> = writable(null);
</script>
<script lang="ts">
import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import { afterUpdate, getContext, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
import { fileObservers, settings, type GPXFileWithStatistics } from '$lib/db';
import { get, type Readable } from 'svelte/store';
import { fileObservers, getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
import { get, writable, type Readable, type Writable } from 'svelte/store';
import FileListNodeStore from './FileListNodeStore.svelte';
import FileListNode from './FileListNode.svelte';
import { ListLevel, moveItems, type ListItem } from './FileList';
import { ListLevel, ListRootItem, moveItems, type ListItem } from './FileList';
import { selection } from './Selection';
import { _ } from 'svelte-i18n';
@@ -29,12 +42,6 @@
: node instanceof Track
? ListLevel.SEGMENT
: ListLevel.WAYPOINT;
let pull: Record<string, string[]> = {
file: ['file', 'track'],
track: ['file', 'track'],
segment: ['file', 'track', 'segment'],
waypoint: ['waypoint']
};
let sortable: Sortable;
let orientation = getContext<'vertical' | 'horizontal'>('orientation');
@@ -84,26 +91,6 @@
return;
}
if ($fileOrder.length !== $fileObservers.size) {
// Files were added or removed
fileOrder.update((order) => {
for (let i = 0; i < order.length; ) {
if (!$fileObservers.has(order[i])) {
order.splice(i, 1);
} else {
i++;
}
}
for (let id of $fileObservers.keys()) {
if (!order.includes(id)) {
order.push(id);
}
}
return order;
});
return;
}
const currentOrder = sortable.toArray();
if (currentOrder.length !== $fileOrder.length) {
sortable.sort($fileOrder);
@@ -124,7 +111,9 @@
function createSortable() {
sortable = Sortable.create(container, {
group: {
name: sortableLevel
name: sortableLevel,
pull: pull[sortableLevel],
put: true
},
direction: orientation,
forceAutoScrollFallback: true,
@@ -133,46 +122,65 @@
avoidImplicitDeselect: true,
onSelect: updateToSelection,
onDeselect: updateToSelection,
onStart: () => {
dragging.set(sortableLevel);
},
onEnd: () => {
dragging.set(null);
},
onSort: (e) => {
if (sortableLevel === ListLevel.FILE) {
let newFileOrder = sortable.toArray();
if (newFileOrder.length !== get(fileOrder).length) {
fileOrder.set(newFileOrder);
return;
}
for (let i = 0; i < newFileOrder.length; i++) {
if (newFileOrder[i] !== get(fileOrder)[i]) {
fileOrder.set(newFileOrder);
return;
} else {
for (let i = 0; i < newFileOrder.length; i++) {
if (newFileOrder[i] !== get(fileOrder)[i]) {
fileOrder.set(newFileOrder);
break;
}
}
}
} else {
let fromItem = Sortable.get(e.from)._item;
let toItem = Sortable.get(e.to)._item;
}
if (item === toItem) {
// Event is triggered on source and destination list, only handle it once
let fromItems = [];
let toItems = [];
let fromItem = Sortable.get(e.from)._item;
let toItem = Sortable.get(e.to)._item;
if (waypointRoot) {
fromItems = [fromItem.extend('waypoints')];
toItems = [toItem.extend('waypoints')];
if (item === toItem && !(fromItem instanceof ListRootItem)) {
// Event is triggered on source and destination list, only handle it once
let fromItems = [];
let toItems = [];
if (Sortable.get(e.from)._waypointRoot) {
fromItems = [fromItem.extend('waypoints')];
} else {
let oldIndices =
e.oldIndicies.length > 0 ? e.oldIndicies.map((i) => i.index) : [e.oldIndex];
oldIndices.sort((a, b) => a - b);
fromItems = oldIndices.map((i) => fromItem.extend(i));
}
if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
toItems = [toItem.extend('waypoints')];
} else {
if (Sortable.get(e.to)._waypointRoot) {
toItem = toItem.extend('waypoints');
}
let newIndices =
e.newIndicies.length > 0 ? e.newIndicies.map((i) => i.index) : [e.newIndex];
newIndices.sort((a, b) => a - b);
if (toItem instanceof ListRootItem) {
let newFileIds = getFileIds(newIndices.length);
toItems = newIndices.map((_i, index) => item.extend(newFileIds[index]));
} else {
let oldIndices =
e.oldIndicies.length > 0 ? e.oldIndicies.map((i) => i.index) : [e.oldIndex];
let newIndices =
e.newIndicies.length > 0 ? e.newIndicies.map((i) => i.index) : [e.newIndex];
oldIndices.sort((a, b) => a - b);
newIndices.sort((a, b) => a - b);
fromItems = oldIndices.map((i) => fromItem.extend(i));
toItems = newIndices.map((i) => toItem.extend(i));
}
moveItems(fromItem, toItem, fromItems, toItems);
}
moveItems(fromItem, toItem, fromItems, toItems);
}
}
});
@@ -180,6 +188,11 @@
value: item,
writable: true
});
Object.defineProperty(sortable, '_waypointRoot', {
value: waypointRoot,
writable: true
});
}
onMount(() => {
@@ -220,11 +233,15 @@
? id
: parseInt(id);
}
$: canDrop = $dragging !== null && pull[$dragging].includes(sortableLevel);
</script>
<div
bind:this={container}
class="sortable {orientation} flex {orientation === 'vertical' ? 'flex-col' : 'flex-row gap-1'}"
class="sortable {orientation} flex {orientation === 'vertical'
? 'flex-col'
: 'flex-row gap-1'} {canDrop ? 'p-b-5' : ''}"
>
{#if node instanceof Map}
{#each node as [fileId, file] (fileId)}

4
website/src/lib/components/file-list/Selection.ts
View File

@@ -1,5 +1,5 @@
import { get, writable } from "svelte/store";
import { ListFileItem, ListItem, ListRootItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, type ListLevel, sortItems } from "./FileList";
import { ListFileItem, ListItem, ListRootItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, type ListLevel, sortItems, ListWaypointsItem } from "./FileList";
import { fileObservers, settings } from "$lib/db";
export class SelectionTreeType {
@@ -205,7 +205,7 @@ export function applyToOrderedSelectedItemsFromFile(callback: (fileId: string, l
get(selection).forEach((item) => {
if (item.getFileId() === fileId) {
level = item.level;
if (item instanceof ListFileItem || item instanceof ListTrackItem || item instanceof ListTrackSegmentItem || item instanceof ListWaypointItem) {
if (item instanceof ListFileItem || item instanceof ListTrackItem || item instanceof ListTrackSegmentItem || item instanceof ListWaypointsItem || item instanceof ListWaypointItem) {
items.push(item);
}
}

41
website/src/lib/db.ts
View File

@@ -187,17 +187,13 @@ function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { dest
}
// Add/update the files to the database
function updateDbFiles(files: (GPXFile | undefined)[], add: boolean = false) {
function updateDbFiles(files: (GPXFile | undefined)[]) {
let filteredFiles = files.filter(file => file !== undefined) as GPXFile[];
let fileIds = filteredFiles.map(file => file._data.id);
if (add) {
return db.transaction('rw', db.fileids, db.files, async () => {
await db.fileids.bulkAdd(fileIds, fileIds);
await db.files.bulkAdd(filteredFiles, fileIds);
});
} else {
return db.files.bulkPut(filteredFiles, fileIds);
}
return db.transaction('rw', db.fileids, db.files, async () => {
await db.fileids.bulkPut(fileIds, fileIds);
await db.files.bulkPut(filteredFiles, fileIds);
});
}
// Delete the files with the given ids from the database
@@ -210,9 +206,7 @@ function deleteDbFiles(fileIds: string[]) {
// Commit the changes to the file state to the database
function commitFileStateChange(newFileState: ReadonlyMap<string, GPXFile>, patch: Patch[]) {
if (newFileState.size > fileState.size) {
return updateDbFiles(getChangedFileIds(patch).map((fileId) => newFileState.get(fileId)), true);
} else if (newFileState.size === fileState.size) {
if (newFileState.size >= fileState.size) {
return updateDbFiles(getChangedFileIds(patch).map((fileId) => newFileState.get(fileId)));
} else {
return deleteDbFiles(getChangedFileIds(patch));
@@ -252,6 +246,20 @@ liveQuery(() => db.fileids.toArray()).subscribe(dbFileIds => {
return $selection;
});
}
settings.fileOrder.update((order) => {
newFiles.forEach((fileId) => {
if (!order.includes(fileId)) {
order.push(fileId);
}
});
deletedFiles.forEach((fileId) => {
let index = order.indexOf(fileId);
if (index !== -1) {
order.splice(index, 1);
}
});
return order;
});
}
});
@@ -292,7 +300,7 @@ function applyToFiles(fileIds: string[], callback: (file: WritableDraft<GPXFile>
}
// Helper function to apply different callbacks to multiple files
function applyEachToFiles(fileIds: string[], callbacks: ((file: WritableDraft<GPXFile>, context?: any) => GPXFile)[], context?: any) {
function applyEachToFilesAndGlobal(fileIds: string[], callbacks: ((file: WritableDraft<GPXFile>, context?: any) => GPXFile)[], globalCallback: (files: Map<string, GPXFile>, context?: any) => void, context?: any) {
const [newFileState, patch, inversePatch] = produceWithPatches(fileState, (draft) => {
fileIds.forEach((fileId, index) => {
let file = draft.get(fileId);
@@ -300,6 +308,7 @@ function applyEachToFiles(fileIds: string[], callbacks: ((file: WritableDraft<GP
draft.set(fileId, castDraft(callbacks[index](file, context)));
}
});
globalCallback(draft, context);
});
storePatches(patch, inversePatch);
@@ -344,7 +353,7 @@ function getChangedFileIds(patch: Patch[]): string[] {
}
// Generate unique file ids, different from the ones in the database
function getFileIds(n: number) {
export function getFileIds(n: number) {
let ids = [];
for (let index = 0; ids.length < n; index++) {
let id = `gpx-${index}`;
@@ -378,8 +387,8 @@ export const dbUtils = {
applyToFiles: (ids: string[], callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles(ids, callback);
},
applyEachToFiles: (ids: string[], callbacks: ((file: WritableDraft<GPXFile>, context?: any) => GPXFile)[], context?: any) => {
applyEachToFiles(ids, callbacks, context);
applyEachToFilesAndGlobal: (ids: string[], callbacks: ((file: WritableDraft<GPXFile>, context?: any) => GPXFile)[], globalCallback: (files: Map<string, GPXFile>, context?: any) => void, context?: any) => {
applyEachToFilesAndGlobal(ids, callbacks, globalCallback, context);
},
applyToSelection: (callback: (file: WritableDraft<AnyGPXTreeElement>) => AnyGPXTreeElement) => {
if (get(selection).size === 0) {

7
website/src/lib/stores.ts
View File

@@ -127,9 +127,14 @@ export enum Tool {
}
export const currentTool = writable<Tool | null>(null);
export function createFile() {
export function newGPXFile() {
let file = new GPXFile();
file.metadata.name = get(_)("menu.new_filename");
return file;
}
export function createFile() {
let file = newGPXFile();
dbUtils.add(file);