update scissors tool, closes #20

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

@@ -6,7 +6,7 @@ import { currentPopupWaypoint, deleteWaypoint, waypointPopup } from "./WaypointP
 import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
 import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
 import type { Waypoint } from "gpx";
-import { getElevation, resetCursor, setCursor, setGrabbingCursor, setPointerCursor } from "$lib/utils";
+import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
 import { font } from "$lib/assets/layers";
 import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
 import { MapPin } from "lucide-static";
@@ -320,7 +320,7 @@ export class GPXLayer {
         let segmentIndex = e.features[0].properties.segmentIndex;
 
         if (get(currentTool) === Tool.SCISSORS && get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
-            setCursor(`url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1"><path d="M 3.200 3.200 C 0.441 5.959, 2.384 9.516, 7 10.154 C 10.466 10.634, 10.187 13.359, 6.607 13.990 C 2.934 14.637, 1.078 17.314, 2.612 19.750 C 4.899 23.380, 10 21.935, 10 17.657 C 10 16.445, 12.405 13.128, 15.693 9.805 C 18.824 6.641, 21.066 3.732, 20.674 3.341 C 20.283 2.950, 18.212 4.340, 16.072 6.430 C 12.019 10.388, 10 10.458, 10 6.641 C 10 2.602, 5.882 0.518, 3.200 3.200 M 4.446 5.087 C 3.416 6.755, 5.733 8.667, 7.113 7.287 C 8.267 6.133, 7.545 4, 6 4 C 5.515 4, 4.816 4.489, 4.446 5.087 M 14 14.813 C 14 16.187, 19.935 21.398, 20.667 20.667 C 21.045 20.289, 20.065 18.634, 18.490 16.990 C 15.661 14.036, 14 13.231, 14 14.813 M 4.446 17.087 C 3.416 18.755, 5.733 20.667, 7.113 19.287 C 8.267 18.133, 7.545 16, 6 16 C 5.515 16, 4.816 16.489, 4.446 17.087" stroke="black" stroke-width="1.2" fill="white" fill-rule="evenodd"/></svg>') 12 12, auto`);
+            setScissorsCursor();
         } else {
             setPointerCursor();
         }

website/src/lib/components/toolbar/ToolbarItemMenu.svelte

@@ -4,7 +4,7 @@
 	import { flyAndScale } from '$lib/utils';
 	import * as Card from '$lib/components/ui/card';
 	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
-	import Scissors from '$lib/components/toolbar/tools/Scissors.svelte';
+	import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
 	import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
 	import Time from '$lib/components/toolbar/tools/Time.svelte';
 	import Merge from '$lib/components/toolbar/tools/Merge.svelte';

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

@@ -15,12 +15,22 @@
 	import { Slider } from '$lib/components/ui/slider';
 	import * as Select from '$lib/components/ui/select';
 	import { Separator } from '$lib/components/ui/separator';
-	import { gpxStatistics, slicedGPXStatistics, splitAs } from '$lib/stores';
+	import { gpxStatistics, map, slicedGPXStatistics, splitAs } from '$lib/stores';
 	import { get } from 'svelte/store';
 	import { _ } from 'svelte-i18n';
 	import { onDestroy, tick } from 'svelte';
 	import { Crop } from 'lucide-svelte';
 	import { dbUtils } from '$lib/db';
+	import { SplitControls } from './SplitControls';
+
+	let splitControls: SplitControls | undefined = undefined;
+
+	$: if ($map) {
+		if (splitControls) {
+			splitControls.destroy();
+		}
+		splitControls = new SplitControls($map);
+	}
 
 	$: validSelection =
 		$selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
@@ -86,6 +96,10 @@
 
 	onDestroy(() => {
 		$slicedGPXStatistics = undefined;
+		if (splitControls) {
+			splitControls.destroy();
+			splitControls = undefined;
+		}
 	});
 </script>
 

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

@@ -0,0 +1,165 @@
+import { TrackPoint, TrackSegment } from "gpx";
+import { get } from "svelte/store";
+import mapboxgl from "mapbox-gl";
+import { dbUtils, getFile } from "$lib/db";
+import { applyToOrderedSelectedItemsFromFile, selection } from "$lib/components/file-list/Selection";
+import { ListTrackSegmentItem } from "$lib/components/file-list/FileList";
+import { currentTool, gpxStatistics, Tool } from "$lib/stores";
+import { _ } from "svelte-i18n";
+import { Scissors } from "lucide-static";
+
+export class SplitControls {
+    active: boolean = false;
+    map: mapboxgl.Map;
+    controls: ControlWithMarker[] = [];
+    shownControls: ControlWithMarker[] = [];
+    unsubscribes: Function[] = [];
+
+    toggleControlsForZoomLevelAndBoundsBinded: () => void = this.toggleControlsForZoomLevelAndBounds.bind(this);
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+
+        this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(gpxStatistics.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
+    }
+
+    addIfNeeded() {
+        let scissors = get(currentTool) === Tool.SCISSORS;
+        if (!scissors) {
+            if (this.active) {
+                this.remove();
+            }
+            return;
+        }
+
+        if (this.active) {
+            this.updateControls();
+        } else {
+            this.add();
+        }
+    }
+
+    add() {
+        this.active = true;
+
+        this.map.on('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.on('move', this.toggleControlsForZoomLevelAndBoundsBinded);
+    }
+
+    updateControls() { // Update the markers when the files change
+
+        let controlIndex = 0;
+
+        applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+            let file = getFile(fileId);
+
+            if (file) {
+                file.forEachSegment((segment, trackIndex, segmentIndex) => {
+                    if (get(selection).hasAnyParent(new ListTrackSegmentItem(fileId, trackIndex, segmentIndex))) {
+                        for (let point of segment.trkpt.slice(1, -1)) { // Update the existing controls (could be improved by matching the existing controls with the new ones?)
+                            if (point._data.anchor) {
+                                if (controlIndex < this.controls.length) {
+                                    this.controls[controlIndex].point = point;
+                                    this.controls[controlIndex].segment = segment;
+                                    this.controls[controlIndex].trackIndex = trackIndex;
+                                    this.controls[controlIndex].segmentIndex = segmentIndex;
+                                    this.controls[controlIndex].marker.setLngLat(point.getCoordinates());
+                                } else {
+                                    this.controls.push(this.createControl(point, segment, fileId, trackIndex, segmentIndex));
+                                }
+                                controlIndex++;
+                            }
+                        }
+                    }
+                });
+
+            }
+        }, false);
+
+        while (controlIndex < this.controls.length) { // Remove the extra controls
+            this.controls.pop()?.marker.remove();
+        }
+
+        this.toggleControlsForZoomLevelAndBounds();
+    }
+
+    remove() {
+        this.active = false;
+
+        for (let control of this.controls) {
+            control.marker.remove();
+        }
+        this.map.off('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.map.off('move', this.toggleControlsForZoomLevelAndBoundsBinded);
+    }
+
+    toggleControlsForZoomLevelAndBounds() { // Show markers only if they are in the current zoom level and bounds
+        this.shownControls.splice(0, this.shownControls.length);
+
+        let southWest = this.map.unproject([0, this.map.getCanvas().height]);
+        let northEast = this.map.unproject([this.map.getCanvas().width, 0]);
+        let bounds = new mapboxgl.LngLatBounds(southWest, northEast);
+
+        let zoom = this.map.getZoom();
+        this.controls.forEach((control) => {
+            control.inZoom = control.point._data.zoom <= zoom;
+            if (control.inZoom && bounds.contains(control.marker.getLngLat())) {
+                control.marker.addTo(this.map);
+                this.shownControls.push(control);
+            } else {
+                control.marker.remove();
+            }
+        });
+    }
+
+    createControl(point: TrackPoint, segment: TrackSegment, fileId: string, trackIndex: number, segmentIndex: number): ControlWithMarker {
+        let element = document.createElement('div');
+        element.className = `h-6 w-6 p-0.5 rounded-full bg-white border-2 border-black cursor-pointer`;
+        element.innerHTML = Scissors.replace('width="24"', "").replace('height="24"', "");
+        console.log(element.innerHTML);
+
+        let marker = new mapboxgl.Marker({
+            draggable: true,
+            className: 'z-10',
+            element
+        }).setLngLat(point.getCoordinates());
+
+        let control = {
+            point,
+            segment,
+            fileId,
+            trackIndex,
+            segmentIndex,
+            marker,
+            inZoom: false
+        };
+
+        marker.getElement().addEventListener('click', (e) => {
+            e.stopPropagation();
+            console.log('click', fileId, trackIndex, segmentIndex, point.getCoordinates(), point._data.index);
+            dbUtils.split(fileId, trackIndex, segmentIndex, point.getCoordinates(), point._data.index);
+        });
+
+        return control;
+    }
+
+    destroy() {
+        this.remove();
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    }
+}
+
+type Control = {
+    segment: TrackSegment;
+    fileId: string;
+    trackIndex: number;
+    segmentIndex: number;
+    point: TrackPoint;
+};
+
+type ControlWithMarker = Control & {
+    marker: mapboxgl.Marker;
+    inZoom: boolean;
+};