fix: always complete mouse presses and handle in-progress selections on render

packages/alphatab/src/AlphaTabApiBase.ts

@@ -2931,7 +2931,6 @@ export class AlphaTabApiBase<TSettings> {
 
         (this.beatMouseUp as EventEmitterOfT<Beat | null>).trigger(beat);
         this.uiFacade.triggerEvent(this.container, 'beatMouseUp', beat, originalEvent);
-        this._isBeatMouseDown = false;
     }
 
     private _seekToBeat(beat: Beat) {
@@ -2969,7 +2968,6 @@ export class AlphaTabApiBase<TSettings> {
 
         (this.noteMouseUp as EventEmitterOfT<Note | null>).trigger(note);
         this.uiFacade.triggerEvent(this.container, 'noteMouseUp', note, originalEvent);
-        this._isNoteMouseDown = false;
     }
 
     private _updateSelectionCursor(range: PlaybackRange | null) {
@@ -2997,6 +2995,8 @@ export class AlphaTabApiBase<TSettings> {
             if (this.settings.player.enablePlaybackRangeSelection || this.settings.player.enableSeekToClick) {
                 e.preventDefault();
             }
+            this._isBeatMouseDown = false;
+            this._isNoteMouseDown = false;
             const relX: number = e.getX(this.canvasElement);
             const relY: number = e.getY(this.canvasElement);
             const beat: Beat | null = this._renderer.boundsLookup?.getBeatAtPos(relX, relY) ?? null;
@@ -3039,23 +3039,36 @@ export class AlphaTabApiBase<TSettings> {
             const relX: number = e.getX(this.canvasElement);
             const relY: number = e.getY(this.canvasElement);
             const beat: Beat | null = this._renderer.boundsLookup?.getBeatAtPos(relX, relY) ?? null;
-            this._onBeatMouseUp(e, beat);
+            try {
+                this._onBeatMouseUp(e, beat);
 
-            if (this._isNoteMouseDown) {
-                if (beat) {
-                    const note = this._renderer.boundsLookup?.getNoteAtPos(beat, relX, relY) ?? null;
-                    this._onNoteMouseUp(e, note);
-                } else {
-                    this._onNoteMouseUp(e, null);
+                if (this._isNoteMouseDown) {
+                    if (beat) {
+                        const note = this._renderer.boundsLookup?.getNoteAtPos(beat, relX, relY) ?? null;
+                        this._onNoteMouseUp(e, note);
+                    } else {
+                        this._onNoteMouseUp(e, null);
+                    }
                 }
+            } finally {
+                this._isBeatMouseDown = false;
+                this._isNoteMouseDown = false;
             }
         });
-        this._renderer.postRenderFinished.on(() => {
-            if (!this._selectionStart || !this._hasCursor || !this.settings.player.enablePlaybackRangeSelection) {
-                return;
-            }
-            this._cursorSelectRange(this._selectionStart, this._selectionEnd);
-        });
+    }
+
+    /**
+     * Rebuilds the selection highlight against the current layout. A selection without an end beat yields an empty highlight.
+     */
+    private _refreshSelectionHighlight() {
+        if (!this._selectionStart) {
+            return;
+        }
+        this._selectionStart.bounds = undefined;
+        if (this._selectionEnd) {
+            this._selectionEnd.bounds = undefined;
+        }
+        this._cursorSelectRange(this._selectionStart, this._selectionEnd);
     }
 
     /**
@@ -3681,9 +3694,7 @@ export class AlphaTabApiBase<TSettings> {
 
         this._currentBeat = null;
         this._cursorUpdateTick(this._previousTick, false, 1, true, true);
-        if (this._selectionStart) {
-            this.highlightPlaybackRange(this._selectionStart.beat, this._selectionEnd!.beat);
-        }
+        this._refreshSelectionHighlight();
 
         (this.postRenderFinished as EventEmitter).trigger();
         this.uiFacade.triggerEvent(this.container, 'postRenderFinished', null);

packages/alphatab/src/platform/IContainer.ts

@@ -75,11 +75,18 @@ export interface IContainer {
 
     /**
      * This event occurs when a mouse/finger moves on top of the control.
+     *
+     * @remarks
+     * While a press started on this control is active, moves are reported even if they happen outside the control.
      */
     mouseMove: IEventEmitterOfT<IMouseEventArgs>;
 
     /**
      * This event occurs when a mouse/finger is released from the control.
+     *
+     * @remarks
+     * Every press started on this control ends with exactly one mouseUp, also when the release happens
+     * outside the control or the gesture is cancelled by the system.
      */
     mouseUp: IEventEmitterOfT<IMouseEventArgs>;
 }

packages/alphatab/src/platform/javascript/HtmlElementContainer.ts

@@ -1,4 +1,4 @@
-import type { IEventEmitter, IEventEmitterOfT } from '@coderline/alphatab/EventEmitter';
+import { EventEmitterOfT, type IEventEmitter, type IEventEmitterOfT } from '@coderline/alphatab/EventEmitter';
 import type { IContainer } from '@coderline/alphatab/platform/IContainer';
 import type { IMouseEventArgs } from '@coderline/alphatab/platform/IMouseEventArgs';
 import { BrowserMouseEventArgs } from '@coderline/alphatab/platform/javascript/BrowserMouseEventArgs';
@@ -81,53 +81,9 @@ export class HtmlElementContainer implements IHtmlElementContainer {
     public constructor(element: HTMLElement) {
         this.element = element;
 
-        this.mouseDown = {
-            on: (value: any) => {
-                const nativeListener: (e: MouseEvent) => void = e => {
-                    value(new BrowserMouseEventArgs(e));
-                };
-                this.element.addEventListener('mousedown', nativeListener, true);
-                return () => {
-                    this.element.removeEventListener('mousedown', nativeListener, true);
-                };
-            },
-            off: (_value: any) => {
-                // not supported due to wrapping
-            }
-        };
-
-        this.mouseUp = {
-            on: (value: any) => {
-                const nativeListener: (e: MouseEvent) => void = e => {
-                    value(new BrowserMouseEventArgs(e));
-                };
-
-                this.element.addEventListener('mouseup', nativeListener, true);
-
-                return () => {
-                    this.element.removeEventListener('mouseup', nativeListener, true);
-                };
-            },
-            off: (_value: any) => {
-                // not supported due to wrapping
-            }
-        };
-
-        this.mouseMove = {
-            on: (value: any) => {
-                const nativeListener: (e: MouseEvent) => void = e => {
-                    value(new BrowserMouseEventArgs(e));
-                };
-                this.element.addEventListener('mousemove', nativeListener, true);
-
-                return () => {
-                    this.element.removeEventListener('mousemove', nativeListener, true);
-                };
-            },
-            off: (_: any) => {
-                // not supported due to wrapping
-            }
-        };
+        this.mouseDown = this._createMouseEmitter(this._mouseDown);
+        this.mouseMove = this._createMouseEmitter(this._mouseMove);
+        this.mouseUp = this._createMouseEmitter(this._mouseUp);
 
         const container = this;
         this.resize = {
@@ -151,6 +107,100 @@ export class HtmlElementContainer implements IHtmlElementContainer {
         };
     }
 
+    private readonly _mouseDown = new EventEmitterOfT<IMouseEventArgs>();
+    private readonly _mouseMove = new EventEmitterOfT<IMouseEventArgs>();
+    private readonly _mouseUp = new EventEmitterOfT<IMouseEventArgs>();
+    private _mouseListenersAttached = false;
+    /**
+     * The document receiving the move and release events of the active left button press, if any.
+     */
+    private _pressDocument: Document | null = null;
+    /**
+     * The last event handled by the document listeners. The same event reaches the element listeners afterwards
+     * and must not be reported twice.
+     */
+    private _pressHandledEvent: MouseEvent | null = null;
+
+    private _createMouseEmitter(emitter: EventEmitterOfT<IMouseEventArgs>): IEventEmitterOfT<IMouseEventArgs> {
+        return {
+            on: (value: (e: IMouseEventArgs) => void) => {
+                this._attachMouseListeners();
+                return emitter.on(value);
+            },
+            off: (value: (e: IMouseEventArgs) => void) => {
+                emitter.off(value);
+            }
+        };
+    }
+
+    private _attachMouseListeners() {
+        if (this._mouseListenersAttached) {
+            return;
+        }
+        this._mouseListenersAttached = true;
+        this.element.addEventListener('mousedown', this._onElementMouseDown, true);
+        this.element.addEventListener('mousemove', this._onElementMouseMove, true);
+        this.element.addEventListener('mouseup', this._onElementMouseUp, true);
+    }
+
+    private _onElementMouseDown = (e: MouseEvent) => {
+        if (e.button === 0) {
+            this._beginPress();
+        }
+        this._mouseDown.trigger(new BrowserMouseEventArgs(e));
+    };
+
+    private _onElementMouseMove = (e: MouseEvent) => {
+        if (!this._pressDocument && e !== this._pressHandledEvent) {
+            this._mouseMove.trigger(new BrowserMouseEventArgs(e));
+        }
+    };
+
+    private _onElementMouseUp = (e: MouseEvent) => {
+        if (!this._pressDocument && e !== this._pressHandledEvent) {
+            this._mouseUp.trigger(new BrowserMouseEventArgs(e));
+        }
+    };
+
+    private _onPressMouseMove = (e: MouseEvent) => {
+        this._pressHandledEvent = e;
+        if ((e.buttons & 1) === 0) {
+            // the release happened where this document could not observe it (e.g. outside the browser window)
+            this._endPress();
+            this._mouseUp.trigger(new BrowserMouseEventArgs(e));
+            return;
+        }
+        this._mouseMove.trigger(new BrowserMouseEventArgs(e));
+    };
+
+    private _onPressMouseUp = (e: MouseEvent) => {
+        this._pressHandledEvent = e;
+        if (e.button === 0) {
+            this._endPress();
+        }
+        this._mouseUp.trigger(new BrowserMouseEventArgs(e));
+    };
+
+    private _beginPress() {
+        if (this._pressDocument) {
+            return;
+        }
+        const doc = this.element.ownerDocument;
+        this._pressDocument = doc;
+        doc.addEventListener('mousemove', this._onPressMouseMove, true);
+        doc.addEventListener('mouseup', this._onPressMouseUp, true);
+    }
+
+    private _endPress() {
+        const doc = this._pressDocument;
+        if (!doc) {
+            return;
+        }
+        this._pressDocument = null;
+        doc.removeEventListener('mousemove', this._onPressMouseMove, true);
+        doc.removeEventListener('mouseup', this._onPressMouseUp, true);
+    }
+
     public stopAnimation(): void {
         this.element.style.transition = 'none';
     }
@@ -194,12 +244,14 @@ export class HtmlElementContainer implements IHtmlElementContainer {
     public mouseDown: IEventEmitterOfT<IMouseEventArgs>;
 
     /**
-     * This event occurs when a mouse/finger moves on top of the control.
+     * This event occurs when a mouse/finger moves on top of the control,
+     * or anywhere in the document while a left button press started on the control is active.
      */
     public mouseMove: IEventEmitterOfT<IMouseEventArgs>;
 
     /**
      * This event occurs when a mouse/finger is released from the control.
+     * A left button press started on the control always ends with a mouseUp, wherever the release happens.
      */
     public mouseUp: IEventEmitterOfT<IMouseEventArgs>;