|
| 1 | +--- |
| 2 | +title: customCursorHandler |
| 3 | +sidebar_custom_props: |
| 4 | + kind: property |
| 5 | + category: Properties - Player |
| 6 | + since: 1.8.1 |
| 7 | +--- |
| 8 | + |
| 9 | +import { Tabs, TabItem, CodeBadge, SinceBadge, DynHeading, Link, Signature, PropertyDescription } from '@site/src/reference-commons' |
| 10 | + |
| 11 | +<SinceBadge since="1.8.1" /> |
| 12 | +<PropertyDescription /> |
| 13 | +A custom cursor handler which will be used to update the cursor positions during playback. |
| 14 | + |
| 15 | +<Signature style="block" |
| 16 | + js={[["identifier","customCursorHandler"],["token",":"],["whitespace"," "],["identifier","ICursorHandler"],["whitespace"," "],["token","|"],["whitespace"," "],["keyword","undefined"],["token",";"]]} |
| 17 | + csharp={[["identifier","ICursorHandler"],["token","?"],["whitespace"," "],["identifier","CustomCursorHandler"],["whitespace"," "],["token","{"],["whitespace"," "],["keyword","get"],["token",";"],["whitespace"," "],["keyword","set"],["token",";"],["whitespace"," "],["token","}"]]} |
| 18 | + kotlin={[["keyword","var"],["whitespace"," "],["identifier","customCursorHandler"],["token",":"],["whitespace"," "],["identifier","ICursorHandler"],["token","?"]]} |
| 19 | +/> |
| 20 | + |
| 21 | + |
| 22 | +## Examples |
| 23 | + |
| 24 | +<Tabs |
| 25 | + defaultValue="javascript" |
| 26 | + values={[ |
| 27 | + { label: "JavaScript", value: "javascript"}, |
| 28 | + { label: "C#", value: "csharp"}, |
| 29 | + { label: "Android", value: "android"} |
| 30 | + ]} |
| 31 | +> |
| 32 | +<TabItem value="javascript"> |
| 33 | +```js |
| 34 | +const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); |
| 35 | +api.customCursorHandler = { |
| 36 | + _customAdorner: undefined, |
| 37 | + onAttach(cursors) { |
| 38 | + this._customAdorner = document.createElement('div'); |
| 39 | + this._customAdorner.classList.add('cursor-adorner'); |
| 40 | + cursors.cursorWrapper.element.appendChild(this._customAdorner); |
| 41 | + }, |
| 42 | + onDetach(cursors) { this._customAdorner.remove(); }, |
| 43 | + placeBarCursor(barCursor, beatBounds) { |
| 44 | + const barBoundings = beatBounds.barBounds.masterBarBounds; |
| 45 | + const barBounds = barBoundings.visualBounds; |
| 46 | + barCursor.setBounds(barBounds.x, barBounds.y, barBounds.w, barBounds.h); |
| 47 | + }, |
| 48 | + placeBeatCursor(beatCursor, beatBounds, startBeatX) { |
| 49 | + const barBoundings = beatBounds.barBounds.masterBarBounds; |
| 50 | + const barBounds = barBoundings.visualBounds; |
| 51 | + beatCursor.transitionToX(0, startBeatX); |
| 52 | + beatCursor.setBounds(startBeatX, barBounds.y, 1, barBounds.h); |
| 53 | + this._customAdorner.style.left = startBeatX + 'px'; |
| 54 | + this._customAdorner.style.top = (barBounds.y - 10) + 'px'; |
| 55 | + this._customAdorner.style.width = '1px'; |
| 56 | + this._customAdorner.style.height = '10px'; |
| 57 | + this._customAdorner.style.transition = 'left 0ms linear'; // stop animation |
| 58 | + }, |
| 59 | + transitionBeatCursor(beatCursor, beatBounds, startBeatX, endBeatX, duration, cursorMode) { |
| 60 | + this._customAdorner.style.transition = `left ${duration}ms linear`; // start animation |
| 61 | + this._customAdorner.style.left = endBeatX + 'px'; |
| 62 | + } |
| 63 | +} |
| 64 | +``` |
| 65 | +</TabItem> |
| 66 | +<TabItem value="csharp"> |
| 67 | +```cs |
| 68 | +var api = new AlphaTabApi<MyControl>(...); |
| 69 | +api.CustomCursorHandler = new CustomCursorHandler(); |
| 70 | +``` |
| 71 | +</TabItem> |
| 72 | +<TabItem value="android"> |
| 73 | +```kotlin |
| 74 | +val api = AlphaTabApi<MyControl>(...) |
| 75 | +api.customCursorHandler = CustomCursorHandler(); |
| 76 | +``` |
| 77 | +</TabItem> |
| 78 | +</Tabs> |
0 commit comments