Class SelectionHandles

packages/playground/src/components/SelectionHandles.ts:38–155

type DragSide = 'start' | 'end';

export class SelectionHandles implements Mountable {
    readonly root: HTMLElement;
    private startHandle: HTMLElement;
    private endHandle: HTMLElement;
    private currentHighlight: alphaTab.PlaybackHighlightChangeEventArgs | undefined;
    private dragging: DragSide | undefined;
    private unsubHighlight: () => void;

    private onMouseMove = (e: MouseEvent) => {
        if (!this.dragging) {
            return;
        }
        e.preventDefault();
        const beat = this.beatFromEvent(e);
        if (!beat || !this.currentHighlight) {
            return;
        }
        if (this.dragging === 'start') {
            this.api.highlightPlaybackRange(beat, this.currentHighlight.endBeat!);
        } else {
            this.api.highlightPlaybackRange(this.currentHighlight.startBeat!, beat);
        }
    };

    private onMouseUp = (e: MouseEvent) => {
        if (!this.dragging) {
            return;
        }
        e.preventDefault();
        this.endDrag();
        this.api.applyPlaybackRangeFromHighlight();
    };

    constructor(
        private api: alphaTab.AlphaTabApi,
        private viewportEl: HTMLElement
    ) {
        this.root = parseHtml(html`
            <div class="at-selection-handles">
                <div class="at-selection-handle at-selection-handle-start"></div>
                <div class="at-selection-handle at-selection-handle-end"></div>
            </div>
        `);
        this.startHandle = this.root.querySelector('.at-selection-handle-start')!;
        this.endHandle = this.root.querySelector('.at-selection-handle-end')!;

        this.startHandle.addEventListener('mousedown', e => this.beginDrag(e, 'start'));
        this.endHandle.addEventListener('mousedown', e => this.beginDrag(e, 'end'));
        document.addEventListener('mousemove', this.onMouseMove, true);
        document.addEventListener('mouseup', this.onMouseUp, true);

        this.unsubHighlight = api.playbackRangeHighlightChanged.on(e => this.update(e));
    }

    private beginDrag(e: MouseEvent, side: DragSide): void {
        e.preventDefault();
        this.dragging = side;
        this.viewportEl.classList.add('at-selection-handle-drag');