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

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].fileId = fileId;
                                    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"', "").replace('stroke="currentColor"', 'stroke="black"');

        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();
            dbUtils.split(control.fileId, control.trackIndex, control.segmentIndex, control.point.getCoordinates(), control.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;
};