diff --git a/docs/reference/_apiTable.mdx b/docs/reference/_apiTable.mdx index 6afa5f0..f65f440 100644 --- a/docs/reference/_apiTable.mdx +++ b/docs/reference/_apiTable.mdx @@ -705,6 +705,16 @@ import { Signature } from "@site/src/components/Signature"; The volume of the count-in metronome ticks. + + + + + + + + A custom cursor handler which will be used to update the cursor positions during playback. + + diff --git a/docs/reference/api/customcursorhandler.mdx b/docs/reference/api/customcursorhandler.mdx new file mode 100644 index 0000000..0ee51bd --- /dev/null +++ b/docs/reference/api/customcursorhandler.mdx @@ -0,0 +1,78 @@ +--- +title: customCursorHandler +sidebar_custom_props: + kind: property + category: Properties - Player + since: 1.8.1 +--- + +import { Tabs, TabItem, CodeBadge, SinceBadge, DynHeading, Link, Signature, PropertyDescription } from '@site/src/reference-commons' + + + +A custom cursor handler which will be used to update the cursor positions during playback. + + + + +## Examples + + + +```js +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'; + } +} +``` + + +```cs +var api = new AlphaTabApi(...); +api.CustomCursorHandler = new CustomCursorHandler(); +``` + + +```kotlin +val api = AlphaTabApi(...) +api.customCursorHandler = CustomCursorHandler(); +``` + + diff --git a/docs/releases/release1_8.mdx b/docs/releases/release1_8.mdx index 47fa56f..f6dd427 100644 --- a/docs/releases/release1_8.mdx +++ b/docs/releases/release1_8.mdx @@ -5,16 +5,92 @@ title: v1.8 import { AlphaTab } from '@site/src/components/AlphaTab'; import { AlphaTexSample } from '@site/src/components/AlphaTexSample'; -TODO: describe how to use features +## 1.8.1 + +This hotfix release brings following improvements + +### Music Notation + +#### render: respect diatonic scales for note placement + +https://github.com/CoderLine/alphaTab/pull/2534 + +Up to this release alphaTab had rather a "chromatic spelling" when it comes to placing note heads and accidentals. This means it simply looked at the octave and +applied accidentals accordingly where needed. This leads to non-optimal display of notes in various key signatures. + +e.g. For a F# key signature we would show a F-note with a naturalize accidental instead of a E# note without any accidental (the # is applied via key signature). + +{` +\\title "F# Major Scale" +\\ks f# +\\tuning (G2 D2 A1 E1) +\\clef bass +:4 +2.4 4.4 1.3 2.3 | +4.3 1.2 3.2 4.2 | +4.2 3.2 1.2 4.3 | +2.3 1.3 4.4 2.4 +`} + +Thanks to [@tbreuss](https://github.com/tbreuss) for reporting this problem. + +### Guitar Pro extensions + +#### importer: correct GP5 bass clef detection (Guitar Pro 3-5) +https://github.com/CoderLine/alphaTab/pull/2531 + +The improvements for detecting bass clefs in GP5 files caused a strange bug where we treated almost all +files with a bass clef. This fix ensures the correct behavior. + +#### importer: handle all Guitar Pro 5 percussion instruments +https://github.com/CoderLine/alphaTab/pull/2537 + +As we updated the percussion handling 1.8.0 there broke some compatibility things with Guitar Pro 5. +The latest Guitar Pro versions do not support all percussion instruments which existed in Guitar Pro 5 and alphaTab inherited that problem. + +We added some workarounds to ensure we are compatible with these special percussion instruments. +The affected instruments are mainly part of the "General Sound" MIDI standard and cover some rather rarely used instruments. + +We map unsupported articulations to known ones and also handle fallback scenarios better. + +Thanks [@LIUBINfighter](https://github.com/LIUBINfighter) for reporting this problem. + +### Player + +#### player: animate cursor to playback range end +https://github.com/CoderLine/alphaTab/pull/2536 + +This is a small improvement in the cursor animation for alphaTab. Unless there are some repeats or jumps, the beat cursor typically +animates from the start beat to the next beat. But if users select a part of the song to be played or the playback range is set via code, +the cursor visually exceeds the selected range. + +While technically it is not wrong to indicate that the playback reaches over to the next beat, it looks rather wrong from a UI/UX perspective. + +With this improvement the cursor will now animate to the end of the selected beat in such cases. + +Thanks [@AvaTheArchitect](https://github.com/AvaTheArchitect) for reporting this problem. + +#### player: allow custom cursor handlers +https://github.com/CoderLine/alphaTab/pull/2536 + +As part of the cursor animation improvements we also added the possibility to handle the cursor placement in a custom way. +This extension point is similar to the `IScrollHandlers` we added (see below). The new `ICursorHandler` which can be set via `api.customCursorHandler` +allows custom placing of the bar and beat cursor. It is currently tightly coupled to the way alphaTab handles the cursor placement. + +If you are implementing a custom extended cursor (e.g. with more complex UI elements) you can now handle all the placement and animation logic in a custom implementation. +You can start your own implementation by looking at our default implementations in the alphaTex codebase and work your way from there. + +Likely this API still needs some fine-tuning and extensions, but considering this is a patch release, it should allow handling most important bits. + ## 1.8.0 -This has been one of the fastest alphaTab releases so far. Within 1 month we added 17 features/improvements -and fixed 10 bugs. Let's dive in. +This has been one of the fastest alphaTab releases so far. Within 1 month we added quite a list of improvements and fixes. +Let's dive in. 🤘😎 ### Music Notation -#### render: extend barlines across staves in system +#### notation: extend bar-lines across staves in system https://github.com/CoderLine/alphaTab/pull/2416 This new option allows extending the bar lines across the staves in the system connecting them @@ -40,7 +116,13 @@ the option can be set via alphaTex or on the stylesheet object after loading the 0.3.4 2.3.4 5.3.4 7.3.4 `} -#### render: multi-system slurs +This feature can be configured via: + +* [`\\extendBarLine`](/docs/alphatex/score-metadata#extendbarlines) in alphaTex +* File / StyleSheet / Systems & Staves in Guitar Pro +* [`score.stylesheet.extendBarLines`](/docs/reference/types/model/renderstylesheet/#extendbarlines) on the data model. + +#### notation: multi-system slurs https://github.com/CoderLine/alphaTab/pull/2425 Previously alphaTab only rendered slurs on single-system breaks. If a slur spans multiple systems @@ -56,14 +138,14 @@ r | r | r | r | C4 {slur s1} | r `} -#### render: improved note head alignment and displacement. +#### notation: improved note head alignment and displacement. https://github.com/CoderLine/alphaTab/pull/2426 https://github.com/CoderLine/alphaTab/pull/2430 With this change we now align note heads according to more common practices. -The first change is to align the primary note heads on the same axis. Basically: on an upwards stem the left note heads, and on a downwards stem the right noteheads are now aligned. +The first change is to align the primary note heads on the same axis. Basically: on an upwards stem the left note heads, and on a downwards stem the right note heads are now aligned. Displaced note-heads are shifted to the other side of the stem. With this improvement as a base, we now also merge or further shift note-heads when multiple voices are contained in a bar. @@ -75,7 +157,7 @@ E5*5 \\voice C5 D5 E5 F5 G5`} -#### render: in-score chord diagrams +#### notation: in-score chord diagrams https://github.com/CoderLine/alphaTab/pull/2435 Often requested but never shipped. Now they are available: chord diagrams inside the music sheet. @@ -89,7 +171,7 @@ With this change chord diagrams can be shown inside the music sheet above the st (0.1 0.2 1.3 2.4 2.5 0.6){ch "E"} `} -#### render: numbered notation ties and dash placement +#### notation: numbered notation ties and dash placement https://github.com/CoderLine/alphaTab/pull/2438 alphaTab 1.7 had some incorrect display of numbered notation. Following improvements were added in this release: @@ -101,15 +183,15 @@ alphaTab 1.7 had some incorrect display of numbered notation. Following improvem * key signature has been moved to an own effect band. {` -\staff {score numbered} -\hidedynamics +\\staff {score numbered} +\\hidedynamics C5.1 | C4 {tu 3} * 3 -\staff +\\staff C4.4 *4 `} -#### render: hide empty staves +#### notation: hide empty staves https://github.com/CoderLine/alphaTab/pull/2443 With this feature we add an option to hide staves if they are empty. This feature mainly targets @@ -119,7 +201,7 @@ without content will be hidden. At this point alphaTab will not hide whole systems to avoid side-effects during playback and the related cursor placement. If alphaTab detects tha all systems are empty, it will force the first one to be visible. -{` +{` \\hideEmptyStaves \\defaultSystemsLayout 3 \\multiTrackTrackNamePolicy allSystems @@ -139,8 +221,12 @@ C4.4 *4 | r.1 | r.1 | r.1 | C4 | `} +This feature can be configured via: + +* [`\hideEmptyStaves`](/docs/alphatex/score-metadata#hideemptystaves) and [`\hideEmptyStavesInFirstSystem`](/docs/alphatex/score-metadata#hideemptystavesinfirstsystem) in alphaTex +* [`score.stylesheet.hideEmptyStaves`](/docs/reference/types/model/renderstylesheet/#hideemptystaves) and [`score.stylesheet.hideEmptyStavesInFirstSystem`](/docs/reference/types/model/renderstylesheet/#hideemptystavesinfirstsystem) on the data model. -#### render: parchment layout +#### notation: parchment layout https://github.com/CoderLine/alphaTab/pull/2459 The parchment layout is is a variation of the currently available `page` layout. THe special thing about this layout is that the @@ -160,10 +246,14 @@ The parchment layout is typically more optimized for printing and fixed layouts \\scale 1 C4 * 4 | `} +This feature can be configured via: + +* [`settings.display.layoutMode`](/docs/reference/settings/display/layoutmode) setting it to [`LayoutMode.Parchment`](/docs/reference/types/layoutmode) + #### notation: buzzroll tremolos https://github.com/CoderLine/alphaTab/pull/2476 -With this change we now support buzroll tremolos. It can be separately configured if these tremolos should be played like classical +With this change we now support buzzroll tremolos. It can be separately configured if these tremolos should be played like classical ones. {` @@ -174,7 +264,13 @@ C4 {tp 3} | C4 {tp (3 buzzRoll)} | `} -#### render: advanced font configurations and lyric paddings +BuzzRolls can be used via: + +* [`tp`](/docs/alphatex/beat-properties#tp) on alphaTex +* [MusicXML](https://www.w3.org/2021/06/musicxml40/musicxml-reference/elements/tremolo/) using tremolo marks `0` or setting the `smufl` attribute. + + +#### style: advanced font configurations and lyric paddings https://github.com/CoderLine/alphaTab/pull/2481 This improvement changes extends how fonts can be configured in alphaTab. @@ -186,9 +282,18 @@ deprecated and fonts can now be configured individually as desired. This feature started with a request to customize the display of lyrics. To support this request further, the padding between individual lyric lines can now be configured via `settings.display.lyricLinesPaddingBetween` -TODO sample +{` +\\lyrics "Do Re Mi Fa" +\\lyrics "Do Mi " +C4 C4 C4 C4 +`} + +This feature can be configured via: + +* [`settings.display.resources.elementFonts`](/docs/reference/settings/display/resources#elementfonts) +* [`settings.display.lyricLinesPaddingBetween`](/docs/reference/settings/display/lyriclinespaddingbetween) -#### render: configure display of bar numbers +#### notation: configure display of bar numbers https://github.com/CoderLine/alphaTab/pull/2482 Before this release alphaTab was always rendering bar numbers on all bars. Devs could trick the display by setting the bar number color @@ -215,6 +320,12 @@ C4.1 | \\barNumberDisplay allBars C4.1 | C4.1 | C4.1 | C4.1 | C4.1 `} +This feature can be used via: + +* [`\defaultBarNumberDisplay`](/docs/alphatex/score-metadata#defaultbarnumberdisplay) and [`\barNumberDisplay`] (/docs/alphatex/bar-metadata#barnumberdisplay) in alphaTex +* [`score.stylesheet.barNumberDisplay`](/docs/reference/types/model/renderstylesheet/#barnumberdisplay) and [`score.tracks[].staves[].bars[].barNumberDisplay`](/docs/reference/types/model/bar/#barnumberdisplay) in the data model. +* File / Stylesheet > Texts & Styles > Bar numbers in Guitar Pro +* [`measure-numbering`](https://www.w3.org/2021/06/musicxml40/musicxml-reference/elements/measure-numbering/) in MusicXML #### notation: custom beaming rules https://github.com/CoderLine/alphaTab/pull/2489 @@ -222,8 +333,8 @@ https://github.com/CoderLine/alphaTab/pull/2489 alphaTab 1.8 ships significant improvements around the beaming of notes. Previously alphaTab had only 2 rules on how notes were beamed. -With alphaTab 1.8 not only we have **27** optimized breaming rules for a range of common time signatures. -Users can now fully custoimze how notes should be beamed. +With alphaTab 1.8 not only we have **27** optimized beaming rules for a range of common time signatures. +Users can now fully customize how notes should be beamed. We read the information contained in Guitar Pro files and alphaTex provides new metadata tags for this feature. In worst case devs can opt to set the rules after loading any custom file. @@ -240,6 +351,12 @@ In worst case devs can opt to set the rules after loading any custom file. C4.16 * 8 `} +This feature can be used via: + +* [`\beaming`](/docs/alphatex/bar-metadata#beaming) alphaTex +* [`score.masterBars[].beamingRules`](/docs/reference/types/model/masterbar#beamingrules) in the data model. +* Bar / Time Signature in Guitar Pro + ### Player #### player: grace beats on song start @@ -256,9 +373,21 @@ This was a problem for alphaTab as the time of this beat was suddenly negative r rewrite the notes to have some sort of beat to steal the duration from (e.g. via pick-up/anacrusis bar or changing to an on-beat grace note). This individualization is not always possible if the input file is consumed from an external source. -We now internally handle this negative underlow and ensure the playback and display works as a user would expect it. +We now internally handle this negative underflow and ensure the playback and display works as a user would expect it. -TOOD samples +export function enableMetronome(api) { + api.metronomeVolume = 1; +} + +{` +\\subtitle "Before-Beat Grace Note" +C4 {gr bb} C4 C4 C4 C4 +`} + +{` +\\subtitle "On-Beat Grace Note" +C4 {gr ob} C4 C4 C4 C4 +`} #### player: smooth cursor and scrolling https://github.com/CoderLine/alphaTab/pull/2447 @@ -274,11 +403,126 @@ dedicated components and allow devs to set their own implementations. This way new extended scrolling systems can be built. -TODO sample +
+ +{` +\\title "Prelude in D Minor" +\\artist "J.S. Bach (1685-1750)" +\\copyright "Public Domain" +\\tempo 80 +. +\\ts 3 4 +0.4.16 (3.2 -.4) (1.1 -.4) (5.1 -.4) 1.1 3.2 1.1 3.2 2.3.8 (3.2 3.4) | +(3.2 0.4).16 (3.2 -.4) (1.1 -.4) (5.1 -.4) 1.1 3.2 1.1 3.2 2.3.8 (3.2 3.4) | +(3.2 0.4).16 (3.2 -.4) (3.1 -.4) (6.1 -.4) 3.1 3.2 3.1 3.2 3.3.8 (3.2 0.3) | +(3.2 0.4).16 (3.2 -.4) (3.1 -.4) (6.1 -.4) 3.1 3.2 3.1 3.2 3.3.8 (3.2 0.3) | +`} + +
+ +
+ +{` +\\artist "Johann Pachelbel" +\\title "Canon in D" +\\track ("Piano" "Pno.") {instrument acousticgrandpiano} + \\staff + \\tempo 100 + \\accidentals auto + \\clef g2 + \\ks d + r.1{dy p instrument acousticgrandpiano} | + r | + r| + r{cre} | + Gb5.2 E5 | + D5 Db5 | + B4 A4 | + B4 Db5 | + (A4 D5 Gb5) (A4 Db5 E5) | + (Gb4 B4 D5) (Gb4 A4 Db5) | + (D4 G4 B4) (D4 Gb4 A4) | + (D4 G4 B4){cre} (E4 A4 Db5){cre} | + D5.4 Gb5 A5 G5 | + Gb5{dy mf} D5 Gb5{d} E5.8 | + D5.4 B4 D5 Gb5 | + G5 B5 A5{d} G5.8 | + (D5 Gb5).4 Gb5 (E5 A5) G5 | + (D5 Gb5) D5 (Db5 Gb5){d} E5.8 | + (B4 D5).4 B4 (A4 D5) Gb5 | + (B4 G5) B5 (Db5 A5){d} G5.8 + \\staff + \\clef f4 + \\ks d + :8 + D3{dy p} A3 D4 Gb4 A2 E3 A3 Db4 | + B2 Gb3 B3 D4 Gb2 Db3 Gb3 A3 | + G2 D3 G3 B3 D2 A2 D3 Gb3 | + G2 D3 G3 B3 A2 E3 A3 Db4 | + D3 A3 D4 Gb4 A2 E3 A3 Db4 | + B2 Gb3 B3 D4 Gb2 Db3 Gb3 A3 | + G2 D3 G3 B3 D2 A2 D3 Gb3 | + G2 D3 G3 B3 A2 E3 A3 Db4 | + D3 A3 D4 Gb4 A2 E3 A3 Db4 | + B2 Gb3 B3 D4 Gb2 Db3 Gb3 A3 | + G2 D3 G3 B3 D2 A2 D3 Gb3 | + G2 D3 G3 B3 A2 E3 A3 Db4 | + D3{dy mf} A3 D4 Gb4 A2 E3 A3 Db4 | + B2 Gb3 B3 D4 Gb2 Db3 Gb3 A3 | + G2 D3 G3 B3 D2 A2 D3 Gb3 | + G2 D3 G3 B3 A2 E3 A3 Db4 | + D3 A3 D4 Gb4 A2 E3 A3 Db4 | + B2 Gb3 B3 D4 Gb2 Db3 Gb3 A3 | + G2 D3 G3 B3 D2 A2 D3 Gb3 | + G2 D3 G3 B3 A2 E3 A3 Db4 +`} +
+ +This feature can be used via + +* [`settings.player.scrollMode`](/docs/reference/settings/player/scrollmode) set to [`ScrollMode.Smooth`](/docs/reference/types/scrollmode) +* [`api.customScrollHandler`](/docs/reference/api/customscrollhandler) and [`IScrollHandler`](/docs/reference/types/iscrollhandler) + +#### integration: Selection API +https://github.com/CoderLine/alphaTab/pull/2418 + +This change extends the public APIs around the interactive selection of the playback range. +Previously devs needed to rely on some internal behaviors to extend the alphaTab selection logic +with custom parts. This made it close to impossible to cleanly implement extensions like custom +selection handles. + +With these changes developers can now subscribe to events during the interactive selection of a user +and create new UI elements as needed (e.g. to create extended selection handles). + +Additionally we ensure now to snap the selection start to the beginning of the bar if the selection starts +on the first beat. + +import { SelectionHandleDemo } from '@site/src/components/SelectionHandleDemo'; + +{` +\\title "Prelude in D Minor" +\\artist "J.S. Bach (1685-1750)" +\\copyright "Public Domain" +\\tempo 80 +. +\\ts 3 4 +0.4.16 (3.2 -.4) (1.1 -.4) (5.1 -.4) 1.1 3.2 1.1 3.2 2.3.8 (3.2 3.4) | +(3.2 0.4).16 (3.2 -.4) (1.1 -.4) (5.1 -.4) 1.1 3.2 1.1 3.2 2.3.8 (3.2 3.4) | +(3.2 0.4).16 (3.2 -.4) (3.1 -.4) (6.1 -.4) 3.1 3.2 3.1 3.2 3.3.8 (3.2 0.3) | +(3.2 0.4).16 (3.2 -.4) (3.1 -.4) (6.1 -.4) 3.1 3.2 3.1 3.2 3.3.8 (3.2 0.3) | +`} + +This feature can be used via: + +* [`api.playbackRangeHighlightChanged`](/docs/reference/api/playbackrangehighlightchanged) +* [`api.highlightPlaybackRange`](/docs/reference/api/highlightplaybackrange) +* [`api.applyPlaybackRangeFromHighlight`](/docs/reference/api/applyplaybackrangefromhighlight) + +A simple demo of the usage is also part of the [development playground](https://github.com/CoderLine/alphaTab/blob/develop/packages/playground/select-handles.ts). ### Guitar Pro extensions -### exporter: improved RSE compatibility +#### exporter: improved RSE compatibility https://github.com/CoderLine/alphaTab/pull/2456 https://github.com/CoderLine/alphaTab/pull/2477 @@ -290,9 +534,7 @@ This way the playback mode in Guitar Pro can be changed to RSE resulting in prop RSE is quite a complex feature of Guitar Pro allowing advanced effect and soundbank configurations. alphaTab tries to write at least the minimum amount of information to achieve correct playback. -TODO sample - -### importer: detect bass clef (Guitar Pro 3-5) +#### importer: detect bass clef (Guitar Pro 3-5) https://github.com/CoderLine/alphaTab/pull/2483 Older Guitar Pro files did not always contain the exact information on what clef should be shown on the staves. @@ -300,8 +542,6 @@ While some information can be contained, it was not fully working as expected an We now follow the Guitar Pro 5 behavior of switching to the a bass clef based on the configured string tuning. -TODO sample - ### alphaTex Extensions #### alphaTex: bar-wise voices @@ -310,7 +550,7 @@ https://github.com/CoderLine/alphaTab/pull/2429 While writing various test-cases for multi-voice music sheets I realized that writing the notation voice-by-voice does not feel very natural. -By default in alphaTex, to write multiple voices, you first write the whole notation for the first voiec, +By default in alphaTex, to write multiple voices, you first write the whole notation for the first voice, then you start a new voice with `\voice` and begin again writing the second voice at bar 1. With this new mode, we stay in the metal model of writing notation "bar-by-bar". The `\voice` tag starts a new @@ -319,25 +559,31 @@ bars which actually have a second voice and keep the other bars simple as single alphaTab takes care of the internal consolidation of voices. -TODO sample. - -### Improvements & Bugfixes - -#### integration: Selection API -https://github.com/CoderLine/alphaTab/pull/2418 +{` +\\subtitle "Staff-Wise Voices" +\\voiceMode staffWise +\\voice + C4 | C5 +\\voice + C3 | C4 +`} -This change extends the public APIs around the interactive selection of the playback range. -Previously devs needed to rely on some internal behaviors to extend the alphaTab selection logic -with custom parts. This made it close to impossible to cleanly implement extensions like custom -selection handles. +{` +\\voiceMode barWise +// Bar 1 + \\voice C4 + \\voice C3 +| +// Bar 2 + \\voice C5 + \\voice C4 +`} -With these changes developers can now subscribe to events during the interactive selection of a user -and create new UI elements as needed (e.g. to create extended selection handles). +This feature can be used via: -Additionally we ensure now to snap the selection start to the beginning of the bar if the selection starts -on the first beat. +* [`\voiceMode`](/docs/alphatex/bar-metadata#voicemode) in alphaTex. -TODO sample +### Improvements & Bugfixes #### alphaTex: Fixed diagnostics in Monaco integration https://github.com/CoderLine/alphaTab/pull/2413 @@ -354,7 +600,7 @@ in the code completions. Now they are included as expected. -#### playground: Impovements in the development playground +#### playground: Improvements in the development playground https://github.com/CoderLine/alphaTab/pull/2410 The development playground was improved with some more convenience features like: @@ -374,7 +620,7 @@ Internally this means there were own visual "staves" for the various effects and With this change we merged these effects into the main renderers bringing following improvements: -1. We layed the foundation to eventually align effects more efficiently with the notes contained in the bars allowing a more dense layout. +1. We laid the foundation to eventually align effects more efficiently with the notes contained in the bars allowing a more dense layout. Currently there can be quite a lot of white-space (especially in the horizontal layout). 2. When the main staves (standard notation, tabs, slash notation and numbered notation) are shown/hidden we tell the next main staff to show the effect instead. Thanks to this all relevant effects are now shown for notes. @@ -399,15 +645,9 @@ The beaming helpers are responsible for grouping beats which can be beamed toget calculations around this. Historically a lot of logic around the positioning of beams and related elements (tuplets, flags etc) was scattered -across differetn places. With this improvement we have now a proper centralized handling of these aspects allowing easier +across different places. With this improvement we have now a proper centralized handling of these aspects allowing easier adaptions and extensions for future features. -Along the way this resulted in a range of improvements for the rendered notation: - -* reserved overflows and paddings are now more precise causing less unneeded whitespace and (hopefully) no cropping. - -TODO sample - #### bundlers: warn about missing plugin usage https://github.com/CoderLine/alphaTab/pull/2436 @@ -422,15 +662,26 @@ https://github.com/CoderLine/alphaTab/pull/2448 alphaTab only applied the padding `systemLabelPaddingLeft` if the tracks had a label. Now this padding is always applied ensuring a consistent display regardless of track names being set. -TODO sample +
+{` +\\hideDynamics +C4 * 4 +`} +
+ +
+{` +\\hideDynamics +\\track "Track1" +C4 * 4 +`} +
#### web: print dialog https://github.com/CoderLine/alphaTab/pull/2480 When we introduced the SMuFL font customization the print dialog got broken. The fonts were not registered in the -print dialog and therefore no symbols were shown. This problem is now fixed. - -TODO sample +print dialog and therefore no symbols were shown. This problem is now fixed. Try it out on the landing page. #### audio: handle invalid BPMs https://github.com/CoderLine/alphaTab/pull/2484 @@ -440,8 +691,6 @@ alphaTab cropped it to 0. A BPM=0 then caused a range of internal problems in th alphaTab now forces the BPM to 1 inside the player to avoid any problems. -TODO sample - #### rendering: prevent wobbly beam rendering https://github.com/CoderLine/alphaTab/pull/2494 @@ -452,8 +701,6 @@ We fixed the rendering of these beams aiming for a clean display of slopes and a On standard-DPI monitors there might still be slight artifacts due to subpixel-rendering and the related anti-aliasing. -TODO sample - #### rendering: avoid flickering and wrong notation display on layout changes https://github.com/CoderLine/alphaTab/pull/2495 @@ -466,6 +713,4 @@ alphaTab now tries to detect whether the current viewport elements can be reused Devs can supply new `renderingHints` in a range of API methods for scenarios where the data model is dynamically changing but generally the displayed notation stays similar. -e.g. when providing live editors a clearing of the viewport would have negative flickering effects when clearing all rendered notation. - -TODO sample \ No newline at end of file +e.g. when providing live editors a clearing of the viewport would have negative flickering effects when clearing all rendered notation. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2d6adcd..f49cba2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "alphatab-website", "version": "0.0.0", "dependencies": { - "@coderline/alphatab": "^1.8.0-alpha.1671", + "@coderline/alphatab": "^1.8.1", "@docusaurus/core": "^3.9.2", "@docusaurus/preset-classic": "^3.9.2", "@docusaurus/theme-mermaid": "^3.9.2", @@ -32,8 +32,8 @@ "webpack": "^5.98.0" }, "devDependencies": { - "@coderline/alphatab-language-server": "^1.7.1", - "@coderline/alphatab-webpack": "^1.7.1", + "@coderline/alphatab-language-server": "^1.8.1", + "@coderline/alphatab-webpack": "^1.8.1", "@docusaurus/module-type-aliases": "^3.9.2", "@docusaurus/tsconfig": "^3.9.2", "@types/react": "^19.0.10", @@ -1995,21 +1995,22 @@ "license": "Apache-2.0" }, "node_modules/@coderline/alphatab": { - "version": "1.8.0-alpha.1671", - "resolved": "https://registry.npmjs.org/@coderline/alphatab/-/alphatab-1.8.0-alpha.1671.tgz", - "integrity": "sha512-UPsO4XCCW+B55EgyLv6vyR7/M+P7MOZlP/fvlUmqmdJv/86ahYdnVhGrcDfeNhTw3qHXCvGD2afRXuv1UR76fg==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/@coderline/alphatab/-/alphatab-1.8.1.tgz", + "integrity": "sha512-sbhSUnuMew3k7I2ulNNunyaqOFIeELOtPAZCQkZo7tPaK/dnWzVk7XSx+nNlakbMqd5zpJZwUnOv5KexkEgz2Q==", "license": "MPL-2.0", "engines": { "node": ">=6.0.0" } }, "node_modules/@coderline/alphatab-language-server": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/@coderline/alphatab-language-server/-/alphatab-language-server-1.7.1.tgz", - "integrity": "sha512-xJ+ft0tfGTHCsiVMzCmWeZPXLk0N/DOor/XBUCSFu5fH6xo9VyREbXIEu/6pURdkp+VhOLRiZCLK+s1E36yoqA==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/@coderline/alphatab-language-server/-/alphatab-language-server-1.8.1.tgz", + "integrity": "sha512-cXgL5Kfb35VUf9T968tkSA/ONgCHEFnwtAgYpGxzAE82EHW/9K9vfKxAqFUIUESPC8sv4bAB4sOnRkgqpQX6rw==", "dev": true, + "license": "MPL-2.0", "dependencies": { - "@coderline/alphatab": "^1.7.1", + "@coderline/alphatab": "^1.8.1", "vscode-languageserver": "^9.0.1", "vscode-languageserver-textdocument": "^1.0.12" }, @@ -2017,23 +2018,14 @@ "alphatab-language-server": "dist/server.mjs" } }, - "node_modules/@coderline/alphatab-language-server/node_modules/@coderline/alphatab": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/@coderline/alphatab/-/alphatab-1.7.1.tgz", - "integrity": "sha512-Rsh+HEWJxcn2ahMR/5bzPkmeadL3ZSXFboZ46t1Y71tdsysJqlrrKtjx/yaOhULDWL4q1kq0EVcbqlYngcFRyQ==", - "dev": true, - "license": "MPL-2.0", - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/@coderline/alphatab-webpack": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/@coderline/alphatab-webpack/-/alphatab-webpack-1.7.1.tgz", - "integrity": "sha512-dKfm/dbb8SavTc76TX+xlsis7aO4OBRf5nO4+3ie3KqNDN2YhZDhi6tI4gLzsOe6UsT3h3tiLMLmsbl3XcJ27w==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/@coderline/alphatab-webpack/-/alphatab-webpack-1.8.1.tgz", + "integrity": "sha512-FiWa4/eUMs8NoEMfYoqM6kWKPZLq6xkD9c35ImH3q3xtGGpa/GBT7hzPQ2eMo06QJ2NL3fLkjTII3Yts1u6//A==", "dev": true, + "license": "MPL-2.0", "dependencies": { - "webpack": "^5.101.3" + "webpack": "^5.104.1" }, "engines": { "node": ">=20.19.0" @@ -7171,9 +7163,10 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.22", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.22.tgz", - "integrity": "sha512-/tk9kky/d8T8CTXIQYASLyhAxR5VwL3zct1oAoVTaOUHwrmsGnfbRwNdEq+vOl2BN8i3PcDdP0o4Q+jjKQoFbQ==", + "version": "2.9.19", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz", + "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==", + "license": "Apache-2.0", "bin": { "baseline-browser-mapping": "dist/cli.js" } @@ -7314,9 +7307,9 @@ } }, "node_modules/browserslist": { - "version": "4.27.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz", - "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==", + "version": "4.28.1", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", + "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", "funding": [ { "type": "opencollective", @@ -7331,13 +7324,14 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "peer": true, "dependencies": { - "baseline-browser-mapping": "^2.8.19", - "caniuse-lite": "^1.0.30001751", - "electron-to-chromium": "^1.5.238", - "node-releases": "^2.0.26", - "update-browserslist-db": "^1.1.4" + "baseline-browser-mapping": "^2.9.0", + "caniuse-lite": "^1.0.30001759", + "electron-to-chromium": "^1.5.263", + "node-releases": "^2.0.27", + "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" @@ -7482,9 +7476,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001752", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001752.tgz", - "integrity": "sha512-vKUk7beoukxE47P5gcVNKkDRzXdVofotshHwfR9vmpeFKxmI5PBpgOMC18LUJUA/DvJ70Y7RveasIBraqsyO/g==", + "version": "1.0.30001766", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz", + "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==", "funding": [ { "type": "opencollective", @@ -7498,7 +7492,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/ccount": { "version": "2.0.1", @@ -9450,9 +9445,10 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, "node_modules/electron-to-chromium": { - "version": "1.5.244", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.244.tgz", - "integrity": "sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==" + "version": "1.5.283", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz", + "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==", + "license": "ISC" }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -9537,9 +9533,10 @@ } }, "node_modules/es-module-lexer": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz", - "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz", + "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==", + "license": "MIT" }, "node_modules/es-object-atoms": { "version": "1.1.1", @@ -11993,11 +11990,16 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "node_modules/loader-runner": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", - "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz", + "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==", + "license": "MIT", "engines": { "node": ">=6.11.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" } }, "node_modules/loader-utils": { @@ -12044,9 +12046,10 @@ } }, "node_modules/lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "version": "4.17.23", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz", + "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==", + "license": "MIT" }, "node_modules/lodash-es": { "version": "4.17.21", @@ -18504,9 +18507,10 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.12", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.12.tgz", - "integrity": "sha512-jDLYqo7oF8tJIttjXO6jBY5Hk8p3A8W4ttih7cCEq64fQFWmgJ4VqAQjKr7WwIDlmXKEc6QeoRb5ecjZ+2afcg==", + "version": "5.3.16", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz", + "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==", + "license": "MIT", "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "jest-worker": "^27.4.5", @@ -18981,9 +18985,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz", - "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", "funding": [ { "type": "opencollective", @@ -18998,6 +19002,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" @@ -19334,9 +19339,10 @@ } }, "node_modules/webpack": { - "version": "5.102.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", - "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", + "version": "5.104.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.104.1.tgz", + "integrity": "sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==", + "license": "MIT", "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", @@ -19347,21 +19353,21 @@ "@webassemblyjs/wasm-parser": "^1.14.1", "acorn": "^8.15.0", "acorn-import-phases": "^1.0.3", - "browserslist": "^4.26.3", + "browserslist": "^4.28.1", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.17.3", - "es-module-lexer": "^1.2.1", + "enhanced-resolve": "^5.17.4", + "es-module-lexer": "^2.0.0", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", - "loader-runner": "^4.2.0", + "loader-runner": "^4.3.1", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^4.3.3", "tapable": "^2.3.0", - "terser-webpack-plugin": "^5.3.11", + "terser-webpack-plugin": "^5.3.16", "watchpack": "^2.4.4", "webpack-sources": "^3.3.3" }, diff --git a/package.json b/package.json index 7a9199f..eff5e43 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "generate-alphatabdoc-empty": "tsx scripts/generate-alphatabdoc.mts --empty" }, "dependencies": { - "@coderline/alphatab": "^1.8.0-alpha.1671", + "@coderline/alphatab": "^1.8.1", "@docusaurus/core": "^3.9.2", "@docusaurus/preset-classic": "^3.9.2", "@docusaurus/theme-mermaid": "^3.9.2", @@ -41,8 +41,8 @@ "webpack": "^5.98.0" }, "devDependencies": { - "@coderline/alphatab-language-server": "^1.7.1", - "@coderline/alphatab-webpack": "^1.7.1", + "@coderline/alphatab-language-server": "^1.8.1", + "@coderline/alphatab-webpack": "^1.8.1", "@docusaurus/module-type-aliases": "^3.9.2", "@docusaurus/tsconfig": "^3.9.2", "@types/react": "^19.0.10", diff --git a/src/components/SelectionHandleDemo/index.tsx b/src/components/SelectionHandleDemo/index.tsx new file mode 100644 index 0000000..1784ffc --- /dev/null +++ b/src/components/SelectionHandleDemo/index.tsx @@ -0,0 +1,203 @@ +'use client'; + +import React, { useEffect, useRef } from "react"; +import { AlphaTab, AlphaTabProps } from "../AlphaTab"; +import styles from "./styles.module.scss"; +import * as alphaTab from "@coderline/alphatab"; +import { useAlphaTab, useAlphaTabEvent } from "@site/src/hooks"; + +export interface SelectionHandleDemoProps extends AlphaTabProps { + children: string | React.ReactElement; +} + +interface HandleDragState { + isDragging: 'start' | 'end' | undefined; +} + +function setupHandleDrag( + element: HTMLElement, + handle: HTMLElement, + dragState: HandleDragState, + type: HandleDragState['isDragging'], + onMove: (e: MouseEvent) => void, + onDragEnd: (e: MouseEvent) => void +) { + handle.addEventListener( + 'mousedown', + e => { + if (e.button !== 0) { + return; + } + e.preventDefault(); + element.classList.add('at-selection-handle-drag'); + handle.classList.add('at-selection-handle-drag'); + dragState.isDragging = type; + }, + false + ); + document.addEventListener( + 'mousemove', + e => { + if (dragState.isDragging !== type) { + return; + } + e.preventDefault(); + onMove(e); + }, + true + ); + document.addEventListener( + 'mouseup', + e => { + if (dragState.isDragging !== type) { + return; + } + e.preventDefault(); + dragState.isDragging = undefined; + element.classList.remove('at-selection-handle-drag'); + handle.classList.remove('at-selection-handle-drag'); + onDragEnd(e); + }, + true + ); +} + +function getRelativePosition(parent: HTMLElement, e: MouseEvent): { relX: number; relY: number } { + const parentPos = parent.getBoundingClientRect(); + const parentLeft: number = parentPos.left + parent.ownerDocument!.defaultView!.pageXOffset; + const parentTop: number = parentPos.top + parent.ownerDocument!.defaultView!.pageYOffset; + + const relX = e.pageX - parentLeft; + const relY = e.pageY - parentTop; + + return { relX, relY }; +} + +function getBeatFromEvent( + element: HTMLElement, + api: alphaTab.AlphaTabApi, + e: MouseEvent +): alphaTab.model.Beat | undefined { + const { relX, relY } = getRelativePosition(element, e); + const beat = api.boundsLookup?.getBeatAtPos(relX, relY); + if (!beat) { + return undefined; + } + + const bounds = api.boundsLookup!.findBeat(beat); + if (!bounds) { + return undefined; + } + + // only snap to beat beat if we are over the whitespace after the beat + const visualBoundsEnd = bounds.visualBounds.x + bounds.visualBounds.w; + const realBoundsEnd = bounds.realBounds.x + bounds.realBounds.w; + if (relX < visualBoundsEnd || relX > realBoundsEnd) { + return undefined; + } + + return beat; +} + + +export const SelectionHandleDemo: React.FC = ({ children }) => { + const [api, element] = useAlphaTab((s) => { + s.core.tex = true; + s.player.playerMode = alphaTab.PlayerMode.EnabledAutomatic; + s.player.scrollOffsetY = -50; + s.player.scrollMode = alphaTab.ScrollMode.Off; + }); + + const selectionHandleStart = useRef(null); + const selectionHandleEnd = useRef(null); + + useEffect(() => { + if (!api || !selectionHandleStart.current || !selectionHandleEnd.current) { + return; + } + + let currentHighlight: alphaTab.PlaybackHighlightChangeEventArgs | undefined; + api.playbackRangeHighlightChanged.on(e => { + currentHighlight = e; + // no selection + if (!e.highlightBlocks || e.highlightBlocks.length === 0) { + selectionHandleStart.current!.classList.remove(styles.active); + selectionHandleEnd.current!.classList.remove(styles.active); + return; + } + + selectionHandleStart.current!.classList.add(styles.active); + selectionHandleStart.current!.style.left = `${e.highlightBlocks![0].x}px`; + selectionHandleStart.current!.style.top = `${e.highlightBlocks![0].y}px`; + selectionHandleStart.current!.style.height = `${e.highlightBlocks![0].h}px`; + + selectionHandleEnd.current!.classList.add(styles.active); + const lastBlock = e.highlightBlocks!.at(-1)!; + selectionHandleEnd.current!.style.left = `${lastBlock.x + lastBlock.w}px`; + selectionHandleEnd.current!.style.top = `${lastBlock.y}px`; + selectionHandleEnd.current!.style.height = `${lastBlock.h}px`; + }); + + const dragState: HandleDragState = { isDragging: undefined }; + + setupHandleDrag( + element.current!, + selectionHandleStart.current!, + dragState, + 'start', + e => { + if (!currentHighlight?.startBeat) { + return; + } + + const beat = getBeatFromEvent(element.current!, api, e); + if (!beat) { + return; + } + + api.highlightPlaybackRange(beat, currentHighlight.endBeat!); + }, + () => { + api.applyPlaybackRangeFromHighlight(); + } + ); + + setupHandleDrag( + element.current!, + selectionHandleEnd.current!, + dragState, + 'end', + e => { + if (!currentHighlight?.startBeat) { + return; + } + + const beat = getBeatFromEvent(element.current!, api, e); + if (!beat) { + return; + } + + api.highlightPlaybackRange(currentHighlight!.startBeat!, beat); + }, + () => { + api.applyPlaybackRangeFromHighlight(); + } + ); + + + + }, [api, selectionHandleStart.current, selectionHandleEnd.current]); + + + return ( +
+
+
+
+
+
+
+
{children}
+
+ ); +}; diff --git a/src/components/SelectionHandleDemo/styles.module.scss b/src/components/SelectionHandleDemo/styles.module.scss new file mode 100644 index 0000000..303c5ef --- /dev/null +++ b/src/components/SelectionHandleDemo/styles.module.scss @@ -0,0 +1,50 @@ +.wrapper { + position: relative; +} + +.atSelectionHandles { + position: absolute; + pointer-events: none; + z-index: 1001; + display: inline; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.atSelectionHandle { + position: absolute; + pointer-events: auto; + cursor: ew-resize; + background: #7cb9ff; + width: 4px; + opacity: 0; + transition: opacity 150ms ease-in-out; +} + +.atSelectionHandle.active { + display: block; + opacity: 1; +} + +.atSelectionHandle-drag * { + cursor: ew-resize !important; +} + +.atSelectionHandle::before { + content: ' '; + display: block; + background: #7cb9ff; + width: 16px; + height: 16px; + border-radius: 15px; + left: 50%; + transform: translateX(-50%) translateY(-50%); + position: absolute; +} + +.atSelectionHandleEnd::before { + bottom: 0; + transform: translateX(-50%) translateY(50%); +} \ No newline at end of file