split

website/src/lib/components/map/gpx-layer/gpx-layer.ts

@@ -20,7 +20,7 @@ import { isSegmentHidden, isWaypointHidden } from '$lib/file-visibility';
 import { settings } from '$lib/logic/settings';
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
 import { fileActions } from '$lib/logic/file-actions';
-import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
+import { splitAtPoint } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 
@@ -415,7 +415,7 @@ export class GPXLayer {
 
     layerOnClick(e: MapLayerMouseEvent) {
         const properties = e.features![0].properties!;
-        const { trackId, segmentId, trackIndex, segmentIndex } = properties;
+        const { trackId, segmentId } = properties;
         const selectionType = this.selectionState.type;
 
         if (
@@ -436,11 +436,7 @@ export class GPXLayer {
                 return;
             }
 
-            // TODO the engine can split (Command::Split) but needs the index of the trackpoint
-            // fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
-            //     lat: e.lngLat.lat,
-            //     lon: e.lngLat.lng,
-            // });
+            splitAtPoint(segmentId, { lng: e.lngLat.lng, lat: e.lngLat.lat });
             return;
         }
 

website/src/lib/components/toolbar/tools/scissors/Scissors.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
     import { splitAs, SplitType } from '$lib/components/toolbar/tools/scissors/scissors';
     import Help from '$lib/components/Help.svelte';
-    import { ListRootItem } from '$lib/components/file-list/file-list';
     import { Label } from '$lib/components/ui/label/index.js';
     import { Button } from '$lib/components/ui/button';
     import { Slider } from '$lib/components/ui/slider';
     import * as Select from '$lib/components/ui/select';
     import { Separator } from '$lib/components/ui/separator';
     import { map } from '$lib/components/map/map';
-    import { get } from 'svelte/store';
     import { i18n } from '$lib/i18n.svelte';
     import { onDestroy, onMount, untrack } from 'svelte';
     import { Crop } from '@lucide/svelte';
     import { SplitControls } from './split-controls';
     import { getURLForLanguage } from '$lib/utils';
-    import { selection } from '$lib/logic/selection';
-    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { slicedStatistics } from '$lib/logic/selection-statistics';
     import { engine } from '$lib/engine';
 
     let props: {
@@ -24,15 +21,35 @@
 
     let splitControls: SplitControls | undefined = undefined;
 
+    const selection = engine.selection;
+    const statistics = engine.statistics;
+
+    // the tool works on files, tracks and segments, not on waypoints
     let validSelection = $derived(
-        $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
-            $gpxStatistics.global.length > 0
+        ($selection.type === 'file' ||
+            $selection.type === 'track' ||
+            $selection.type === 'segment') &&
+            $statistics.length > 0
     );
-    let maxSliderValue = $derived(
-        validSelection && $gpxStatistics.global.length > 0 ? $gpxStatistics.global.length - 1 : 1
-    );
-    let sliderValues = $derived([0, maxSliderValue]);
-    let canCrop = $derived(sliderValues[0] != 0 || sliderValues[1] != maxSliderValue);
+    // The slider does work for each of its steps every time it changes, which is too slow with
+    // the thousands of trackpoints of a long track: it has a limited number of steps, which are
+    // spread over the trackpoints.
+    const MAX_STEPS = 500;
+    let length = $derived($statistics.length);
+    let steps = $derived(validSelection ? Math.min(length - 1, MAX_STEPS) : 1);
+    let sliderValues = $state([0, 1]);
+
+    /** The index of the trackpoint of a step of the slider. */
+    function toIndex(step: number) {
+        return steps <= 0 || steps >= length - 1 ? step : Math.round((step * (length - 1)) / steps);
+    }
+
+    /** The step of the slider that is the closest to a trackpoint. */
+    function toStep(index: number) {
+        return steps <= 0 || steps >= length - 1
+            ? index
+            : Math.round((index * steps) / (length - 1));
+    }
 
     onMount(() => {
         if ($map) {
@@ -40,42 +57,33 @@
         }
     });
 
-    function updateSlicedGPXStatistics() {
-        if (validSelection && canCrop) {
-            $slicedGPXStatistics = [
-                get(gpxStatistics).sliced(sliderValues[0], sliderValues[1]),
-                sliderValues[0],
-                sliderValues[1],
-            ];
+    /** The user moved the slider: the part of the selection between its bounds is highlighted. */
+    function updateSlicedStatistics([startStep, endStep]: number[]) {
+        if (validSelection && (startStep !== 0 || endStep !== steps)) {
+            const [start, end] = [toIndex(startStep), toIndex(endStep)];
+            const global = $statistics.slice(start, end);
+            slicedStatistics.set(global && { global, start, end });
         } else {
-            $slicedGPXStatistics = undefined;
-        }
-    }
-
-    function updateSliderValues() {
-        if ($slicedGPXStatistics !== undefined) {
-            sliderValues = [$slicedGPXStatistics[1], $slicedGPXStatistics[2]];
+            slicedStatistics.set(undefined);
         }
     }
 
+    // The slider follows the highlighted part, which can also be chosen on the elevation profile or
+    // reset (when the selection changes): it covers the whole selection when there is none.
+    // It only goes this way, the slider tells about its own changes (`onValueChange`).
     $effect(() => {
-        if (sliderValues) {
-            untrack(() => updateSlicedGPXStatistics());
-        }
-    });
-
-    $effect(() => {
-        if (
-            $slicedGPXStatistics !== undefined &&
-            ($slicedGPXStatistics[1] !== sliderValues[0] ||
-                $slicedGPXStatistics[2] !== sliderValues[1])
-        ) {
-            untrack(() => updateSliderValues());
-        }
+        const sliced = $slicedStatistics;
+        const max = steps;
+        untrack(() => {
+            const bounds = sliced ? [toStep(sliced.start), toStep(sliced.end)] : [0, max];
+            if (sliderValues[0] !== bounds[0] || sliderValues[1] !== bounds[1]) {
+                sliderValues = bounds;
+            }
+        });
     });
 
     onDestroy(() => {
-        $slicedGPXStatistics = undefined;
+        slicedStatistics.set(undefined);
         if (splitControls) {
             splitControls.destroy();
         }
@@ -86,7 +94,8 @@
     <div class="p-2">
         <Slider
             bind:value={sliderValues}
-            max={maxSliderValue}
+            onValueChange={updateSlicedStatistics}
+            max={steps}
             step={1}
             type="multiple"
             disabled={!validSelection}
@@ -94,8 +103,9 @@
     </div>
     <Button
         variant="outline"
-        disabled={!validSelection || !canCrop}
-        onclick={() => engine.crop(sliderValues[0], sliderValues[1])}
+        disabled={!validSelection || !$slicedStatistics}
+        onclick={() =>
+            $slicedStatistics && engine.crop($slicedStatistics.start, $slicedStatistics.end)}
     >
         <Crop size="16" />{i18n._('toolbar.scissors.crop')}
     </Button>

website/src/lib/components/toolbar/tools/scissors/scissors.ts

@@ -1,9 +1,32 @@
-import { writable, type Writable } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
+import { engine, type SplitType as EngineSplitType } from '$lib/engine';
+import { closestPointIndexIn } from '$lib/closest-point';
 
-export enum SplitType {
-    FILES = 'files',
-    TRACKS = 'tracks',
-    SEGMENTS = 'segments',
-}
+/** What a split cuts in two, the values being the ones of the engine. */
+export const SplitType = {
+    FILES: 'files',
+    TRACKS: 'tracks',
+    SEGMENTS: 'segments',
+} as const satisfies Record<string, EngineSplitType>;
+export type SplitType = (typeof SplitType)[keyof typeof SplitType];
 
 export let splitAs: Writable<SplitType> = writable(SplitType.FILES);
+
+/**
+ * Splits at the trackpoint of a selected segment that is the closest to `point`, as `splitAs` says.
+ * The statistics of the engine need to have the anchors (the scissors tool asks for them).
+ */
+export function splitAtPoint(segmentId: string, point: { lng: number; lat: number }) {
+    const statistics = get(engine.statistics);
+    const anchors = statistics.anchors;
+    const segment = anchors?.segmentIds.indexOf(segmentId) ?? -1;
+    if (!anchors || segment < 0) {
+        return;
+    }
+    const starts = anchors.segmentStarts;
+    const end = segment + 1 < starts.length ? starts[segment + 1] : statistics.length;
+    const index = closestPointIndexIn(statistics.lng, statistics.lat, starts[segment], end, point);
+    if (index !== undefined) {
+        engine.split(anchors.revision, index, get(splitAs));
+    }
+}

website/src/lib/components/toolbar/tools/scissors/split-controls.ts

@@ -1,22 +1,32 @@
-import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { Scissors } from 'lucide-static';
-import { selection } from '$lib/logic/selection';
-import { gpxStatistics } from '$lib/logic/statistics';
 import { get } from 'svelte/store';
-import { fileStateCollection } from '$lib/logic/file-state';
-import { fileActions } from '$lib/logic/file-actions';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 import type { GeoJSONSource } from 'maplibre-gl';
 import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
 import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
 import { loadSVGIcon } from '$lib/utils';
+import {
+    engine,
+    type Selection,
+    type SelectionStatistics,
+    type StatisticsRequest,
+} from '$lib/engine';
 
+/**
+ * The anchors inside the segments of the selection, where a click splits the file, the track or
+ * the segment: a command of the engine, which finds them by the index of their trackpoint in the
+ * selection.
+ */
 export class SplitControls {
     map: maplibregl.Map;
     layerEventManager: MapLayerEventManager;
     unsubscribes: Function[] = [];
+    /** What the tool needs from the engine, while it shows the anchors. */
+    request: StatisticsRequest = engine.requestStatistics();
+    selection: Selection = { type: 'empty' };
+    statistics: SelectionStatistics | undefined = undefined;
 
     layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
     layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
@@ -36,13 +46,29 @@ export class SplitControls {
             </svg>`
         );
 
-        this.unsubscribes.push(gpxStatistics.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(
+            engine.statistics.subscribe((statistics) => {
+                this.statistics = statistics;
+                this.addIfNeeded();
+            })
+        );
         this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
-        this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(
+            engine.selection.subscribe((selection) => {
+                this.selection = selection;
+                this.addIfNeeded();
+            })
+        );
     }
 
     addIfNeeded() {
-        let scissors = get(currentTool) === Tool.SCISSORS;
+        // the tool works on files, tracks and segments, not on waypoints
+        const scissors =
+            get(currentTool) === Tool.SCISSORS &&
+            (this.selection.type === 'file' ||
+                this.selection.type === 'track' ||
+                this.selection.type === 'segment');
+        this.request.set(scissors ? ['anchors'] : []);
         if (!scissors) {
             this.remove();
             return;
@@ -51,44 +77,42 @@ export class SplitControls {
         this.updateControls();
     }
 
-    updateControls() {
-        let data: GeoJSON.FeatureCollection = {
-            type: 'FeatureCollection',
-            features: [],
-        };
-        selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
-            let file = fileStateCollection.getFile(fileId);
-
-            if (file) {
-                file.forEachSegment((segment, trackIndex, segmentIndex) => {
-                    if (
-                        get(selection).hasAnyParent(
-                            new ListTrackSegmentItem(fileId, trackIndex, segmentIndex)
-                        )
-                    ) {
-                        for (let i = 1; i < segment.trkpt.length - 1; i++) {
-                            let point = segment.trkpt[i];
-                            if (point._data.anchor) {
-                                data.features.push({
-                                    type: 'Feature',
-                                    geometry: {
-                                        type: 'Point',
-                                        coordinates: [point.getLongitude(), point.getLatitude()],
-                                    },
-                                    properties: {
-                                        fileId: fileId,
-                                        trackIndex: trackIndex,
-                                        segmentIndex: segmentIndex,
-                                        pointIndex: i,
-                                        minZoom: point._data.zoom,
-                                    },
-                                });
-                            }
-                        }
-                    }
+    /** The anchors that are inside a segment, which is not where it starts or ends. */
+    inner(): GeoJSON.Feature[] {
+        const statistics = this.statistics;
+        const anchors = statistics?.anchors;
+        if (!statistics || !anchors) {
+            return [];
+        }
+        const starts = anchors.segmentStarts;
+        const features: GeoJSON.Feature[] = [];
+        let segment = 0;
+        for (let i = 0; i < anchors.indices.length; i++) {
+            const index = anchors.indices[i];
+            // the anchors are sorted: the segment can only be the same or a following one
+            while (segment + 1 < starts.length && starts[segment + 1] <= index) {
+                segment++;
+            }
+            const end = segment + 1 < starts.length ? starts[segment + 1] : statistics.length;
+            if (index > starts[segment] && index < end - 1) {
+                features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [statistics.lng[index], statistics.lat[index]],
+                    },
+                    properties: { index, minZoom: anchors.zooms[i] },
                 });
             }
-        }, false);
+        }
+        return features;
+    }
+
+    updateControls() {
+        const data: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: this.inner(),
+        };
 
         try {
             let source = this.map.getSource('split-controls') as GeoJSONSource | undefined;
@@ -161,19 +185,15 @@ export class SplitControls {
     }
 
     layerOnClick(e: maplibregl.MapLayerMouseEvent) {
-        let coordinates = (e.features![0].geometry as GeoJSON.Point).coordinates;
-        fileActions.split(
-            get(splitAs),
-            e.features![0].properties!.fileId,
-            e.features![0].properties!.trackIndex,
-            e.features![0].properties!.segmentIndex,
-            { lon: coordinates[0], lat: coordinates[1] },
-            e.features![0].properties!.pointIndex
-        );
+        const revision = this.statistics?.anchors?.revision;
+        if (revision !== undefined) {
+            engine.split(revision, e.features![0].properties!.index, get(splitAs));
+        }
     }
 
     destroy() {
         this.remove();
+        this.request.release();
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
     }
 }

website/src/lib/engine.ts

@@ -32,6 +32,9 @@ export type {
 
 type Wasm = typeof import('gpx-rs');
 
+/** What a split cuts in two: the file, the track or the segment of the trackpoint. */
+export type SplitType = 'files' | 'tracks' | 'segments';
+
 /**
  * How elements combine with the current selection: they `replace` it, are `add`ed to it, or are
  * `toggle`d (the ones already selected are removed). Adding and toggling only merge with elements
@@ -645,6 +648,26 @@ class Engine {
         return this.run((w) => w.reverse());
     }
 
+    /**
+     * Cuts the file, the track or the segment (see `SplitType`) of the trackpoint `at` of the
+     * selection in two, there: the trackpoint ends the first part and starts the second one. The
+     * first part keeps the ids, the second one (and what follows) gets new ones. `revision` is the
+     * one of `SelectionAnchors`, which `at` is an index of.
+     */
+    split(revision: number, at: number, splitType: SplitType) {
+        return this.run((w) =>
+            w.split(
+                revision,
+                at,
+                {
+                    files: w.SplitType.Files,
+                    tracks: w.SplitType.Tracks,
+                    segments: w.SplitType.Segments,
+                }[splitType]
+            )
+        );
+    }
+
     /**
      * Keeps the trackpoints `start` to `end` (both included) of the selection, counted over its
      * segments one after the other, and removes the others, with the segments, tracks and files

website/src/lib/logic/file-actions.ts

@@ -2,7 +2,6 @@ import { fileStateCollection } from '$lib/logic/file-state';
 import { fileActionManager } from '$lib/logic/file-action-manager';
 import { applyToOrderedItemsFromFile, copied, cut, selection } from '$lib/logic/selection';
 import { currentTool, Tool } from '$lib/components/toolbar/tools';
-import { SplitType } from '$lib/components/toolbar/tools/scissors/scissors';
 import {
     ListFileItem,
     ListLevel,
@@ -20,13 +19,12 @@ import {
     TrackPoint,
     TrackSegment,
     Waypoint,
-    type Coordinates,
     type LineStyleExtension,
     type WaypointType,
 } from 'gpx';
 import { get } from 'svelte/store';
 import { settings } from '$lib/logic/settings';
-import { getClosestLinePoint, getClosestTrackSegments, getElevation } from '$lib/utils';
+import { getClosestTrackSegments, getElevation } from '$lib/utils';
 import { gpxStatistics } from '$lib/logic/statistics';
 import { boundsManager } from './bounds';
 import { engine } from '$lib/engine';
@@ -333,69 +331,6 @@ export const fileActions = {
             });
         });
     },
-    split(
-        splitType: SplitType,
-        fileId: string,
-        trackIndex: number,
-        segmentIndex: number,
-        coordinates: Coordinates,
-        trkptIndex?: number
-    ) {
-        return fileActionManager.applyGlobal((draft) => {
-            let file = fileStateCollection.getFile(fileId);
-            if (file) {
-                let segment = file.trk[trackIndex].trkseg[segmentIndex];
-                let minIndex = 0;
-                if (trkptIndex === undefined) {
-                    // Find the point closest to split
-                    let closest = getClosestLinePoint(segment.trkpt, coordinates);
-                    minIndex = closest._data.index;
-                } else {
-                    minIndex = trkptIndex;
-                }
-                let absoluteIndex = minIndex;
-                file.forEachSegment((seg, trkIndex, segIndex) => {
-                    if (
-                        (trkIndex < trackIndex && splitType === SplitType.FILES) ||
-                        (trkIndex === trackIndex && segIndex < segmentIndex)
-                    ) {
-                        absoluteIndex += seg.trkpt.length;
-                    }
-                });
-                if (splitType === SplitType.FILES) {
-                    let newFile = draft.get(fileId);
-                    if (newFile) {
-                        newFile.crop(0, absoluteIndex);
-                        let newFile2 = file.clone();
-                        newFile2._data.id = getFileIds(1)[0];
-                        newFile2.crop(absoluteIndex, file.getNumberOfTrackPoints() - 1);
-                        draft.set(newFile2._data.id, freeze(newFile2));
-                    }
-                } else if (splitType === SplitType.TRACKS) {
-                    let newFile = draft.get(fileId);
-                    if (newFile) {
-                        let start = file.trk[trackIndex].clone();
-                        start.crop(0, absoluteIndex);
-                        let end = file.trk[trackIndex].clone();
-                        end.crop(absoluteIndex, file.trk[trackIndex].getNumberOfTrackPoints() - 1);
-                        newFile.replaceTracks(trackIndex, trackIndex, [start, end]);
-                    }
-                } else if (splitType === SplitType.SEGMENTS) {
-                    let newFile = draft.get(fileId);
-                    if (newFile) {
-                        let start = segment.clone();
-                        start.crop(0, minIndex);
-                        let end = segment.clone();
-                        end.crop(minIndex, segment.trkpt.length - 1);
-                        newFile.replaceTrackSegments(trackIndex, segmentIndex, segmentIndex, [
-                            start,
-                            end,
-                        ]);
-                    }
-                }
-            }
-        });
-    },
     reduce: (itemsAndPoints: Map<ListItem, TrackPoint[]>) => {
         if (itemsAndPoints.size === 0) {
             return;