customCursorHandler

since 1.8.1

customCursorHandlerJavaScriptCustomCursorHandler.netcustomCursorHandlerAndroid

A custom cursor handler which will be used to update the cursor positions during playback.

JavaScript

customCursorHandler: ICursorHandler | undefined;

C#

ICursorHandler? CustomCursorHandler { get; set; }

Kotlin

var customCursorHandler: ICursorHandler?

Examples

JavaScript

const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'));
api.customCursorHandler = {
  _customAdorner: undefined,
  onAttach(cursors) {
    this._customAdorner = document.createElement('div');
    this._customAdorner.classList.add('cursor-adorner');
    cursors.cursorWrapper.element.appendChild(this._customAdorner);
  },
  onDetach(cursors) { this._customAdorner.remove(); },
  placeBarCursor(barCursor, beatBounds) {
    const barBoundings = beatBounds.barBounds.masterBarBounds;
    const barBounds = barBoundings.visualBounds;
    barCursor.setBounds(barBounds.x, barBounds.y, barBounds.w, barBounds.h);
  },
  placeBeatCursor(beatCursor, beatBounds, startBeatX) {
    const barBoundings = beatBounds.barBounds.masterBarBounds;
    const barBounds = barBoundings.visualBounds;
    beatCursor.transitionToX(0, startBeatX);
    beatCursor.setBounds(startBeatX, barBounds.y, 1, barBounds.h);
    this._customAdorner.style.left = startBeatX + 'px';
    this._customAdorner.style.top = (barBounds.y - 10) + 'px';
    this._customAdorner.style.width = '1px';
    this._customAdorner.style.height = '10px';
    this._customAdorner.style.transition = 'left 0ms linear'; // stop animation
  },
  transitionBeatCursor(beatCursor, beatBounds, startBeatX, endBeatX, duration, cursorMode) {
    this._customAdorner.style.transition = `left ${duration}ms linear`; // start animation
    this._customAdorner.style.left = endBeatX + 'px';
  }
}

C#

var api = new AlphaTabApi<MyControl>(...);
api.CustomCursorHandler = new CustomCursorHandler();

Android

val api = AlphaTabApi<MyControl>(...)
api.customCursorHandler = CustomCursorHandler();