From f96b1e7f1f63ff462420d86c6b5ed2044a705c5d Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sun, 2 Mar 2025 21:35:47 +0100 Subject: [PATCH 01/16] docs: Add reference documentation for output device feature --- docs/reference/api/enumerateoutputdevices.mdx | 106 ++++++++++++++++++ docs/reference/api/getoutputdevice.mdx | 73 ++++++++++++ docs/reference/api/setoutputdevice.mdx | 100 +++++++++++++++++ 3 files changed, 279 insertions(+) create mode 100644 docs/reference/api/enumerateoutputdevices.mdx create mode 100644 docs/reference/api/getoutputdevice.mdx create mode 100644 docs/reference/api/setoutputdevice.mdx diff --git a/docs/reference/api/enumerateoutputdevices.mdx b/docs/reference/api/enumerateoutputdevices.mdx new file mode 100644 index 000000000..697bbddb3 --- /dev/null +++ b/docs/reference/api/enumerateoutputdevices.mdx @@ -0,0 +1,106 @@ +--- +title: enumerateOutputDevices +description: Loads and lists the available output devices which can be used by the player. +sidebar_custom_props: + category: Methods - Player + since: 1.5.0 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { SinceBadge } from '@site/src/components/SinceBadge'; + + + +import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; + +## Description +Loads and lists the available output devices which can be used by the player. Will request permissions if needed. + +The values provided, can be passed into [`setOutputDevice`](./setoutputdevice) to change dynamically the output device on which +the sound is played. + +In the web version this functionality relies on experimental APIs and might not yet be available in all browsers. https://caniuse.com/mdn-api_audiocontext_sinkid + +## Signatures + + + + + + + +### Parameters +None + +### Returns +Returns an awaitable, which provides the list of output devices when completed. + +#### ISynthOutputDevice + +The `ISynthOutputDevice` represents and abstraction of the output devices providing following details: + + + + The ID to uniquely identify the device. + + + A string describing the device. + + + A value indicating whether the device is the default output device. + + + +## Examples + + + + +```js +const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); +const devices = await api.enumerateOutputDevices(); + +buildDeviceSelector(devices, async selectedDevice => { + await api.setOutputDevice(selectedDevice); +}); +``` + + + + +```csharp +var api = new AlphaTabApi(...); +var devices = await api.EnumerateOutputDevices(); + +BuildDeviceSelector(devices, async selectedDevice => { + await api.SetOutputDevice(selectedDevice); +}); +``` + + + + +```kotlin +fun init() = kotlinx.coroutines.runBlocking { + val api = AlphaTabApi(...) + val devices = api.enumerateOutputDevices().await() + + buildDeviceSelector(devices, fun (selectedDevice) { + suspend { + await api.setOutputDevice(selectedDevice) + } + }); +} + +``` + + + \ No newline at end of file diff --git a/docs/reference/api/getoutputdevice.mdx b/docs/reference/api/getoutputdevice.mdx new file mode 100644 index 000000000..f646dee2e --- /dev/null +++ b/docs/reference/api/getoutputdevice.mdx @@ -0,0 +1,73 @@ +--- +title: getOutputDevice +description: Gets the currently configured output device. +sidebar_custom_props: + category: Methods - Player + since: 1.5.0 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { SinceBadge } from '@site/src/components/SinceBadge'; + + + +import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; + +## Description +Gets the currently configured output device used by the player. Assumes [`setOutputDevice`](./setoutputdevice) has been used. + +In the web version this functionality relies on experimental APIs and might not yet be available in all browsers. https://caniuse.com/mdn-api_audiocontext_sinkid + +## Signatures + + + + + + + +### Parameters +None + +### Returns +Returns an awaitable, which completes with the currently configured output device. + +## Examples + + + + +```js +const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); +updateOutputDeviceUI(await api.getOutputDevice()) + +``` + + + + +```csharp +var api = new AlphaTabApi(...); +UpdateOutputDeviceUI(await api.GetOutputDevice()) +``` + + + + +```kotlin +fun init() = kotlinx.coroutines.runBlocking { + val api = AlphaTabApi(...) + updateOutputDeviceUI(api.getOutputDevice().await()) +} +``` + + + \ No newline at end of file diff --git a/docs/reference/api/setoutputdevice.mdx b/docs/reference/api/setoutputdevice.mdx new file mode 100644 index 000000000..01c638c39 --- /dev/null +++ b/docs/reference/api/setoutputdevice.mdx @@ -0,0 +1,100 @@ +--- +title: setOutputDevice +description: Changes the output device which should be used for playing the audio. +sidebar_custom_props: + category: Methods - Player + since: 1.5.0 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { SinceBadge } from '@site/src/components/SinceBadge'; + + + +import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; + +## Description +Changes the output device which should be used for playing the audio (player must be enabled). + +Use [`enumerateOutputDevices`](./enumerateoutputdevices.mdx) to load the list of available devices. + +In the web version this functionality relies on experimental APIs and might not yet be available in all browsers. https://caniuse.com/mdn-api_audiocontext_sinkid + +## Signatures + + + + + + + +### Parameters + + + + The output device to use, or null to switch to the default device. + + + The output device to use, or null to switch to the default device. + + + The output device to use, or null to switch to the default device. + + + +### Returns +Returns an awaitable, which completes when the output device is changed. + +## Examples + + + + +```js +const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); +const devices = await api.enumerateOutputDevices(); + +buildDeviceSelector(devices, async selectedDevice => { + await api.setOutputDevice(selectedDevice); +}); +``` + + + + +```csharp +var api = new AlphaTabApi(...); +var devices = await api.EnumerateOutputDevices(); + +BuildDeviceSelector(devices, async selectedDevice => { + await api.SetOutputDevice(selectedDevice); +}); +``` + + + + +```kotlin +fun init() = kotlinx.coroutines.runBlocking { + val api = AlphaTabApi(...) + val devices = api.enumerateOutputDevices().await() + + buildDeviceSelector(devices, fun (selectedDevice) { + suspend { + await api.setOutputDevice(selectedDevice) + } + }); +} + +``` + + + \ No newline at end of file From 02450c4693e311a0207fc57fe908e955eff52967 Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Thu, 6 Mar 2025 18:13:17 +0100 Subject: [PATCH 02/16] docs: Added docs for multi-bar rests [skip ci] --- docs/alphatex/stylesheet.mdx | 28 ++++++++++++++++++ docs/formats/guitar-pro-7.mdx | 10 +++---- docs/formats/guitar-pro-8.mdx | 10 +++---- docs/releases/release1_5.mdx | 53 +++++++++++++++++++++++++++++++++++ docs/showcase/layouts.mdx | 24 +++++++++++++++- 5 files changed, 114 insertions(+), 11 deletions(-) create mode 100644 docs/releases/release1_5.mdx diff --git a/docs/alphatex/stylesheet.mdx b/docs/alphatex/stylesheet.mdx index 81fb7e1c0..ed38a3d8c 100644 --- a/docs/alphatex/stylesheet.mdx +++ b/docs/alphatex/stylesheet.mdx @@ -116,3 +116,31 @@ To configure the mode how to show [track names](/docs/showcase/general.mdx#track C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | C4 D4 E4 F4 | `} +## Multi-Bar Rests + +To configure whether [multibar rests](/docs/showcase/layouts.mdx#multi-bar-rests) should be enabled use: + +* `\multiBarRest` - On top level for configuring the use on multi-track renderings +* `\track { multiBarRest }` - On track level for single track renderings + +{` +\\title "Multi Track" +\\multiBarRest +. +\\track "Piano 1" "pno1" + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | C4 + +\\track "Piano 2" "pno1" + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | r | +`} + +{` +\\title "Single Track" +. +\\track "Piano 1" "pno1" { multiBarRest } + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | C4 +`} + diff --git a/docs/formats/guitar-pro-7.mdx b/docs/formats/guitar-pro-7.mdx index a9f0af824..74c384d47 100644 --- a/docs/formats/guitar-pro-7.mdx +++ b/docs/formats/guitar-pro-7.mdx @@ -338,11 +338,11 @@ import { FileFormatFeatureTable, FileFormatFeatureGroup, FileFormatFeatureRow, F tex={[FeatureStatus.Supported]} /> + model={[FeatureStatus.Supported]} + reading={[FeatureStatus.Supported]} + render={[FeatureStatus.Supported]} + audio={[FeatureStatus.Supported]} + tex={[FeatureStatus.Supported]} /> diff --git a/docs/formats/guitar-pro-8.mdx b/docs/formats/guitar-pro-8.mdx index d4f36081d..0806140c5 100644 --- a/docs/formats/guitar-pro-8.mdx +++ b/docs/formats/guitar-pro-8.mdx @@ -350,11 +350,11 @@ import { FileFormatFeatureTable, FileFormatFeatureGroup, FileFormatFeatureRow, F tex={[FeatureStatus.Supported]} /> + model={[FeatureStatus.Supported]} + reading={[FeatureStatus.Supported]} + render={[FeatureStatus.Supported]} + audio={[FeatureStatus.Supported]} + tex={[FeatureStatus.Supported]} /> diff --git a/docs/releases/release1_5.mdx b/docs/releases/release1_5.mdx new file mode 100644 index 000000000..5b3f3f35e --- /dev/null +++ b/docs/releases/release1_5.mdx @@ -0,0 +1,53 @@ +--- +title: v1.5 +--- + +import { AlphaTab } from '@site/src/components/AlphaTab/'; + +## 1.5.0 + +:::info +alphaTab 1.5.0 is still work-in-progress and only available as pre-release version. This document collects already newly +added features. +::: + +### Music Notation + +#### rendering: Multi-Bar Rests +https://github.com/CoderLine/alphaTab/pull/1934 + +We added support for merging rests spanning multi-bars together (aka. multi.bar rests). +Supported for alphaTex and Guitar Pro. + +{` +\\multiBarRest +. +\\track "Piano 1" "pno1" + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | C4 + +\\track "Piano 2" "pno1" + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | r | +`} + +### Player + +### alphaTex Extensions + +### Guitar Pro Extensions + +### MusicXML Extensions + +### Improvements & Bugfixes + +#### player: Broken Cursor Display for repeats +https://github.com/CoderLine/alphaTab/pull/1934 + +On repeats the bar cursor could behave rather strange moving back to the repeat start instead of transitioning to the end of the bar to the repeat end sign. +With this fix the beat cursor should correctly move again in such scenarios. + +#### player: Wrong beat cursor placement when scaling score +https://github.com/CoderLine/alphaTab/pull/1934 + +When drawing scores at non 100%, the beat cursor was placed wrongly. \ No newline at end of file diff --git a/docs/showcase/layouts.mdx b/docs/showcase/layouts.mdx index a423441e1..9bb063e05 100644 --- a/docs/showcase/layouts.mdx +++ b/docs/showcase/layouts.mdx @@ -69,4 +69,26 @@ You can also filter the rendered bars using this layout. startBar: 5, barCount: 4 } -} } /> \ No newline at end of file +} } /> + + +## Multi-Bar Rests + +alphaTab can load the information whether Multi-Bar rests should be used from input files and then merge the bars when displaying accordingly. +The bars are automatically merged if they are empty or contain only rests. + +For Guitar Pro files the format is loaded from the files and for alphaTex it can be specified with a range of metadata options. +The available options on the stylesheet are: + + +{` +\\multiBarRest +. +\\track "Piano 1" "pno1" + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | C4 + +\\track "Piano 2" "pno1" + \\staff {score} + C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | r | +`} From 08c476de53e474b697592142088b0ad4678c5632 Mon Sep 17 00:00:00 2001 From: Daniel Kuschny Date: Thu, 13 Mar 2025 18:55:51 +0100 Subject: [PATCH 03/16] docs: Add coloring guide (#120) --- .github/workflows/build-pr.yml | 1 + .github/workflows/deploy-develop.yml | 1 + .github/workflows/deploy-main.yml | 1 + .gitignore | 2 + docs/guides/breaking-changes-095-096.mdx | 1 + docs/guides/breaking-changes-097-098.mdx | 1 + docs/guides/coloring.mdx | 103 ++++ docs/reference/api/enumerateoutputdevices.mdx | 1 + docs/reference/api/setoutputdevice.mdx | 1 + docusaurus.config.ts | 66 ++- package-lock.json | 487 +++++++++++++++++- package.json | 4 +- scripts/generate-alphatabdoc.mts | 242 +++++++++ sidebars.ts | 19 +- src/alphatabdoc.ts | 44 ++ src/components/AlphaTexSample/index.tsx | 2 - src/components/ColoringExample/index.tsx | 164 ++++++ 17 files changed, 1102 insertions(+), 38 deletions(-) create mode 100644 docs/guides/coloring.mdx create mode 100644 scripts/generate-alphatabdoc.mts create mode 100644 src/alphatabdoc.ts create mode 100644 src/components/ColoringExample/index.tsx diff --git a/.github/workflows/build-pr.yml b/.github/workflows/build-pr.yml index 8a5a3f277..6e0f6308c 100644 --- a/.github/workflows/build-pr.yml +++ b/.github/workflows/build-pr.yml @@ -13,6 +13,7 @@ jobs: node-version: lts/* - run: npm install - run: npm install @coderline/alphatab@alpha + - run: npm run generate-alphatabdoc - run: npm run build - run: cp web.config ./build - uses: actions/upload-artifact@v4 diff --git a/.github/workflows/deploy-develop.yml b/.github/workflows/deploy-develop.yml index a577cc1d5..d97661e5d 100644 --- a/.github/workflows/deploy-develop.yml +++ b/.github/workflows/deploy-develop.yml @@ -19,6 +19,7 @@ jobs: node-version: lts/* - run: npm install - run: npm install @coderline/alphatab@alpha + - run: npm run generate-alphatabdoc - run: npm run build - run: cp web.config ./build - name: Package Zip diff --git a/.github/workflows/deploy-main.yml b/.github/workflows/deploy-main.yml index f9bd1dc7e..1dc53f9a3 100644 --- a/.github/workflows/deploy-main.yml +++ b/.github/workflows/deploy-main.yml @@ -19,6 +19,7 @@ jobs: node-version: lts/* - run: npm install - run: npm install @coderline/alphatab@latest + - run: npm run generate-alphatabdoc - run: npm run build - run: cp web.config ./build - name: Package Zip diff --git a/.gitignore b/.gitignore index b2d6de306..33c043731 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +src/alphatabdoc/ \ No newline at end of file diff --git a/docs/guides/breaking-changes-095-096.mdx b/docs/guides/breaking-changes-095-096.mdx index c60dd8bd5..9da262ce4 100644 --- a/docs/guides/breaking-changes-095-096.mdx +++ b/docs/guides/breaking-changes-095-096.mdx @@ -1,5 +1,6 @@ --- title: Breaking changes on settings between 0.9.5 and 0.9.6 +order: 100 --- import { CodeBadge } from '@site/src/components/CodeBadge'; diff --git a/docs/guides/breaking-changes-097-098.mdx b/docs/guides/breaking-changes-097-098.mdx index 9b3602dc4..a1c745bec 100644 --- a/docs/guides/breaking-changes-097-098.mdx +++ b/docs/guides/breaking-changes-097-098.mdx @@ -1,5 +1,6 @@ --- title: Breaking changes on settings between 0.9.7 and 0.9.8 +order: 101 --- import { CodeBadge } from '@site/src/components/CodeBadge'; diff --git a/docs/guides/coloring.mdx b/docs/guides/coloring.mdx new file mode 100644 index 000000000..d94c87a5e --- /dev/null +++ b/docs/guides/coloring.mdx @@ -0,0 +1,103 @@ +--- +title: Coloring Music Sheet +since: 1.5.0 +--- + +# Coloring Music Sheet + +import { SinceBadge } from '@site/src/components/SinceBadge'; + + + + +import * as alphaTab from '@coderline/alphatab'; +import { getDescriptionText } from '@site/src/alphatabdoc'; + +export function EnumMemberList({ doc }) { + return ( + <> + {doc.name} +
    + {doc.members.map(n => (
  • {n.name} - {getDescriptionText(n.tsdoc)}
    • ))} +
+ + ) +} + +alphaTab supports individual styling of music notation elements via a special `style` container which is available on +most levels of the [Data Model](../reference/score.mdx). This means you can customize the colors of individual notes being rendered +base on custom logic. + +The best place to apply custom coloring is the [`api.scoreLoaded`](../reference/api/scoreloaded.mdx) event which is triggered whenever +a new score is detected. But you can modify the styles later at any time by accessing the [`score`](../reference/api/score.mdx) and then +initiating a re-render via [`render`](../reference/api/render.mdx). + +:::important +alphaTab does not detect dynamically any changes made to the data model. Rendering happens in a background worker, and calling `render` will ensure +all updated information is passed to this renderer and the display is updated. Calling `render` will initiate a full re-layout and drawing of +the music sheet to apply any style changes accordingly, hence it is a quite performance intense operation. +::: + +The example codes in this Guide are in JavaScript but can be adapted to the other platforms accordingly. + +## Quick Start + +This code example here should give you a good first idea how you apply custom colors to elements. Depending on the elements you want to color, +you have to traverse the tree of elements. Then on the `style` container you can fill the colors with the particular elements + +import { ColoringExample } from '@site/src/components/ColoringExample'; + + + +## Styleable elements + +alphaTab tries to give fine grained access to coloring music notation elements. Only when it comes to individual effects and annotations things get more coarse. + +### Score level + +On Score level initialize the `score.style = new alphaTab.model.ScoreStyle()` and then select the element to color via `alphaTab.model.ScoreSubElement`. + +import scoreSubElementDoc from '@site/src/alphatabdoc/model/ScoreSubElement'; + + + +### Track level + +On Track level initialize the `track.style = new alphaTab.model.TrackStyle()` and then select the element to color via `alphaTab.model.TrackSubElement`. + +import trackSubElementDoc from '@site/src/alphatabdoc/model/TrackSubElement'; + + + +### Bar level + +On Bar level initialize the `bar.style = new alphaTab.model.BarStyle()` and then select the element to color via `alphaTab.model.BarSubElement`. + +import barSubElementDoc from '@site/src/alphatabdoc/model/BarSubElement'; + + + + +### Voice level + +On Bar level initialize the `voice.style = new alphaTab.model.VoiceStyle()` and then select the element to color via `alphaTab.model.VoiceSubElement`. + +import voiceSubElementDoc from '@site/src/alphatabdoc/model/VoiceSubElement'; + + + +### Beat level + +On Beat level initialize the `beat.style = new alphaTab.model.BeatStyle()` and then select the element to color via `alphaTab.model.BeatSubElement`. + +import beatSubElementDoc from '@site/src/alphatabdoc/model/BeatSubElement'; + + + +### Note level + +On Note level initialize the `note.style = new alphaTab.model.NoteStyle()` and then select the element to color via `alphaTab.model.NoteSubElement`. + +import noteSubElementDoc from '@site/src/alphatabdoc/model/NoteSubElement'; + + diff --git a/docs/reference/api/enumerateoutputdevices.mdx b/docs/reference/api/enumerateoutputdevices.mdx index 697bbddb3..1ce42c933 100644 --- a/docs/reference/api/enumerateoutputdevices.mdx +++ b/docs/reference/api/enumerateoutputdevices.mdx @@ -13,6 +13,7 @@ import { SinceBadge } from '@site/src/components/SinceBadge'; import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; +import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; ## Description Loads and lists the available output devices which can be used by the player. Will request permissions if needed. diff --git a/docs/reference/api/setoutputdevice.mdx b/docs/reference/api/setoutputdevice.mdx index 01c638c39..01ded9392 100644 --- a/docs/reference/api/setoutputdevice.mdx +++ b/docs/reference/api/setoutputdevice.mdx @@ -13,6 +13,7 @@ import { SinceBadge } from '@site/src/components/SinceBadge'; import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; +import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; ## Description Changes the output device which should be used for playing the audio (player must be enabled). diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c8e2a8551..2264c79e3 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -32,7 +32,7 @@ function getSortValue( prop: string, docs: Map, item: NormalizedSidebarItem -): string | number { +): string | number | undefined { if (prop in item) { return item[prop]; } @@ -76,8 +76,8 @@ function getSortValue( } } - console.warn(`Could not get sort prop '${prop}' on sidebar item`, item); - return ""; + // console.warn(`Could not get sort prop '${prop}' on sidebar item`, item); + return undefined; } const config: Config = { @@ -115,8 +115,12 @@ const config: Config = { const sidebarItems = await defaultSidebarItemsGenerator(args); if (Array.isArray(args.item.customProps?.["sort"])) { - const ascending = args.item.customProps?.["sort"][1] !== "desc"; - const prop = args.item.customProps?.["sort"][0]; + let props = args.item.customProps?.["sort"] as + | [string, string] + | [string, string][]; + if (!Array.isArray(props[0])) { + props = [props as [string, string]]; + } const docsLookup = new Map( args.docs.map((d) => [d.id, d]) @@ -125,27 +129,45 @@ const config: Config = { // Reverse items in categories sidebarItems.sort((a, b) => { - let av = getSortValue(prop, docsLookup, a); - let bv = getSortValue(prop, docsLookup, b); + for (const prop of props) { + const ascending = prop[1] !== "desc"; - if (typeof av !== typeof bv) { - av = String(av); - bv = String(bv); - } + let av = getSortValue(prop[0], docsLookup, a); + let bv = getSortValue(prop[0], docsLookup, b); - if (typeof av === "string") { - if (ascending) { - return av.localeCompare(bv as string); - } else { - return (bv as string).localeCompare(av); + if (typeof av !== typeof bv) { + av = av === undefined ? av : String(av); + bv = bv === undefined ? bv : String(bv); } - } else { - if (ascending) { - return av - (bv as number); + + var result = 0; + + if (av === undefined && bv === undefined) { + // continue + } else if (av === undefined) { + return -1; + } else if (bv === undefined) { + return 1; + } else if (typeof av === "string") { + if (ascending) { + result = av.localeCompare(bv as string); + } else { + result = (bv as string).localeCompare(av); + } } else { - return (bv as number) - av; + if (ascending) { + result = av - (bv as number); + } else { + result = (bv as number) - av; + } + } + + if (result !== 0) { + return result; } } + + return 0; }); } @@ -319,16 +341,14 @@ const config: Config = { const sassLoader = sassRule!.use[sassLoaderIndex] as RuleSetRule; sassLoader.options = { ...((sassLoader.options as object | undefined) ?? {}), - sourceMap: true // force sourcemaps + sourceMap: true, // force sourcemaps }; - // insert resolve-url-loader before SASS loader to fix relative URLs sassRule!.use.splice(sassLoaderIndex, 0, { loader: "resolve-url-loader", }); - return { plugins: [ // Copy the Font and SoundFont Files to the output diff --git a/package-lock.json b/package-lock.json index 94066b46b..5cf662dbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "docusaurus-plugin-sass": "^0.2.6", "resolve-url-loader": "^5.0.0", "sass": "^1.85.1", + "tsx": "^4.19.3", "typescript": "^5.7.3" }, "engines": { @@ -3775,6 +3776,406 @@ "node": ">=18.0" } }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz", + "integrity": "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.1.tgz", + "integrity": "sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz", + "integrity": "sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.1.tgz", + "integrity": "sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz", + "integrity": "sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz", + "integrity": "sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz", + "integrity": "sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz", + "integrity": "sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz", + "integrity": "sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz", + "integrity": "sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz", + "integrity": "sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz", + "integrity": "sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz", + "integrity": "sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz", + "integrity": "sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz", + "integrity": "sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz", + "integrity": "sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz", + "integrity": "sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz", + "integrity": "sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz", + "integrity": "sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz", + "integrity": "sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz", + "integrity": "sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz", + "integrity": "sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz", + "integrity": "sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz", + "integrity": "sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz", + "integrity": "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@floating-ui/core": { "version": "1.6.9", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", @@ -8517,6 +8918,46 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/esbuild": { + "version": "0.25.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz", + "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.25.1", + "@esbuild/android-arm": "0.25.1", + "@esbuild/android-arm64": "0.25.1", + "@esbuild/android-x64": "0.25.1", + "@esbuild/darwin-arm64": "0.25.1", + "@esbuild/darwin-x64": "0.25.1", + "@esbuild/freebsd-arm64": "0.25.1", + "@esbuild/freebsd-x64": "0.25.1", + "@esbuild/linux-arm": "0.25.1", + "@esbuild/linux-arm64": "0.25.1", + "@esbuild/linux-ia32": "0.25.1", + "@esbuild/linux-loong64": "0.25.1", + "@esbuild/linux-mips64el": "0.25.1", + "@esbuild/linux-ppc64": "0.25.1", + "@esbuild/linux-riscv64": "0.25.1", + "@esbuild/linux-s390x": "0.25.1", + "@esbuild/linux-x64": "0.25.1", + "@esbuild/netbsd-arm64": "0.25.1", + "@esbuild/netbsd-x64": "0.25.1", + "@esbuild/openbsd-arm64": "0.25.1", + "@esbuild/openbsd-x64": "0.25.1", + "@esbuild/sunos-x64": "0.25.1", + "@esbuild/win32-arm64": "0.25.1", + "@esbuild/win32-ia32": "0.25.1", + "@esbuild/win32-x64": "0.25.1" + } + }, "node_modules/escalade": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", @@ -9449,6 +9890,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/get-tsconfig": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.0.tgz", + "integrity": "sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==", + "dev": true, + "dependencies": { + "resolve-pkg-maps": "^1.0.0" + }, + "funding": { + "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" + } + }, "node_modules/github-slugger": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", @@ -16948,6 +17401,15 @@ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" }, + "node_modules/resolve-pkg-maps": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", + "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==", + "dev": true, + "funding": { + "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" + } + }, "node_modules/resolve-url-loader": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz", @@ -18229,6 +18691,25 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" }, + "node_modules/tsx": { + "version": "4.19.3", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.3.tgz", + "integrity": "sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==", + "dev": true, + "dependencies": { + "esbuild": "~0.25.0", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, "node_modules/type-fest": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", @@ -18280,9 +18761,9 @@ } }, "node_modules/typescript": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", - "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", + "version": "5.8.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz", + "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index 16f950f51..e7564b009 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", - "typecheck": "tsc" + "typecheck": "tsc", + "generate-alphatabdoc": "tsx scripts/generate-alphatabdoc.mts" }, "dependencies": { "@coderline/alphatab": "^1.4.0-alpha.1326", @@ -42,6 +43,7 @@ "docusaurus-plugin-sass": "^0.2.6", "resolve-url-loader": "^5.0.0", "sass": "^1.85.1", + "tsx": "^4.19.3", "typescript": "^5.7.3" }, "browserslist": { diff --git a/scripts/generate-alphatabdoc.mts b/scripts/generate-alphatabdoc.mts new file mode 100644 index 000000000..13cefe70c --- /dev/null +++ b/scripts/generate-alphatabdoc.mts @@ -0,0 +1,242 @@ +import path from "path"; +import url from "url"; +import fs from "fs"; +import ts from "typescript"; + +const __dirname = url.fileURLToPath(new URL(".", import.meta.url)); + +const alphaTabEntryFile = url.fileURLToPath( + import.meta.resolve("@coderline/alphatab") +); +const alphaTabDir = path.resolve(alphaTabEntryFile, "..", ".."); + +const dts = path.resolve(alphaTabDir, "dist", "alphaTab.d.ts"); +const ast = ts.createSourceFile( + dts, + await fs.promises.readFile(dts, "utf-8"), + { + jsDocParsingMode: ts.JSDocParsingMode.ParseAll, + languageVersion: ts.ScriptTarget.Latest, + }, + true, + ts.ScriptKind.TS +); + +const lookup = new Map(); + +const outDir = path.resolve(__dirname, "..", "src", "alphatabdoc"); + +async function writeType(exportedName: string, schema: any) { + const parts = exportedName.replace("alphaTab.", "").split("."); + parts[parts.length - 1] = parts[parts.length - 1] + ".ts"; + + const full = path.resolve(outDir, ...parts); + await fs.promises.mkdir(path.dirname(full), { recursive: true }); + + console.log("writing", full); + try { + await fs.promises.writeFile( + full, + `export default ${JSON.stringify(schema, null, 2)};` + ); + } catch (e) { + console.error("error writing", full, e, schema); + } +} + +function jsDocCommentSchema( + d?: ts.NodeArray | ts.JSDocComment | string +) { + if (!d) { + return undefined; + } + + if (typeof d === "string") { + return [{ + kind: "text", + text: d, + }]; + } + + if ("kind" in d) { + switch (d.kind) { + case ts.SyntaxKind.JSDocText: + return [{ + kind: "text", + text: (d as ts.JSDocText).text, + }]; + case ts.SyntaxKind.JSDocLink: + return [{ + kind: "link", + name: (d as ts.JSDocLink).name?.getText(), + text: (d as ts.JSDocLink).text, + }]; + case ts.SyntaxKind.JSDocLinkPlain: + return [{ + kind: "link", + name: (d as ts.JSDocLinkPlain).name?.getText(), + text: (d as ts.JSDocLinkPlain).text, + }]; + case ts.SyntaxKind.JSDocLinkCode: + return [{ + kind: "link", + name: (d as ts.JSDocLinkCode).name?.getText(), + text: (d as ts.JSDocLinkCode).text, + }]; + } + + return [{ + kind: "unknown", + }]; + } + + return d.reduce((d, x) => [d, ...jsDocCommentSchema(x)], []); +} + +function jsDocSchema(d: ts.Node) { + const comments = ts.getJSDocCommentsAndTags(d); + return comments.map((m) => { + if (ts.isJSDoc(m)) { + return { + kind: "jsdoc", + comment: jsDocCommentSchema(m.comment), + tags: m.tags?.map((t) => { + return { + kind: "jsdoctag", + tagName: t.tagName.text, + comment: jsDocCommentSchema(t.comment), + }; + }), + }; + } else { + return { + kind: "jsdoctag", + tagName: m.tagName.text, + comment: jsDocCommentSchema(m.comment), + }; + } + }); +} + +async function writeEnumDeclaration( + d: ts.EnumDeclaration, + exportedName: string +) { + await writeType(exportedName, { + name: exportedName, + tsdoc: jsDocSchema(d), + members: d.members.map((m) => { + return { + name: m.name.getText(), + tsdoc: jsDocSchema(m), + }; + }), + }); +} +async function writeClassDeclaration( + d: ts.ClassDeclaration, + exportedName: string +) { + await writeType(exportedName, { + name: exportedName, + tsdoc: jsDocSchema(d), + }); +} + +async function writeInterfaceDeclaration( + d: ts.InterfaceDeclaration, + exportedName: string +) { + await writeType(exportedName, { + name: exportedName, + tsdoc: jsDocSchema(d), + }); +} + +async function writeModuleDeclaration( + d: ts.ModuleDeclaration, + exportedName: string +) { + if (!d.body || !ts.isModuleBlock(d.body)) { + console.warn("Unsupported module declaration", exportedName); + return; + } + + for (const s of d.body.statements) { + if ( + ts.isExportDeclaration(s) && + s.exportClause && + ts.isNamedExports(s.exportClause) + ) { + for (const nested of s.exportClause.elements) { + let exportName = ""; + let typeName = ""; + if (nested.propertyName) { + typeName = (nested.propertyName as ts.Identifier).text; + exportName = (nested.name as ts.Identifier).text; + } else { + typeName = (nested.name as ts.Identifier).text; + exportName = typeName; + } + + if (lookup.has(typeName)) { + walkExports(lookup.get(typeName)!, exportedName + "." + exportName); + } else { + console.warn("Unresolved export", typeName, "in", exportedName); + } + } + } else { + console.warn( + "Unsupported statement", + ts.SyntaxKind[s.kind], + "in", + exportedName + ); + } + } +} + +async function walkExports(d: ts.DeclarationStatement, identifier: string) { + if (!d.name || !ts.isIdentifier(d.name)) { + return; + } + + if (ts.isEnumDeclaration(d)) { + await writeEnumDeclaration(d, identifier); + } else if (ts.isClassDeclaration(d)) { + await writeClassDeclaration(d, identifier); + } else if (ts.isInterfaceDeclaration(d)) { + await writeInterfaceDeclaration(d, identifier); + } else if (ts.isModuleDeclaration(d)) { + await writeModuleDeclaration(d, identifier); + } +} + +const exports: { d: ts.DeclarationStatement; identifier: string }[] = []; +for (const d of ast!.statements) { + if (!ts.isDeclarationStatement(d) || !ts.canHaveModifiers(d)) { + continue; + } + const isExported = !!d.modifiers?.some( + (m) => m.kind === ts.SyntaxKind.ExportKeyword + ); + + let identifier = ""; + if (d.name) { + if (ts.isIdentifier(d.name)) { + identifier = d.name.text; + } + } + + if (identifier) { + lookup.set(identifier, d); + } + + if (isExported) { + exports.push({ d, identifier }); + } +} + +for (const { d, identifier } of exports) { + walkExports(d, "alphaTab." + identifier); +} diff --git a/sidebars.ts b/sidebars.ts index 4dda4fb5c..8ce6ff7c0 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -30,15 +30,16 @@ const sidebars: SidebarsConfig = { "getting-started/configuration-android", ], Guides: [ - "guides/lowlevel-apis", - "guides/styling-player", - "guides/multiple-soundfonts", - "guides/song-details", - "guides/exporter", - "guides/handling-midi-events", - "guides/nodejs", - "guides/breaking-changes-095-096", - "guides/breaking-changes-097-098", + { + type: "autogenerated", + dirName: 'guides', + customProps: { + sort: [ + ['order', 'asc'], + ['title', 'asc'] + ] + } + } ], "API Reference": [ { diff --git a/src/alphatabdoc.ts b/src/alphatabdoc.ts new file mode 100644 index 000000000..ad4d69881 --- /dev/null +++ b/src/alphatabdoc.ts @@ -0,0 +1,44 @@ +export type JsDocText = { + kind: "text"; + text: string; +}; + +export type JsDocLink = { + kind: "link"; + name: string; + text: string; +}; + +export type JsDocTag = { + kind: "jsdoctag"; + tagName: string; + comment: JsDocComment; +}; + +export type JsDocComment = (JsDocText | JsDocLink)[]; + +export type JsDoc = { + kind: "jsdoc"; + comment: JsDocComment; + tags?: JsDocTag[]; +}; + +export type TsDoc = (JsDoc | JsDocTag)[]; + +export function getDescriptionText(tsdoc: TsDoc) { + let text = ""; + + for (const d of tsdoc) { + if (d.kind === "jsdoc") { + for (const x of d.comment) { + if (x.kind === "text") { + text += x.text; + } else if (x.kind === "link") { + text += x.name; + } + } + } + } + + return text; +} diff --git a/src/components/AlphaTexSample/index.tsx b/src/components/AlphaTexSample/index.tsx index dc8cba505..d1aae88e6 100644 --- a/src/components/AlphaTexSample/index.tsx +++ b/src/components/AlphaTexSample/index.tsx @@ -17,8 +17,6 @@ export const AlphaTexSample: React.FC = ({ player, settings, }) => { - const doc = useDoc(); - debugger; return ( <> diff --git a/src/components/ColoringExample/index.tsx b/src/components/ColoringExample/index.tsx new file mode 100644 index 000000000..2c5b530e0 --- /dev/null +++ b/src/components/ColoringExample/index.tsx @@ -0,0 +1,164 @@ +import { useAlphaTab, useAlphaTabEvent } from "@site/src/hooks"; +import react, { useEffect } from "react"; +import * as alphaTab from "@coderline/alphatab"; +import CodeBlock from "@theme/CodeBlock"; + +export const ColoringExample: react.FC = () => { + const tex = ` + \\title "Canon Rock" + \\artist "JerryC" + \\tempo 90 + . + 12.2{v f} 14.2{v f}.4 :8 15.2 17.2 | + 14.1.2 :8 17.2 15.1 14.1{h} 17.2 | + 15.2{v d}.4 :16 17.2{h} 15.2 :8 14.2 14.1 17.1{b (0 4 4 0)}.4 | + 15.1.8 :16 14.1{tu 3} 15.1{tu 3} 14.1{tu 3} :8 17.2 15.1 14.1 :16 12.1{tu 3} 14.1{tu 3} 12.1{tu 3} :8 15.2 14.2 + `; + const [api, element] = useAlphaTab((s) => {}); + + function applyColors(score: alphaTab.model.Score) { + // create custom style on score level + score.style = new alphaTab.model.ScoreStyle(); + score.style.colors.set( + alphaTab.model.ScoreSubElement.Title, + alphaTab.model.Color.fromJson("#426d9d") + ); + score.style.colors.set( + alphaTab.model.ScoreSubElement.Artist, + alphaTab.model.Color.fromJson("#4cb3d4") + ); + + const fretColors = { + 12: alphaTab.model.Color.fromJson("#bb4648"), + 13: alphaTab.model.Color.fromJson("#ab519f"), + 14: alphaTab.model.Color.fromJson("#3953a5"), + 15: alphaTab.model.Color.fromJson("#70ccd6"), + 16: alphaTab.model.Color.fromJson("#6abd45"), + 17: alphaTab.model.Color.fromJson("#e1a90e") + }; + + // traverse hierarchy and apply colors as desired + for (const track of score.tracks) { + for (const staff of track.staves) { + for (const bar of staff.bars) { + for (const voice of bar.voices) { + for (const beat of voice.beats) { + // on tuplets colors beam and tuplet bracket + if (beat.hasTuplet) { + beat.style = new alphaTab.model.BeatStyle(); + const color = alphaTab.model.Color.fromJson("#00DD00"); + beat.style.colors.set( + alphaTab.model.BeatSubElement.StandardNotationTuplet, + color + ); + beat.style.colors.set( + alphaTab.model.BeatSubElement.StandardNotationBeams, + color + ); + } + + for (const note of beat.notes) { + // color notes based on the fret + note.style = new alphaTab.model.NoteStyle(); + note.style.colors.set(alphaTab.model.NoteSubElement.StandardNotationNoteHead, + fretColors[note.fret] + ); + note.style.colors.set(alphaTab.model.NoteSubElement.GuitarTabFretNumber, + fretColors[note.fret] + ); + } + } + } + } + } + } + } + + const codeLines = ` + const api = new alphaTab.AlphaTabApi(...); + api.scoreLoaded.on(score => applyColors(score)); + function applyColors(score) { + // create custom style on score level + score.style = new alphaTab.model.ScoreStyle(); + score.style.colors.set( + alphaTab.model.ScoreSubElement.Title, + alphaTab.model.Color.fromJson("#426d9d") + ); + score.style.colors.set( + alphaTab.model.ScoreSubElement.Artist, + alphaTab.model.Color.fromJson("#4cb3d4") + ); + + const fretColors = { + 12: alphaTab.model.Color.fromJson("#bb4648"), + 13: alphaTab.model.Color.fromJson("#ab519f"), + 14: alphaTab.model.Color.fromJson("#3953a5"), + 15: alphaTab.model.Color.fromJson("#70ccd6"), + 16: alphaTab.model.Color.fromJson("#6abd45"), + 17: alphaTab.model.Color.fromJson("#e1a90e") + }; + + // traverse hierarchy and apply colors as desired + for (const track of score.tracks) { + for (const staff of track.staves) { + for (const bar of staff.bars) { + for (const voice of bar.voices) { + for (const beat of voice.beats) { + // on tuplets colors beam and tuplet bracket + if (beat.hasTuplet) { + beat.style = new alphaTab.model.BeatStyle(); + const color = alphaTab.model.Color.fromJson("#00DD00"); + beat.style.colors.set( + alphaTab.model.BeatSubElement.StandardNotationTuplet, + color + ); + beat.style.colors.set( + alphaTab.model.BeatSubElement.StandardNotationBeams, + color + ); + } + + for (const note of beat.notes) { + // color notes based on the fret + note.style = new alphaTab.model.NoteStyle(); + note.style.colors.set(alphaTab.model.NoteSubElement.StandardNotationNoteHead, + fretColors[note.fret] + ); + note.style.colors.set(alphaTab.model.NoteSubElement.GuitarTabFretNumber, + fretColors[note.fret] + ); + } + } + } + } + } + } + } + + `.split("\n"); + + const indent = + codeLines.find((l) => l.length > 0)?.match(/^([ ]+).*/)?.[1]?.length ?? 0; + + const trimmed = codeLines + .map((l) => l.substring(indent)) + .join("\n") + .trim(); + + useEffect(() => { + if (api) { + const score = alphaTab.importer.ScoreLoader.loadScoreFromBytes( + new TextEncoder().encode(tex) + ); + applyColors(score); + api.renderScore(score, [0]); + } + }, [api]); + + return ( +
+
+ {trimmed} +
+ ); +}; From 4e5207f54d6fb474a1ca59363f2dae30938b9e54 Mon Sep 17 00:00:00 2001 From: Daniel Kuschny Date: Thu, 20 Mar 2025 23:24:33 +0100 Subject: [PATCH 04/16] build: Ensure main deploys correct docs --- .github/workflows/deploy-main.yml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy-main.yml b/.github/workflows/deploy-main.yml index 1dc53f9a3..1a272fe4b 100644 --- a/.github/workflows/deploy-main.yml +++ b/.github/workflows/deploy-main.yml @@ -6,20 +6,21 @@ on: workflow_dispatch: schedule: - cron: '0 1 * * 0' - + jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 + with: + ref: 'main' - uses: montudor/action-zip@v1 - uses: actions/setup-node@v4 with: node-version: lts/* - run: npm install - run: npm install @coderline/alphatab@latest - - run: npm run generate-alphatabdoc - run: npm run build - run: cp web.config ./build - name: Package Zip From e471b7cd1c728668c12a55e9174d9f8cc2c4e47e Mon Sep 17 00:00:00 2001 From: Daniel Kuschny Date: Fri, 21 Mar 2025 00:14:28 +0100 Subject: [PATCH 05/16] refactor: Generate reference documentation from TS Doc (#121) --- .gitignore | 3 +- docs/getting-started/configuration-web.mdx | 22 - docs/guides/coloring.mdx | 40 +- docs/guides/data-attributes.mdx | 5 + docs/guides/dom-events.mdx | 5 + docs/guides/jquery.mdx | 5 + docs/guides/nodejs.mdx | 4 +- docs/reference/alphasynth.mdx | 17 - docs/reference/alphasynth/countinvolume.mdx | 15 - docs/reference/alphasynth/destroy.mdx | 36 - docs/reference/alphasynth/finished.mdx | 14 - docs/reference/alphasynth/islooping.mdx | 14 - docs/reference/alphasynth/isready.mdx | 25 - .../alphasynth/isreadyforplayback.mdx | 14 - docs/reference/alphasynth/loadmidifile.mdx | 35 - docs/reference/alphasynth/loadsoundfont.mdx | 36 - docs/reference/alphasynth/loglevel.mdx | 14 - docs/reference/alphasynth/mastervolume.mdx | 14 - docs/reference/alphasynth/metronomevolume.mdx | 14 - .../reference/alphasynth/midieventsplayed.mdx | 14 - .../alphasynth/midieventsplayedfilter.mdx | 14 - docs/reference/alphasynth/midiloaded.mdx | 14 - docs/reference/alphasynth/midiloadfailed.mdx | 37 - docs/reference/alphasynth/pause.mdx | 14 - docs/reference/alphasynth/play.mdx | 14 - docs/reference/alphasynth/playbackrange.mdx | 14 - .../alphasynth/playbackrangechanged.mdx | 16 - docs/reference/alphasynth/playbackspeed.mdx | 14 - docs/reference/alphasynth/playpause.mdx | 14 - docs/reference/alphasynth/positionchanged.mdx | 14 - docs/reference/alphasynth/ready.mdx | 31 - .../reference/alphasynth/readyforplayback.mdx | 14 - .../alphasynth/resetchannelstate.mdx | 29 - docs/reference/alphasynth/setchannelmute.mdx | 43 - docs/reference/alphasynth/setchannelsolo.mdx | 45 - .../setchanneltranspositionpitch.mdx | 41 - .../reference/alphasynth/setchannelvolume.mdx | 40 - docs/reference/alphasynth/soundfontloaded.mdx | 14 - .../alphasynth/soundfontloadfailed.mdx | 37 - docs/reference/alphasynth/state.mdx | 14 - docs/reference/alphasynth/statechanged.mdx | 14 - docs/reference/alphasynth/stop.mdx | 14 - docs/reference/alphasynth/tickposition.mdx | 14 - docs/reference/alphasynth/timeposition.mdx | 14 - docs/reference/api/_boundslookup.mdx | 12 + docs/reference/api/activebeatschanged.mdx | 120 +- docs/reference/api/beatmousedown.mdx | 106 +- docs/reference/api/beatmousemove.mdx | 106 +- docs/reference/api/beatmouseup.mdx | 112 +- docs/reference/api/boundslookup.mdx | 65 + docs/reference/api/canvaselement.mdx | 38 + docs/reference/api/changetrackmute.mdx | 96 +- docs/reference/api/changetracksolo.mdx | 98 +- .../api/changetracktranspositionpitch.mdx | 84 +- docs/reference/api/changetrackvolume.mdx | 99 +- docs/reference/api/container.mdx | 80 +- docs/reference/api/countinvolume.mdx | 75 +- docs/reference/api/destroy.mdx | 84 +- docs/reference/api/downloadmidi.mdx | 48 +- docs/reference/api/enumerateoutputdevices.mdx | 90 +- docs/reference/api/error.mdx | 100 +- docs/reference/api/getoutputdevice.mdx | 76 +- docs/reference/api/init.mdx | 59 - docs/reference/api/islooping.mdx | 78 +- docs/reference/api/isreadyforplayback.mdx | 77 +- docs/reference/api/load.mdx | 195 +- docs/reference/api/loadsoundfont.mdx | 148 +- docs/reference/api/loadsoundfontfromurl.mdx | 36 + docs/reference/api/mastervolume.mdx | 78 +- docs/reference/api/metronomevolume.mdx | 78 +- docs/reference/api/midieventsplayed.mdx | 416 +--- docs/reference/api/midieventsplayedfilter.mdx | 106 +- docs/reference/api/midiload.mdx | 112 +- docs/reference/api/midiloaded.mdx | 108 +- docs/reference/api/notemousedown.mdx | 99 +- docs/reference/api/notemousemove.mdx | 99 +- docs/reference/api/notemouseup.mdx | 100 +- docs/reference/api/pause.mdx | 79 +- docs/reference/api/play.mdx | 82 +- docs/reference/api/playbackrange.mdx | 120 +- docs/reference/api/playbackrangechanged.mdx | 129 +- docs/reference/api/playbackspeed.mdx | 76 +- docs/reference/api/playbeat.mdx | 99 +- docs/reference/api/playedbeatchanged.mdx | 101 +- docs/reference/api/player.mdx | 77 +- docs/reference/api/playerfinished.mdx | 107 +- docs/reference/api/playerpositionchanged.mdx | 153 +- docs/reference/api/playerready.mdx | 73 + docs/reference/api/playerstate.mdx | 80 +- docs/reference/api/playerstatechanged.mdx | 122 +- docs/reference/api/playnote.mdx | 96 +- docs/reference/api/playpause.mdx | 80 +- docs/reference/api/postrenderfinished.mdx | 98 +- docs/reference/api/print.mdx | 64 +- docs/reference/api/readyforplayback.mdx | 96 - docs/reference/api/render.mdx | 79 +- docs/reference/api/renderer.mdx | 41 +- docs/reference/api/renderfinished.mdx | 95 +- docs/reference/api/renderscore.mdx | 106 +- docs/reference/api/renderstarted.mdx | 96 +- docs/reference/api/rendertracks.mdx | 100 +- docs/reference/api/resetsoundfonts.mdx | 98 +- docs/reference/api/resize.mdx | 148 +- docs/reference/api/score.mdx | 76 +- docs/reference/api/scoreloaded.mdx | 106 +- docs/reference/api/scrolltocursor.mdx | 35 + docs/reference/api/setoutputdevice.mdx | 81 +- docs/reference/api/settings.mdx | 76 +- docs/reference/api/soundfontload.mdx | 71 +- docs/reference/api/soundfontloaded.mdx | 96 +- docs/reference/api/stop.mdx | 82 +- docs/reference/api/tex.mdx | 100 +- docs/reference/api/this.mdx | 28 - docs/reference/api/tickcache.mdx | 125 +- docs/reference/api/tickposition.mdx | 76 +- docs/reference/api/timeposition.mdx | 74 +- docs/reference/api/tracks.mdx | 82 +- docs/reference/api/uifacade.mdx | 36 + docs/reference/api/updatesettings.mdx | 86 +- docs/reference/scorerenderer.mdx | 14 - docs/reference/scorerenderer/boundslookup.mdx | 54 - docs/reference/scorerenderer/destroy.mdx | 35 - docs/reference/scorerenderer/error.mdx | 39 - .../scorerenderer/partiallayoutfinished.mdx | 49 - .../scorerenderer/partialrenderfinished.mdx | 47 - .../scorerenderer/postrenderfinished.mdx | 33 - docs/reference/scorerenderer/prerender.mdx | 38 - docs/reference/scorerenderer/render.mdx | 31 - .../scorerenderer/renderfinished.mdx | 35 - docs/reference/scorerenderer/renderresult.mdx | 38 - docs/reference/scorerenderer/renderscore.mdx | 41 - docs/reference/scorerenderer/resizerender.mdx | 37 - .../scorerenderer/updatesettings.mdx | 42 - docs/reference/scorerenderer/width.mdx | 27 - docs/reference/settings.mdx | 2 + .../settings/core/enablelazyloading.mdx | 34 +- docs/reference/settings/core/engine.mdx | 73 +- docs/reference/settings/core/file.mdx | 31 +- .../reference/settings/core/fontdirectory.mdx | 37 +- .../settings/core/includenotebounds.mdx | 65 +- docs/reference/settings/core/loglevel.mdx | 74 +- docs/reference/settings/core/scriptfile.mdx | 33 +- docs/reference/settings/core/tex.mdx | 41 +- docs/reference/settings/core/tracks.mdx | 40 +- docs/reference/settings/core/useworkers.mdx | 39 +- .../reference/settings/display/_resources.mdx | 7 + .../display/accoladebarpaddingright.mdx | 40 +- docs/reference/settings/display/barcount.mdx | 41 +- .../settings/display/barcountperpartial.mdx | 45 +- .../reference/settings/display/barsperrow.mdx | 43 +- .../display/effectstaffpaddingbottom.mdx | 40 +- .../display/effectstaffpaddingtop.mdx | 40 +- .../display/firststaffpaddingleft.mdx | 40 +- .../display/firstsystempaddingtop.mdx | 42 +- .../settings/display/justifylastsystem.mdx | 47 +- .../display/lastsystempaddingbottom.mdx | 40 +- .../reference/settings/display/layoutmode.mdx | 60 +- .../display/notationstaffpaddingbottom.mdx | 42 +- .../display/notationstaffpaddingtop.mdx | 42 +- docs/reference/settings/display/padding.mdx | 58 +- docs/reference/settings/display/resources.mdx | 233 +- docs/reference/settings/display/scale.mdx | 46 +- .../settings/display/staffpaddingleft.mdx | 40 +- docs/reference/settings/display/startbar.mdx | 42 +- .../settings/display/staveprofile.mdx | 76 +- .../settings/display/stretchforce.mdx | 47 +- .../display/systemlabelpaddingleft.mdx | 42 +- .../display/systemlabelpaddingright.mdx | 42 +- .../settings/display/systempaddingbottom.mdx | 42 +- .../settings/display/systempaddingtop.mdx | 40 +- .../settings/display/systemslayoutmode.mdx | 95 +- .../settings/importer/beattextaslyrics.mdx | 65 +- docs/reference/settings/importer/encoding.mdx | 44 +- .../importer/mergepartgroupsinmusicxml.mdx | 40 +- .../notation/displaytranspositionpitches.mdx | 43 +- docs/reference/settings/notation/elements.mdx | 310 +-- .../notation/extendbendarrowsontiednotes.mdx | 42 +- .../notation/extendlineeffectstobeatend.mdx | 43 +- .../settings/notation/fingeringmode.mdx | 60 +- .../settings/notation/notationmode.mdx | 70 +- .../settings/notation/rhythmheight.mdx | 41 +- .../settings/notation/rhythmmode.mdx | 66 +- .../settings/notation/slurheight.mdx | 47 +- .../settings/notation/smallgracetabnotes.mdx | 42 +- .../notation/transpositionpitches.mdx | 43 +- docs/reference/settings/player/_slide.mdx | 5 + docs/reference/settings/player/_vibrato.mdx | 5 + .../player/buffertimeinmilliseconds.mdx | 46 +- .../player/enableanimatedbeatcursor.mdx | 41 +- .../settings/player/enablecursor.mdx | 41 +- .../player/enableelementhighlighting.mdx | 41 +- .../settings/player/enableplayer.mdx | 45 +- .../settings/player/enableuserinteraction.mdx | 44 +- .../player/nativebrowsersmoothscroll.mdx | 33 +- docs/reference/settings/player/outputmode.mdx | 42 +- .../settings/player/playtripletfeel.mdx | 41 +- .../settings/player/scrollelement.mdx | 36 +- docs/reference/settings/player/scrollmode.mdx | 66 +- .../settings/player/scrolloffsetx.mdx | 58 +- .../settings/player/scrolloffsety.mdx | 56 +- .../reference/settings/player/scrollspeed.mdx | 48 +- docs/reference/settings/player/slide.mdx | 117 +- .../settings/player/songbookbendduration.mdx | 57 +- .../settings/player/songbookdipduration.mdx | 57 +- docs/reference/settings/player/soundfont.mdx | 31 +- docs/reference/settings/player/vibrato.mdx | 127 +- docs/reference/types.mdx | 6 + docs/releases/release1_4.mdx | 2 +- docs/tutorial-web/player.mdx | 2 +- docusaurus.config.ts | 2 + package-lock.json | 32 + package.json | 2 + scripts/generate-alphatabdoc.mts | 229 +- scripts/generate-api.mts | 199 ++ scripts/generate-common.mts | 1892 +++++++++++++++++ scripts/generate-settings.mts | 108 + scripts/generate-typedocs.mts | 523 +++++ scripts/typeschema.mts | 343 +++ scripts/util.mts | 43 + sidebars.ts | 27 +- src/alphatabdoc.ts | 44 - src/components/CodeBadge/index.tsx | 30 +- src/components/DynHeading/index.tsx | 36 + .../FileFormatFeatureTable/index.tsx | 4 +- src/components/MarkdownString/index.tsx | 23 + src/components/ParameterTable/index.tsx | 12 +- src/components/PropertyDescription/index.tsx | 67 +- .../PropertyDescription/styles.module.scss | 3 + src/components/ReferenceTable/index.tsx | 38 +- src/components/SettingsHeader/index.tsx | 15 + src/components/SinceBadge/index.tsx | 28 + src/components/TypeTable/index.tsx | 20 +- src/css/custom.scss | 54 +- src/names.ts | 7 +- src/theme/CodeBlock/Content/String.tsx | 122 ++ src/theme/CodeBlock/Content/styles.module.css | 87 + src/theme/CodeBlock/Line/index.tsx | 78 + src/theme/CodeBlock/Line/styles.module.css | 45 + src/theme/CodeBlock/utils.ts | 151 ++ src/types/RenderFinishedEventArgs/index.tsx | 47 - 240 files changed, 8305 insertions(+), 8288 deletions(-) create mode 100644 docs/guides/data-attributes.mdx create mode 100644 docs/guides/dom-events.mdx create mode 100644 docs/guides/jquery.mdx delete mode 100644 docs/reference/alphasynth.mdx delete mode 100644 docs/reference/alphasynth/countinvolume.mdx delete mode 100644 docs/reference/alphasynth/destroy.mdx delete mode 100644 docs/reference/alphasynth/finished.mdx delete mode 100644 docs/reference/alphasynth/islooping.mdx delete mode 100644 docs/reference/alphasynth/isready.mdx delete mode 100644 docs/reference/alphasynth/isreadyforplayback.mdx delete mode 100644 docs/reference/alphasynth/loadmidifile.mdx delete mode 100644 docs/reference/alphasynth/loadsoundfont.mdx delete mode 100644 docs/reference/alphasynth/loglevel.mdx delete mode 100644 docs/reference/alphasynth/mastervolume.mdx delete mode 100644 docs/reference/alphasynth/metronomevolume.mdx delete mode 100644 docs/reference/alphasynth/midieventsplayed.mdx delete mode 100644 docs/reference/alphasynth/midieventsplayedfilter.mdx delete mode 100644 docs/reference/alphasynth/midiloaded.mdx delete mode 100644 docs/reference/alphasynth/midiloadfailed.mdx delete mode 100644 docs/reference/alphasynth/pause.mdx delete mode 100644 docs/reference/alphasynth/play.mdx delete mode 100644 docs/reference/alphasynth/playbackrange.mdx delete mode 100644 docs/reference/alphasynth/playbackrangechanged.mdx delete mode 100644 docs/reference/alphasynth/playbackspeed.mdx delete mode 100644 docs/reference/alphasynth/playpause.mdx delete mode 100644 docs/reference/alphasynth/positionchanged.mdx delete mode 100644 docs/reference/alphasynth/ready.mdx delete mode 100644 docs/reference/alphasynth/readyforplayback.mdx delete mode 100644 docs/reference/alphasynth/resetchannelstate.mdx delete mode 100644 docs/reference/alphasynth/setchannelmute.mdx delete mode 100644 docs/reference/alphasynth/setchannelsolo.mdx delete mode 100644 docs/reference/alphasynth/setchanneltranspositionpitch.mdx delete mode 100644 docs/reference/alphasynth/setchannelvolume.mdx delete mode 100644 docs/reference/alphasynth/soundfontloaded.mdx delete mode 100644 docs/reference/alphasynth/soundfontloadfailed.mdx delete mode 100644 docs/reference/alphasynth/state.mdx delete mode 100644 docs/reference/alphasynth/statechanged.mdx delete mode 100644 docs/reference/alphasynth/stop.mdx delete mode 100644 docs/reference/alphasynth/tickposition.mdx delete mode 100644 docs/reference/alphasynth/timeposition.mdx create mode 100644 docs/reference/api/_boundslookup.mdx create mode 100644 docs/reference/api/boundslookup.mdx create mode 100644 docs/reference/api/canvaselement.mdx delete mode 100644 docs/reference/api/init.mdx create mode 100644 docs/reference/api/loadsoundfontfromurl.mdx create mode 100644 docs/reference/api/playerready.mdx delete mode 100644 docs/reference/api/readyforplayback.mdx create mode 100644 docs/reference/api/scrolltocursor.mdx delete mode 100644 docs/reference/api/this.mdx create mode 100644 docs/reference/api/uifacade.mdx delete mode 100644 docs/reference/scorerenderer.mdx delete mode 100644 docs/reference/scorerenderer/boundslookup.mdx delete mode 100644 docs/reference/scorerenderer/destroy.mdx delete mode 100644 docs/reference/scorerenderer/error.mdx delete mode 100644 docs/reference/scorerenderer/partiallayoutfinished.mdx delete mode 100644 docs/reference/scorerenderer/partialrenderfinished.mdx delete mode 100644 docs/reference/scorerenderer/postrenderfinished.mdx delete mode 100644 docs/reference/scorerenderer/prerender.mdx delete mode 100644 docs/reference/scorerenderer/render.mdx delete mode 100644 docs/reference/scorerenderer/renderfinished.mdx delete mode 100644 docs/reference/scorerenderer/renderresult.mdx delete mode 100644 docs/reference/scorerenderer/renderscore.mdx delete mode 100644 docs/reference/scorerenderer/resizerender.mdx delete mode 100644 docs/reference/scorerenderer/updatesettings.mdx delete mode 100644 docs/reference/scorerenderer/width.mdx create mode 100644 docs/reference/settings/display/_resources.mdx create mode 100644 docs/reference/settings/player/_slide.mdx create mode 100644 docs/reference/settings/player/_vibrato.mdx create mode 100644 docs/reference/types.mdx create mode 100644 scripts/generate-api.mts create mode 100644 scripts/generate-common.mts create mode 100644 scripts/generate-settings.mts create mode 100644 scripts/generate-typedocs.mts create mode 100644 scripts/typeschema.mts create mode 100644 scripts/util.mts delete mode 100644 src/alphatabdoc.ts create mode 100644 src/components/DynHeading/index.tsx create mode 100644 src/components/MarkdownString/index.tsx create mode 100644 src/components/PropertyDescription/styles.module.scss create mode 100644 src/components/SettingsHeader/index.tsx create mode 100644 src/theme/CodeBlock/Content/String.tsx create mode 100644 src/theme/CodeBlock/Content/styles.module.css create mode 100644 src/theme/CodeBlock/Line/index.tsx create mode 100644 src/theme/CodeBlock/Line/styles.module.css create mode 100644 src/theme/CodeBlock/utils.ts delete mode 100644 src/types/RenderFinishedEventArgs/index.tsx diff --git a/.gitignore b/.gitignore index 33c043731..cf50bfc74 100644 --- a/.gitignore +++ b/.gitignore @@ -19,4 +19,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -src/alphatabdoc/ \ No newline at end of file +src/alphatabdoc/ +docs/reference/types/ \ No newline at end of file diff --git a/docs/getting-started/configuration-web.mdx b/docs/getting-started/configuration-web.mdx index b29c4a15e..74ef36d0a 100644 --- a/docs/getting-started/configuration-web.mdx +++ b/docs/getting-started/configuration-web.mdx @@ -108,28 +108,6 @@ api.scoreLoaded.on( (score) => { }); ``` - - - -DOM events are namespaced with a `alphaTab.` prefix and can be subscribed either via `addEventListener(eventName, handler)` or via jQuerys `.on(eventName, handler)`. -To access potential parameters that are passed along the event, you will need to access the event details. - -For raw DOM events, the info object will be contained in the [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property of the DOM event. - -```js -element.addEventListener('alphaTab.scoreLoaded', (e) => { - console.log('Score was loaded!', e.detail); -}); -``` - -For jQuery events the object related to the event will be the second parameter: - -```js -$(element).on('alphaTab.scoreLoaded', (e, score) => { - console.log('Score was loaded!', score); -}); -``` - diff --git a/docs/guides/coloring.mdx b/docs/guides/coloring.mdx index d94c87a5e..d2c7e58d6 100644 --- a/docs/guides/coloring.mdx +++ b/docs/guides/coloring.mdx @@ -9,21 +9,6 @@ import { SinceBadge } from '@site/src/components/SinceBadge'; - -import * as alphaTab from '@coderline/alphatab'; -import { getDescriptionText } from '@site/src/alphatabdoc'; - -export function EnumMemberList({ doc }) { - return ( - <> - {doc.name} -
    - {doc.members.map(n => (
  • {n.name} - {getDescriptionText(n.tsdoc)}
    • ))} -
- - ) -} - alphaTab supports individual styling of music notation elements via a special `style` container which is available on most levels of the [Data Model](../reference/score.mdx). This means you can customize the colors of individual notes being rendered base on custom logic. @@ -57,47 +42,46 @@ alphaTab tries to give fine grained access to coloring music notation elements. On Score level initialize the `score.style = new alphaTab.model.ScoreStyle()` and then select the element to color via `alphaTab.model.ScoreSubElement`. -import scoreSubElementDoc from '@site/src/alphatabdoc/model/ScoreSubElement'; +import ScoreSubElementDoc from '@site/docs/reference/types/model/scoresubelement/index.mdx'; - + ### Track level On Track level initialize the `track.style = new alphaTab.model.TrackStyle()` and then select the element to color via `alphaTab.model.TrackSubElement`. -import trackSubElementDoc from '@site/src/alphatabdoc/model/TrackSubElement'; +import TrackSubElementDoc from '@site/docs/reference/types/model/tracksubelement/index.mdx'; - + ### Bar level On Bar level initialize the `bar.style = new alphaTab.model.BarStyle()` and then select the element to color via `alphaTab.model.BarSubElement`. -import barSubElementDoc from '@site/src/alphatabdoc/model/BarSubElement'; - - +import BarSubElementDoc from '@site/docs/reference/types/model/barsubelement/index.mdx'; + ### Voice level On Bar level initialize the `voice.style = new alphaTab.model.VoiceStyle()` and then select the element to color via `alphaTab.model.VoiceSubElement`. -import voiceSubElementDoc from '@site/src/alphatabdoc/model/VoiceSubElement'; +import VoiceSubElementDoc from '@site/docs/reference/types/model/voicesubelement/index.mdx'; - + ### Beat level On Beat level initialize the `beat.style = new alphaTab.model.BeatStyle()` and then select the element to color via `alphaTab.model.BeatSubElement`. -import beatSubElementDoc from '@site/src/alphatabdoc/model/BeatSubElement'; +import BeatSubElementDoc from '@site/docs/reference/types/model/beatsubelement/index.mdx'; - + ### Note level On Note level initialize the `note.style = new alphaTab.model.NoteStyle()` and then select the element to color via `alphaTab.model.NoteSubElement`. -import noteSubElementDoc from '@site/src/alphatabdoc/model/NoteSubElement'; +import NoteSubElementDoc from '@site/docs/reference/types/model/notesubelement/index.mdx'; - + \ No newline at end of file diff --git a/docs/guides/data-attributes.mdx b/docs/guides/data-attributes.mdx new file mode 100644 index 000000000..25b3b115e --- /dev/null +++ b/docs/guides/data-attributes.mdx @@ -0,0 +1,5 @@ +--- +title: Data Attributes +--- + +TODO: Document deprecation of Data Attributes integration and move reference doc here. \ No newline at end of file diff --git a/docs/guides/dom-events.mdx b/docs/guides/dom-events.mdx new file mode 100644 index 000000000..e59393c98 --- /dev/null +++ b/docs/guides/dom-events.mdx @@ -0,0 +1,5 @@ +--- +title: Data Events +--- + +TODO: DOM Events deprecation of Data Attributes integration and move reference doc here. \ No newline at end of file diff --git a/docs/guides/jquery.mdx b/docs/guides/jquery.mdx new file mode 100644 index 000000000..f0f06ecb8 --- /dev/null +++ b/docs/guides/jquery.mdx @@ -0,0 +1,5 @@ +--- +title: jQuery +--- + +TODO: Document deprecation of jQuery integration and move reference doc here. \ No newline at end of file diff --git a/docs/guides/nodejs.mdx b/docs/guides/nodejs.mdx index 47a279d01..f43248bdf 100644 --- a/docs/guides/nodejs.mdx +++ b/docs/guides/nodejs.mdx @@ -6,6 +6,8 @@ import { SinceBadge } from '@site/src/components/SinceBadge'; +export const SourceLinks = 'linkAlphaTabApi="/docs/reference/types/AlphaTabApi" linkScore="/docs/reference/types/model/Score"' + The JavaScript version of alphaTab is primarily optimized for usage in Browsers. At least the top level `AlphaTabApi` which is a UI focused interface to alphaTab. But alphaTab can also be used in other JavaScript environments like Node.js or headless JavaScript engines. The core of alphaTab is platform independent @@ -412,4 +414,4 @@ finalImageCanvas[Symbol.dispose](); await fs.promises.writeFile(outputFilePath, new Uint8Array(png)); ``` - \ No newline at end of file + diff --git a/docs/reference/alphasynth.mdx b/docs/reference/alphasynth.mdx deleted file mode 100644 index 74f75ff34..000000000 --- a/docs/reference/alphasynth.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: AlphaSynth ---- - -import { ReferenceTable } from '@site/src/components/ReferenceTable'; - -`AlphaSynth` is one of the low level APIs that can be used if no full alphaTab API object with UI interaction -can be used or is needed. It is the audio synthesis engine of alphaTab which is used to play a midi file -using a generated midi file and a SoundFont as input. - -This page describes all methods, properties and events exposed by this class. Most of the API methods exposed by -the `IAlphaSynth` interface are also directly available on the normal API object. That's why many documentation pages -delegate to the related documentation pages there. - -import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; - - \ No newline at end of file diff --git a/docs/reference/alphasynth/countinvolume.mdx b/docs/reference/alphasynth/countinvolume.mdx deleted file mode 100644 index b014f7111..000000000 --- a/docs/reference/alphasynth/countinvolume.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: countInVolume -description: The volume of the count-in metronome ticks -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 1.1.0 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - - -Same value as [`api.countInVolume`](/docs/reference/api/countinvolume) \ No newline at end of file diff --git a/docs/reference/alphasynth/destroy.mdx b/docs/reference/alphasynth/destroy.mdx deleted file mode 100644 index 9d08846db..000000000 --- a/docs/reference/alphasynth/destroy.mdx +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: destroy -description: Destroys the synthesizer and all related components. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -This method destroys the audio synthesizer renderer and by this closes all potentially opened -contexts and shuts down any worker. - -If you dynamically create/destroy renderers it is recommended to always call this method -to ensure all resources are leaked. - -## Signatures - - - - - - - -### Parameters -None - -### Returns -Nothing \ No newline at end of file diff --git a/docs/reference/alphasynth/finished.mdx b/docs/reference/alphasynth/finished.mdx deleted file mode 100644 index 4ac042210..000000000 --- a/docs/reference/alphasynth/finished.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: finished -description: This event is fired when the playback of the whole song finished. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.playerFinished`](/docs/reference/api/playerfinished) \ No newline at end of file diff --git a/docs/reference/alphasynth/islooping.mdx b/docs/reference/alphasynth/islooping.mdx deleted file mode 100644 index 4e98ef802..000000000 --- a/docs/reference/alphasynth/islooping.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: isLooping -description: Whether the playback should automatically restart after it finished -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.isLooping`](/docs/reference/api/islooping) \ No newline at end of file diff --git a/docs/reference/alphasynth/isready.mdx b/docs/reference/alphasynth/isready.mdx deleted file mode 100644 index 3682e0852..000000000 --- a/docs/reference/alphasynth/isready.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: isReady -description: If the synthesizer is ready for interaction. -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; - -## Description -The audio synthesis engine is running always asynchronously in some worker or thread. -Before any interaction with alphaSynth can be done it needs to initialize this worker first. -This property indicates whether the worker is already ready. - -The [`ready`](/docs/reference/alphasynth/ready) event is fired when the value changes to true. - -This event is signaled as soon as the background worker and the audio output are initialized. - - \ No newline at end of file diff --git a/docs/reference/alphasynth/isreadyforplayback.mdx b/docs/reference/alphasynth/isreadyforplayback.mdx deleted file mode 100644 index 27d9bec2a..000000000 --- a/docs/reference/alphasynth/isreadyforplayback.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: isReadyForPlayback -description: If the synthesizer is ready for playback. -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.isReadyForPlayback`](/docs/reference/api/isreadyforplayback) \ No newline at end of file diff --git a/docs/reference/alphasynth/loadmidifile.mdx b/docs/reference/alphasynth/loadmidifile.mdx deleted file mode 100644 index df4ada495..000000000 --- a/docs/reference/alphasynth/loadmidifile.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: loadMidiFile -description: Triggers a load of the given midi file. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Loads a midi file structure for playback in alphaSynth. The `MidiFile` structure -follows a Standard Midi File (SMF) format 0 structure where only one single track -with all midi events is contained. - -## Signatures - - - - Load the given midi file structure. - - - Load the given midi file structure. - - - Load the given midi file structure. - - - - diff --git a/docs/reference/alphasynth/loadsoundfont.mdx b/docs/reference/alphasynth/loadsoundfont.mdx deleted file mode 100644 index 5df59b2dc..000000000 --- a/docs/reference/alphasynth/loadsoundfont.mdx +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: loadSoundFont -description: Triggers a load of the soundfont from the given data. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -Same behavior as [`Api.LoadSoundFont`](/docs/reference/api/loadsoundfont) but only raw byte arrays are accepted -as parameter. - -## Signatures - - - - Load the soundfont from the given raw bytes. - Append since 1.1.0-alpha.34 - - - Load the soundfont from the given raw bytes. - Append since 1.1.0-alpha.34 - - - Load the soundfont from the given raw bytes. - Append since 1.1.0-alpha.34 - - diff --git a/docs/reference/alphasynth/loglevel.mdx b/docs/reference/alphasynth/loglevel.mdx deleted file mode 100644 index b79238bbb..000000000 --- a/docs/reference/alphasynth/loglevel.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: logLevel -description: The log level to use within alphaSynth. -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`settings.core.logLevel`](/docs/reference/settings/core/loglevel) \ No newline at end of file diff --git a/docs/reference/alphasynth/mastervolume.mdx b/docs/reference/alphasynth/mastervolume.mdx deleted file mode 100644 index 9ac610f32..000000000 --- a/docs/reference/alphasynth/mastervolume.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: masterVolume -description: The current master volume as percentage -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.masterVolume`](/docs/reference/api/mastervolume) \ No newline at end of file diff --git a/docs/reference/alphasynth/metronomevolume.mdx b/docs/reference/alphasynth/metronomevolume.mdx deleted file mode 100644 index 2a938ee77..000000000 --- a/docs/reference/alphasynth/metronomevolume.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: metronomeVolume -description: The metronome volume as percentage -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.metronomeVolume`](/docs/reference/api/metronomevolume) \ No newline at end of file diff --git a/docs/reference/alphasynth/midieventsplayed.mdx b/docs/reference/alphasynth/midieventsplayed.mdx deleted file mode 100644 index 1a77f310b..000000000 --- a/docs/reference/alphasynth/midieventsplayed.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: midiEventsPlayed -description: The midi events which will trigger the `midiEventsPlayed` event -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 1.2.0 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.midiEventsPlayed`](/docs/reference/api/midieventsplayed) \ No newline at end of file diff --git a/docs/reference/alphasynth/midieventsplayedfilter.mdx b/docs/reference/alphasynth/midieventsplayedfilter.mdx deleted file mode 100644 index 6cfdf3313..000000000 --- a/docs/reference/alphasynth/midieventsplayedfilter.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: midiEventsPlayedFilter -description: The midi events which will trigger the `midiEventsPlayed` event -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 1.2.0 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.midiEventsPlayedFilter`](/docs/reference/api/midieventsplayedfilter) \ No newline at end of file diff --git a/docs/reference/alphasynth/midiloaded.mdx b/docs/reference/alphasynth/midiloaded.mdx deleted file mode 100644 index ac2c6ec74..000000000 --- a/docs/reference/alphasynth/midiloaded.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: midiLoaded -description: This event is fired when the Midi needed for playback was loaded. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.midiLoaded`](/docs/reference/api/midiloaded) \ No newline at end of file diff --git a/docs/reference/alphasynth/midiloadfailed.mdx b/docs/reference/alphasynth/midiloadfailed.mdx deleted file mode 100644 index 614d8466d..000000000 --- a/docs/reference/alphasynth/midiloadfailed.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: midiLoadFailed -description: This event is fired when the loading of the Midi failed. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This event is fired when an error while loading the Midi failed. - - - -## Types - - - - - - - -## Parameters - - - - The object containing the error details. - - \ No newline at end of file diff --git a/docs/reference/alphasynth/pause.mdx b/docs/reference/alphasynth/pause.mdx deleted file mode 100644 index df48512b0..000000000 --- a/docs/reference/alphasynth/pause.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: pause -description: Pauses the playback of the current song. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same behavior and signature as [`api.pause`](/docs/reference/api/pause) \ No newline at end of file diff --git a/docs/reference/alphasynth/play.mdx b/docs/reference/alphasynth/play.mdx deleted file mode 100644 index ff3d5c36e..000000000 --- a/docs/reference/alphasynth/play.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: play -description: Starts the playback of the current song. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same behavior and signature as [`api.play`](/docs/reference/api/play) \ No newline at end of file diff --git a/docs/reference/alphasynth/playbackrange.mdx b/docs/reference/alphasynth/playbackrange.mdx deleted file mode 100644 index f91223b81..000000000 --- a/docs/reference/alphasynth/playbackrange.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: playbackRange -description: The range of the song that should be played -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.playbackRange`](/docs/reference/api/playbackrange) \ No newline at end of file diff --git a/docs/reference/alphasynth/playbackrangechanged.mdx b/docs/reference/alphasynth/playbackrangechanged.mdx deleted file mode 100644 index 8d805672a..000000000 --- a/docs/reference/alphasynth/playbackrangechanged.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: playbackRangeChanged -description: This event is fired when the playback range changed. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 1.2.3 ---- - -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - - -Same value as [`api.playbackRangeChanged`](/docs/reference/api/playbackrangechanged) \ No newline at end of file diff --git a/docs/reference/alphasynth/playbackspeed.mdx b/docs/reference/alphasynth/playbackspeed.mdx deleted file mode 100644 index 1025cae22..000000000 --- a/docs/reference/alphasynth/playbackspeed.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: playbackSpeed -description: The current playback speed as percentage -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.playbackSpeed`](/docs/reference/api/playbackspeed) \ No newline at end of file diff --git a/docs/reference/alphasynth/playpause.mdx b/docs/reference/alphasynth/playpause.mdx deleted file mode 100644 index c42a3e0e1..000000000 --- a/docs/reference/alphasynth/playpause.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: playPause -description: Toggles between play/pause depending on the current player state. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same behavior and signature as [`api.playPause`](/docs/reference/api/playpause) \ No newline at end of file diff --git a/docs/reference/alphasynth/positionchanged.mdx b/docs/reference/alphasynth/positionchanged.mdx deleted file mode 100644 index a99002e3b..000000000 --- a/docs/reference/alphasynth/positionchanged.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: positionChanged -description: This event is fired when the playback state changed. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.playerPositionChanged`](/docs/reference/api/playerpositionchanged) \ No newline at end of file diff --git a/docs/reference/alphasynth/ready.mdx b/docs/reference/alphasynth/ready.mdx deleted file mode 100644 index 32868099e..000000000 --- a/docs/reference/alphasynth/ready.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: ready -description: Fired when the player is ready to be interacted with. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -This event is when the player is ready to be interacted with. - - - -## Types - - - - - - - -## Parameters -none \ No newline at end of file diff --git a/docs/reference/alphasynth/readyforplayback.mdx b/docs/reference/alphasynth/readyforplayback.mdx deleted file mode 100644 index 39b267ddb..000000000 --- a/docs/reference/alphasynth/readyforplayback.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: readyForPlayback -description: This event is fired when all required data for playback is loaded and ready. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.readyForPlayback`](/docs/reference/api/readyforplayback) \ No newline at end of file diff --git a/docs/reference/alphasynth/resetchannelstate.mdx b/docs/reference/alphasynth/resetchannelstate.mdx deleted file mode 100644 index 4d8f07eb2..000000000 --- a/docs/reference/alphasynth/resetchannelstate.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: resetChannelStates -description: Resets the mute/solo change of all channels. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Resets the mute/solo change of all channels. - -## Signatures - - - - - - - - - \ No newline at end of file diff --git a/docs/reference/alphasynth/setchannelmute.mdx b/docs/reference/alphasynth/setchannelmute.mdx deleted file mode 100644 index 7eaa1f2a8..000000000 --- a/docs/reference/alphasynth/setchannelmute.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: setChannelMute -description: Mutes or unmutes a single midi channel. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Mutes or unmutes a single midi channel. - -## Signatures - - - - Sets the mute state of a channel - - - Sets the mute state of a channel. - - - Sets the mute state of a channel. - - - -## Parameters - - - - The midi channel to mute or unmute. - - - A value indicating whether the channel should be muted or unmuted. - - diff --git a/docs/reference/alphasynth/setchannelsolo.mdx b/docs/reference/alphasynth/setchannelsolo.mdx deleted file mode 100644 index 1fc2b53fb..000000000 --- a/docs/reference/alphasynth/setchannelsolo.mdx +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: setChannelSolo -description: Flags a single midi channel to e played solo or not. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Flags a single midi channel to e played solo or not. As soon as the first channel -is marked as playing solo, all channels which are not flagged as solo are not played. -Multiple channels can be flagged as solo playing. - -## Signatures - - - - Sets the solo state of a channel - - - Sets the solo state of a channel. - - - Sets the solo state of a channel. - - - -## Parameters - - - - The midi channel play solo or not. - - - A value indicating whether the channel should be played solo or not. - - \ No newline at end of file diff --git a/docs/reference/alphasynth/setchanneltranspositionpitch.mdx b/docs/reference/alphasynth/setchanneltranspositionpitch.mdx deleted file mode 100644 index f0e1f0762..000000000 --- a/docs/reference/alphasynth/setchanneltranspositionpitch.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: setChannelTranspositionPitch -description: Sets the transposition pitch of a given channel. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Sets the transposition pitch of a given channel. This pitch is additionally applied beside the -ones applied already via `applyTranspositionPitches`. - -## Signatures - - - - - - - - - - -## Parameters - - - - The midi channel to set the volume for. - - - The volume as percentage. - - \ No newline at end of file diff --git a/docs/reference/alphasynth/setchannelvolume.mdx b/docs/reference/alphasynth/setchannelvolume.mdx deleted file mode 100644 index bac4d9e8f..000000000 --- a/docs/reference/alphasynth/setchannelvolume.mdx +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: setChannelVolume -description: Sets the current and initial volume of the given channel. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Sets the current and initial volume of the given channel. - -## Signatures - - - - - - - - - - -## Parameters - - - - The midi channel to set the volume for. - - - The volume as percentage. - - \ No newline at end of file diff --git a/docs/reference/alphasynth/soundfontloaded.mdx b/docs/reference/alphasynth/soundfontloaded.mdx deleted file mode 100644 index 08c4fe07c..000000000 --- a/docs/reference/alphasynth/soundfontloaded.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: soundFontLoaded -description: This event is fired when the SoundFont needed for playback was loaded. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`Api.SoundFontLoaded`](/docs/reference/api/soundfontloaded) \ No newline at end of file diff --git a/docs/reference/alphasynth/soundfontloadfailed.mdx b/docs/reference/alphasynth/soundfontloadfailed.mdx deleted file mode 100644 index 3bf62f3cf..000000000 --- a/docs/reference/alphasynth/soundfontloadfailed.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: soundFontLoadFailed -description: This event is fired when the loading of the SoundFont failed. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This event is fired when an error while loading the soundfont failed. - - - -## Types - - - - - - - -## Parameters - - - - The object containing the error details. - - \ No newline at end of file diff --git a/docs/reference/alphasynth/state.mdx b/docs/reference/alphasynth/state.mdx deleted file mode 100644 index 60624af81..000000000 --- a/docs/reference/alphasynth/state.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: state -description: The current player state. -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.playerState`](/docs/reference/api/playerstate) \ No newline at end of file diff --git a/docs/reference/alphasynth/statechanged.mdx b/docs/reference/alphasynth/statechanged.mdx deleted file mode 100644 index 24c9fb2da..000000000 --- a/docs/reference/alphasynth/statechanged.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: stateChanged -description: This event is fired when the playback state changed. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.playerStateChanged`](/docs/reference/api/playerstatechanged) \ No newline at end of file diff --git a/docs/reference/alphasynth/stop.mdx b/docs/reference/alphasynth/stop.mdx deleted file mode 100644 index f484869b1..000000000 --- a/docs/reference/alphasynth/stop.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: stop -description: Stops the playback of the current song, and moves the playback position back to the start. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same behavior and signature as [`api.stop`](/docs/reference/api/stop) \ No newline at end of file diff --git a/docs/reference/alphasynth/tickposition.mdx b/docs/reference/alphasynth/tickposition.mdx deleted file mode 100644 index e0a7e1afd..000000000 --- a/docs/reference/alphasynth/tickposition.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: tickPosition -description: The position within the song in midi ticks -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.tickPosition`](/docs/reference/api/tickposition) \ No newline at end of file diff --git a/docs/reference/alphasynth/timeposition.mdx b/docs/reference/alphasynth/timeposition.mdx deleted file mode 100644 index 3d6ea80df..000000000 --- a/docs/reference/alphasynth/timeposition.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: timePosition -description: The position within the song in milliseconds -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -Same value as [`api.timePosition`](/docs/reference/api/timeposition) \ No newline at end of file diff --git a/docs/reference/api/_boundslookup.mdx b/docs/reference/api/_boundslookup.mdx new file mode 100644 index 000000000..594f363ca --- /dev/null +++ b/docs/reference/api/_boundslookup.mdx @@ -0,0 +1,12 @@ +import { BoundsLookupViewer } from '@site/src/components/BoundsLookupViewer'; + +{` +\\track "Guitar 1" +12.2{v f} 14.2{v f}.4 :8 15.2 17.2 | +14.1.2 :8 17.2 15.1 14.1{h} 17.2 | +15.2{v d}.4 :16 17.2{h} 15.2 :8 14.2 14.1 17.1{b(0 4 4 0)}.4 | +15.1.8 :16 14.1{tu 3} 15.1{tu 3} 14.1{tu 3} :8 17.2 15.1 14.1 :16 12.1{tu 3} 14.1{tu 3} 12.1{tu 3} :8 15.2 14.2 | +12.2 14.3 12.3 15.2 :32 14.2{h} 15.2{h} 14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h} +\\track "Guitar 2" +3.3 +`} \ No newline at end of file diff --git a/docs/reference/api/activebeatschanged.mdx b/docs/reference/api/activebeatschanged.mdx index 9a74278cf..f63029842 100644 --- a/docs/reference/api/activebeatschanged.mdx +++ b/docs/reference/api/activebeatschanged.mdx @@ -1,122 +1,72 @@ --- title: activeBeatsChanged -description: This event is fired when the currently active beats across all tracks change. +description: "This event is fired when the currently active beats across all tracks change." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.3 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the currently active beats across all tracks change. Unlike the `playedBeatChanged` event -this event contains the beats of all tracks and voices independent of them being rendered. - - - -## Types +### Description +This event is fired when the currently active beats across all tracks change. Unlike the {"playedBeatChanged"} event this event contains the beats of all tracks and voices independent of them being rendered. - - - - - - -## Parameters - - - - The event args containing the info about the active beats. - - - The event args containing the info about the active beats. - - - The event args containing the info about the active beats. - - - -## ActiveBeatsChangedEventArgs Properties + + +
{"activeBeatsChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"ActiveBeatsChangedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"ActiveBeatsChangedEventArgs"}{">"}{" "}{"ActiveBeatsChanged"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"activeBeatsChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"ActiveBeatsChangedEventArgs"}{">"}
+ + - - - The currently active beats across all tracks and voices. - - - The currently active beats across all tracks and voices. - - - The currently active beats across all tracks and voices. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.activeBeatsChanged.on(args => { - updateHighlights(args.activeBeats); + updateHighlights(args.activeBeats); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.activeBeatsChanged', (e, args) => { - updateHighlights(args.activeBeats); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.activeBeatsChanged', (e) => { - const args = e.detail; - updateHighlights(args.activeBeats); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.ActiveBeatsChanged.On(args => +api.ActiveBeatsChanged.On(args => { UpdateHighlights(args.ActiveBeats); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.activeBeatsChanged.on { args -> updateHighlights(args.activeBeats) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/beatmousedown.mdx b/docs/reference/api/beatmousedown.mdx index c0f2be0a5..7509805e8 100644 --- a/docs/reference/api/beatmousedown.mdx +++ b/docs/reference/api/beatmousedown.mdx @@ -1,112 +1,72 @@ --- title: beatMouseDown -description: This event is fired whenever a the user presses the mouse button on a beat. +description: "This event is fired whenever a the user presses the mouse button on a beat." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.7 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description +### Description This event is fired whenever a the user presses the mouse button on a beat. - - -## Types - - - - - - - -## Parameters + + +
{"beatMouseDown"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}{" "}{"BeatMouseDown"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"beatMouseDown"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}
+ + - - - The new beat that is now being played.. - - - The original mouse event that lead to trigger of the beat event. For the DOM event it is stored in the event.originalEvent. - - - The new beat that is now being played. - - - The new beat that is now being played. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.beatMouseDown.on((beat) => { startSelectionOnBeat(beat); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.beatMouseDown', (e, beat) => { - originalEvent.preventDefault(); - startSelectionOnBeat(beat); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.beatMouseDown', (e) => { - const beat = e.detail; - e.originalEvent.preventDefault(); - startSelectionOnBeat(beat); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.BeatMouseDown.On(beat => +api.BeatMouseDown.On(beat => { StartSelectionOnBeat(args); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.beatMouseDown.on { beat -> startSelectionOnBeat(args) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/beatmousemove.mdx b/docs/reference/api/beatmousemove.mdx index b19ae726b..e668b6a03 100644 --- a/docs/reference/api/beatmousemove.mdx +++ b/docs/reference/api/beatmousemove.mdx @@ -1,112 +1,72 @@ --- title: beatMouseMove -description: This event is fired whenever the user moves the mouse over a beat after the user already pressed the button on a beat. +description: "This event is fired whenever the user moves the mouse over a beat after the user already pressed the button on a beat." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.7 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description +### Description This event is fired whenever the user moves the mouse over a beat after the user already pressed the button on a beat. - - -## Types - - - - - - - -## Parameters + + +
{"beatMouseMove"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}{" "}{"BeatMouseMove"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"beatMouseMove"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}
+ + - - - Beat on which the mouse was hovered over during mouse down. - - - The original mouse event that lead to trigger of the beat event. For the DOM event it is stored in the event.originalEvent. - - - Beat on which the mouse was hovered over during mouse down. - - - Beat on which the mouse was hovered over during mouse down. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.beatMouseMove.on((beat) => { expandSelectionToBeat(beat); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.beatMouseMove', (e, beat) => { - originalEvent.preventDefault(); - expandSelectionToBeat(beat); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.beatMouseMove', (e) => { - var beat = e.detail; - e.originalEvent.preventDefault(); - expandSelectionToBeat(beat); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.BeatMouseMove.On(beat => +api.BeatMouseMove.On(beat => { ExpandSelectionToBeat(beat); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.beatMouseMove.on { beat -> expandSelectionToBeat(beat) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/beatmouseup.mdx b/docs/reference/api/beatmouseup.mdx index 5434413a7..9ba2ef075 100644 --- a/docs/reference/api/beatmouseup.mdx +++ b/docs/reference/api/beatmouseup.mdx @@ -1,117 +1,73 @@ --- title: beatMouseUp -description: This event is fired whenever the user releases the mouse after a mouse press on a beat. +description: "This event is fired whenever the user releases the mouse after a mouse press on a beat." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.7 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired whenever the user releases the mouse after a mouse press on a beat. -This event is fired regardless of whether the mouse was released on a beat. +### Description +This event is fired whenever the user releases the mouse after a mouse press on a beat. This event is fired regardless of whether the mouse was released on a beat. The parameter is null if the mouse was released somewhere beside the beat. - - -## Types - - - - - - - -## Parameters + + +
{"beatMouseUp"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{" "}{"|"}{" "}{"null"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Beat"}{"?"}{">"}{" "}{"BeatMouseUp"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"beatMouseUp"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{"?"}{">"}
+ + - - - Beat on which the mouse was released over after mouse down. - Might be null if no beat could be found in near location. - - - Beat on which the mouse was released over after mouse down. - Might be null if no beat could be found in near location. - - - The original mouse event that lead to trigger of the beat event. For the DOM event it is stored in the event.originalEvent. - - - Beat on which the mouse was released over after mouse down. - Might be null if no beat could be found in near location. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.beatMouseUp.on((beat) => { hideSelection(beat); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.beatMouseUp', (e, beat) => { - originalEvent.preventDefault(); - hideSelection(beat); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.beatMouseUp', (e) => { - const beat = e.detail; - e.originalEvent.preventDefault(); - hideSelection(beat); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.BeatMouseUp.On(beat => +api.BeatMouseUp.On(beat => { HideSelection(beat); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.beatMouseUp.on { beat -> hideSelection(beat) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/boundslookup.mdx b/docs/reference/api/boundslookup.mdx new file mode 100644 index 000000000..c6ffa31c7 --- /dev/null +++ b/docs/reference/api/boundslookup.mdx @@ -0,0 +1,65 @@ +--- +title: boundsLookup +description: "The tick cache allowing lookup of midi ticks to beats." +sidebar_custom_props: + kind: property + category: Properties - Core + since: 1.5.0 +--- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + + +import { PropertyDescription } from '@site/src/components/PropertyDescription'; + + + +### Description +The tick cache allowing lookup of midi ticks to beats. In older versions of alphaTab you can access the `boundsLookup` via {"boundsLookup"} on {"renderer"}. + +After the rendering completed alphaTab exposes via this lookup the location of the individual +notation elements. The lookup provides fast access to the bars and beats at a given location. +If the {"CoreSettings.includeNoteBounds"} option was activated also the location of the individual notes can be obtained. + +The property contains a `BoundsLookup` instance which follows a hierarchical structure that represents +the tree of rendered elements. + +The hierarchy is: `staffSystems > bars(1) > bars(2) > beats > notes` + +* `staffSystems` - Represent the bounds of the individual systems ("rows") where staves are contained. +* `bars(1)` - Represent the bounds of all bars for a particular master bar across all tracks. +* `bars(2)` - Represent the bounds of an individual bar of a track. The bounds on y-axis span the region of the staff and notes might exceed this bounds. +* `beats` - Represent the bounds of the individual beats within a track. The bounds on y-axis are equal to the bar bounds. +* `notes` - Represent the bounds of the individual note heads/numbers within a track. + +Each bounds hierarchy have a `visualBounds` and `realBounds`. + +* `visualBounds` - Represent the area covering all visually visible elements +* `realBounds` - Represents the actual bounds of the elements in this beat including whitespace areas. +* `noteHeadBounds` (only on `notes` level) - Represents the area of the note heads or number based on the staff + +You can check out the individual sizes and regions. + + + +
{"readonly"}{" "}{"boundsLookup"}{":"}{" "}{"BoundsLookup"}{" "}{"|"}{" "}{"null"}{";"}
+ + +
{"BoundsLookup"}{"?"}{" "}{"BoundsLookup"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"boundsLookup"}{":"}{" "}{"BoundsLookup"}{"?"}
+ + + + +import ManualDocs from './_boundslookup.mdx'; + + diff --git a/docs/reference/api/canvaselement.mdx b/docs/reference/api/canvaselement.mdx new file mode 100644 index 000000000..208927b35 --- /dev/null +++ b/docs/reference/api/canvaselement.mdx @@ -0,0 +1,38 @@ +--- +title: canvasElement +description: "The UI container that will hold all rendered results." +sidebar_custom_props: + kind: property + category: Properties - Core + since: 0.9.4 +--- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + + +import { PropertyDescription } from '@site/src/components/PropertyDescription'; + + + +### Description +The UI container that will hold all rendered results. + + + +
{"readonly"}{" "}{"canvasElement"}{":"}{" "}{"IContainer"}{";"}
+ + +
{"IContainer"}{" "}{"CanvasElement"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"canvasElement"}{":"}{" "}{"IContainer"}
+ + + diff --git a/docs/reference/api/changetrackmute.mdx b/docs/reference/api/changetrackmute.mdx index f52b412de..3ae33ec56 100644 --- a/docs/reference/api/changetrackmute.mdx +++ b/docs/reference/api/changetrackmute.mdx @@ -1,94 +1,76 @@ --- title: changeTrackMute -description: Changes the given tracks to be muted or not. +description: "Changes the given tracks to be muted or not." sidebar_custom_props: - jQueryName: alphaTab('muteTracks') + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description +### Description Changes the given tracks to be muted or not. This will result in a muting of the primary and secondary midi channel that the track uses -for playback. If the track shares the channels with another track, all tracks will be muted as during playback they cannot be distinguished. +for playback. If the track shares the channels with another track, all tracks will be muted as during playback they cannot be distinguished. -## Signatures + + +
{"changeTrackMute"}{"("}{"tracks"}{":"}{" "}{"Track"}{"[]"}{","}{" "}{"mute"}{":"}{" "}{"boolean"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"ChangeTrackMute"}{"("}{"IList"}{"<"}{"Track"}{">"}{" "}{"tracks"}{","}{" "}{"bool"}{" "}{"mute"}{")"}
+ + +
{"fun"}{" "}{"changeTrackMute"}{"("}{"tracks"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"Track"}{">"}{","}{" "}{"mute"}{":"}{" "}{"Boolean"}{")"}{":"}{" "}{"Unit"}
+ + - - - - - - -### Parameters - - The array of tracks that should be muted. - - - The array of tracks that should be muted. - - - The array of tracks that should be muted. + + The list of track to mute or unmute. - - value indicating whether the track should be muted or not. + + If set to true, the tracks will be muted. If false they are unmuted. -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.changeTrackMute([api.score.tracks[0], api.score.tracks[1]], true); ``` - - - - -```js -const at = $('#alphaTab'); -const tracks = at.alphaTab('tracks'); -at.alphaTab('muteTracks', [tracks[0], tracks[1]], true); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.ChangeTrackMute(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, true); ``` - - ```kotlin val api = AlphaTabApi(...) api.changeTrackMute(alphaTab.collections.List(api.score.tracks[0], api.score.tracks[1]), true); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/changetracksolo.mdx b/docs/reference/api/changetracksolo.mdx index cd68fdbce..37f533494 100644 --- a/docs/reference/api/changetracksolo.mdx +++ b/docs/reference/api/changetracksolo.mdx @@ -1,97 +1,77 @@ --- title: changeTrackSolo -description: Changes the given tracks to be played solo or not. +description: "Changes the given tracks to be played solo or not." sidebar_custom_props: - jQueryName: alphaTab('soloTracks') + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description +### Description Changes the given tracks to be played solo or not. If any track is set to solo, all other tracks are muted, unless they are also flagged as solo. -This will result in a solo playback of the primary and secondary midi channel that the track uses for playback. +This will result in a solo playback of the primary and secondary midi channel that the track uses for playback. If the track shares the channels with another track, all related tracks will be played as they cannot be distinguished. -## Signatures - - - - - - - + + +
{"changeTrackSolo"}{"("}{"tracks"}{":"}{" "}{"Track"}{"[]"}{","}{" "}{"solo"}{":"}{" "}{"boolean"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"ChangeTrackSolo"}{"("}{"IList"}{"<"}{"Track"}{">"}{" "}{"tracks"}{","}{" "}{"bool"}{" "}{"solo"}{")"}
+ + +
{"fun"}{" "}{"changeTrackSolo"}{"("}{"tracks"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"Track"}{">"}{","}{" "}{"solo"}{":"}{" "}{"Boolean"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The array of tracks that should be played solo. - - - The array of tracks that should be played solo. + + The list of tracks to play solo or not. - - The array of tracks that should be played solo. - - - A value indicating whether the track should be played solo or not. + + If set to true, the tracks will be added to the solo list. If false, they are removed. -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.changeTrackSolo([api.score.tracks[0], api.score.tracks[1]], true); ``` - - - - -```js -const at = $('#alphaTab'); -const tracks = at.alphaTab('tracks'); -at.alphaTab('soloTracks', [tracks[0], tracks[1]], true); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.ChangeTrackSolo(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, true); ``` - - ```kotlin val api = AlphaTabApi(...) api.changeTrackSolo(alphaTab.collections.List(api.score.tracks[0], api.score.tracks[1]), true); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/changetracktranspositionpitch.mdx b/docs/reference/api/changetracktranspositionpitch.mdx index 1ff85a3ef..a26b3e595 100644 --- a/docs/reference/api/changetracktranspositionpitch.mdx +++ b/docs/reference/api/changetracktranspositionpitch.mdx @@ -1,86 +1,78 @@ --- title: changeTrackTranspositionPitch -description: Changes the pitch transpose applied to the given tracks. +description: "Changes the pitch transpose applied to the given tracks." sidebar_custom_props: + kind: method category: Methods - Player since: 1.4.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Changes the pitch transpose applied to the given tracks. These pitches are additional to the ones -applied to the song via the settings and data model and allows a more live-update via a UI. - -## Signatures +### Description +Changes the pitch transpose applied to the given tracks. These pitches are additional to the ones applied to the song via the settings and data model and allows a more live-update via a UI. - - - - - + + +
{"changeTrackTranspositionPitch"}{"("}{"tracks"}{":"}{" "}{"Track"}{"[]"}{","}{" "}{"semitones"}{":"}{" "}{"number"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"ChangeTrackTranspositionPitch"}{"("}{"IList"}{"<"}{"Track"}{">"}{" "}{"tracks"}{","}{" "}{"double"}{" "}{"semitones"}{")"}
+ + +
{"fun"}{" "}{"changeTrackTranspositionPitch"}{"("}{"tracks"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"Track"}{">"}{","}{" "}{"semitones"}{":"}{" "}{"Double"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The array of tracks that should be changed. - - - The array of tracks that should be changed. + + The list of tracks to change. - - The array of tracks that should be changed. - - - The number of semitones to apply as pitch offset + + The number of semitones to apply as pitch offset. -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.changeTrackTranspositionPitch([api.score.tracks[0], api.score.tracks[1]], 3); api.changeTrackTranspositionPitch([api.score.tracks[2]], 2); ``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.ChangeTrackTranspositionPitch(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, 3); api.ChangeTrackTranspositionPitch(new Track[] { api.Score.Tracks[2] }, 3); ``` - - ```kotlin val api = AlphaTabApi(...); api.changeTrackTranspositionPitch(alphaTab.collections.List(api.score.tracks[0], api.score.tracks[1]), 3); api.changeTrackTranspositionPitch(alphaTab.collections.List(api.score.tracks[2]), 2); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/changetrackvolume.mdx b/docs/reference/api/changetrackvolume.mdx index f99b2ee53..dd54ef943 100644 --- a/docs/reference/api/changetrackvolume.mdx +++ b/docs/reference/api/changetrackvolume.mdx @@ -1,100 +1,79 @@ --- title: changeTrackVolume -description: Changes the volume of the given tracks. +description: "Changes the volume of the given tracks." sidebar_custom_props: - jQueryName: alphaTab('trackVolume') + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Changes the volume of the given tracks. This will result in a volume change of the primary and secondary midi channel that the track uses for playback. +### Description +Changes the volume of the given tracks. This will result in a volume change of the primary and secondary midi channel that the track uses for playback. If the track shares the channels with another track, all related tracks will be changed as they cannot be distinguished. -## Signatures - - - - - - - + + +
{"changeTrackVolume"}{"("}{"tracks"}{":"}{" "}{"Track"}{"[]"}{","}{" "}{"volume"}{":"}{" "}{"number"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"ChangeTrackVolume"}{"("}{"IList"}{"<"}{"Track"}{">"}{" "}{"tracks"}{","}{" "}{"double"}{" "}{"volume"}{")"}
+ + +
{"fun"}{" "}{"changeTrackVolume"}{"("}{"tracks"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"Track"}{">"}{","}{" "}{"volume"}{":"}{" "}{"Double"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The array of tracks that should be changed. - - - The array of tracks that should be changed. + + The tracks for which the volume should be changed. - - The array of tracks that should be changed. - - - The volume multiplicator that should be added to the volume that the track normally has. e.g. 1.0 for no change on the volume, - 2.0 for doubling the volume. Allowed range: 0.0 - 3.0. + + The volume to set for all tracks in percent (0-1) -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.changeTrackVolume([api.score.tracks[0], api.score.tracks[1]], 1.5); api.changeTrackVolume([api.score.tracks[2]], 0.5); ``` - - - - -```js -const at = $('#alphaTab'); -const tracks = at.alphaTab('tracks'); -at.alphaTab('trackVolume', [tracks[0], tracks[1]], 1.5); -at.alphaTab('trackVolume', [tracks[0], tracks[1]], 0.5); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.ChangeTrackVolume(new Track[] { api.Score.Tracks[0], api.Score.Tracks[1] }, 1.5); api.ChangeTrackVolume(new Track[] { api.Score.Tracks[2] }, 0.5); ``` - - ```kotlin val api = AlphaTabApi(...); api.changeTrackVolume(alphaTab.collections.List(api.score.tracks[0], api.score.tracks[1]), 1.5); api.changeTrackVolume(alphaTab.collections.List(api.score.tracks[2]), 0.5); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/container.mdx b/docs/reference/api/container.mdx index 30cd830f0..60c98fcdc 100644 --- a/docs/reference/api/container.mdx +++ b/docs/reference/api/container.mdx @@ -1,78 +1,68 @@ --- title: container -description: The UI container that holds the whole alphaTab control. +description: "The UI container that holds the whole alphaTab control." sidebar_custom_props: + kind: property category: Properties - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets the UI container that represents the element on which alphaTab was initialized. Note that this is not the raw instance, but a UI framework specific wrapper for alphaTab. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The UI container that holds the whole alphaTab control. Gets the UI container that represents the element on which alphaTab was initialized. Note that this is not the raw instance, but a UI framework specific wrapper for alphaTab. -## Types + + +
{"readonly"}{" "}{"container"}{":"}{" "}{"IContainer"}{";"}
+ + +
{"IContainer"}{" "}{"Container"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"container"}{":"}{" "}{"IContainer"}
+ + - - - - - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); const container = api.container; ``` - - - - -```js -const container = $('#alphaTab').alphaTab('container'); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); var container = api.Container; ``` - - - ```kotlin val api = AlphaTabApi(...) val container = api.container; ``` - - \ No newline at end of file + diff --git a/docs/reference/api/countinvolume.mdx b/docs/reference/api/countinvolume.mdx index cedf61d7b..d399b21a4 100644 --- a/docs/reference/api/countinvolume.mdx +++ b/docs/reference/api/countinvolume.mdx @@ -1,75 +1,68 @@ --- title: countInVolume -description: The volume of the count-in metronome ticks +description: "The volume of the count-in metronome ticks." sidebar_custom_props: + kind: property category: Properties - Player since: 1.1.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets or sets the volume of the metronome during the count-in of the song. By default the count-in is disabled but can be enabled by setting the volume different. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; -## Types - - - - +### Description +The volume of the count-in metronome ticks. Gets or sets the volume of the metronome during the count-in of the song. By default the count-in is disabled but can be enabled by setting the volume different. -## Default Value + + +
{"countInVolume"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"CountInVolume"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"countInVolume"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0.0` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.countInVolume = 0.5; ``` - - - - -```js -$('#alphaTab').alphaTab('countInVolume', 0.5) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.CountInVolume = 0.5; ``` - - ```kotlin val api = AlphaTabApi(...) api.countInVolume = 0.5 ``` - - \ No newline at end of file + diff --git a/docs/reference/api/destroy.mdx b/docs/reference/api/destroy.mdx index d3de29fbd..fbc1535f8 100644 --- a/docs/reference/api/destroy.mdx +++ b/docs/reference/api/destroy.mdx @@ -1,79 +1,67 @@ --- title: destroy -description: Destroys the alphaTab control and restores the initial state of the UI. +description: "Destroys the alphaTab control and restores the initial state of the UI." sidebar_custom_props: + kind: method category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +### Description +Destroys the alphaTab control and restores the initial state of the UI. This function destroys the alphaTab control and tries to restore the initial state of the UI. This might be useful if +our website is quite dynamic and you need to uninitialize alphaTab from an element again. After destroying alphaTab +it cannot be used anymore. Any further usage leads to unexpected behavior. -## Description -This function destroys the alphaTab control and tries to restore the initial state of the UI. This might be useful if -your website is quite dynamic and you need to uninitialize alphaTab from an element again. After destroying alphaTab -it cannot be used anymore. Any further usage leads to unexpected behavior. - -## Signatures - - - - - - - - -### Parameters -None + + +
{"destroy"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"Destroy"}{"("}{")"}
+ + +
{"fun"}{" "}{"destroy"}{"("}{")"}{":"}{" "}{"Unit"}
+ + -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.destroy(); ``` - - - -```js -$('#alphaTab').alphaTab('destroy'); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Destroy(); ``` - - ```kotlin val api = AlphaTabApi(...) api.destroy() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/downloadmidi.mdx b/docs/reference/api/downloadmidi.mdx index c50b13fa5..9d1a71c7c 100644 --- a/docs/reference/api/downloadmidi.mdx +++ b/docs/reference/api/downloadmidi.mdx @@ -1,58 +1,42 @@ --- title: downloadMidi -description: Generates an SMF1.0 file and downloads it +description: "Generates an SMF1.0 file and downloads it" sidebar_custom_props: + kind: method javaScriptOnly: true category: Methods - Core - since: 1.3.0 + since: 1.3.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Generates a SMF1.0 compliant MIDI file of the currently loaded song and starts the download of it. +### Description +Generates an SMF1.0 file and downloads it Generates a SMF1.0 compliant MIDI file of the currently loaded song and starts the download of it. Please be aware that SMF1.0 does not support bends per note which might result in wrong bend effects in case multiple bends are applied on the same beat (e.g. two notes bending or vibrato + bends). -## Signatures - - - - - +
{"downloadMidi"}{"("}{"format"}{"?"}{":"}{" "}{"MidiFileFormat"}{")"}{":"}{" "}{"void"}
-### Parameters - - The SMF file format to which the song should be exported. (default: `SingleTrackMultiChannel`) + + (no description) -### Returns -Nothing -## Examples - - - +## Example - JavaScript ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.downloadMidi(); ``` - - - \ No newline at end of file diff --git a/docs/reference/api/enumerateoutputdevices.mdx b/docs/reference/api/enumerateoutputdevices.mdx index 1ce42c933..c87f820e2 100644 --- a/docs/reference/api/enumerateoutputdevices.mdx +++ b/docs/reference/api/enumerateoutputdevices.mdx @@ -1,70 +1,58 @@ --- title: enumerateOutputDevices -description: Loads and lists the available output devices which can be used by the player. +description: "Loads and lists the available output devices which can be used by the player." sidebar_custom_props: + kind: method category: Methods - Player - since: 1.5.0 + since: 1.5.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description +### Description Loads and lists the available output devices which can be used by the player. Will request permissions if needed. -The values provided, can be passed into [`setOutputDevice`](./setoutputdevice) to change dynamically the output device on which +The values provided, can be passed into {"setOutputDevice"} to change dynamically the output device on which the sound is played. In the web version this functionality relies on experimental APIs and might not yet be available in all browsers. https://caniuse.com/mdn-api_audiocontext_sinkid -## Signatures - - - - - - - -### Parameters -None - -### Returns -Returns an awaitable, which provides the list of output devices when completed. - -#### ISynthOutputDevice + + +
{"enumerateOutputDevices"}{"("}{")"}{":"}{" "}{"Promise"}{"<"}{"ISynthOutputDevice"}{"[]"}{">"}
+ + +
{"System.Threading.Task"}{"<"}{"IList"}{"<"}{"ISynthOutputDevice"}{">"}{">"}{" "}{"EnumerateOutputDevices"}{"("}{")"}
+ + +
{"suspend"}{" "}{"fun"}{" "}{"enumerateOutputDevices"}{"("}{")"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"ISynthOutputDevice"}{">"}
+ + -The `ISynthOutputDevice` represents and abstraction of the output devices providing following details: +### Returns +the list of available devices or an empty list if there are no permissions, or the player is not enabled. - - - The ID to uniquely identify the device. - - - A string describing the device. - - - A value indicating whether the device is the default output device. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); const devices = await api.enumerateOutputDevices(); @@ -73,11 +61,9 @@ buildDeviceSelector(devices, async selectedDevice => { await api.setOutputDevice(selectedDevice); }); ``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); var devices = await api.EnumerateOutputDevices(); @@ -85,10 +71,8 @@ BuildDeviceSelector(devices, async selectedDevice => { await api.SetOutputDevice(selectedDevice); }); ``` - - ```kotlin fun init() = kotlinx.coroutines.runBlocking { val api = AlphaTabApi(...) @@ -100,8 +84,6 @@ fun init() = kotlinx.coroutines.runBlocking { } }); } - ``` - - \ No newline at end of file + diff --git a/docs/reference/api/error.mdx b/docs/reference/api/error.mdx index 0a380c9f1..27063a0f2 100644 --- a/docs/reference/api/error.mdx +++ b/docs/reference/api/error.mdx @@ -1,102 +1,74 @@ --- title: error -description: This event is fired when an error within alphatab occurred. +description: "This event is fired when an error within alphatab occurred." sidebar_custom_props: + kind: event category: Events - Core since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when an error within alphatab occurred. Use this event as global error handler to show errors +### Description +This event is fired when an error within alphatab occurred. This event is fired when an error within alphatab occurred. Use this event as global error handler to show errors to end-users. Due to the asynchronous nature of alphaTab, no call to the API will directly throw an error if it fails. -Instead a signal to this error handlers will be sent. - - - -## Types +Instead a signal to this error handlers will be sent. - - - - - - -## Parameters + + +
{"error"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Error"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"System.Exception"}{">"}{" "}{"Error"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"error"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"kotlin.Throwable"}{">"}
+ + - - - The object containing the error details. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.error.on((error) { displayError(error); }); ``` - - - - -```js -$('#alphaTab').on('alphaTab.error', (e, error) => { - displayError(error); -}); -``` - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.error', (e) => { - displayError(e.detail); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.Error.On((error) => +api.Error.On((error) => { DisplayError(error); }); ``` - - ```kotlin val api = AlphaTabApi(...) -api.error.on { error -> +api.error.on { error -> displayError(error) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/getoutputdevice.mdx b/docs/reference/api/getoutputdevice.mdx index f646dee2e..a19ff27b7 100644 --- a/docs/reference/api/getoutputdevice.mdx +++ b/docs/reference/api/getoutputdevice.mdx @@ -1,73 +1,73 @@ --- title: getOutputDevice -description: Gets the currently configured output device. +description: "The currently configured output device if changed via {\"setOutputDevice\"}." sidebar_custom_props: + kind: method category: Methods - Player - since: 1.5.0 + since: 1.5.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; - -## Description -Gets the currently configured output device used by the player. Assumes [`setOutputDevice`](./setoutputdevice) has been used. - +### Description +The currently configured output device if changed via {"setOutputDevice"}. Assumes {"setOutputDevice"} has been used. In the web version this functionality relies on experimental APIs and might not yet be available in all browsers. https://caniuse.com/mdn-api_audiocontext_sinkid -## Signatures - - - - - - + + +
{"getOutputDevice"}{"("}{")"}{":"}{" "}{"Promise"}{"<"}{"ISynthOutputDevice"}{" "}{"|"}{" "}{"null"}{">"}
+ + +
{"System.Threading.Task"}{"<"}{"ISynthOutputDevice"}{"?"}{">"}{" "}{"GetOutputDevice"}{"("}{")"}
+ + +
{"suspend"}{" "}{"fun"}{" "}{"getOutputDevice"}{"("}{")"}{":"}{" "}{"ISynthOutputDevice"}{"?"}
+ + -### Parameters -None +### Returns +The custom configured output device which was set via {"setOutputDevice"} or `null` +if the default outputDevice is used. +The output device might change dynamically if devices are connected/disconnected (e.g. bluetooth headset). -### Returns -Returns an awaitable, which completes with the currently configured output device. ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); updateOutputDeviceUI(await api.getOutputDevice()) - ``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); UpdateOutputDeviceUI(await api.GetOutputDevice()) ``` - - ```kotlin fun init() = kotlinx.coroutines.runBlocking { val api = AlphaTabApi(...) updateOutputDeviceUI(api.getOutputDevice().await()) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/init.mdx b/docs/reference/api/init.mdx deleted file mode 100644 index 276893243..000000000 --- a/docs/reference/api/init.mdx +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: alphaTab() -description: Initializes AlphaTab. -sidebar_custom_props: - jQueryOnly: true - jQueryName: alphaTab() - category: Methods - Core - since: 0.9.4 ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This jQuery specific function initializes alphaTab. For other systems this is not needed as the API is directly created. - -## Signatures - - - - - -### Parameters - - - - The settings to use for alphaTab. Either as JSON structure or as Settings instance. - - - -### Returns -Nothing - -## Examples - - - - - -```js -$('#alphaTab').alphaTab({ - scale: 1.5 -}); -``` - - - - diff --git a/docs/reference/api/islooping.mdx b/docs/reference/api/islooping.mdx index 37ca0bbe8..028fb289b 100644 --- a/docs/reference/api/islooping.mdx +++ b/docs/reference/api/islooping.mdx @@ -1,76 +1,68 @@ --- title: isLooping -description: Whether the playback should automatically restart after it finished +description: "Whether the playback should automatically restart after it finished." sidebar_custom_props: - jQueryName: alphaTab('looping') + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -This setting controls whether the playback should automatically restart after it finished to create a playback loop. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; -## Types - - - - +### Description +Whether the playback should automatically restart after it finished. This setting controls whether the playback should automatically restart after it finished to create a playback loop. -## Default Value + + +
{"isLooping"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"IsLooping"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"isLooping"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -`false` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.isLooping = true; ``` - - - - -```js -$('#alphaTab').alphaTab('looping', true) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.IsLooping = true; ``` - - ```kotlin val api = AlphaTabApi(...) api.isLooping = true ``` - - \ No newline at end of file + diff --git a/docs/reference/api/isreadyforplayback.mdx b/docs/reference/api/isreadyforplayback.mdx index e57cb5bee..32197f904 100644 --- a/docs/reference/api/isreadyforplayback.mdx +++ b/docs/reference/api/isreadyforplayback.mdx @@ -1,74 +1,69 @@ --- title: isReadyForPlayback -description: Whether the player is ready for starting the playback. +description: "Whether the player is ready for starting the playback." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets whether the synthesizer is ready for playback. The player is ready for playback when -all background workers are started, the audio output is initialized, a soundfont is loaded, and a song was loaded into the player as midi file. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +Whether the player is ready for starting the playback. Gets whether the synthesizer is ready for playback. The player is ready for playback when +all background workers are started, the audio output is initialized, a soundfont is loaded, and a song was loaded into the player as midi file. -## Types + + +
{"readonly"}{" "}{"isReadyForPlayback"}{":"}{" "}{"boolean"}{";"}
+ + +
{"bool"}{" "}{"IsReadyForPlayback"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"isReadyForPlayback"}{":"}{" "}{"Boolean"}
+ + - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); if(api.isReadyForPlayback)) api.play(); ``` - - - - -```js -const at = $('#alphaTab'); -if(at.alphaTab('isReadyForPlayback')) at.alphaTab('play'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); if(api.IsReadyForPlayback) api.Play(); ``` - - ```kotlin val api = AlphaTabApi(...) if (api.isReadyForPlayback) api.play() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/load.mdx b/docs/reference/api/load.mdx index 826223cd0..8ce4d30fd 100644 --- a/docs/reference/api/load.mdx +++ b/docs/reference/api/load.mdx @@ -1,186 +1,85 @@ --- title: load -description: Initiates a load of the score using the given data. +description: "Initiates a load of the score using the given data." sidebar_custom_props: - category: Methods - Core - since: 0.9.4 + kind: method + category: Methods - Player + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; +### Description +Initiates a load of the score using the given data. -## Description -This function initiates a load of the score using the given data. The supported types is depending on the platform. - -## Signatures - - - - Load the given score object - - - Load the given score object - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given URL via Ajax using the available score loaders - - - Load the score from the given URL via Ajax using the available score loaders - - - Load the given score object - - - Load the given score object - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given URL via Ajax using the available score loaders - - - Load the score from the given URL via Ajax using the available score loaders - - - Load the given score object - - - Load the given score object - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given stream using the available score loaders - - - Load the score from the given stream using the available score loaders - - - Load the given score object - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given raw bytes using the available score loaders - - - Load the score from the given strean using the available score loaders - - + + +
{"load"}{"("}{"scoreData"}{":"}{" "}{"unknown"}{","}{" "}{"trackIndexes"}{"?"}{":"}{" "}{"number"}{"[]"}{")"}{":"}{" "}{"boolean"}
+ + +
{"bool"}{" "}{"Load"}{"("}{"object"}{" "}{"scoreData"}{","}{" "}{"IList"}{"<"}{"double"}{">"}{"?"}{" "}{"trackIndexes"}{")"}
+ + +
{"fun"}{" "}{"load"}{"("}{"scoreData"}{":"}{" "}{"Any"}{","}{" "}{"trackIndexes"}{":"}{" "}{"alphaTab.collections.DoubleList"}{"?"}{")"}{":"}{" "}{"Boolean"}
+ + -### Parameters - - The arraybuffer containing the raw bytes of a file supported by the score loaders - - - The Uint8Array containing the raw bytes of a file supported by the score loaders - - - A indexes of the tracks that should be rendered after the track is loaded. If not supplied, the first song will be rendered. - - - The score object to load. - - - The raw bytes containing a file supported by the score loaders. - - - The stream containing a file supported by the score loaders. - - - The score object to load. - - - The raw bytes containing a file supported by the score loaders. - - - The raw bytes containing a file supported by the score loaders. + + The data container supported by {"IUiFacade"}. The supported types is depending on the platform: + + * A `alphaTab.model.Score` instance (all platforms) + * A `ArrayBuffer` or `Uint8Array` containing one of the supported file formats (all platforms, native byte array or input streams on other platforms) + * A url from where to download the binary data of one of the supported file formats (browser only) - - The stream containing a file supported by the score loaders. + + The indexes of the tracks from the song that should be rendered. If not provided, the first track of the + song will be shown. -### Returns -`true` if the passed in object is a supported format and loading was initiated, otherwise `false`. +### Returns +true if the data object is supported and a load was initiated, otherwise false + ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.load('/assets/MyFile.gp'); ``` - - - - -```js -$('#alphaTab').alphaTab('load', '/assets/MyFile.gp'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Load(System.IO.File.OpenRead("MyFile.gp")); ``` - - ```kotlin val api = AlphaTabApi(...) contentResolver.openInputStream(uri).use { api.load(it) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/loadsoundfont.mdx b/docs/reference/api/loadsoundfont.mdx index 06bf1cd98..92558f846 100644 --- a/docs/reference/api/loadsoundfont.mdx +++ b/docs/reference/api/loadsoundfont.mdx @@ -1,141 +1,83 @@ --- title: loadSoundFont -description: Triggers a load of the soundfont from the given data. +description: "Triggers a load of the soundfont from the given data." sidebar_custom_props: + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This function initiates a load of the soundfont using the given data. The supported data types is depending on the platform. AlphaTab only supports SoundFont2 and SoundFont3 () encoded soundfonts for loading. To load a soundfont the player must be enabled in advance. +### Description +Triggers a load of the soundfont from the given data. AlphaTab only supports SoundFont2 and SoundFont3 encoded soundfonts for loading. To load a soundfont the player must be enabled in advance. -## Signatures - - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given URL via AJAX. - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given URL via AJAX. - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given stream. - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given raw bytes. - - - Load the soundfont from the given stream. - - + + +
{"loadSoundFont"}{"("}{"data"}{":"}{" "}{"unknown"}{","}{" "}{"append"}{"?"}{":"}{" "}{"boolean"}{")"}{":"}{" "}{"boolean"}
+ + +
{"bool"}{" "}{"LoadSoundFont"}{"("}{"object"}{" "}{"data"}{","}{" "}{"bool"}{"?"}{" "}{"append"}{")"}
+ + +
{"fun"}{" "}{"loadSoundFont"}{"("}{"data"}{":"}{" "}{"Any"}{","}{" "}{"append"}{":"}{" "}{"Boolean"}{"?"}{")"}{":"}{" "}{"Boolean"}
+ + -### Parameters - - The arraybuffer containing the raw bytes of a SoundFont file - - - The Uint8Array containing the raw bytes of a SoundFont file - - - A URL pointing to a SoundFont file that should be loaded via AJAX. - - - The raw bytes containing a SoundFont file. - - - The stream containing a SoundFont file. - - - The raw bytes containing a SoundFont file. - - - The raw bytes containing a SoundFont file. - - - The raw bytes containing a SoundFont file. + + The data object to decode. The supported data types is depending on the platform. + + * A `ArrayBuffer` or `Uint8Array` (all platforms, native byte array or input streams on other platforms) + * A url from where to download the binary data of one of the supported file formats (browser only) - - The stream containing a SoundFont file. - - - Whether to append the presets of the new soundfont to the already loaded - ones. Since: 1.1.0 + + Whether to fully replace or append the data from the given soundfont. -### Returns -`true` if the passed in object is a supported format and loading was initiated, otherwise `false`. +### Returns +`true` if the passed in object is a supported format and loading was initiated, otherwise `false`. + ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.loadSoundFont('/assets/MyFile.sf2'); ``` - - - -```js -$('#alphaTab').alphaTab('loadSoundFont', '/assets/MyFile.sf2'); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.LoadSoundFont(System.IO.File.OpenRead("MyFile.sf2")); ``` - - ```kotlin val api = AlphaTabApi(...) contentResolver.openInputStream(uri).use { api.loadSoundFont(it) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/loadsoundfontfromurl.mdx b/docs/reference/api/loadsoundfontfromurl.mdx new file mode 100644 index 000000000..4bf6450f1 --- /dev/null +++ b/docs/reference/api/loadsoundfontfromurl.mdx @@ -0,0 +1,36 @@ +--- +title: loadSoundFontFromUrl +description: "Triggers a load of the soundfont from the given URL." +sidebar_custom_props: + kind: method + javaScriptOnly: true + category: Methods - Player + since: 0.9.4 +--- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + + + +### Description +Triggers a load of the soundfont from the given URL. + +
{"loadSoundFontFromUrl"}{"("}{"url"}{":"}{" "}{"string"}{","}{" "}{"append"}{":"}{" "}{"boolean"}{")"}{":"}{" "}{"void"}
+ + + + + The URL from which to load the soundfont + + + Whether to fully replace or append the data from the given soundfont. + + + diff --git a/docs/reference/api/mastervolume.mdx b/docs/reference/api/mastervolume.mdx index 9b6b6d1f1..f5f96be5b 100644 --- a/docs/reference/api/mastervolume.mdx +++ b/docs/reference/api/mastervolume.mdx @@ -1,76 +1,68 @@ --- title: masterVolume -description: The current master volume as percentage +description: "The current master volume as percentage (0-1)." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets or sets the master volume of the overall audio being played. The volume is annotated in percentage where 1.0 would be the normal volume and 0.5 only 50%. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The current master volume as percentage (0-1). Gets or sets the master volume of the overall audio being played. The volume is annotated in percentage where 1.0 would be the normal volume and 0.5 only 50%. -## Types - - - - - -## Default Value + + +
{"masterVolume"}{":"}{" "}{"number"}{";"}
+ + +
{"double"}{" "}{"MasterVolume"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"masterVolume"}{":"}{" "}{"Double"}
+ + -`1.0` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.masterVolume = 0.5; ``` - - - - -```js -$('#alphaTab').alphaTab('masterVolume', 0.5) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.MasterVolume = 0.5; ``` - - ```kotlin val api = AlphaTabApi(...) api.masterVolume = 0.5 ``` - - \ No newline at end of file + diff --git a/docs/reference/api/metronomevolume.mdx b/docs/reference/api/metronomevolume.mdx index d786e6986..38c7bdb39 100644 --- a/docs/reference/api/metronomevolume.mdx +++ b/docs/reference/api/metronomevolume.mdx @@ -1,76 +1,68 @@ --- title: metronomeVolume -description: The metronome volume as percentage +description: "The metronome volume as percentage (0-1)." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets or sets the volume of the metronome. By default the metronome is disabled but can be enabled by setting the volume different. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The metronome volume as percentage (0-1). Gets or sets the volume of the metronome. By default the metronome is disabled but can be enabled by setting the volume different. -## Types - - - - - -## Default Value + + +
{"metronomeVolume"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"MetronomeVolume"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"metronomeVolume"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0.0` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.metronomeVolume = 0.5; ``` - - - - -```js -$('#alphaTab').alphaTab('metronomeVolume', 0.5) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.MetronomeVolume = 0.5; ``` - - ```kotlin val api = AlphaTabApi(...) api.metronomeVolume = 0.5 ``` - - \ No newline at end of file + diff --git a/docs/reference/api/midieventsplayed.mdx b/docs/reference/api/midieventsplayed.mdx index 88a4ae790..05329f713 100644 --- a/docs/reference/api/midieventsplayed.mdx +++ b/docs/reference/api/midieventsplayed.mdx @@ -1,423 +1,95 @@ --- title: midiEventsPlayed -description: The midi events which will trigger the `midiEventsPlayed` event +description: "This event is fired when the synthesizer played certain midi events." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.0 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the synthesizer played certain midi events. This allows reacing on various low level -audio playback elements like notes/rests played or metronome ticks. - -Refer to the [related guide](/docs/guides/handling-midi-events) to learn more about this feature. - -Also note that the provided data models changed significantly in `1.3.0`. We try to provide backwards compatibility -until some extend but highly encourage changing to the new models in case of problems. - - - - -## Types - - - - - - - -## Parameters - - - - The information about the played events. - - - The information about the played events. - - - The information about the played events. - - - -## MidiEventsPlayedEventArgs Properties - - - - The played midi events. - - - The current time position within the song in milliseconds. - - - The current time position within the song in milliseconds. - - - -Following midi event classes exist which represent the usual -events of a midi file. - -### alphaTab.midi.MidiEvent -The base class for all midi events. Check the `type` property to find out which type it is. - - - - The track to which this event belongs. - - - The 32-bit encoded raw midi message. Deprecated since 1.3.0. Use the properties of the subclasses instead. - - - The absolute midi tick of when this event is played. - - - The midi channel to which this event belongs (not valid for all events). - - - The type of this event. (Deprecated since 1.3, use `type` instead) - - - The type of this event. - - - The first data byte. Meaning depends on midi event type. (Deprecated since 1.3, use the specific properties of the midi event depending on type) - - - The second data byte Meaning depends on midi event type. (Deprecated since 1.3, use the specific properties of the midi event depending on type) - - - -### alphaTab.midi.TimeSignatureEvent - - -Indicates a time signature change. Type: `alphaTab.midi.MidiEventType.TimeSignature` - - - - The time signature numerator. - - - The MIDI denominator index (the actual denominator is calculated via `2^(index)`) - - - The number of MIDI clocks in a metronome click. - - - The number of notated 32nd-notes in what MIDI thinks of as a quarter-note (24 MIDI Clocks) - - - -### alphaTab.midi.AlphaTabMetronomeEvent - - -Represents a metronome event. Type: `alphaTab.midi.MidiEventType.AlphaTabMetronome`. - - - - The counter of the metronome as per time signature. - - - The duration of this metronome tick in MIDI Ticks. - - - The duration of this metronome tick in MIDI milliseconds. - - - -### alphaTab.midi.AlphaTabRestEvent - - -Represents a metronome event. Type: `alphaTab.midi.MidiEventType.AlphaTabRest`. - - - - The counter of the metronome as per time signature. - - - The duration of this metronome tick in MIDI Ticks. - - - The duration of this metronome tick in MIDI milliseconds. - - - -### alphaTab.midi.NoteOnEvent - - -Represents a note which started playing. Type: `alphaTab.midi.MidiEventType.NoteOn`. - - - - The midi channel on which it plays. - - - The key of the note. (aka. note height) - - - The velocity of the note. (aka. note intensity or loudness) - - - -### alphaTab.midi.NoteOffEvent - - -Represents a note which stopped playing. Type: `alphaTab.midi.MidiEventType.NoteOff`. - - - - The midi channel on which it plays. - - - The key of the note. (aka. note height) - - - The velocity of the note. (aka. note intensity or loudness) - - - -### alphaTab.midi.ControlChangeEvent - - -Represents a change of a midi controller on a channel. Type: `alphaTab.midi.MidiEventType.ControlChange`. - - - - The midi channel on which it plays. - - - The controller for which the value changes. - - - The new value of the controller. The meaning of the value depends on the controller. - - - -### alphaTab.midi.ProgramChangeEvent - - -Represents a change of a MIDI program on a channel. Type: `alphaTab.midi.MidiEventType.ProgramChange`. - - - - The midi channel on which it plays. - - - The new MIDI program used on the channel. - - - -### alphaTab.midi.TempoChangeEvent - - -Represents the change of the played tempo. Type: `alphaTab.midi.MidiEventType.TempoChange`. +### Description +This event is fired when the synthesizer played certain midi events. This event is fired when the synthesizer played certain midi events. This allows reacing on various low level +audio playback elements like notes/rests played or metronome ticks. - - - The tempo in microseconds per quarter note (USQ). (BPM = 60000000 / USQ) - - +Refer to the [related guide](/docs/guides/handling-midi-events) to learn more about this feature. -### alphaTab.midi.PitchBendEvent - +Also note that the provided data models changed significantly in `{@version 1.3.0}`. We try to provide backwards compatibility +until some extend but highly encourage changing to the new models in case of problems. -Represents the pitch-bend (aka. pitch wheel) change on a whole midi channel. Type: `alphaTab.midi.MidiEventType.PitchBend`. - - - - The midi channel for which the pitch-bend is applied. - - - The pitch wheel value as per MIDI1.0 spec. - - - -### alphaTab.midi.NoteBendEvent - - -Represents the pitch-bend (aka. pitch wheel) change on a single played note. This midi message was only introduced in MIDI2.0 and -alphaTab has internal support for it. But when exporting SMF1.0 files normal `PitchBendEvent` are generated. Type: `alphaTab.midi.MidiEventType.PerNotePitchBend`. - - - - The midi channel for which the pitch-bend is applied. - - - The key of the note on the channel for which to apply the bend. - - - The pitch wheel value as per MIDI1.0 spec. - - - -### alphaTab.midi.EndOfTrackEvent - - -Indicates the end of a midi track. Type: `alphaTab.midi.MidiEventType.EndOfTrack`. - - - - The midi channel for which the pitch-bend is applied. - - - The key of the note on the channel for which to apply the bend. - - - The pitch wheel value as per MIDI1.0 spec. - - - -### alphaTab.midi.MetaEvent (deprecated since 1.3) -Any Meta Events. - - - - The type of meta event. - - - -### alphaTab.midi.MetaDataEvent (deprecated since 1.3) -Meta Events with a related data array (e.g. time signature changes). - - - - The raw binary data attached to this meta event. - - - -### alphaTab.midi.MetaNumberEvent (deprecated since 1.3) -Meta Events with a number value (e.g. tempo changes). - - - - The number value of this meta event. - - - - -### alphaTab.midi.Midi20PerNotePitchBendEvent (deprecated since 1.3) -A Midi 2.0 comparable per-note pitch bend. - - - - The key of the note on the related channel which should be bent. - - - The 32 bit pitch wheel value according to the Midi 2.0 standard. - - - -### alphaTab.midi.SystemCommonEvent (deprecated since 1.3) -Not used in alphaTab by default. - -### alphaTab.midi.SystemExclusiveEvent (deprecated since 1.3) -For special alphaTab specific events (e.g. rest played, metronome tick). + + +
{"midiEventsPlayed"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"MidiEventsPlayedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"MidiEventsPlayedEventArgs"}{">"}{" "}{"MidiEventsPlayed"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"midiEventsPlayed"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"MidiEventsPlayedEventArgs"}{">"}
+ + - - - The raw binary data attached to this event. - - - Whether this event is a metronome tick event. - - - If the event is a metronome event it contains the zero based metronome numerator according to the time signature (e.g. 0, 1, 2 on a 3/4 signature). - - - If the event is a metronome event it contains the current duration of the metronome event in ticks. - - - If the event is a metronome event it contains the current duration of the metronome event in milliseconds. - This duration is assuming playback speed=1. - - - Whether this event is a rest play event. - - - The manufacturer ID of this specific event (0x7D for alphaTab). - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.midiEventsPlayedFilter = [alphaTab.midi.MidiEventType.AlphaTabMetronome]; api.midiEventsPlayed.on(function(e) { for(const midi of e.events) { if(midi.isMetronome) { - console.log('Metronome tick ' + midi.tick); + console.log('Metronome tick ' + midi.tick); } } }); ``` - - - - -```js -$('#alphaTab') - .alphaTab('midiEventsPlayedFilter', [alphaTab.midi.MidiEventType.AlphaTabMetronome]) - .on('alphaTab.midiEventsPlayed', (e, args) => { - for(const midi of args.events) { - if(midi.isMetronome) { - console.log('Metronome tick ' + midi.tick); - } - } - }); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.MidiEventsPlayedFilter = new MidiEventType[] { AlphaTab.Midi.MidiEventType.AlphaTabMetronome }; -api.MidiEventsPlayed.On(e => +api.MidiEventsPlayed.On(e => { - foreach(var midi of e.events) + foreach(var midi of e.events) { - if(midi is AlphaTab.Midi.AlphaTabMetronomeEvent sysex && sysex.IsMetronome) + if(midi is AlphaTab.Midi.AlphaTabMetronomeEvent sysex && sysex.IsMetronome) { - Console.WriteLine("Metronome tick " + midi.Tick); + Console.WriteLine("Metronome tick " + midi.Tick); } } }); ``` - - ```kotlin val api = AlphaTabApi(...); api.midiEventsPlayedFilter = alphaTab.collections.List( alphaTab.midi.MidiEventType.AlphaTabMetronome ) api.midiEventsPlayed.on { e -> for (midi in e.events) { if(midi instanceof alphaTab.midi.AlphaTabMetronomeEvent && midi.isMetronome) { - println("Metronome tick " + midi.tick); + println("Metronome tick " + midi.tick); } } } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/midieventsplayedfilter.mdx b/docs/reference/api/midieventsplayedfilter.mdx index a5ca52dd1..c85635e26 100644 --- a/docs/reference/api/midieventsplayedfilter.mdx +++ b/docs/reference/api/midieventsplayedfilter.mdx @@ -1,116 +1,96 @@ --- title: midiEventsPlayedFilter -description: The midi events which will trigger the `midiEventsPlayed` event +description: "The midi events which will trigger the `midiEventsPlayed` event" sidebar_custom_props: + kind: property category: Properties - Player since: 1.2.0 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -Gets or sets the midi events which will trigger the `midiEventsPlayed` event. With this filter set you can enable -that alphaTab will signal any midi events as they are played by the synthesizer. This allows reacing on various low level -audio playback elements like notes/rests played or metronome ticks. - -Refer to the [related guide](/docs/guides/handling-midi-events) to learn more about this feature. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The midi events which will trigger the `midiEventsPlayed` event Gets or sets the midi events which will trigger the `midiEventsPlayed` event. With this filter set you can enable +that alphaTab will signal any midi events as they are played by the synthesizer. This allows reacing on various low level +audio playback elements like notes/rests played or metronome ticks. -## Types - - - - - - +Refer to the [related guide](/docs/guides/handling-midi-events) to learn more about this feature. -## Default Value + + +
{"midiEventsPlayedFilter"}{":"}{" "}{"MidiEventType"}{"[]"}{" "}{"="}{" "}{"[]"}{";"}
+ + +
{"IList"}{"<"}{"MidiEventType"}{">"}{" "}{"MidiEventsPlayedFilter"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"[]"}
+ + +
{"var"}{" "}{"midiEventsPlayedFilter"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"MidiEventType"}{">"}{" "}{"="}{" "}{"[]"}
+ + -`[]` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.midiEventsPlayedFilter = [alphaTab.midi.MidiEventType.AlphaTabMetronome]; api.midiEventsPlayed.on(function(e) { for(const midi of e.events) { if(midi.isMetronome) { - console.log('Metronome tick ' + midi.metronomeNumerator); + console.log('Metronome tick ' + midi.metronomeNumerator); } } }); ``` - - - -```js -$('#alphaTab') - .alphaTab('midiEventsPlayedFilter', [alphaTab.midi.MidiEventType.AlphaTabMetronome]) - .on('alphaTab.midiEventsPlayed', (e, args) => { - for(const midi of args.events) { - if(midi.isMetronome) { - console.log('Metronome tick ' + midi.metronomeNumerator); - } - } - }); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.MidiEventsPlayedFilter = new MidiEventType[] { AlphaTab.Midi.MidiEventType.AlphaTabMetronome }; -api.MidiEventsPlayed.On(e => +api.MidiEventsPlayed.On(e => { - foreach(var midi of e.events) + foreach(var midi of e.events) { - if(midi is AlphaTab.Midi.AlphaTabMetronomeEvent metronome) + if(midi is AlphaTab.Midi.AlphaTabMetronomeEvent metronome) { - Console.WriteLine("Metronome tick " + metronome.MetronomeNumerator); + Console.WriteLine("Metronome tick " + metronome.MetronomeNumerator); } } }); ``` - - ```kotlin val api = AlphaTabApi(...); api.midiEventsPlayedFilter = alphaTab.collections.List( alphaTab.midi.MidiEventType.AlphaTabMetronome ) api.midiEventsPlayed.on { e -> for (midi in e.events) { if(midi instanceof alphaTab.midi.AlphaTabMetronomeEvent && midi.isMetronome) { - println("Metronome tick " + midi.tick); + println("Metronome tick " + midi.tick); } } } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/midiload.mdx b/docs/reference/api/midiload.mdx index 64137d82e..705d446e2 100644 --- a/docs/reference/api/midiload.mdx +++ b/docs/reference/api/midiload.mdx @@ -1,113 +1,79 @@ --- title: midiLoad -description: This event is fired when a Midi file is being loaded. +description: "This event is fired when a Midi file is being loaded." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.0 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when a Midi file for the song was generated and is being loaded -by the synthesizer. This event can be used to inspect or modify the midi events +### Description +This event is fired when a Midi file is being loaded. This event is fired when a Midi file for the song was generated and is being loaded +by the synthesizer. This event can be used to inspect or modify the midi events which will be played for the song. This can be used to generate other visual representations of the song. -:::note -The generated midi file will NOT contain any metronome and count-in related events. The metronome and -count-in ticks are handled within the synthesizer. -::: - - - -## Types - - - - - - - -## Parameters - - - The midi file containing all events which will be synthesized. - - - -## MidiFile Properties +> [!NOTE] +> The generated midi file will NOT contain any metronome and count-in related events. The metronome and +> count-in ticks are handled within the synthesizer. + + +
{"midiLoad"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"MidiFile"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"MidiFile"}{">"}{" "}{"MidiLoad"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"midiLoad"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"MidiFile"}{">"}
+ + ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.midiLoad.on(file => { initializePianoPractice(file); }); ``` - - - - -```js -$('#alphaTab').on('alphaTab.midiLoad', (e) => { - const file = e.detail; - initializePianoPractice(file); -}); -``` - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.midiLoad', e => { - const file = e.detail; - initializePianoPractice(file); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.MidiLoad.On(file => +api.MidiLoad.On(file => { InitializePianoPractice(file); }); ``` - - -```cs +```kotlin val api = AlphaTabApi(...) api.midiLoad.on { file -> initializePianoPractice(file) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/midiloaded.mdx b/docs/reference/api/midiloaded.mdx index b168e27dc..943d989fe 100644 --- a/docs/reference/api/midiloaded.mdx +++ b/docs/reference/api/midiloaded.mdx @@ -1,64 +1,50 @@ --- title: midiLoaded -description: This event is fired when the Midi file needed for playback was loaded. +description: "This event is fired when the Midi file needed for playback was loaded." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the Midi file needed for playback was loaded. - - - -## Types - - - - - - +### Description +This event is fired when the Midi file needed for playback was loaded. -## Parameters - - - The information about the song duration. since 1.2.0-alpha.97 - - - The information about the song duration. since 1.2.0-alpha.97 - - - The information about the song duration. - - - -## PositionChangedEventArgs Properties + + +
{"midiLoaded"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PositionChangedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"PositionChangedEventArgs"}{">"}{" "}{"MidiLoaded"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"midiLoaded"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PositionChangedEventArgs"}{">"}
+ + -See [`playerPositionChanged`](/docs/reference/api/playerpositionchanged) ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.midiLoaded.on(e => { @@ -66,43 +52,18 @@ api.midiLoaded.on(e => { updateSongDuration(e.endTime); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.midiFileLoaded', (e) => { - var args = e.detail; - hideGeneratingAudioIndicator(); - updateSongDuration(args.endTime); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.midiFileLoaded', e => { - hideGeneratingAudioIndicator(); - updateSongDuration(e.endTime); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.MidiLoaded.On(e => +api.MidiLoaded.On(e => { HideGeneratingAudioIndicator(); UpdateSongDuration(e.EndTime); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.midiLoaded.on { e -> @@ -110,6 +71,5 @@ api.midiLoaded.on { e -> updateSongDuration(e.endTime) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/notemousedown.mdx b/docs/reference/api/notemousedown.mdx index 630b919be..59e91558f 100644 --- a/docs/reference/api/notemousedown.mdx +++ b/docs/reference/api/notemousedown.mdx @@ -1,99 +1,74 @@ --- title: noteMouseDown -description: This event is fired whenever a the user presses the mouse button on a note head/number. +description: "This event is fired whenever a the user presses the mouse button on a note head/number." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.3 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired whenever a the user presses the mouse button on a note. -It is only fired if [`includeNoteBounds`](/docs/reference/settings/core/includenotebounds) was set to true because -only then this hit detection can be done. A click on a note is considered if the note head or the note number on tabs are clicked as documented in the [`boundsLookup`](/docs/reference/scorerenderer/boundslookup) - - +### Description +This event is fired whenever a the user presses the mouse button on a note head/number. This event is fired whenever a the user presses the mouse button on a note. +It is only fired if {"CoreSettings.includeNoteBounds"} was set to `true` because +only then this hit detection can be done. A click on a note is considered if the note head or the note number on tabs are clicked as documented in {"boundsLookup"}. -## Types - - - - - - - -## Parameters + + +
{"noteMouseDown"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Note"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Note"}{">"}{" "}{"NoteMouseDown"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"noteMouseDown"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Note"}{">"}
+ + - - - The note which was clicked. - - - The note which was clicked. - - - The note which was clicked. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.noteMouseDown.on((note) => { api.playNote(note); }); ``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.noteMouseDown', (e) => { - const note = e.detail; - api.playNote(beat); -}, false); -``` - - - + ```cs var api = new AlphaTabApi(...); -api.NoteMouseDown.On(note => +api.NoteMouseDown.On(note => { api.PlayNote(note); }); ``` - - ```kotlin val api = AlphaTabApi(...) -api.noteMouseDown.on { note -> +api.noteMouseDown.on { note -> api.playNote(note) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/notemousemove.mdx b/docs/reference/api/notemousemove.mdx index b732ba3db..4f1835c71 100644 --- a/docs/reference/api/notemousemove.mdx +++ b/docs/reference/api/notemousemove.mdx @@ -1,99 +1,74 @@ --- title: noteMouseMove -description: This event is fired whenever the user moves the mouse over a note after the user already pressed the button on a note. +description: "This event is fired whenever the user moves the mouse over a note after the user already pressed the button on a note." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.3 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired whenever the user moves the mouse over a note after the user already pressed the button on a note. -It is only fired if [`includeNoteBounds`](/docs/reference/settings/core/includenotebounds) was set to true because -only then this hit detection can be done. A move on a note is considered if the note head or the note number on tabs are clicked as documented in the [`boundsLookup`](/docs/reference/scorerenderer/boundslookup) - - +### Description +This event is fired whenever the user moves the mouse over a note after the user already pressed the button on a note. This event is fired whenever the user moves the mouse over a note after the user already pressed the button on a note. +It is only fired if {"CoreSettings.includeNoteBounds"} was set to `true` because +only then this hit detection can be done. A click on a note is considered if the note head or the note number on tabs are clicked as documented in {"boundsLookup"} -## Types - - - - - - - -## Parameters + + +
{"noteMouseMove"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Note"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Note"}{">"}{" "}{"NoteMouseMove"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"noteMouseMove"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Note"}{">"}
+ + - - - Note on which the mouse was hovered over during mouse down. - - - Note on which the mouse was hovered over during mouse down. - - - Note on which the mouse was hovered over during mouse down. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.noteMouseMove.on((note) => { changeNote(note) }); ``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.noteMouseMove', (e) => { - var note = e.detail; - changeNote(note) -}, false); -``` - - - + ```cs var api = new AlphaTabApi(...); -api.NoteMouseMove.On(note => +api.NoteMouseMove.On(note => { ChangeNote(note); }); ``` - - ```kotlin val api = AlphaTabApi(...) -api.noteMouseMove.on { note -> +api.noteMouseMove.on { note -> changeNote(note) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/notemouseup.mdx b/docs/reference/api/notemouseup.mdx index 2d8f3f4cb..07ee64cfe 100644 --- a/docs/reference/api/notemouseup.mdx +++ b/docs/reference/api/notemouseup.mdx @@ -1,104 +1,76 @@ --- title: noteMouseUp -description: This event is fired whenever the user releases the mouse after a mouse press on a note. +description: "This event is fired whenever the user releases the mouse after a mouse press on a note." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.3 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired whenever the user releases the mouse after a mouse press on a note. +### Description +This event is fired whenever the user releases the mouse after a mouse press on a note. This event is fired whenever a the user presses the mouse button on a note. This event is fired regardless of whether the mouse was released on a note. The parameter is null if the mouse was released somewhere beside the note. -It is only fired if [`includeNoteBounds`](/docs/reference/settings/core/includenotebounds) was set to true because -only then this hit detection can be done. A move on a note is considered if the note head or the note number on tabs are clicked as documented in the [`boundsLookup`](/docs/reference/scorerenderer/boundslookup) - - +It is only fired if {"CoreSettings.includeNoteBounds"} was set to `true` because +only then this hit detection can be done. A click on a note is considered if the note head or the note number on tabs are clicked as documented in the {"boundsLookup"}. -## Types - - - - - - - -## Parameters + + +
{"noteMouseUp"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Note"}{" "}{"|"}{" "}{"null"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Note"}{"?"}{">"}{" "}{"NoteMouseUp"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"noteMouseUp"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Note"}{"?"}{">"}
+ + - - - Note on which the mouse was released over after mouse down. - Might be null if no note could be found in near location. - - - Note on which the mouse was released over after mouse down. - Might be null if no note could be found in near location. - - - Note on which the mouse was released over after mouse down. - Might be null if no note could be found in near location. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.noteMouseUp.on((note) => { api.playNote(note); }); ``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.noteMouseUp', (e) => { - const note = e.detail; - api.playNote(note); -}, false); -``` - - - + ```cs var api = new AlphaTabApi(...); -api.NoteMouseUp.On(note => +api.NoteMouseUp.On(note => { api.PlayNote(note); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.noteMouseUp.on { note -> api.playNote(note) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/pause.mdx b/docs/reference/api/pause.mdx index f58b068d8..efd4e9957 100644 --- a/docs/reference/api/pause.mdx +++ b/docs/reference/api/pause.mdx @@ -1,76 +1,65 @@ --- title: pause -description: Pauses the playback of the current song. +description: "Pauses the playback of the current song." sidebar_custom_props: + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description +### Description Pauses the playback of the current song. -## Signatures - - - - - - - - -### Parameters -None + + +
{"pause"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"Pause"}{"("}{")"}
+ + +
{"fun"}{" "}{"pause"}{"("}{")"}{":"}{" "}{"Unit"}
+ + -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.pause(); ``` - - - - -```js -$('#alphaTab').alphaTab('pause'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Pause(); ``` - - ```kotlin val api = AlphaTabApi(...) api.pause(); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/play.mdx b/docs/reference/api/play.mdx index 30bd0e9af..8f21c6af8 100644 --- a/docs/reference/api/play.mdx +++ b/docs/reference/api/play.mdx @@ -1,76 +1,68 @@ --- title: play -description: Starts the playback of the current song. +description: "Starts the playback of the current song." sidebar_custom_props: + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Starts the playback of the current song if possible.Reasons for not starting can be that the player is not ready yet or it is already playing. - -## Signatures +### Description +Starts the playback of the current song. - - - - - - + + +
{"play"}{"("}{")"}{":"}{" "}{"boolean"}
+ + +
{"bool"}{" "}{"Play"}{"("}{")"}
+ + +
{"fun"}{" "}{"play"}{"("}{")"}{":"}{" "}{"Boolean"}
+ + -### Parameters -None +### Returns +true if the playback was started, otherwise false. Reasons for not starting can be that the player is not ready or already playing. -### Returns -true if the playback was started, otherwise false. Reasons for not starting can be that the player is not ready or already playing. ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.play(); ``` - - - -```js -$('#alphaTab').alphaTab('play'); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Play(); ``` - - ```kotlin val api = AlphaTabApi(...) api.play() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playbackrange.mdx b/docs/reference/api/playbackrange.mdx index c57b1bf6c..5a264b1e9 100644 --- a/docs/reference/api/playbackrange.mdx +++ b/docs/reference/api/playbackrange.mdx @@ -1,119 +1,71 @@ --- title: playbackRange -description: The range of the song that should be played +description: "The range of the song that should be played." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { SinceBadge } from '@site/src/components/SinceBadge'; - - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; import { CodeBadge } from '@site/src/components/CodeBadge'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Gets or sets the range of the song that should be played. The range is defined in midi ticks or the whole song is played if the range is set to null +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The range of the song that should be played. Gets or sets the range of the song that should be played. The range is defined in midi ticks or the whole song is played if the range is set to null -## Types - - - - - - - -## PlaybackRange Properties - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeSummary
-
-
- - 		int - The position in midi ticks from where the song should start -
-
-
- - 		int - The position in midi ticks to where the song should be played. -
- -## Default Value + + +
{"playbackRange"}{":"}{" "}{"PlaybackRange"}{" "}{"|"}{" "}{"null"}{" "}{"="}{" "}{"null"}{";"}
+ + +
{"PlaybackRange"}{"?"}{" "}{"PlaybackRange"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"null"}
+ + +
{"var"}{" "}{"playbackRange"}{":"}{" "}{"PlaybackRange"}{"?"}{" "}{"="}{" "}{"null"}
+ + -`null` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playbackRange = { startTick: 1000, endTick: 50000 }; ``` - - - - -```js -$('#alphaTab').alphaTab('playbackRange', { startTick: 1000, endTick: 50000 }) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.PlaybackRange = new PlaybackRange { StartTick = 1000, EndTick = 50000 }; ``` - - ```kotlin val api = AlphaTabApi(...) -api.playbackRange = PlaybackRange.apply { +api.playbackRange = PlaybackRange.apply { startTick = 1000 endTick = 50000 } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playbackrangechanged.mdx b/docs/reference/api/playbackrangechanged.mdx index eaed5647c..3aa0c2d09 100644 --- a/docs/reference/api/playbackrangechanged.mdx +++ b/docs/reference/api/playbackrangechanged.mdx @@ -1,75 +1,50 @@ --- title: playbackRangeChanged -description: This event is fired when the playback range changed. +description: "This event is fired when the playback range changed." sidebar_custom_props: + kind: event category: Events - Player since: 1.2.3 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the playback range changed. - - - -## Types - - - - - - - -## Parameters +### Description +This event is fired when the playback range changed. - - - The information about the changed playback range. - - - The information about the changed playback range. - - - The information about the changed playback range. - - - -## PlaybackRangeChangedEventArgs Properties + + +
{"playbackRangeChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PlaybackRangeChangedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"PlaybackRangeChangedEventArgs"}{">"}{" "}{"PlaybackRangeChanged"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"playbackRangeChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PlaybackRangeChangedEventArgs"}{">"}
+ + - - - The new playback range or null if no range is selected. (see [PlaybackRange](/docs/reference/api/playbackrange)) - - - The new playback range or null if no range is selected. (see [PlaybackRange](/docs/reference/api/playbackrange)) - - - The new playback range or null if no range is selected. (see [PlaybackRange](/docs/reference/api/playbackrange)) - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playbackRangeChanged.on((args) => { @@ -80,55 +55,24 @@ api.playbackRangeChanged.on((args) => { } }); ``` - - - -```js -$('#alphaTab').on('alphaTab.playbackRangeChanged', (e, args) => { - if (args.playbackRange) { - highlightRangeInProgressBar(args.playbackRange.startTick, args.playbackRange.endTick); - } else { - clearHighlightInProgressBar(); - } -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.playbackRangeChanged', (e) => { - const args = e.detail; - if (args.playbackRange) { - highlightRangeInProgressBar(args.playbackRange.startTick, args.playbackRange.endTick); - } else { - clearHighlightInProgressBar(); - } -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.PlaybackRangeChanged.On(args => +api.PlaybackRangeChanged.On(args => { - if (args.PlaybackRange != null) + if (args.PlaybackRange != null) { HighlightRangeInProgressBar(args.PlaybackRange.StartTick, args.PlaybackRange.EndTick); } - else + else { ClearHighlightInProgressBar(); } }); ``` - - ```kotlin val api = AlphaTabApi(...) api.playbackRangeChanged.on { args -> @@ -140,6 +84,5 @@ api.playbackRangeChanged.on { args -> } } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playbackspeed.mdx b/docs/reference/api/playbackspeed.mdx index b4613b6cb..55ddf5e2a 100644 --- a/docs/reference/api/playbackspeed.mdx +++ b/docs/reference/api/playbackspeed.mdx @@ -1,76 +1,68 @@ --- title: playbackSpeed -description: The current playback speed as percentage +description: "The current playback speed as percentage" sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Controls the current playback speed as percentual value. Normal speed is 1.0 (100%) and 0.5 would be 50%. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The current playback speed as percentage Controls the current playback speed as percentual value. Normal speed is 1.0 (100%) and 0.5 would be 50%. -## Types - - - - - -## Default Value + + +
{"playbackSpeed"}{":"}{" "}{"number"}{" "}{"="}{" "}{"1"}{";"}
+ + +
{"double"}{" "}{"PlaybackSpeed"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"1"}
+ + +
{"var"}{" "}{"playbackSpeed"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"1"}
+ + -`1.0` ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playbackSpeed = 0.5; ``` - - - - -```js -$('#alphaTab').alphaTab('playbackSpeed', 0.5) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.PlaybackSpeed = 0.5; ``` - - ```kotlin val api = AlphaTabApi(...) api.playbackSpeed = 0.5 ``` - diff --git a/docs/reference/api/playbeat.mdx b/docs/reference/api/playbeat.mdx index 289cdf538..7fb785251 100644 --- a/docs/reference/api/playbeat.mdx +++ b/docs/reference/api/playbeat.mdx @@ -1,93 +1,78 @@ --- title: playBeat -description: Triggers the play of the given beat. +description: "Triggers the play of the given beat." sidebar_custom_props: + kind: method category: Methods - Player - since: 1.1.0 + since: 1.1.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { SinceBadge } from '@site/src/components/SinceBadge'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; + -## Description +### Description Triggers the play of the given beat. This will stop the any other current ongoing playback. -This method can be used in applications when individual beats need to be played for lesson or editor style purposes. -The player will not report any change in state or playback position during the playback of the requested beat. -It is a playback of audio separate to the main song playback. - -## Signatures +This method can be used in applications when individual beats need to be played for lesson or editor style purposes. +The player will not report any change in state or playback position during the playback of the requested beat. +It is a playback of audio separate to the main song playback. - - - - - - + + +
{"playBeat"}{"("}{"beat"}{":"}{" "}{"Beat"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"PlayBeat"}{"("}{"Beat"}{" "}{"beat"}{")"}
+ + +
{"fun"}{" "}{"playBeat"}{"("}{"beat"}{":"}{" "}{"Beat"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The single beat to play. - - - The single beat to play. - - - The single beat to play. + + the single beat to play - -### Returns +### Returns +true if the playback was started, otherwise false. Reasons for not starting can be that the player is not ready or already playing. ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playBeat(api.score.tracks[0].staves[0].bars[0].voices[0].beats[0]); ``` - - - - -```js -const beat = $('#alphaTab').alphaTab('score').tracks[0].staves[0].bars[0].voices[0].beats[0]; -$('#alphaTab').alphaTab('playBeat', beat); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.PlayBeat(api.Score.Tracks[0].Staves[0].Bars[0].Voices[0].Beats[0]); ``` - - ```kotlin val api = AlphaTabApi(...) api.playBeat(api.score.tracks[0].staves[0].bars[0].voices[0].beats[0]) ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playedbeatchanged.mdx b/docs/reference/api/playedbeatchanged.mdx index 62a98df11..e796c9d7e 100644 --- a/docs/reference/api/playedbeatchanged.mdx +++ b/docs/reference/api/playedbeatchanged.mdx @@ -1,107 +1,72 @@ --- title: playedBeatChanged -description: This event is fired when the played beat changed. +description: "This event is fired when the played beat changed." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description +### Description This event is fired when the played beat changed. - - -## Types - - - - - - - -## Parameters + + +
{"playedBeatChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}{" "}{"PlayedBeatChanged"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"playedBeatChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Beat"}{">"}
+ + - - - The new beat that is now being played.. - - - The new beat that is now being played.. - - - The new beat that is now being played.. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playedBeatChanged.on((beat) => { updateFretboard(beat); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.playedBeatChanged', (e, beat) => { - updateFretboard(beat); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.playedBeatChanged', (e) => { - const beat = e.detail; - updateFretboard(beat); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.PlayedBeatChanged.On(beat => +api.PlayedBeatChanged.On(beat => { UpdateFretboard(beat); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.playedBeatChanged.on { beat -> updateFretboard(beat) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/player.mdx b/docs/reference/api/player.mdx index 4a13bf7d0..8c28e9224 100644 --- a/docs/reference/api/player.mdx +++ b/docs/reference/api/player.mdx @@ -1,74 +1,69 @@ --- title: player -description: The alphaSynth player used for playback. This is the low-level API to the Midi synthesizer used for playback. +description: "The alphaSynth player used for playback." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets access to the underling `alphaTab.synth.IAlphaSynth` that is used for the audio playback. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The alphaSynth player used for playback. This is the low-level API to the Midi synthesizer used for playback. +Gets access to the underling {"IAlphaSynth"} that is used for the audio playback. -## Types + + +
{"player"}{":"}{" "}{"IAlphaSynth"}{" "}{"|"}{" "}{"null"}{";"}
+ + +
{"IAlphaSynth"}{"?"}{" "}{"Player"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"player"}{":"}{" "}{"IAlphaSynth"}{"?"}
+ + - - - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); setupPlayerEvents(api.settings); ``` - - - - -```js -setupPlayerEvents($('#alphaTab').alphaTab('player')); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); SetupPlayerEvents(api.Player); ``` - - ```kotlin val api = AlphaTabApi(...) setupPlayerEvents(api.player) ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playerfinished.mdx b/docs/reference/api/playerfinished.mdx index 0f9b9b038..481b7eeb5 100644 --- a/docs/reference/api/playerfinished.mdx +++ b/docs/reference/api/playerfinished.mdx @@ -1,50 +1,50 @@ --- title: playerFinished -description: This event is fired when the playback of the whole song finished. +description: "This event is fired when the playback of the whole song finished." sidebar_custom_props: + kind: event category: Events - Player - since: 0.9.4 + since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description +### Description This event is fired when the playback of the whole song finished. This event is finished regardless on whether looping is enabled or not. - - -## Types - - - - - - + + +
{"playerFinished"}{":"}{" "}{"IEventEmitter"}{";"}
+ + +
{"IEventEmitter"}{" "}{"PlayerFinished"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"playerFinished"}{":"}{" "}{"IEventEmitter"}
+ + -## Parameters -None ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playerFinished.on((args) => { @@ -55,43 +55,11 @@ api.isLooping = true; api.playbackSpeed = 0.5; api.play() ``` - - - - -```js -const at = $('#alphaTab'); -at.on('alphaTab.finished', (e, args) => { - at.alphaTab('playbackSpeed', Math.min(1.0, at.alphaTab('playbackSpeed') + 0.1) -}); -at.alphaTab('loop', true); -at.alphaTab('playbackSpeed', 0.5); -at.alphaTab('play'); -``` - - - - -```js -const at = document.querySelector('#alphaTab'); -let api = null; -at.addEventListener('alphaTab.finished', (e) => { - api.playbackSpeed = Math.min(1.0, api.playbackSpeed + 0.1); -}, false); - - -api = new alphaTab.AlphaTabApi(at); -api.isLooping = true; -api.playbackSpeed = 0.5; -api.play() -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); -api.PlayerFinished.On(() => +api.PlayerFinished.On(() => { // speed trainer api.PlaybackSpeed = Math.Min(1.0, api.PlaybackSpeed + 0.1); @@ -100,13 +68,11 @@ api.IsLooping = true; api.PlaybackSpeed = 0.5; api.Play(); ``` - - ```kotlin val api = AlphaTabApi(...) -api.playerFinished.on { +api.playerFinished.on { // speed trainer api.playbackSpeed = min(1.0, api.playbackSpeed + 0.1); } @@ -114,6 +80,5 @@ api.isLooping = true api.playbackSpeed = 0.5 api.play() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playerpositionchanged.mdx b/docs/reference/api/playerpositionchanged.mdx index 8a4ea9668..0e61cb964 100644 --- a/docs/reference/api/playerpositionchanged.mdx +++ b/docs/reference/api/playerpositionchanged.mdx @@ -1,157 +1,72 @@ --- title: playerPositionChanged -description: This event is fired when the playback state changed. +description: "This event is fired when the current playback position of the song changed." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the current playback position of the song changed. - - - -## Types - - - - - - +### Description +This event is fired when the current playback position of the song changed. -## Parameters - - - - The information about the player position. - - - The information about the player position. - - - The information about the player position. - - - -## PositionChangedEventArgs Properties + + +
{"playerPositionChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PositionChangedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"PositionChangedEventArgs"}{">"}{" "}{"PlayerPositionChanged"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"playerPositionChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PositionChangedEventArgs"}{">"}
+ + - - - The current time position within the song in milliseconds. - - - The current time position within the song in milliseconds. - - - The current time position within the song in milliseconds. - - - The total length of the song in milliseconds. - - - The current time position within the song in milliseconds. - - - The current time position within the song in milliseconds. - - - The current time position within the song in midi ticks. - - - The current time position within the song in midi ticks. - - - The current time position within the song in midi ticks. - - - The total length of the song in midi ticks. - - - The current time position within the song in midi ticks. - - - The current time position within the song in midi ticks. - - - Whether the position changed because of time seeking and not due to playback. since 1.2.0-alpha.97 - - - Whether the position changed because of time seeking and not due to playback. since 1.2.0-alpha.97 - - - Whether the position changed because of time seeking and not due to playback. since 1.2.0-alpha.97 - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playerPositionChanged.on((args) => { updatePlayerPosition(args); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.positionChanged', (e, args) => { - updatePlayerPosition(args); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.positionChanged', (e) => { - var args = e.detail; - updatePlayerPosition(args); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.PlayerPositionChanged.On(args => +api.PlayerPositionChanged.On(args => { UpdatePlayerPosition(args); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.playerPositionChanged.on { args -> updatePlayerPosition(args) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playerready.mdx b/docs/reference/api/playerready.mdx new file mode 100644 index 000000000..fde4d6ab9 --- /dev/null +++ b/docs/reference/api/playerready.mdx @@ -0,0 +1,73 @@ +--- +title: playerReady +description: "This event is fired when all required data for playback is loaded and ready." +sidebar_custom_props: + kind: event + category: Events - Player + since: 0.9.4 +--- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + + + +### Description +This event is fired when all required data for playback is loaded and ready. This event is fired when all required data for playback is loaded and ready. The player is ready for playback when +all background workers are started, the audio output is initialized, a soundfont is loaded, and a song was loaded into the player as midi file. + + + +
{"playerReady"}{":"}{" "}{"IEventEmitter"}{";"}
+ + +
{"IEventEmitter"}{" "}{"PlayerReady"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"playerReady"}{":"}{" "}{"IEventEmitter"}
+ + + + +## Examples + + + +```js +const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); +api.playerReady.on(() => { + enablePlayerControls(); +}); +``` + + +```cs +var api = new AlphaTabApi(...); +api.PlayerReady.On(() => +{ + EnablePlayerControls() +}); +``` + + +```kotlin +val api = AlphaTabApi(...) +api.playerReady.on { + enablePlayerControls() +} +``` + + diff --git a/docs/reference/api/playerstate.mdx b/docs/reference/api/playerstate.mdx index ab3264328..3bf4a172f 100644 --- a/docs/reference/api/playerstate.mdx +++ b/docs/reference/api/playerstate.mdx @@ -1,78 +1,68 @@ --- title: playerState -description: The current player state +description: "The current player state." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets the current player state, meaning whether it is paused or playing. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The current player state. Gets the current player state, meaning whether it is paused or playing. -## Types + + +
{"readonly"}{" "}{"playerState"}{":"}{" "}{"PlayerState"}{";"}
+ + +
{"PlayerState"}{" "}{"PlayerState"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"playerState"}{":"}{" "}{"PlayerState"}
+ + - - - `0` for paused
- `1` for playing - - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); if(api.playerState != alphaTab.synth.PlayerState.Playing) api.play(); ``` - - - - -```js -const at = $('#alphaTab'); -if(at.alphaTab('playerState') != alphaTab.synth.PlayerState.Playing) at.alphaTab('play'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); if(api.PlayerState != PlayerState.Playing) api.Play(); ``` - - ```kotlin val api = AlphaTabApi(...) if (api.playerState != PlayerState.Playing) api.play() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playerstatechanged.mdx b/docs/reference/api/playerstatechanged.mdx index 88650b5cc..5f0f73359 100644 --- a/docs/reference/api/playerstatechanged.mdx +++ b/docs/reference/api/playerstatechanged.mdx @@ -1,126 +1,72 @@ --- title: playerStateChanged -description: This event is fired when the playback state changed. +description: "This event is fired when the playback state changed." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the playback state changed. - - - -## Types - - - - - - +### Description +This event is fired when the playback state changed. -## Parameters - - - - The information about the player state change event. - - - The information about the player state change event. - - - The information about the player state change event. - - - -## PlayerStateChangedEventArgs Properties + + +
{"playerStateChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PlayerStateChangedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"PlayerStateChangedEventArgs"}{">"}{" "}{"PlayerStateChanged"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"playerStateChanged"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"PlayerStateChangedEventArgs"}{">"}
+ + - - - The new state of the player.
- `0` - Paused - `1` - Playing - - - The new state of the player. - - - The new state of the player. - - - Whether the playback was fully stopped (including jump to start) or only paused. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playerStateChanged.on((args) => { updatePlayerControls(args.state, args.stopped); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.playerStateChanged', (e, args) => { - updatePlayerControls(args.state, args.stopped); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.playerStateChanged', (e) => { - const args = e.detail; - updatePlayerControls(args.state, args.stopped); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.PlayerStateChanged.On(args => +api.PlayerStateChanged.On(args => { UpdatePlayerControls(args); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.playerStateChanged.on { args -> updatePlayerControls(args) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playnote.mdx b/docs/reference/api/playnote.mdx index 7cecb47c2..aec6bfaad 100644 --- a/docs/reference/api/playnote.mdx +++ b/docs/reference/api/playnote.mdx @@ -1,93 +1,75 @@ --- title: playNote -description: Triggers the play of the given note. +description: "Triggers the play of the given note." sidebar_custom_props: + kind: method category: Methods - Player - since: 1.1.0 + since: 1.1.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description +### Description Triggers the play of the given note. This will stop the any other current ongoing playback. -This method can be used in applications when individual notes need to be played for lesson or editor style purposes. -The player will not report any change in state or playback position during the playback of the requested note. -It is a playback of audio separate to the main song playback. +This method can be used in applications when individual notes need to be played for lesson or editor style purposes. +The player will not report any change in state or playback position during the playback of the requested note. +It is a playback of audio separate to the main song playback. -## Signatures - - - - - - - + + +
{"playNote"}{"("}{"note"}{":"}{" "}{"Note"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"PlayNote"}{"("}{"Note"}{" "}{"note"}{")"}
+ + +
{"fun"}{" "}{"playNote"}{"("}{"note"}{":"}{" "}{"Note"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The single note to play. - - - The single note to play. - - - The single note to play. + + the single note to play -### Returns - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playNote(api.score.tracks[0].staves[0].bars[0].voices[0].beats[0].notes[0]); ``` - - - - -```js -const note = $('#alphaTab').alphaTab('score').tracks[0].staves[0].bars[0].voices[0].beats[0].notes[0]; -$('#alphaTab').alphaTab('playNote', beat); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.PlayNote(api.Score.Tracks[0].Staves[0].Bars[0].Voices[0].Beats[0].Notes[0]); ``` - - ```kotlin val api = AlphaTabApi(...) api.playNote(api.score.tracks[0].staves[0].bars[0].voices[0].beats[0].notes[0]); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/playpause.mdx b/docs/reference/api/playpause.mdx index f4efa032b..c02303c90 100644 --- a/docs/reference/api/playpause.mdx +++ b/docs/reference/api/playpause.mdx @@ -1,75 +1,65 @@ --- title: playPause -description: Toggles between play/pause depending on the current player state. +description: "Toggles between play/pause depending on the current player state." sidebar_custom_props: + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Toggles between play/pause depending on the current player state. if the player was playing, it will pause. If it is paused, it will initiate a play. - -## Signatures +### Description +Toggles between play/pause depending on the current player state. If the player was playing, it will pause. If it is paused, it will initiate a play. - - - - - - - -### Parameters -None + + +
{"playPause"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"PlayPause"}{"("}{")"}
+ + +
{"fun"}{" "}{"playPause"}{"("}{")"}{":"}{" "}{"Unit"}
+ + -### Returns ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.playPause(); ``` - - - - -```js -$('#alphaTab').alphaTab('playPause'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.PlayPause(); ``` - - ```kotlin val api = AlphaTabApi(...) api.playPause() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/postrenderfinished.mdx b/docs/reference/api/postrenderfinished.mdx index 69b2a2f27..1708e5ab4 100644 --- a/docs/reference/api/postrenderfinished.mdx +++ b/docs/reference/api/postrenderfinished.mdx @@ -1,96 +1,76 @@ --- title: postRenderFinished -description: This event is fired when the rendering of the whole music sheet is finished, and all handlers of RenderFinished ran. +description: "This event is fired when the rendering of the whole music sheet is finished, and all handlers of `renderFinished` ran." sidebar_custom_props: + kind: event category: Events - Core since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the rendering of the whole music sheet is finished, and all handlers of RenderFinished ran. When this -handlers are called, the whole rendering and display pipeline is completed. - - - -## Types +### Description +This event is fired when the rendering of the whole music sheet is finished, and all handlers of `renderFinished` ran. If {"CoreSettings.enableLazyLoading"} is enabled not all partial images of the music sheet might be rendered. +In this case the `renderFinished` event rather represents that the whole music sheet has been layouted and arranged +and every partial image can be requested for rendering. If you neeed more fine-grained access +to the actual layouting and rendering progress, you need to look at the low-level apis {"partialLayoutFinished"} and +{"partialRenderFinished"} accessible via {"renderer"}. - - - - - + + +
{"postRenderFinished"}{":"}{" "}{"IEventEmitter"}{";"}
+ + +
{"IEventEmitter"}{" "}{"PostRenderFinished"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"postRenderFinished"}{":"}{" "}{"IEventEmitter"}
+ + -## Parameters -None ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.postRenderFinished.on(() => { hideLoadingIndicator(); -}); -``` - - - - -```js -$('#alphaTab').on('alphaTab.postRendered', () => { - hideLoadingIndicator(); }); ``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.postRendered', (e) => { - hideLoadingIndicator(); -}, false); -``` - - - + ```cs var api = new AlphaTabApi(...); -api.PostRenderFinished.On(() => +api.PostRenderFinished.On(() => { HideLoadingIndicator(); }); ``` - - ```kotlin val api = AlphaTabApi(...) -api.postRenderFinished.on { +api.postRenderFinished.on { hideLoadingIndicator(); } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/print.mdx b/docs/reference/api/print.mdx index 74fca70ec..44e4ec7f8 100644 --- a/docs/reference/api/print.mdx +++ b/docs/reference/api/print.mdx @@ -1,79 +1,51 @@ --- title: print -description: Opens a popup window with the rendered music notation for printing. +description: "Opens a popup window with the rendered music notation for printing." sidebar_custom_props: + kind: method javaScriptOnly: true category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Opens a popup window with the rendered music notation for printing. The default display of alphaTab in the browser is not very +### Description +Opens a popup window with the rendered music notation for printing. Opens a popup window with the rendered music notation for printing. The default display of alphaTab in the browser is not very suitable for printing. The items are lazy loaded, the width can be dynamic, and the scale might be better suitable for screens. -This function opens a popup window which is filled with a by-default A4 optimized view of the rendered score: +This function opens a popup window which is filled with a by-default A4 optimized view of the rendered score: * Lazy loading is disabled * The scale is reduced to 0.8 * The stretch force is reduced to 0.8 * The width is optimized to A4. Portrait if the page-layout is used, landscape if the horizontal-layout is used. -## Signatures - - - - - - - - +
{"print"}{"("}{"width"}{"?"}{":"}{" "}{"string"}{","}{" "}{"additionalSettings"}{"?"}{":"}{" "}{"unknown"}{")"}{":"}{" "}{"void"}
-### Parameters - + An optional custom width as CSS width that should be used. Best is to use a CSS width that is suitable for your preferred page size. - - An optional parameter to specify additional setting values which should be respected during printing. - since 1.2.0-alpha.79 + + An optional parameter to specify additional setting values which should be respected during printing () -### Returns -Nothing -## Examples - - - +## Example - JavaScript ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.print(); api.print(undefined, { display: { barsPerRow: 5 } }); ``` - - - - -```js -$('#alphaTab').alphaTab('print'); -``` - - - \ No newline at end of file diff --git a/docs/reference/api/readyforplayback.mdx b/docs/reference/api/readyforplayback.mdx deleted file mode 100644 index dc79a71ad..000000000 --- a/docs/reference/api/readyforplayback.mdx +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: playerReady -description: This event is fired when all required data for playback is loaded and ready. -sidebar_custom_props: - category: Events - Player - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when all required data for playback is loaded and ready. The player is ready for playback when -all background workers are started, the audio output is initialized, a soundfont is loaded, and a song was loaded into the player as midi file. - - - -## Types - - - - - - - -## Parameters -none - -## Examples - - - - -```js -const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); -api.playerReady.on(() => { - enablePlayerControls(); -}); -``` - - - - -```js -$('#alphaTab').on('alphaTab.playerReady', (e) => { - enablePlayerControls(); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.playerReady', () => { - enablePlayerControls(); -}, false); -``` - - - - -```cs -var api = new AlphaTabApi(...); -api.PlayerReady.On(() => -{ - EnablePlayerControls() -}); -``` - - - - -```kotlin -val api = AlphaTabApi(...) -api.playerReady.on { - enablePlayerControls() -} -``` - - - \ No newline at end of file diff --git a/docs/reference/api/render.mdx b/docs/reference/api/render.mdx index e8b5f67f5..2255c8a7e 100644 --- a/docs/reference/api/render.mdx +++ b/docs/reference/api/render.mdx @@ -1,78 +1,65 @@ --- title: render -description: Initiates a re-rendering of the current setup. +description: "Initiates a re-rendering of the current setup." sidebar_custom_props: + kind: method category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description +### Description Initiates a re-rendering of the current setup. If rendering is not yet possible, it will be deferred until the UI changes to be ready for rendering. -## Signatures - - - - - - - - -### Parameters -None - -### Returns -Nothing + + +
{"render"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"Render"}{"("}{")"}
+ + +
{"fun"}{" "}{"render"}{"("}{")"}{":"}{" "}{"Unit"}
+ + ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.render(); ``` - - - - -```js -$('#alphaTab').alphaTab('render'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Render(); ``` - - ```kotlin val api = AlphaTabApi(...) api.render() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/renderer.mdx b/docs/reference/api/renderer.mdx index 1d4896cb9..e6142700b 100644 --- a/docs/reference/api/renderer.mdx +++ b/docs/reference/api/renderer.mdx @@ -1,28 +1,39 @@ --- title: renderer -description: The score renderer used for rendering the music sheet. This is the low-level API responsible for the actual rendering chain. +description: "The score renderer used for rendering the music sheet." sidebar_custom_props: + kind: property category: Properties - Core - since: 0.9.4 + since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets access to the underling `AlphaTab.Rendering.IScoreRenderer` that is used for the rendering. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The score renderer used for rendering the music sheet. This is the low-level API responsible for the actual rendering engine. +Gets access to the underling {"IScoreRenderer"} that is used for the rendering. + + + +
{"readonly"}{" "}{"renderer"}{":"}{" "}{"IScoreRenderer"}{";"}
+ + +
{"IScoreRenderer"}{" "}{"Renderer"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"renderer"}{":"}{" "}{"IScoreRenderer"}
+ + -## Types - - - - - - \ No newline at end of file diff --git a/docs/reference/api/renderfinished.mdx b/docs/reference/api/renderfinished.mdx index a45bdc709..3724e694a 100644 --- a/docs/reference/api/renderfinished.mdx +++ b/docs/reference/api/renderfinished.mdx @@ -1,96 +1,73 @@ --- title: renderFinished -description: This event is fired when the rendering of the whole music sheet is finished. +description: "This event is fired when the rendering of the whole music sheet is finished." sidebar_custom_props: + kind: event category: Events - Core since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the rendering of the whole music sheet is finished from the render engine side. There might be still tasks open for -the display component to visually display the rendered components when this event is notified. - - - -## Types +### Description +This event is fired when the rendering of the whole music sheet is finished. This event is fired when the rendering of the whole music sheet is finished from the render engine side. There might be still tasks open for +the display component to visually display the rendered components when this event is notified (e.g. resizing of DOM elements are done). - - - - - + + +
{"renderFinished"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"RenderFinishedEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"RenderFinishedEventArgs"}{">"}{" "}{"RenderFinished"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"renderFinished"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"RenderFinishedEventArgs"}{">"}
+ + -## Parameters -None ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.renderFinished.on(() => { updateProgressBar("Finishing"); -}); -``` - - - - -```js -$('#alphaTab').on('alphaTab.renderFinished', () => { - updateProgressBar("Finishing"); }); ``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.renderFinished', (e) => { - updateProgressBar("Finishing"); -}, false); -``` - - - + ```cs var api = new AlphaTabApi(...); -api.RenderFinished.On(() => +api.RenderFinished.On(() => { UpdateProgressBar("Finishing"); }); ``` - - ```kotlin val api = AlphaTabApi(...) -api.renderFinished.on { +api.renderFinished.on { updateProgressBar("Finishing") } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/renderscore.mdx b/docs/reference/api/renderscore.mdx index a8978c64d..8ddb3dd50 100644 --- a/docs/reference/api/renderscore.mdx +++ b/docs/reference/api/renderscore.mdx @@ -1,102 +1,76 @@ --- title: renderScore -description: Initiates a rendering of the given score. +description: "Initiates a rendering of the given score." sidebar_custom_props: + kind: method category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Initiates a rendering of the score. - -## Signatures +### Description +Initiates a rendering of the given score. - - - - - - - - - + + +
{"renderScore"}{"("}{"score"}{":"}{" "}{"Score"}{","}{" "}{"trackIndexes"}{"?"}{":"}{" "}{"number"}{"[]"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"RenderScore"}{"("}{"Score"}{" "}{"score"}{","}{" "}{"IList"}{"<"}{"double"}{">"}{"?"}{" "}{"trackIndexes"}{")"}
+ + +
{"fun"}{" "}{"renderScore"}{"("}{"score"}{":"}{" "}{"Score"}{","}{" "}{"trackIndexes"}{":"}{" "}{"alphaTab.collections.DoubleList"}{"?"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The score that contains the tracks to be rendered. - - - The indexes of the tracks that should be rendered. If not provided, the first track of the song will be rendered. - - - The score that contains the tracks to be rendered. + + The score containing the tracks to be rendered. - - The indexes of the tracks that should be rendered. If not provided, the first track of the song will be rendered. - - - The score that contains the tracks to be rendered. - - - The indexes of the tracks that should be rendered. If not provided, the first track of the song will be rendered. + + The indexes of the tracks from the song that should be rendered. If not provided, the first track of the + song will be shown. -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.RenderScore(generateScore(),[ 2, 3 ]); ``` - - - - -```js -const at = $('#alphaTab'); -const score = at.alphaTab('score'); -at.alphaTab('renderScore', generateScore(), [ 2, 3 ]); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.RenderScore(GenerateScore(), new double[] { 2, 3 }); ``` - - ```kotlin val api = AlphaTabApi(...) api.renderScore(generateScore(), alphaTab.collections.DoubleList(2, 3)); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/renderstarted.mdx b/docs/reference/api/renderstarted.mdx index 923cf4ca8..ddd0a0910 100644 --- a/docs/reference/api/renderstarted.mdx +++ b/docs/reference/api/renderstarted.mdx @@ -1,98 +1,72 @@ --- title: renderStarted -description: This event is fired when the rendering of the whole music sheet is starting. +description: "This event is fired when the rendering of the whole music sheet is starting." sidebar_custom_props: + kind: event category: Events - Core since: 0.9.4 --- -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -## Description -This event is fired when the rendering of the whole music sheet is starting. All -preparations are completed and the layout and render sequence is about to start. + - - -## Types +### Description +This event is fired when the rendering of the whole music sheet is starting. All preparations are completed and the layout and render sequence is about to start. - - - - - - -## Parameters + + +
{"renderStarted"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"boolean"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"bool"}{">"}{" "}{"RenderStarted"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"renderStarted"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Boolean"}{">"}
+ + - - - Whether the rendering is triggered from a resize. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.renderStarted.on(() => { updateProgressBar("Rendering"); -}); -``` - - - - -```js -$('#alphaTab').on('alphaTab.renderStarted', () => { - updateProgressBar("Rendering"); }); ``` - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.renderStarted', () => { - updateProgressBar("Rendering"); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.RenderStarted.On(resized => +api.RenderStarted.On(resized => { UpdateProgressBar("Rendering"); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.renderStarted.on { resized -> updateProgressBar("Rendering"); } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/rendertracks.mdx b/docs/reference/api/rendertracks.mdx index 7b5e66740..b1becbffb 100644 --- a/docs/reference/api/rendertracks.mdx +++ b/docs/reference/api/rendertracks.mdx @@ -1,98 +1,78 @@ --- title: renderTracks -description: Initiates a rendering of the given tracks. +description: "Renders the given list of tracks." sidebar_custom_props: + kind: method category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Initiates a rendering of the tracks. All tracks must be from the same score, otherwise an error is raised. +### Description +Renders the given list of tracks. -## Signatures - - - - - - - + + +
{"renderTracks"}{"("}{"tracks"}{":"}{" "}{"Track"}{"[]"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"RenderTracks"}{"("}{"IList"}{"<"}{"Track"}{">"}{" "}{"tracks"}{")"}
+ + +
{"fun"}{" "}{"renderTracks"}{"("}{"tracks"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"Track"}{">"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The tracks that should be rendered. - - - The tracks that should be rendered. - - - The tracks that should be rendered. + + The tracks to render. They must all belong to the same score. -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); -api.changeTrackMute([api.score.tracks[0], api.score.tracks[1]], true); +api.renderTracks([api.score.tracks[0], api.score.tracks[1]]); ``` - - - -```js -const at = $('#alphaTab'); -const score = at.alphaTab('score'); -at.alphaTab('renderTracks', [ - api.score.tracks[2], - api.score.tracks[3] -]); -``` - - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.RenderTracks(new []{ - api.Score.Tracks[2], + api.Score.Tracks[2], api.Score.Tracks[3] }); ``` - ```kotlin val api = AlphaTabApi(...) api.renderTracks(alphaTab.collections.List( - api.score.tracks[2], + api.score.tracks[2], api.score.tracks[3] } - ``` - \ No newline at end of file + diff --git a/docs/reference/api/resetsoundfonts.mdx b/docs/reference/api/resetsoundfonts.mdx index bae68f366..cb6b79fc9 100644 --- a/docs/reference/api/resetsoundfonts.mdx +++ b/docs/reference/api/resetsoundfonts.mdx @@ -1,54 +1,52 @@ --- title: resetSoundFonts -description: Unloads all presets from previously loaded SoundFonts. +description: "Unloads all presets from previously loaded SoundFonts." sidebar_custom_props: + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This function resets the player internally to not have any SoundFont loaded anymore. This allows you to reduce the memory usage of the page -if multiple partial SoundFonts are loaded via `loadSoundFont(..., true)`. Depending on the workflow you might also just want to use `loadSoundFont(..., false)` once -instead of unloading the previous SoundFonts. - -## Signatures +### Description +Unloads all presets from previously loaded SoundFonts. This function resets the player internally to not have any SoundFont loaded anymore. This allows you to reduce the memory usage of the page +if multiple partial SoundFonts are loaded via `loadSoundFont(..., true)`. Depending on the workflow you might also just want to use `loadSoundFont(..., false)` once +instead of unloading the previous SoundFonts. - - - Unloads all presets from the previous loaded SoundFonts. - - - Unloads all presets from the previous loaded SoundFonts. - - - Unloads all presets from the previous loaded SoundFonts. - - + + +
{"resetSoundFonts"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"ResetSoundFonts"}{"("}{")"}
+ + +
{"fun"}{" "}{"resetSoundFonts"}{"("}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters -None ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.loadSoundFont('/assets/guitars.sf2', true); @@ -57,22 +55,9 @@ api.loadSoundFont('/assets/pianos.sf2', true); api.resetSoundFonts(); api.loadSoundFont('/assets/synths.sf2', true); ``` - - - - -```js -$('#alphaTab').alphaTab('loadSoundFont', '/assets/guitars.sf2', true); -$('#alphaTab').alphaTab('loadSoundFont', '/assets/pianos.sf2', true); -... -$('#alphaTab').alphaTab('resetSoundFonts'); -$('#alphaTab').alphaTab('loadSoundFont', '/assets/synths.sf2', true); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.LoadSoundFont(System.IO.File.OpenRead("guitars.sf2"), true); api.LoadSoundFont(System.IO.File.OpenRead("pianos.sf2"), true); @@ -80,18 +65,15 @@ api.LoadSoundFont(System.IO.File.OpenRead("pianos.sf2"), true); api.ResetSoundFonts(); api.LoadSoundFont(System.IO.File.OpenRead("synths.sf2"), true); ``` - - - + ```kotlin val api = AlphaTabApi(...) api.loadSoundFont(readResource("guitars.sf2"), true) api.loadSoundFont(readResource("pianos.sf2"), true) ... -api.ResetSoundFonts() -api.LoadSoundFont(readResource("synths.sf2"), true) +api.resetSoundFonts() +api.loadSoundFont(readResource("synths.sf2"), true) ``` - - \ No newline at end of file + diff --git a/docs/reference/api/resize.mdx b/docs/reference/api/resize.mdx index da0101a8f..000c859a5 100644 --- a/docs/reference/api/resize.mdx +++ b/docs/reference/api/resize.mdx @@ -1,150 +1,80 @@ --- title: resize -description: This event is fired when alphaTab was resized and is about to rerender the music notation. +description: "This event is fired when alphaTab was resized and is about to rerender the music notation." sidebar_custom_props: + kind: event category: Events - Core since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when alphaTab was resized and is about to rerender the music notation. Before the re-rendering on resize +### Description +This event is fired when alphaTab was resized and is about to rerender the music notation. This event is fired when alphaTab was resized and is about to rerender the music notation. Before the re-rendering on resize the settings will be updated in the related components. This means that any changes to the layout options or other display settings are considered. This allows to implement scenarios where maybe the scale or the layout mode dynamically changes along the resizing. - - -## Types - - - - - - - -## Parameters - - - - The information about the resize event. - - - The information about the resize event. - - - The information about the resize event. - - - -## ResizeEventArgs Properties + + +
{"resize"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"ResizeEventArgs"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"ResizeEventArgs"}{">"}{" "}{"Resize"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"resize"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"ResizeEventArgs"}{">"}
+ + - - - The size before the resizing happened. - - - The size before the resizing happened. - - - The size before the resizing happened. - - - The size after the resize was complete. - - - The size after the resize was complete. - - - The size after the resize was complete. - - - The settings currently used for rendering. - - - The settings currently used for rendering. - - - The settings currently used for rendering. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.resize.on((args) => { - args.settings.scale = args.newWidth > 1300 - ? 1.5 - : (args.newWidth > 800) ? 1.3 : 1; -}); -``` - - - - -```js -$('#alphaTab').on('alphaTab.resize', (e, args) => { - args.settings.display.scale = args.newWidth > 1300 - ? 1.5 + args.settings.scale = args.newWidth > 1300 + ? 1.5 : (args.newWidth > 800) ? 1.3 : 1; }); ``` - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.resize', function(e) { - e.detail.settings.display.scale = e.detail.newWidth > 1300 - ? 1.5 - : (args.newWidth > 800) ? 1.3 : 1; -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.Resize.On(args => +api.Resize.On(args => { - args.Settings.Display.Scale = args.NewWidth > 1300 + args.Settings.Display.Scale = args.NewWidth > 1300 ? 1.5 : (args.NewWidth > 800) ? 1.3 : 1; }); ``` - - ```kotlin val api = AlphaTabApi(...) api.resize.on { args -> - args.settings.display.scale = args.newWidth > 1300 - ? 1.5 + args.settings.display.scale = args.newWidth > 1300 + ? 1.5 : (args.newWidth > 800) ? 1.3 : 1; }); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/score.mdx b/docs/reference/api/score.mdx index 9f587bcb4..edb58133a 100644 --- a/docs/reference/api/score.mdx +++ b/docs/reference/api/score.mdx @@ -1,74 +1,68 @@ --- title: score -description: The score holding all information about the song being rendered +description: "The score holding all information about the song being rendered" sidebar_custom_props: + kind: property category: Properties - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets access to the underling `AlphaTab.Model.Score` that is currently being displayed. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The score holding all information about the song being rendered -## Types + + +
{"readonly"}{" "}{"score"}{":"}{" "}{"Score"}{" "}{"|"}{" "}{"null"}{";"}
+ + +
{"Score"}{"?"}{" "}{"Score"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"score"}{":"}{" "}{"Score"}{"?"}
+ + - - - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); updateScoreInfo(api.score); ``` - - - - -```js -updateScoreInfo($('#alphaTab').alphaTab('score')); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); UpdateScoreInfo(api.Score); ``` - - ```kotlin val api = AlphaTabApi(...) updateScoreInfo(api.score) ``` - - \ No newline at end of file + diff --git a/docs/reference/api/scoreloaded.mdx b/docs/reference/api/scoreloaded.mdx index 7d84cf18e..488456439 100644 --- a/docs/reference/api/scoreloaded.mdx +++ b/docs/reference/api/scoreloaded.mdx @@ -1,108 +1,74 @@ --- title: scoreLoaded -description: This event is fired whenever a new song is loaded +description: "This event is fired whenever a new song is loaded." sidebar_custom_props: + kind: event category: Events - Core since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - -## Description -This event is fired whenever a new song is loaded. It is fired after the transposition midi pitches from the settings were applied, but before any midi is generated or rendering is started. -This allows any modification of the score before further processing. - - +### Description +This event is fired whenever a new song is loaded. This event is fired whenever a new song is loaded or changing due to {"renderScore"} or {"renderTracks"} calls. +It is fired after the transposition midi pitches from the settings were applied, but before any midi is generated or rendering is started. +This allows any modification of the score before further processing. -## Types - - - - - - - -## Parameters + + +
{"scoreLoaded"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Score"}{">"}{";"}
+ + +
{"IEventEmitterOfT"}{"<"}{"Score"}{">"}{" "}{"ScoreLoaded"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"scoreLoaded"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"Score"}{">"}
+ + - - - The score that was loaded with applied transpositions. - - - The score that was loaded with applied transpositions. - - - The score that was loaded with applied transpositions. - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.scoreLoaded.on((score) => { updateSongInformationInUi(score); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.scoreLoaded', (e, score) => { - updateSongInformationInUi(score); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.scoreLoaded', (e) => { - updateSongInformationInUi(e.detail); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.ScoreLoaded.On(score => +api.ScoreLoaded.On(score => { UpdateSongInformationInUi(score); }); ``` - - ```kotlin val api = AlphaTabApi(...) api.scoreLoaded.on { score -> updateSongInformationInUi(score) } ``` - - \ No newline at end of file + diff --git a/docs/reference/api/scrolltocursor.mdx b/docs/reference/api/scrolltocursor.mdx new file mode 100644 index 000000000..5021da627 --- /dev/null +++ b/docs/reference/api/scrolltocursor.mdx @@ -0,0 +1,35 @@ +--- +title: scrollToCursor +description: "Initiates a scroll to the cursor." +sidebar_custom_props: + kind: method + category: Methods - Player + since: 1.2.3 +--- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + + + +### Description +Initiates a scroll to the cursor. + + + +
{"scrollToCursor"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"ScrollToCursor"}{"("}{")"}
+ + +
{"fun"}{" "}{"scrollToCursor"}{"("}{")"}{":"}{" "}{"Unit"}
+ + + diff --git a/docs/reference/api/setoutputdevice.mdx b/docs/reference/api/setoutputdevice.mdx index 01ded9392..78c1fac6d 100644 --- a/docs/reference/api/setoutputdevice.mdx +++ b/docs/reference/api/setoutputdevice.mdx @@ -1,64 +1,59 @@ --- title: setOutputDevice -description: Changes the output device which should be used for playing the audio. +description: "Changes the output device which should be used for playing the audio (player must be enabled)." sidebar_custom_props: + kind: method category: Methods - Player - since: 1.5.0 + since: 1.5.0 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Changes the output device which should be used for playing the audio (player must be enabled). - -Use [`enumerateOutputDevices`](./enumerateoutputdevices.mdx) to load the list of available devices. +### Description +Changes the output device which should be used for playing the audio (player must be enabled). Use {"enumerateOutputDevices"} to load the list of available devices. In the web version this functionality relies on experimental APIs and might not yet be available in all browsers. https://caniuse.com/mdn-api_audiocontext_sinkid -## Signatures - - - - - - + + +
{"setOutputDevice"}{"("}{"device"}{":"}{" "}{"ISynthOutputDevice"}{" "}{"|"}{" "}{"null"}{")"}{":"}{" "}{"Promise"}{"<"}{"void"}{">"}
+ + +
{"System.Threading.Task"}{"<"}{"void"}{">"}{" "}{"SetOutputDevice"}{"("}{"ISynthOutputDevice"}{"?"}{" "}{"device"}{")"}
+ + +
{"suspend"}{" "}{"fun"}{" "}{"setOutputDevice"}{"("}{"device"}{":"}{" "}{"ISynthOutputDevice"}{"?"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The output device to use, or null to switch to the default device. - - - The output device to use, or null to switch to the default device. - - + The output device to use, or null to switch to the default device. -### Returns -Returns an awaitable, which completes when the output device is changed. ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); const devices = await api.enumerateOutputDevices(); @@ -67,11 +62,9 @@ buildDeviceSelector(devices, async selectedDevice => { await api.setOutputDevice(selectedDevice); }); ``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); var devices = await api.EnumerateOutputDevices(); @@ -79,10 +72,8 @@ BuildDeviceSelector(devices, async selectedDevice => { await api.SetOutputDevice(selectedDevice); }); ``` - - ```kotlin fun init() = kotlinx.coroutines.runBlocking { val api = AlphaTabApi(...) @@ -94,8 +85,6 @@ fun init() = kotlinx.coroutines.runBlocking { } }); } - ``` - - \ No newline at end of file + diff --git a/docs/reference/api/settings.mdx b/docs/reference/api/settings.mdx index 84322551e..b2096c9bf 100644 --- a/docs/reference/api/settings.mdx +++ b/docs/reference/api/settings.mdx @@ -1,74 +1,68 @@ --- title: settings -description: The settings that are used for rendering the music notation +description: "The settings that are used for rendering the music notation." sidebar_custom_props: + kind: property category: Properties - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets access to the underling AlphaTab.Settings object that is currently used by AlphaTab. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The settings that are used for rendering the music notation. Gets access to the underling {"Settings"} object that is currently used by alphaTab. -## Types + + +
{"settings"}{":"}{" "}{"Settings"}{";"}
+ + +
{"Settings"}{" "}{"Settings"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"settings"}{":"}{" "}{"Settings"}
+ + - - - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); showSettingsModal(api.settings); ``` - - - - -```js -showSettingsModal($('#alphaTab').alphaTab('settings')); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); ShowSettingsDialog(api.Settings); ``` - - ```kotlin val api = AlphaTabApi(...) showSettingsDialog(api.settings) ``` - - \ No newline at end of file + diff --git a/docs/reference/api/soundfontload.mdx b/docs/reference/api/soundfontload.mdx index 227d54cde..8714d5ab9 100644 --- a/docs/reference/api/soundfontload.mdx +++ b/docs/reference/api/soundfontload.mdx @@ -1,51 +1,31 @@ --- title: soundFontLoad -description: This event is fired when the SoundFont is being loaded. +description: "This event is fired when the SoundFont is being loaded." sidebar_custom_props: + kind: event + javaScriptOnly: true category: Events - Player since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the SoundFont is being loaded and reports the progress accordingly. - - - -## Types +### Description +This event is fired when the SoundFont is being loaded. This event is fired when the SoundFont is being loaded and reports the progress accordingly. - - - +
{"soundFontLoad"}{":"}{" "}{"IEventEmitterOfT"}{"<"}{"ProgressEventArgs"}{">"}{";"}
-## Parameters - - - The information about the load progress of the file. - - - -## Examples - - - +## Example - JavaScript ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); @@ -53,24 +33,3 @@ api.soundFontLoad.on((e) => { updateProgress(e.loaded, e.total); }); ``` - - - - -```js -$('#alphaTab').on('alphaTab.soundFontLoad', (e, args) { - updateProgress(args.loaded, args.total); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.soundFontLoad', () => { - updateProgress(e.detail.loaded, e.detail.total); -}, false); -``` - - - \ No newline at end of file diff --git a/docs/reference/api/soundfontloaded.mdx b/docs/reference/api/soundfontloaded.mdx index 974a4ddfe..7e325c71c 100644 --- a/docs/reference/api/soundfontloaded.mdx +++ b/docs/reference/api/soundfontloaded.mdx @@ -1,84 +1,72 @@ --- title: soundFontLoaded -description: This event is fired when the SoundFont needed for playback was loaded. +description: "This event is fired when the SoundFont needed for playback was loaded." sidebar_custom_props: + kind: event category: Events - Player since: 0.9.4 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Description -This event is fired when the SoundFont needed for playback was loaded. - - - -## Types +### Description +This event is fired when the SoundFont needed for playback was loaded. - - - - + + +
{"soundFontLoaded"}{":"}{" "}{"IEventEmitter"}{";"}
+ + +
{"IEventEmitter"}{" "}{"SoundFontLoaded"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"soundFontLoaded"}{":"}{" "}{"IEventEmitter"}
+ + -## Parameters -none ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.soundFontLoaded.on(() => { hideSoundFontLoadingIndicator(); }); ``` - - - -```js -$('#alphaTab').on('alphaTab.soundFontLoaded', (e) => { - hideSoundFontLoadingIndicator(); -}); -``` - - - - -```js -document.querySelector('#alphaTab').addEventListener('alphaTab.soundFontLoaded', () => { - hideSoundFontLoadingIndicator(); -}, false); -``` - - - - + ```cs var api = new AlphaTabApi(...); -api.SoundFontLoaded.On(() => +api.SoundFontLoaded.On(() => { HideSoundFontLoadingIndicator(); }); ``` - - \ No newline at end of file + +```kotlin +val api = AlphaTabApi(...); +api.soundFontLoaded.on { + hideSoundFontLoadingIndicator(); +} +``` + + diff --git a/docs/reference/api/stop.mdx b/docs/reference/api/stop.mdx index b7de23c40..955737dc0 100644 --- a/docs/reference/api/stop.mdx +++ b/docs/reference/api/stop.mdx @@ -1,77 +1,65 @@ --- title: stop -description: Stops the playback of the current song, and moves the playback position back to the start. +description: "Stops the playback of the current song, and moves the playback position back to the start." sidebar_custom_props: + kind: method category: Methods - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Stops the playback of the current song, and moves the playback position back to the start. If a dedicated playback range is selected, -it will move the playback position to the start of this range, not the whole song. - -## Signatures +### Description +Stops the playback of the current song, and moves the playback position back to the start. If a dedicated playback range is selected, it will move the playback position to the start of this range, not the whole song. - - - - - - - -### Parameters -None + + +
{"stop"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"Stop"}{"("}{")"}
+ + +
{"fun"}{" "}{"stop"}{"("}{")"}{":"}{" "}{"Unit"}
+ + -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.stop(); ``` - - - - -```js -$('#alphaTab').alphaTab('stop'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Stop(); ``` - - ```kotlin val api = AlphaTabApi(...) api.stop() ``` - - \ No newline at end of file + diff --git a/docs/reference/api/tex.mdx b/docs/reference/api/tex.mdx index 85b8890ab..399b5b845 100644 --- a/docs/reference/api/tex.mdx +++ b/docs/reference/api/tex.mdx @@ -1,93 +1,75 @@ --- title: tex -description: Tells alphaTab to render the given alphaTex. +description: "Tells alphaTab to render the given alphaTex." sidebar_custom_props: + kind: method category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description +### Description Tells alphaTab to render the given alphaTex. -## Signatures - - - - - - - - - - + + +
{"tex"}{"("}{"tex"}{":"}{" "}{"string"}{","}{" "}{"tracks"}{"?"}{":"}{" "}{"number"}{"[]"}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"Tex"}{"("}{"string"}{" "}{"tex"}{","}{" "}{"IList"}{"<"}{"double"}{">"}{"?"}{" "}{"tracks"}{")"}
+ + +
{"fun"}{" "}{"tex"}{"("}{"tex"}{":"}{" "}{"String"}{","}{" "}{"tracks"}{":"}{" "}{"alphaTab.collections.DoubleList"}{"?"}{")"}{":"}{" "}{"Unit"}
+ + -### Parameters - - The alphaTex encoded string to load. - - - Which tracks to display. + + The alphaTex code to render. - - Which track to display. + + If set, the given tracks will be rendered, otherwise the first track only will be rendered. -### Returns -Nothing ## Examples - - -```js -const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); -api.tex("\title 'Test' . 3.3.4"); -``` - - - - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); -$('#alphaTab').alphaTab('tex', "\title 'Test' . 3.3.4"); +api.tex("\\title 'Test' . 3.3.4"); ``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); -api.Tex("\title 'Test' . 3.3.4"); +api.Tex("\\title 'Test' . 3.3.4"); ``` - - ```kotlin val api = AlphaTabApi(...) -api.tex("\title 'Test' . 3.3.4"); +api.tex("\\title 'Test' . 3.3.4"); ``` - - \ No newline at end of file + diff --git a/docs/reference/api/this.mdx b/docs/reference/api/this.mdx deleted file mode 100644 index a6db2068e..000000000 --- a/docs/reference/api/this.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: this -description: Returns the underlying API object. -sidebar_custom_props: - jQueryOnly: true - jQueryName: alphaTab('api') - category: Properties - Core - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -This jQuery specific function returns the underlying API object. - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; - - - -## Example - jQuery - -```js -const api = $('#alphaTab').alphaTab('api'); -api.render(); -``` \ No newline at end of file diff --git a/docs/reference/api/tickcache.mdx b/docs/reference/api/tickcache.mdx index f7ba267fd..2019c06c4 100644 --- a/docs/reference/api/tickcache.mdx +++ b/docs/reference/api/tickcache.mdx @@ -1,122 +1,75 @@ --- title: tickCache -description: The tick cache allowing lookup of midi ticks to beats. +description: "The tick cache allowing lookup of midi ticks to beats." sidebar_custom_props: + kind: property category: Properties - Player - since: 1.2.3 + since: 1.2.3 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -Gets the tick cache allowing lookup of midi ticks to beats. If the player is enabled, a midi file will be generated -for the loaded `alphaTab.model.Score` for later playback. During this generation this tick cache is filled with the -exact midi ticks when beats are played. - -The `MidiTickLookup.findBeat` method allows a lookup of the beat related to a given input midi tick. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The tick cache allowing lookup of midi ticks to beats. Gets the tick cache allowing lookup of midi ticks to beats. If the player is enabled, a midi file will be generated +for the loaded {"Score"} for later playback. During this generation this tick cache is filled with the +exact midi ticks when beats are played. -## Types - - - - - - +The {"findBeat"} method allows a lookup of the beat related to a given input midi tick. + + +
{"readonly"}{" "}{"tickCache"}{":"}{" "}{"MidiTickLookup"}{" "}{"|"}{" "}{"null"}{";"}
+ + +
{"MidiTickLookup"}{"?"}{" "}{"TickCache"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"tickCache"}{":"}{" "}{"MidiTickLookup"}{"?"}
+ + -## MidiTickLookup.findBeat Signatures - - - - Find the beat played at a given midi tick. - - - Find the beat played at a given midi tick. - - - Find the beat played at a given midi tick. - - - -## MidiTickLookup.findBeat Parameters - - - - The tracks indices in which to search the played beat for. - - - The tracks indices in which to search the played beat for. - - - The tracks indices in which to search the played beat for. - - - The midi tick for which the beat should be looked up. - - - The midi tick for which the beat should be looked up. - - - Used for optimized lookup during playback. By passing in a previous result lookup of the next one can be optimized using heuristics. (optional). - - - Used for optimized lookup during playback. By passing in a previous result lookup of the next one can be optimized using heuristics. (optional). - - - Used for optimized lookup during playback. By passing in a previous result lookup of the next one can be optimized using heuristics. (optional). - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); const lookupResult = api.tickCache.findBeat(new Set([0, 1]), 100); const currentBeat = lookupResult?.currentBeat; ``` - - - -Not available - - -```csharp + +```cs var api = new AlphaTabApi(...); var lookupResult = api.TickCache.FindBeat(new AlphaTab.Core.EcmaScript.Set(0, 1), 100); var currentBeat = lookupResult?.CurrentBeat; ``` - - -```csharp +```kotlin val api = AlphaTabApi(...) val lookupResult = api.tickCache.findBeat(alphaTab.core.ecmaScript.Set(0, 1), 100); val currentBeat = lookupResult?.CurrentBeat; ``` - - \ No newline at end of file + diff --git a/docs/reference/api/tickposition.mdx b/docs/reference/api/tickposition.mdx index d4fbd75b6..3e6f250ee 100644 --- a/docs/reference/api/tickposition.mdx +++ b/docs/reference/api/tickposition.mdx @@ -1,72 +1,68 @@ --- title: tickPosition -description: The position within the song in midi ticks +description: "The position within the song in midi ticks." sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets or sets the player position in midi ticks. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The position within the song in midi ticks. -## Types + + +
{"tickPosition"}{":"}{" "}{"number"}{";"}
+ + +
{"double"}{" "}{"TickPosition"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"tickPosition"}{":"}{" "}{"Double"}
+ + - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.tickPosition = 4000; ``` - - - - -```js -$('#alphaTab').alphaTab('tickPosition', 4000) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.TickPosition = 4000; ``` - - -```csharp +```kotlin val api = AlphaTabApi(...) api.tickPosition = 4000 ``` - - \ No newline at end of file + diff --git a/docs/reference/api/timeposition.mdx b/docs/reference/api/timeposition.mdx index b0984837e..c4aa66bea 100644 --- a/docs/reference/api/timeposition.mdx +++ b/docs/reference/api/timeposition.mdx @@ -1,72 +1,68 @@ --- title: timePosition -description: The position within the song in milliseconds +description: "The position within the song in milliseconds" sidebar_custom_props: + kind: property category: Properties - Player - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets or sets the player position in milliseconds. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The position within the song in milliseconds -## Types + + +
{"timePosition"}{":"}{" "}{"number"}{";"}
+ + +
{"double"}{" "}{"TimePosition"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}
+ + +
{"var"}{" "}{"timePosition"}{":"}{" "}{"Double"}
+ + - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.timePosition = 4000; ``` - - - - -```js -$('#alphaTab').alphaTab('timePosition', 4000) -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.TimePosition = 4000; ``` - - ```kotlin val api = AlphaTabApi(...) api.timePosition = 4000 ``` - - \ No newline at end of file + diff --git a/docs/reference/api/tracks.mdx b/docs/reference/api/tracks.mdx index 9fdce0378..e0ae57391 100644 --- a/docs/reference/api/tracks.mdx +++ b/docs/reference/api/tracks.mdx @@ -1,74 +1,68 @@ --- title: tracks -description: A list of the tracks that should be rendered based on the Score and TrackIndexes properties +description: "The list of the tracks that are currently rendered." sidebar_custom_props: + kind: property category: Properties - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Gets a list of the tracks that are currently being rendered. - import { PropertyDescription } from '@site/src/components/PropertyDescription'; +### Description +The list of the tracks that are currently rendered. -## Types + + +
{"readonly"}{" "}{"tracks"}{":"}{" "}{"Track"}{"[]"}{";"}
+ + +
{"IList"}{"<"}{"Track"}{">"}{" "}{"Tracks"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"tracks"}{":"}{" "}{"alphaTab.collections.List"}{"<"}{"Track"}{">"}
+ + - - - - - ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); -fillTrackSelector(api.tracks); +highlightCurrentTracksInTrackSelector(api.tracks); ``` - - - - -```js -fillTrackSelector($('#alphaTab').alphaTab('tracks')); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); -FillTrackSelector(api.Tracks); +HighlightCurrentTracksInTrackSelector(api.Tracks); ``` - - ```kotlin val api = AlphaTabApi(...) -fillTrackSelector(api.tracks) +highlightCurrentTracksInTrackSelector(api.tracks) ``` - - \ No newline at end of file + diff --git a/docs/reference/api/uifacade.mdx b/docs/reference/api/uifacade.mdx new file mode 100644 index 000000000..178ea7022 --- /dev/null +++ b/docs/reference/api/uifacade.mdx @@ -0,0 +1,36 @@ +--- +title: uiFacade +description: "Gets the UI facade to use for interacting with the user interface." +sidebar_custom_props: + kind: property + category: Properties - Core +--- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { PropertyDescription } from '@site/src/components/PropertyDescription'; + + + +### Description +Gets the UI facade to use for interacting with the user interface. + + + +
{"readonly"}{" "}{"uiFacade"}{":"}{" "}{"IUiFacade"}{"<"}{"TSettings"}{">"}{";"}
+ + +
{"IUiFacade"}{"<"}{"TSettings"}{">"}{" "}{"UiFacade"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"uiFacade"}{":"}{" "}{"IUiFacade"}{"<"}{"TSettings"}{">"}
+ + + diff --git a/docs/reference/api/updatesettings.mdx b/docs/reference/api/updatesettings.mdx index 06c79d60a..94f79a7dd 100644 --- a/docs/reference/api/updatesettings.mdx +++ b/docs/reference/api/updatesettings.mdx @@ -1,82 +1,69 @@ --- title: updateSettings -description: Applies any changes that were done to the settings object and informs the Renderer about any new values to consider. +description: "Applies any changes that were done to the settings object." sidebar_custom_props: + kind: method category: Methods - Core - since: 0.9.4 + since: 0.9.4 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Applies any changes that were done to the settings object and informs the Renderer about any new values to consider. +### Description +Applies any changes that were done to the settings object. It also informs the {"renderer"} about any new values to consider. By default alphaTab will not trigger any re-rendering or settings update just if the settings object itself was changed. This method must be called -to trigger an update of the settings in all components. Then a re-rendering can be initiated using the `Render()` method. - -## Signatures +to trigger an update of the settings in all components. Then a re-rendering can be initiated using the {"render"} method. - - - - - - - -### Parameters -None + + +
{"updateSettings"}{"("}{")"}{":"}{" "}{"void"}
+ + +
{"void"}{" "}{"UpdateSettings"}{"("}{")"}
+ + +
{"fun"}{" "}{"updateSettings"}{"("}{")"}{":"}{" "}{"Unit"}
+ + -### Returns -Nothing ## Examples - - + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab')); api.settings.display.scale = 2.0; api.updateSettings(); api.render(); ``` - - - - -```js -const at = $('#alphaTab'); -at.alphaTab('settings').display.scale = 2.0; -at.alphaTab('updateSettings'); -at.alphaTab('render'); -``` - - - -```csharp + +```cs var api = new AlphaTabApi(...); api.Settings.Display.Scale = 2.0; api.UpdateSettings(); api.Render() ``` - - ```kotlin val api = AlphaTabApi(...) @@ -84,6 +71,5 @@ api.settings.display.scale = 2.0 api.updateSettings() api.render() ``` - - \ No newline at end of file + diff --git a/docs/reference/scorerenderer.mdx b/docs/reference/scorerenderer.mdx deleted file mode 100644 index 617dd0e90..000000000 --- a/docs/reference/scorerenderer.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: ScoreRenderer ---- - -import { ReferenceTable } from '@site/src/components/ReferenceTable'; - -The `ScoreRenderer` is one of the low level APIs that can be used if no full alphaTab API object with UI interaction -can be used or is needed. It is used to render a given score into a visual music sheet. - -This page describes all methods, properties and events exposed by this class. - -import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; - - \ No newline at end of file diff --git a/docs/reference/scorerenderer/boundslookup.mdx b/docs/reference/scorerenderer/boundslookup.mdx deleted file mode 100644 index dec79aa12..000000000 --- a/docs/reference/scorerenderer/boundslookup.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: boundsLookup -description: The lookup which allows fast access to beats at a given position -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import { TypeTable, TypeRow } from '@site/src/components/TypeTable'; -import { BoundsLookupViewer } from '@site/src/components/BoundsLookupViewer'; - -## Description -After the rendering completed alphaTab exposes via this lookup the location of the individual -notation elements. The lookup provides fast access to the bars and beats at a given location. -If the [`IncludeNoteBounds`](/docs/reference/settings/core/includenotebounds) option was activated -also the location of the individual notes can be obtained. - - - -The property contains a `BoundsLookup` instance which follows a hierarchical structure that represents -the tree of rendered elements. - -The hierarchy is: `staffSystems > bars(1) > bars(2) > beats > notes` - -* `staffSystems` - Represent the bounds of the individual systems ("rows") where staves are contained. -* `bars(1)` - Represent the bounds of all bars for a particular master bar across all tracks. -* `bars(2)` - Represent the bounds of an individual bar of a track. The bounds on y-axis span the region of the staff and notes might exceed this bounds. -* `beats` - Represent the bounds of the individual beats within a track. The bounds on y-axis are equal to the bar bounds. -* `notes` - Represent the bounds of the individual note heads/numbers within a track. - -Each bounds hierarchy have a `visualBounds` and `realBounds`. - -* `visualBounds` - Represent the area covering all visually visible elements -* `realBounds` - Represents the actual bounds of the elements in this beat including whitespace areas. -* `noteHeadBounds` (only on `notes` level) - Represents the area of the note heads or number based on the staff - -You can check out the individual sizes and regions - -{` -\\track "Guitar 1" -12.2{v f} 14.2{v f}.4 :8 15.2 17.2 | -14.1.2 :8 17.2 15.1 14.1{h} 17.2 | -15.2{v d}.4 :16 17.2{h} 15.2 :8 14.2 14.1 17.1{b(0 4 4 0)}.4 | -15.1.8 :16 14.1{tu 3} 15.1{tu 3} 14.1{tu 3} :8 17.2 15.1 14.1 :16 12.1{tu 3} 14.1{tu 3} 12.1{tu 3} :8 15.2 14.2 | -12.2 14.3 12.3 15.2 :32 14.2{h} 15.2{h} 14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h} -\\track "Guitar 2" -3.3 -`} \ No newline at end of file diff --git a/docs/reference/scorerenderer/destroy.mdx b/docs/reference/scorerenderer/destroy.mdx deleted file mode 100644 index 2c2348312..000000000 --- a/docs/reference/scorerenderer/destroy.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: destroy -description: Destroys the renderer and all related components. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -This method destroys the full renderer and by this closes all potentially opened -contexts and shuts down any worker. - -If you dynamically create/destroy renderers it is recommended to always call this method -to ensure all resources are leaked. - -## Signatures - - - - - - - -### Parameters -None - -### Returns -Nothing \ No newline at end of file diff --git a/docs/reference/scorerenderer/error.mdx b/docs/reference/scorerenderer/error.mdx deleted file mode 100644 index 9cf7e9408..000000000 --- a/docs/reference/scorerenderer/error.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: error -description: This event is fired when an error within alphatab occurred. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This event is fired when an error within alphatab occurred. Use this event as global error handler to show errors -to end-users. Due to the asynchronous nature of alphaTab, no call to the API will directly throw an error if it fails. -Instead a signal to this error handlers will be sent. - - - -## Types - - - - - - - -## Parameters - - - - The object containing the error details. - - \ No newline at end of file diff --git a/docs/reference/scorerenderer/partiallayoutfinished.mdx b/docs/reference/scorerenderer/partiallayoutfinished.mdx deleted file mode 100644 index 423a7b5a8..000000000 --- a/docs/reference/scorerenderer/partiallayoutfinished.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: partialLayoutFinished -description: Occurs whenever a part of the whole music sheet is layed out. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 1.2.3 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import {RenderFinishedEventArgs} from '@site/src/types/RenderFinishedEventArgs'; - -## Description -AlphaTab does not render the whole music sheet into a single canvas but rather -splits it down into smaller chunks. This allows faster display of results to the user -and avoids issues related to browser restrictions (like maximum canvas sizes). - -This even is fired whenever one chunk of the music sheet was fully layed out. - - - -## Types - - - - - - - -## Parameters - - - - The object containing the information about the chunk. - - - The object containing the information about the chunk. - - - -## AlphaTab.Rendering.RenderFinishedEventArgs Properties - - \ No newline at end of file diff --git a/docs/reference/scorerenderer/partialrenderfinished.mdx b/docs/reference/scorerenderer/partialrenderfinished.mdx deleted file mode 100644 index 26ffc327a..000000000 --- a/docs/reference/scorerenderer/partialrenderfinished.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: partialRenderFinished -description: Occurs whenever a part of the whole music sheet is rendered and can be displayed. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import {RenderFinishedEventArgs} from '@site/src/types/RenderFinishedEventArgs'; - -## Description -AlphaTab does not render the whole music sheet into a single canvas but rather -splits it down into smaller chunks. This allows faster display of results to the user -and avoids issues related to browser restrictions (like maximum canvas sizes). - -This event is fired whenever one chunk of the music sheet is fully rendered. - -Since 1.2.3 the rendering of a chunk needs to be requested via the [`renderResult`](/docs/reference/scorerenderer/renderresult) method after -a chunk was advertised through the [`partialLayoutFinished`](/docs/reference/scorerenderer/partiallayoutfinished) event. - - - -## Parameters - - - - The object containing the information about the chunk. - - - The object containing the information about the chunk. - - - The object containing the information about the chunk. - - - -## AlphaTab.Rendering.RenderFinishedEventArgs Properties - - \ No newline at end of file diff --git a/docs/reference/scorerenderer/postrenderfinished.mdx b/docs/reference/scorerenderer/postrenderfinished.mdx deleted file mode 100644 index 095da6d87..000000000 --- a/docs/reference/scorerenderer/postrenderfinished.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: postRenderFinished -description: This event is fired when the rendering of the whole music sheet is finished, and all handlers of RenderFinished ran. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This event is fired when the rendering of the whole music sheet is finished, and all handlers of RenderFinished ran. When this -handlers are called, the whole rendering and display pipeline is completed. - - - -## Types - - - - - - - -## Parameters -None \ No newline at end of file diff --git a/docs/reference/scorerenderer/prerender.mdx b/docs/reference/scorerenderer/prerender.mdx deleted file mode 100644 index d5146de1c..000000000 --- a/docs/reference/scorerenderer/prerender.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: preRender -description: Occurs before the rendering of the tracks starts -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This event is fired when the rendering of the whole music sheet is starting. All -preparations are completed and the layout and render sequence is about to start. - - - -## Types - - - - - - - -## Parameters - - - - Whether the rendering is triggered from a resize. - - \ No newline at end of file diff --git a/docs/reference/scorerenderer/render.mdx b/docs/reference/scorerenderer/render.mdx deleted file mode 100644 index 7a084deb3..000000000 --- a/docs/reference/scorerenderer/render.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: render -description: Initiates a re-rendering of the current setup. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -Initiates a re-rendering of the current setup. - -## Signatures - - - - - - - -### Parameters -None - -### Returns -Nothing \ No newline at end of file diff --git a/docs/reference/scorerenderer/renderfinished.mdx b/docs/reference/scorerenderer/renderfinished.mdx deleted file mode 100644 index 6b4bfd210..000000000 --- a/docs/reference/scorerenderer/renderfinished.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: renderFinished -description: This event is fired when the rendering of the whole music sheet is finished. -sidebar_custom_props: - jQuery: false - dom: false - category: Events - since: 0.9.4 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { EventDescription } from '@site/src/components/EventDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; -import {RenderFinishedEventArgs} from '@site/src/types/RenderFinishedEventArgs'; - -## Description -This event is fired when the rendering of the whole music sheet is finished from the render engine side. There might be still tasks open for -the display component to visually display the rendered components when this event is notified. - - - -## Types - - - - - - - -## AlphaTab.Rendering.RenderFinishedEventArgs Properties - - \ No newline at end of file diff --git a/docs/reference/scorerenderer/renderresult.mdx b/docs/reference/scorerenderer/renderresult.mdx deleted file mode 100644 index 97fcc7683..000000000 --- a/docs/reference/scorerenderer/renderresult.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: renderResult -description: Requests the rendering of a chunk which was layed out before. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 1.2.3 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This method initiates the rendering of a layed out chunk advertised through [`partialLayoutFinished`](/docs/reference/scorerenderer/partiallayoutfinished). - -## Signatures - - - - - - - -### Parameters - - - - The ID of the result to be rendered. - - - - -### Returns -Nothing. The render result is computed asynchronously and can be obtained via events like `partialRenderFinished`. \ No newline at end of file diff --git a/docs/reference/scorerenderer/renderscore.mdx b/docs/reference/scorerenderer/renderscore.mdx deleted file mode 100644 index ca143bb74..000000000 --- a/docs/reference/scorerenderer/renderscore.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: renderScore -description: Initiates the rendering of the specified tracks of the given score. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This method initiates the rendering of the specified tracks of the given score. - -## Signatures - - - - - - - -### Parameters - - - - The score of which the tracks should be taken for rendering. - - - The indexes to the tracks which should be layed out and rendered. - - - - -### Returns -Nothing. The render result is computed asynchronously and can be obtained via events like `partialRenderFinished`. \ No newline at end of file diff --git a/docs/reference/scorerenderer/resizerender.mdx b/docs/reference/scorerenderer/resizerender.mdx deleted file mode 100644 index 1fb341487..000000000 --- a/docs/reference/scorerenderer/resizerender.mdx +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: resizeRender -description: Initiates a resize-optimized re-rendering of the score using the current settings. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -This method can be used if only re-fitting of the score into a new width should be done. -alphaTab internally keeps all the information about the music notation elements like -where they are placed and how they are connected. This is a rather expensive operation -but it is only required to be done once. - -In case the UI is resized, this method can be used to trigger a rearrangement of the existing elements -into the newly available space. - -## Signatures - - - - - - - -### Parameters -None - -### Returns -Nothing \ No newline at end of file diff --git a/docs/reference/scorerenderer/updatesettings.mdx b/docs/reference/scorerenderer/updatesettings.mdx deleted file mode 100644 index a1dfd5113..000000000 --- a/docs/reference/scorerenderer/updatesettings.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: updateSettings -description: Updates the settings to the given object. -sidebar_custom_props: - jQuery: false - dom: false - category: Methods - since: 0.9.6 ---- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -import {ParameterTable, ParameterRow} from '@site/src/components/ParameterTable'; - -## Description -This method updates the settings to the given object. On some platforms like JavaScript -the settings object will need to be passed on to the corresponding worker to be really updated. -It is recommended to make this call after updating any properties of the settings object to ensure -it is really passed on to all components. - -This method will not trigger automatically any re-rendering. - -## Signatures - - - - - - - -### Parameters - - - - The new settings object to use within alphaTab. - - - -### Returns -Nothing. \ No newline at end of file diff --git a/docs/reference/scorerenderer/width.mdx b/docs/reference/scorerenderer/width.mdx deleted file mode 100644 index 89386649b..000000000 --- a/docs/reference/scorerenderer/width.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: width -description: The width of the rendered score -sidebar_custom_props: - jQuery: false - dom: false - category: Properties - since: 0.9.6 ---- - -import { SinceBadge } from "@site/src/components/SinceBadge"; - - - -import { PropertyDescription } from "@site/src/components/PropertyDescription"; - -## Description - -For layouts that grow from top to bottom (like `page`), it is required to specify a width for the renderer. -The renderer will fit then the bars into this area for rendering. The alphaTab API object uses a link to the -graphical user interface via a `IUiFacade` to get the available width for rendering. When using the low-level APIs -this width must be specified manually. - -For layouts that grow from left to right the width and height are usually calculated automatically based on -the contents. - - diff --git a/docs/reference/settings.mdx b/docs/reference/settings.mdx index 9199a221f..7123647b2 100644 --- a/docs/reference/settings.mdx +++ b/docs/reference/settings.mdx @@ -30,6 +30,8 @@ when multiple different instances of alphaTab are running on the same site but t Individual settings can be specified on HTML elements. The following table contains all the properties as they can be set on the general settings object. +For take of simplicity the table lists the properties with the JavaScript naming convention, +but if properties are listed with `all` they are available on all platforms (e.g. in C# with PascalCase). import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; diff --git a/docs/reference/settings/core/enablelazyloading.mdx b/docs/reference/settings/core/enablelazyloading.mdx index 81cf0a1ca..9354df942 100644 --- a/docs/reference/settings/core/enablelazyloading.mdx +++ b/docs/reference/settings/core/enablelazyloading.mdx @@ -1,33 +1,31 @@ --- title: core.enableLazyLoading -description: Enables lazy loading of the rendered music sheet chunks. +description: "Enables lazy loading of the rendered music sheet chunks." sidebar_custom_props: javaScriptOnly: true jsOnParent: true category: Core - JavaScript Specific since: 0.9.6 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; + -## Description -AlphaTab renders the music sheet in smaller sub-chunks to have fast UI feedback. Not all of those sub-chunks are immediately +### Description +Enables lazy loading of the rendered music sheet chunks. AlphaTab renders the music sheet in smaller sub-chunks to have fast UI feedback. Not all of those sub-chunks are immediately appended to the DOM due to performance reasons. AlphaTab tries to detect which elements are visible on the screen, and only -appends those elements to the DOM. This reduces the load of the browser heavily but is not working for all layouts and use cases. -This setting set to false, ensures that all rendered items are instantly appended to the DOM. - - - -## Types - - - - +appends those elements to the DOM. This reduces the load of the browser heavily but is not working for all layouts and use cases. +This setting set to false, ensures that all rendered items are instantly appended to the DOM. -## Default Value +
{"enableLazyLoading"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
-`true` \ No newline at end of file diff --git a/docs/reference/settings/core/engine.mdx b/docs/reference/settings/core/engine.mdx index 488ba548a..f2e479305 100644 --- a/docs/reference/settings/core/engine.mdx +++ b/docs/reference/settings/core/engine.mdx @@ -1,48 +1,43 @@ --- title: core.engine -description: The engine which should be used to render the the tablature. +description: "The engine which should be used to render the the tablature." sidebar_custom_props: jsOnParent: true category: Core since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -AlphaTab can use various render engines to draw the music notation. The available render engines is specific to the platform. Please refer to the table below to find out which engines are available on which platform. - - -## Types - - - - `svg` - Outputs SVG strings.
- `html5` - Uses HTML5 canvas elements to render the music notation. - - - `skia` - Available on all .net platforms. Uses [Skia](https://skia.org/) for rendering
- `gdi` - Only available desktop .net. Uses [GDI+](https://docs.microsoft.com/en-us/dotnet/framework/winforms/advanced/graphics-and-drawing-in-windows-forms) for rendering
- `svg` - Available on all .net platforms. Outputs SVG strings. - - - `skia` - Uses [Skia](https://skia.org/) for rendering
- `android` - Uses [android.graphics.Canvas](https://developer.android.com/reference/android/graphics/Canvas) for rendering
- `svg` - Outputs SVG strings. - - - -## Default Value - -`default` which is mapped per platform: +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { SettingsHeader } from '@site/src/components/SettingsHeader'; + + + +### Description +The engine which should be used to render the the tablature. AlphaTab can use various render engines to draw the music notation. The available render engines is specific to the platform. Please refer to the table below to find out which engines are available on which platform. +- `default`- Platform specific default engine +- `html5`- Uses HTML5 canvas elements to render the music notation (browser only) +- `svg`- Outputs SVG strings (all platforms, default for web) +- `skia` - Uses [Skia](https://skia.org/) for rendering (all non-browser platforms via [alphaSkia](https://github.com/CoderLine/alphaSkia), default for non-web) +- `gdi` - Uses [GDI+](https://docs.microsoft.com/en-us/dotnet/framework/winforms/advanced/graphics-and-drawing-in-windows-forms) for rendering (only on .net) +- `android` - Uses [android.graphics.Canvas](https://developer.android.com/reference/android/graphics/Canvas) for rendering (only on Android) + + + +
{"engine"}{":"}{" "}{"string"}{" "}{"="}{" "}{"\"default\""}{";"}
+ + +
{"string"}{" "}{"Engine"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"\"default\""}
+ + +
{"var"}{" "}{"engine"}{":"}{" "}{"String"}{" "}{"="}{" "}{"\"default\""}
+ + - - - - - \ No newline at end of file diff --git a/docs/reference/settings/core/file.mdx b/docs/reference/settings/core/file.mdx index a303e17c5..b51b17ed8 100644 --- a/docs/reference/settings/core/file.mdx +++ b/docs/reference/settings/core/file.mdx @@ -1,33 +1,30 @@ --- title: core.file -description: The full URL to the input file to be loaded. +description: "The full URL to the input file to be loaded." sidebar_custom_props: javaScriptOnly: true jsOnParent: true category: Core - JavaScript Specific since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab can automatically load and render a file after initialization. This eliminates the need of manually calling +### Description +The full URL to the input file to be loaded. AlphaTab can automatically load and render a file after initialization. This eliminates the need of manually calling one of the load methods which are available. alphaTab will automatically initiate an `XMLHttpRequest` after initialization to load and display the provided url of this setting. Note that this setting is only interpreted once on initialization. - - -## Types - - - - - -## Default Value +
{"file"}{":"}{" "}{"string"}{" "}{"|"}{" "}{"null"}{" "}{"="}{" "}{"null"}{";"}
-`null` \ No newline at end of file diff --git a/docs/reference/settings/core/fontdirectory.mdx b/docs/reference/settings/core/fontdirectory.mdx index 6b17d3ff6..3d1e71b7d 100644 --- a/docs/reference/settings/core/fontdirectory.mdx +++ b/docs/reference/settings/core/fontdirectory.mdx @@ -1,34 +1,31 @@ --- title: core.fontDirectory -description: The full URL to the alphaTab font directory. +description: "The full URL to the alphaTab font directory." sidebar_custom_props: javaScriptOnly: true jsOnParent: true category: Core - JavaScript Specific since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -AlphaTab will generate some dynamic CSS that is needed for displaying the music symbols correctly. For this it needs to know -where the Web Font files of [Bravura](https://github.com/steinbergmedia/bravura) are. Normally alphaTab expects -them to be in a `Font` subfolder beside the script file. If this is not the case, this setting must be used to configure the path. -Alternatively also a global variable `ALPHATAB_FONT` can be set on the page before initializing alphaTab. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +The full URL to the alphaTab font directory. AlphaTab will generate some dynamic CSS that is needed for displaying the music symbols correctly. For this it needs to know +where the Web Font files of [Bravura](https://github.com/steinbergmedia/bravura) are. Normally alphaTab expects +them to be in a `font` subfolder beside the script file. If this is not the case, this setting must be used to configure the path. +Alternatively also a global variable `ALPHATAB_FONT` can be set on the page before initializing alphaTab. -## Default Value +
{"fontDirectory"}{":"}{" "}{"string"}{" "}{"|"}{" "}{"null"}{" "}{"="}{" "}{"\"${AlphaTabScriptFolder}/font/\""}{";"}
-`${AlphaTabScriptFolder}/font/` \ No newline at end of file diff --git a/docs/reference/settings/core/includenotebounds.mdx b/docs/reference/settings/core/includenotebounds.mdx index cf551aa6a..e7e0e8656 100644 --- a/docs/reference/settings/core/includenotebounds.mdx +++ b/docs/reference/settings/core/includenotebounds.mdx @@ -1,48 +1,53 @@ --- title: core.includeNoteBounds -description: Gets or sets whether in the BoundsLookup also the position and area of each individual note is provided. +description: "Whether in the {\"BoundsLookup\"} also the position and area of each individual note is provided." sidebar_custom_props: jsOnParent: true category: Core since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -AlphaTab collects the position of the rendered music notation elements during the rendering process. This way some level of interactivity can be provided like the feature that seeks to the corresponding position when clicking on a beat. -By default the position of the individual notes is not collected due to performance reasons. If access to note position information is needed, this setting can enable it. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Whether in the {"BoundsLookup"} also the position and area of each individual note is provided. AlphaTab collects the position of the rendered music notation elements during the rendering process. This way some level of interactivity can be provided like the feature that seeks to the corresponding position when clicking on a beat. +By default the position of the individual notes is not collected due to performance reasons. If access to note position information is needed, this setting can enable it. -## Default Value + + +
{"includeNoteBounds"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"IncludeNoteBounds"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"includeNoteBounds"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -`false` ## Example - JavaScript ```js -const settings = { - core: { - includeNoteBounds: true - } -}; -let api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'), settings); -api.renderFinished.on(function() { - var lookup = api.renderer.boundsLookup; - var x = 100; - var y = 100; - var beat = lookup.getBeatAtPos(x, y); - var note = lookup.getNoteAtPos(beat, x, y); +const settings = new alphaTab.model.Settings(); +settings.core.includeNoteBounds = true; +const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'), settings); +api.renderFinished.on(() => { + const lookup = api.renderer.boundsLookup; + const x = 100; + const y = 100; + const beat = lookup.getBeatAtPos(x, y); + const note = lookup.getNoteAtPos(beat, x, y); }); -``` \ No newline at end of file +``` diff --git a/docs/reference/settings/core/loglevel.mdx b/docs/reference/settings/core/loglevel.mdx index 5fac1a610..94e02f886 100644 --- a/docs/reference/settings/core/loglevel.mdx +++ b/docs/reference/settings/core/loglevel.mdx @@ -1,63 +1,37 @@ --- title: core.logLevel -description: The log level to use within alphaTab. +description: "The log level to use within alphaTab" sidebar_custom_props: jsOnParent: true category: Core since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description -AlphaTab internally does quite a bit of logging for debugging and informational purposes. The log level of alphaTab can be controlled via this setting. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - `None` - No logging
- `Debug` - Debug level (internal details are displayed)
- `Info` - Info level (only important details are shown)
- `Warning`
- `Error` - - - `none`
- `debug`
- `info`
- `warning`
- `error` - - - `0` - None
- `1` - Debug
- `2` - Info
- `3` - Warning
- `4` - Error - - - `None`
- `Debug`
- `Info`
- `Warning`
- `Error` - - - `None`
- `Debug`
- `Info`
- `Warning`
- `Error` - - +### Description +The log level to use within alphaTab AlphaTab internally does quite a bit of logging for debugging and informational purposes. The log level of alphaTab can be controlled via this setting. -## Default Value + + +
{"logLevel"}{":"}{" "}{"LogLevel"}{" "}{"="}{" "}{"LogLevel.Info"}{";"}
+ + +
{"LogLevel"}{" "}{"LogLevel"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"LogLevel.Info"}
+ + +
{"var"}{" "}{"logLevel"}{":"}{" "}{"LogLevel"}{" "}{"="}{" "}{"LogLevel.Info"}
+ + -`Info` \ No newline at end of file diff --git a/docs/reference/settings/core/scriptfile.mdx b/docs/reference/settings/core/scriptfile.mdx index ad74e7132..0f7735eda 100644 --- a/docs/reference/settings/core/scriptfile.mdx +++ b/docs/reference/settings/core/scriptfile.mdx @@ -1,33 +1,32 @@ --- title: core.scriptFile -description: The full URL to the alphaTab JavaScript file. +description: "The full URL to the alphaTab JavaScript file." sidebar_custom_props: javaScriptOnly: true jsOnParent: true category: Core - JavaScript Specific since: 0.9.6 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; + -## Description -AlphaTab needs to know the full URL to the script file it is contained in to launch the web workers. AlphaTab will do its best to auto-detect +### Description +The full URL to the alphaTab JavaScript file. AlphaTab needs to know the full URL to the script file it is contained in to launch the web workers. AlphaTab will do its best to auto-detect this path but in case it fails, this setting can be used to explicitly define it. Altenatively also a global variable `ALPHATAB_ROOT` can -be defined before initializing. Please be aware that bundling alphaTab together with other scripts might cause errors +be defined before initializing. Please be aware that bundling alphaTab together with other scripts might cause errors in case those scripts are not suitable for web workers. e.g. if there is a script bundled together with alphaTab that accesses the DOM, -this will cause an error when alphaTab starts this script as worker. - - - -## Types +this will cause an error when alphaTab starts this script as worker. - - - +
{"scriptFile"}{":"}{" "}{"string"}{" "}{"|"}{" "}{"null"}{" "}{"="}{" "}{"Absolute url to JavaScript file containing alphaTab. (auto detected)"}{";"}
-## Default Value -Absolute url to JavaScript file containing alphaTab. (auto detected) \ No newline at end of file diff --git a/docs/reference/settings/core/tex.mdx b/docs/reference/settings/core/tex.mdx index cfebe94a1..3725ce901 100644 --- a/docs/reference/settings/core/tex.mdx +++ b/docs/reference/settings/core/tex.mdx @@ -1,39 +1,38 @@ --- title: core.tex -description: Whether the contents of the DOM element should be loaded as alphaTex. +description: "Whether the contents of the DOM element should be loaded as alphaTex." sidebar_custom_props: javaScriptOnly: true jsOnParent: true category: Core - JavaScript Specific since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting allows you to fill alphaTex code into the DOM element and make alphaTab automatically +### Description +Whether the contents of the DOM element should be loaded as alphaTex. This setting allows you to fill alphaTex code into the DOM element and make alphaTab automatically load it when initializing. Note that this setting is only interpreted once on initialization. +
{"tex"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +## Example - JavaScript + ```html -
\title "Simple alphaTex init" . 3.3*4
+
\title "Simple alphaTex init" . 3.3*4
``` - - - -## Types - - - - - -## Default Value - -`false` \ No newline at end of file diff --git a/docs/reference/settings/core/tracks.mdx b/docs/reference/settings/core/tracks.mdx index a499bd968..9ad34d027 100644 --- a/docs/reference/settings/core/tracks.mdx +++ b/docs/reference/settings/core/tracks.mdx @@ -1,41 +1,29 @@ --- title: core.tracks -description: The tracks to display for the initally loaded file. +description: "The tracks to display for the initally loaded file." sidebar_custom_props: javaScriptOnly: true jsOnParent: true category: Core - JavaScript Specific since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting can be used in combinition with the `file` or `tex` option. It controls which of the tracks +### Description +The tracks to display for the initally loaded file. This setting can be used in combinition with the {"file"} or {"tex"} option. It controls which of the tracks of the initially loaded file should be displayed. - - -## Types - - - - If the `all` string is provided, all tracks of the song will be displayed. - - - If a single number is provided, the value represents the 0-based index of the track to display. - - - If a number array is provided, the values represent the 0-based indexes of the tracks to display. - - - - -## Default Value +
{"tracks"}{":"}{" "}{"number"}{" "}{"|"}{" "}{"number"}{"[]"}{" "}{"|"}{" "}{"'all'"}{" "}{"="}{" "}{"null"}{";"}
-`null` \ No newline at end of file diff --git a/docs/reference/settings/core/useworkers.mdx b/docs/reference/settings/core/useworkers.mdx index dfe9a4af8..5e646ba76 100644 --- a/docs/reference/settings/core/useworkers.mdx +++ b/docs/reference/settings/core/useworkers.mdx @@ -1,27 +1,38 @@ --- title: core.useWorkers -description: Whether the rendering should be done in a worker if possible. +description: "Whether the rendering should be done in a worker if possible." sidebar_custom_props: jsOnParent: true category: Core since: 0.9.6 --- -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -## Description -AlphaTab normally tries to render the music sheet asynchronously in a worker. This reduces the load on the UI side and avoids hanging. However sometimes it might be more desirable to have -a synchronous rendering behavior. This setting can be set to false to synchronously render the music sheet on the UI side. - - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Whether the rendering should be done in a worker if possible. AlphaTab normally tries to render the music sheet asynchronously in a worker. This reduces the load on the UI side and avoids hanging. However sometimes it might be more desirable to have +a synchronous rendering behavior. This setting can be set to false to synchronously render the music sheet on the UI side. -## Default Value + + +
{"useWorkers"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"UseWorkers"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"useWorkers"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/display/_resources.mdx b/docs/reference/settings/display/_resources.mdx new file mode 100644 index 000000000..7a93d922f --- /dev/null +++ b/docs/reference/settings/display/_resources.mdx @@ -0,0 +1,7 @@ + +## [RenderingResources](/docs/reference/types/renderingresources/) +Following resources exist for adjusting the style. + +import ResourceDocs from '@site/docs/reference/types/renderingresources/index.mdx' + + \ No newline at end of file diff --git a/docs/reference/settings/display/accoladebarpaddingright.mdx b/docs/reference/settings/display/accoladebarpaddingright.mdx index 11d95800a..d62999176 100644 --- a/docs/reference/settings/display/accoladebarpaddingright.mdx +++ b/docs/reference/settings/display/accoladebarpaddingright.mdx @@ -1,31 +1,37 @@ --- title: display.accoladeBarPaddingRight -description: The padding between the accolade bar and the start of the bar itself. +description: "The padding between the accolade bar and the start of the bar itself." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The padding between the accolade bar and the start of the bar itself. - - -## Types - - - - - - -## Default Value + + +
{"accoladeBarPaddingRight"}{":"}{" "}{"number"}{" "}{"="}{" "}{"3"}{";"}
+ + +
{"double"}{" "}{"AccoladeBarPaddingRight"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"3"}
+ + +
{"var"}{" "}{"accoladeBarPaddingRight"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"3"}
+ + -`3` \ No newline at end of file diff --git a/docs/reference/settings/display/barcount.mdx b/docs/reference/settings/display/barcount.mdx index 967a4787f..e85cbc72d 100644 --- a/docs/reference/settings/display/barcount.mdx +++ b/docs/reference/settings/display/barcount.mdx @@ -1,32 +1,39 @@ --- title: display.barCount -description: The total number of bars that should be rendered from the song. +description: "The total number of bars that should be rendered from the song. (-1 for all bars)" sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting sets the number of bars that should be rendered from the overall song. This setting can be used to +### Description +The total number of bars that should be rendered from the song. (-1 for all bars) This setting sets the number of bars that should be rendered from the overall song. This setting can be used to achieve a paging system or to only show partial bars of the same file. By this a tutorial alike display can be achieved that explains various parts of the song. [Demo](/docs/showcase/layouts) - - -## Types - - - - - -## Default Value + + +
{"barCount"}{":"}{" "}{"number"}{" "}{"="}{" "}{"-1"}{";"}
+ + +
{"double"}{" "}{"BarCount"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"-1"}
+ + +
{"var"}{" "}{"barCount"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"-1"}
+ + -`-1` - All bars from start \ No newline at end of file diff --git a/docs/reference/settings/display/barcountperpartial.mdx b/docs/reference/settings/display/barcountperpartial.mdx index 4a556e752..da3d8052b 100644 --- a/docs/reference/settings/display/barcountperpartial.mdx +++ b/docs/reference/settings/display/barcountperpartial.mdx @@ -1,32 +1,39 @@ --- title: display.barCountPerPartial -description: The number of bars that should be placed within one partial render. +description: "The number of bars that should be placed within one partial render." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab renders the whole music sheet in smaller chunks named "partials". This is to reduce the risk of +### Description +The number of bars that should be placed within one partial render. AlphaTab renders the whole music sheet in smaller chunks named "partials". This is to reduce the risk of encountering browser performance restrictions and it gives faster visual feedback to the user. This -setting controls how many bars are placed within such a partial. - - - -## Types - - - - - -## Default Value +setting controls how many bars are placed within such a partial. + + + +
{"barCountPerPartial"}{":"}{" "}{"number"}{" "}{"="}{" "}{"10"}{";"}
+ + +
{"double"}{" "}{"BarCountPerPartial"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"10"}
+ + +
{"var"}{" "}{"barCountPerPartial"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"10"}
+ + -`10` \ No newline at end of file diff --git a/docs/reference/settings/display/barsperrow.mdx b/docs/reference/settings/display/barsperrow.mdx index fef857952..dec3dbe6e 100644 --- a/docs/reference/settings/display/barsperrow.mdx +++ b/docs/reference/settings/display/barsperrow.mdx @@ -1,31 +1,38 @@ --- title: display.barsPerRow -description: Limit the displayed bars per row. +description: "Limit the displayed bars per system (row). (-1 for automatic mode)" sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -This setting sets the number of bars that should be put into one row during layouting. This setting is only respected -when using the layoutMode `page` where bars are aligned in rows. [Demo](/docs/showcase/layouts#page-layout-5-bars-per-row) +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Limit the displayed bars per system (row). (-1 for automatic mode) This setting sets the number of bars that should be put into one row during layouting. This setting is only respected +when using the {"Page"} where bars are aligned in systems. [Demo](/docs/showcase/layouts#page-layout-5-bars-per-row). -## Default Value + + +
{"barsPerRow"}{":"}{" "}{"number"}{" "}{"="}{" "}{"-1"}{";"}
+ + +
{"double"}{" "}{"BarsPerRow"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"-1"}
+ + +
{"var"}{" "}{"barsPerRow"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"-1"}
+ + -`-1` - automatic \ No newline at end of file diff --git a/docs/reference/settings/display/effectstaffpaddingbottom.mdx b/docs/reference/settings/display/effectstaffpaddingbottom.mdx index a11a25c18..fc9577e49 100644 --- a/docs/reference/settings/display/effectstaffpaddingbottom.mdx +++ b/docs/reference/settings/display/effectstaffpaddingbottom.mdx @@ -1,31 +1,37 @@ --- title: display.effectStaffPaddingBottom -description: The bottom padding applied to effect annotation staffs. +description: "The bottom padding applied to effect annotation staffs." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The bottom padding applied to effect annotation staffs. - - -## Types - - - - - - -## Default Value + + +
{"effectStaffPaddingBottom"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"EffectStaffPaddingBottom"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"effectStaffPaddingBottom"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0` \ No newline at end of file diff --git a/docs/reference/settings/display/effectstaffpaddingtop.mdx b/docs/reference/settings/display/effectstaffpaddingtop.mdx index 7574f040f..0e393d293 100644 --- a/docs/reference/settings/display/effectstaffpaddingtop.mdx +++ b/docs/reference/settings/display/effectstaffpaddingtop.mdx @@ -1,31 +1,37 @@ --- title: display.effectStaffPaddingTop -description: The top padding applied to effect annotation staffs. +description: "The top padding applied to effect annotation staffs." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The top padding applied to effect annotation staffs. - - -## Types - - - - - - -## Default Value + + +
{"effectStaffPaddingTop"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"EffectStaffPaddingTop"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"effectStaffPaddingTop"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0` \ No newline at end of file diff --git a/docs/reference/settings/display/firststaffpaddingleft.mdx b/docs/reference/settings/display/firststaffpaddingleft.mdx index bc67a9b9f..5f96b36e6 100644 --- a/docs/reference/settings/display/firststaffpaddingleft.mdx +++ b/docs/reference/settings/display/firststaffpaddingleft.mdx @@ -1,31 +1,37 @@ --- title: display.firstStaffPaddingLeft -description: The left padding applied between the left line and the first glyph in the first staff in a system. +description: "The left padding applied between the left line and the first glyph in the first staff in a system." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The left padding applied between the left line and the first glyph in the first staff in a system. - - -## Types - - - - - - -## Default Value + + +
{"firstStaffPaddingLeft"}{":"}{" "}{"number"}{" "}{"="}{" "}{"6"}{";"}
+ + +
{"double"}{" "}{"FirstStaffPaddingLeft"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"6"}
+ + +
{"var"}{" "}{"firstStaffPaddingLeft"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"6"}
+ + -`6` \ No newline at end of file diff --git a/docs/reference/settings/display/firstsystempaddingtop.mdx b/docs/reference/settings/display/firstsystempaddingtop.mdx index 3316f4f1b..617656cd3 100644 --- a/docs/reference/settings/display/firstsystempaddingtop.mdx +++ b/docs/reference/settings/display/firstsystempaddingtop.mdx @@ -1,31 +1,37 @@ --- title: display.firstSystemPaddingTop -description: The top padding applied to first system +description: "The top padding applied to first system." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -The top padding applied to the first system. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - - +### Description +The top padding applied to first system. -## Default Value + + +
{"firstSystemPaddingTop"}{":"}{" "}{"number"}{" "}{"="}{" "}{"5"}{";"}
+ + +
{"double"}{" "}{"FirstSystemPaddingTop"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"5"}
+ + +
{"var"}{" "}{"firstSystemPaddingTop"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"5"}
+ + -`5` \ No newline at end of file diff --git a/docs/reference/settings/display/justifylastsystem.mdx b/docs/reference/settings/display/justifylastsystem.mdx index 0415c846e..ff5653a9c 100644 --- a/docs/reference/settings/display/justifylastsystem.mdx +++ b/docs/reference/settings/display/justifylastsystem.mdx @@ -1,36 +1,41 @@ --- title: display.justifyLastSystem -description: Whether to justify also the last system in page layouts. +description: "Whether to justify also the last system in page layouts." sidebar_custom_props: jsOnParent: true category: Display - since: 1.3.0-alpha.720 + since: 1.3.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -## Description +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -Setting this option to `true` tells alphaTab to also justify the last system (row) like it -already does for the systems which are full. + +### Description +Whether to justify also the last system in page layouts. Setting this option to `true` tells alphaTab to also justify the last system (row) like it +already does for the systems which are full. | Justification Disabled | Justification Enabled | |--------------------------------------------------------------|-------------------------------------------------------| | ![Disabled](/img/reference/property/justify-last-system-false.png) | ![Enabled](/img/reference/property/justify-last-system-true.png) | - - -## Types - - - - - - -## Default Value + + +
{"justifyLastSystem"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"JustifyLastSystem"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"justifyLastSystem"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -`false` \ No newline at end of file diff --git a/docs/reference/settings/display/lastsystempaddingbottom.mdx b/docs/reference/settings/display/lastsystempaddingbottom.mdx index c7fe584ea..93f148dd2 100644 --- a/docs/reference/settings/display/lastsystempaddingbottom.mdx +++ b/docs/reference/settings/display/lastsystempaddingbottom.mdx @@ -1,31 +1,37 @@ --- title: display.lastSystemPaddingBottom -description: The bottom padding applied to the last system. +description: "The bottom padding applied to the last system." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The bottom padding applied to the last system. - - -## Types - - - - - - -## Default Value + + +
{"lastSystemPaddingBottom"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"LastSystemPaddingBottom"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"lastSystemPaddingBottom"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0` \ No newline at end of file diff --git a/docs/reference/settings/display/layoutmode.mdx b/docs/reference/settings/display/layoutmode.mdx index a215e7a44..d9a8d75e2 100644 --- a/docs/reference/settings/display/layoutmode.mdx +++ b/docs/reference/settings/display/layoutmode.mdx @@ -1,49 +1,37 @@ --- title: display.layoutMode -description: The layouting mode used to arrange the the notation. +description: "The layouting mode used to arrange the the notation." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -AlphaTab has various layout engines that arrange the rendered bars differently. This setting controls which layout mode is used. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - `Page` - The bars are aligned in a [page-style fashion](/docs/showcase/layouts#page-layout)
- `Horizontal` - The bars are aligned in a [left-to-right](/docs/showcase/layouts#horizontal-layout) - - - `page`
- `horizontal` - - - `0` - Page
- `1` - Horizontal - - - `Page`
- `Horizontal` - - - `Page`
- `Horizontal` - - +### Description +The layouting mode used to arrange the the notation. AlphaTab has various layout engines that arrange the rendered bars differently. This setting controls which layout mode is used. -## Default Value + + +
{"layoutMode"}{":"}{" "}{"LayoutMode"}{" "}{"="}{" "}{"LayoutMode.Page"}{";"}
+ + +
{"LayoutMode"}{" "}{"LayoutMode"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"LayoutMode.Page"}
+ + +
{"var"}{" "}{"layoutMode"}{":"}{" "}{"LayoutMode"}{" "}{"="}{" "}{"LayoutMode.Page"}
+ + -`page` \ No newline at end of file diff --git a/docs/reference/settings/display/notationstaffpaddingbottom.mdx b/docs/reference/settings/display/notationstaffpaddingbottom.mdx index 05e441a08..43cf8de60 100644 --- a/docs/reference/settings/display/notationstaffpaddingbottom.mdx +++ b/docs/reference/settings/display/notationstaffpaddingbottom.mdx @@ -1,31 +1,37 @@ --- title: display.notationStaffPaddingBottom -description: The bottom padding applied to main notation staffs. +description: "The bottom padding applied to main notation staves (standard, tabs, numbered, slash)." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -The bottom padding applied to main notation staffs (standard, tabs, numbered, slash). +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - - +### Description +The bottom padding applied to main notation staves (standard, tabs, numbered, slash). -## Default Value + + +
{"notationStaffPaddingBottom"}{":"}{" "}{"number"}{" "}{"="}{" "}{"5"}{";"}
+ + +
{"double"}{" "}{"NotationStaffPaddingBottom"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"5"}
+ + +
{"var"}{" "}{"notationStaffPaddingBottom"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"5"}
+ + -`5` \ No newline at end of file diff --git a/docs/reference/settings/display/notationstaffpaddingtop.mdx b/docs/reference/settings/display/notationstaffpaddingtop.mdx index 6bfbf6e42..d3a648124 100644 --- a/docs/reference/settings/display/notationstaffpaddingtop.mdx +++ b/docs/reference/settings/display/notationstaffpaddingtop.mdx @@ -1,31 +1,37 @@ --- title: display.notationStaffPaddingTop -description: The top padding applied to main notation staffs. +description: "The bottom padding applied to main notation staves (standard, tabs, numbered, slash)." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -The top padding applied to main notation staffs (standard, tabs, numbered, slash). +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - - +### Description +The bottom padding applied to main notation staves (standard, tabs, numbered, slash). -## Default Value + + +
{"notationStaffPaddingTop"}{":"}{" "}{"number"}{" "}{"="}{" "}{"5"}{";"}
+ + +
{"double"}{" "}{"NotationStaffPaddingTop"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"5"}
+ + +
{"var"}{" "}{"notationStaffPaddingTop"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"5"}
+ + -`5` \ No newline at end of file diff --git a/docs/reference/settings/display/padding.mdx b/docs/reference/settings/display/padding.mdx index baef508c2..d95ae9774 100644 --- a/docs/reference/settings/display/padding.mdx +++ b/docs/reference/settings/display/padding.mdx @@ -1,36 +1,40 @@ --- title: display.padding -description: Adjusts the padding between the music notation and the border +description: "Adjusts the padding between the music notation and the border." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -AlphaTab by default has a padding between the border of the control and the start of the content. -This setting controls this padding between border and content. - - -## Types - - - - `[left, top, right, bottom]` - - - `[left-right, top-bottom]` - - - -## Default Value +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { SettingsHeader } from '@site/src/components/SettingsHeader'; + + + +### Description +Adjusts the padding between the music notation and the border. Adjusts the padding between the music notation and the outer border of the container element. +The array is either: +* 2 elements: `[left-right, top-bottom]` +* 4 elements: ``[left, top, right, bottom]`` + + + +
{"padding"}{":"}{" "}{"number"}{"[]"}{" "}{"="}{" "}{"[35, 35]"}{";"}
+ + +
{"IList"}{"<"}{"double"}{">"}{" "}{"Padding"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"[35, 35]"}
+ + +
{"var"}{" "}{"padding"}{":"}{" "}{"alphaTab.collections.DoubleList"}{" "}{"="}{" "}{"[35, 35]"}
+ + -`[35, 35]` \ No newline at end of file diff --git a/docs/reference/settings/display/resources.mdx b/docs/reference/settings/display/resources.mdx index 1c2a80d6f..2ba998fa5 100644 --- a/docs/reference/settings/display/resources.mdx +++ b/docs/reference/settings/display/resources.mdx @@ -1,226 +1,71 @@ --- title: display.resources -description: Allows adjusting of the used fonts and colors for rendering. +description: "Allows adjusting of the used fonts and colors for rendering." sidebar_custom_props: domWildcard: true jsOnParent: true category: Display since: 0.9.6 --- + +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { CodeBadge } from '@site/src/components/CodeBadge'; + + +### Description +Allows adjusting of the used fonts and colors for rendering. AlphaTab allows configuring the colors and fonts used for rendering via the rendering resources settings. Please note that as of today +this is the primary way of changing the way how alphaTab styles elements. CSS styling in the browser cannot be guaranteed to work due to its flexibility. -export var Resources = { - colors: [ - { - name: 'barNumberColor', - defaultValue: 'rgb(200, 0, 0)', - description: 'The color to use for displaying the bar numbers above the music sheet.', - }, - { - name: 'barSeparatorColor', - defaultValue: 'rgb(34, 34, 17)', - description: 'The color to use for rendering bar separators, the accolade and repeat signs.', - }, - { - name: 'mainGlyphColor', - defaultValue: 'rgb(0, 0, 0)', - description: 'The color to use for music notation elements of the primary voice.', - }, - { - name: 'scoreInfoColor', - defaultValue: 'rgb(0, 0, 0)', - description: 'The color to use for displaying the song information above the music sheets.', - }, - { - name: 'secondaryGlyphColor', - defaultValue: 'rgb(0,0,0,0.4)', - description: 'The color to use for music notation elements of the secondary voices.', - }, - { - name: 'staffLineColor', - defaultValue: 'rgb(165, 165, 165)', - description: 'The color to use for rendering the lines of staves.', - }, - ], - fonts: [ - { - name: 'barNumberFont', - defaultValue: '11px Arial, sans-serif', - description: 'The font to use for displaying the bar numbers above the music sheet.', - }, - { - name: 'copyrightFont', - defaultValue: 'bold 12px Arial, sans-serif', - description: 'The font to use for displaying the songs copyright information in the header of the music sheet.,', - }, - { - name: 'effectFont', - defaultValue: 'italic 12px Georgia, serif', - description: 'The font to use for displaying certain effect related elements in the music sheet.', - }, - { - name: 'fingeringFont', - defaultValue: '14px Georgia, serif', - description: 'The font to use for displaying finger information in the music sheet.', - }, - { - name: 'fretboardNumberFont', - defaultValue: '11px Arial, sans-serif', - description: 'The font to use for displaying the fretboard numbers in chord diagrams.', - }, - { - name: 'graceFont', - defaultValue: '11px Arial, sans-serif', - description: 'The font to use for grace notation related texts in the music sheet.', - }, - { - name: 'markerFont', - defaultValue: 'bold 14px Georgia, serif', - description: 'The font to use for section marker labels shown above the music sheet.', - }, - { - name: 'subTitleFont', - defaultValue: '20px Georgia, serif', - description: 'The font to use for displaying the songs subtitle in the header of the music sheet.', - }, - { - name: 'tablatureFont', - defaultValue: '13px Arial, sans-serif', - description: 'The font to use for displaying the guitar tablature numbers in the music sheet.', - }, - { - name: 'titleFont', - defaultValue: '32px Georgia, serif', - description: 'The font to use for displaying the songs title in the header of the music sheet.', - }, - { - name: 'wordsFont', - defaultValue: '15px Arial, sans-serif', - description: 'The font to use for displaying the lyrics information in the header of the music sheet.', - }, - { - name: 'timerFont', - defaultValue: '12px Georgia, serif', - description: 'The font to use for displaying beat time information in the music sheet.', - since: "1.4.0" - }, - { - name: 'directionsFont', - defaultValue: '14px Georgia, serif', - description: 'The font to use for displaying the directions texts.', - since: "1.4.0" - }, - { - name: 'numberedNotationFont', - defaultValue: '16px Arial, sans-serif', - description: 'The font to use for displaying the numbered music notation in the music sheet.', - since: "1.4.0" - }, - { - name: 'numberedNotationGraceFont', - defaultValue: '14px Arial, sans-serif', - description: 'The font to use for displaying the grace notes in numbered music notation in the music sheet.', - since: "1.4.0" - }, - { - name: 'inlineFingeringFont', - defaultValue: '12px Georgia, serif', - description: 'The font to use for displaying finger information when inline into the music sheet.', - since: "1.4.0" - } - ] -}; - -export function toPascalCase(v) { - return v.substr(0, 1).toUpperCase() + v.substr(1); -} - -export function ResourceRow({resource, type}) { - return ( - - -
-
-
- - - - - - - {resource.defaultValue} - - {resource.since && } - {resource.description} - - - ); -} - -export function ResourceTable() { - const colors = Resources.colors.map(c => ); - const fonts = Resources.fonts.map(f => ); - return ( - - - - - - - - - - - {colors} - {fonts} - -
ResourceTypeDefaultSummary
- ); -} - -## Description - -AlphaTab allows configuring the colors and fonts used for rendering via the rendering resources settings. Please note that as of today -this is the primary way of changing the way how alphaTab styles elements. CSS styling in the browser cannot be guaranteed to work due to its flexibility. - - -Due to space reasons in the following table the common prefix of the settings are removed. Please refer to these examples to eliminate confusion on the usage: + +Due to space reasons in the following table the common prefix of the settings are removed. Please refer to these examples to eliminate confusion on the usage: | Platform | Prefix | Example Usage | |------------|---------------------------|--------------------------------------------------------------------| | JavaScript | `display.resources.` | `settings.display.resources.wordsFont = ...` | | JSON | `display.resources.` | `var settings = { display: { resources: { wordsFonts: '...'} } };` | | JSON | `resources.` | `var settings = { resources: { wordsFonts: '...'} };` | -| HTML | `data-display-resources-` | `
` | -| HTML | `data-resources-` | `
` | | .net | `Display.Resources.` | `settings.Display.Resources.WordsFonts = ...` | | Android | `display.resources.` | `settings.display.resources.wordsFonts = ...` | - - -## Resources -Following resources exist for adjusting the style. - - - ## Types ### Fonts -For the JavaScript platform any font that might be installed on the client machines can be used. -Any additional fonts can be added via WebFonts. The rendering of the score will be delayed until it is detected that the font was loaded. +For the JavaScript platform any font that might be installed on the client machines can be used. +Any additional fonts can be added via WebFonts. The rendering of the score will be delayed until it is detected that the font was loaded. Simply use any CSS font property compliant string as configuration. Relative font sizes with percentual values are not supported, remaining values will be considered if supported. -Since 1.2.3 Multiple fonts are also supported for the Web version. alphaTab will check if any of the fonts in the list is loaded instead of all. If none is available at the time alphaTab is initialized, it will try to initiate the load of the specified fonts individual through the Browser Font APIs. + Multiple fonts are also supported for the Web version. alphaTab will check if any of the fonts in the list is loaded instead of all. If none is available at the time alphaTab is initialized, it will try to initiate the load of the specified fonts individual through the Browser Font APIs. -For the .net platform any installed font on the system can be used. Simply construct the `Font` object to configure your desired fonts. +For the .net platform any installed font on the system can be used. Simply construct the `Font` object to configure your desired fonts. ### Colors For JavaScript you can use any CSS font property compliant string. (#RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(r,g,b), rgba(r,g,b,a) ) -On .net simply construct the `Color` object to configure your desired color. \ No newline at end of file +On .net simply construct the `Color` object to configure your desired color. + + + +
{"resources"}{":"}{" "}{"RenderingResources"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"RenderingResources"}{" "}{"Resources"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"resources"}{":"}{" "}{"RenderingResources"}{" "}{"="}{" "}{"false"}
+ + + + +import ManualDocs from './_resources.mdx'; + + diff --git a/docs/reference/settings/display/scale.mdx b/docs/reference/settings/display/scale.mdx index 2b8b7f4d5..ce599ad4a 100644 --- a/docs/reference/settings/display/scale.mdx +++ b/docs/reference/settings/display/scale.mdx @@ -1,36 +1,38 @@ --- title: display.scale -description: The zoom level of the rendered notation. +description: "The zoom level of the rendered notation." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab can scale up or down the rendered music notation for more optimized display scenarios. By default music notation is rendered at 100% scale (value 1) and can be scaled up or down by +### Description +The zoom level of the rendered notation. AlphaTab can scale up or down the rendered music notation for more optimized display scenarios. By default music notation is rendered at 100% scale (value 1) and can be scaled up or down by percental values. - - -## Types - - - - - `1.0` - 100%
- `1.2` - 120%
- `0.8` - 80% - - - -## Default Value + + +
{"scale"}{":"}{" "}{"number"}{" "}{"="}{" "}{"1.0"}{";"}
+ + +
{"double"}{" "}{"Scale"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"1.0"}
+ + +
{"var"}{" "}{"scale"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"1.0"}
+ + -`1.0` \ No newline at end of file diff --git a/docs/reference/settings/display/staffpaddingleft.mdx b/docs/reference/settings/display/staffpaddingleft.mdx index ccbc46a08..d7ce7d1ac 100644 --- a/docs/reference/settings/display/staffpaddingleft.mdx +++ b/docs/reference/settings/display/staffpaddingleft.mdx @@ -1,31 +1,37 @@ --- title: display.staffPaddingLeft -description: The left padding applied between the left line and the first glyph in the following staff in a system. +description: "The left padding applied between the left line and the first glyph in the following staff in a system." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The left padding applied between the left line and the first glyph in the following staff in a system. - - -## Types - - - - - - -## Default Value + + +
{"staffPaddingLeft"}{":"}{" "}{"number"}{" "}{"="}{" "}{"2"}{";"}
+ + +
{"double"}{" "}{"StaffPaddingLeft"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"2"}
+ + +
{"var"}{" "}{"staffPaddingLeft"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"2"}
+ + -`2` \ No newline at end of file diff --git a/docs/reference/settings/display/startbar.mdx b/docs/reference/settings/display/startbar.mdx index 73e90d3a2..e08579190 100644 --- a/docs/reference/settings/display/startbar.mdx +++ b/docs/reference/settings/display/startbar.mdx @@ -1,34 +1,40 @@ --- title: display.startBar -description: The bar start index to start layouting with. +description: "The bar start index to start layouting with." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting sets the index of the first bar that should be rendered from the overall song. This setting can be used to +### Description +The bar start index to start layouting with. This setting sets the index of the first bar that should be rendered from the overall song. This setting can be used to achieve a paging system or to only show partial bars of the same file. By this a tutorial alike display can be achieved that explains various parts of the song. Please note that this is the bar number as shown in the music sheet (1-based) not the array index (0-based). [Demo](/docs/showcase/layouts#page-layout-bar-5-to-8) - - -## Types - - - - - -## Default Value + + +
{"startBar"}{":"}{" "}{"number"}{" "}{"="}{" "}{"1"}{";"}
+ + +
{"double"}{" "}{"StartBar"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"1"}
+ + +
{"var"}{" "}{"startBar"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"1"}
+ + -`1` \ No newline at end of file diff --git a/docs/reference/settings/display/staveprofile.mdx b/docs/reference/settings/display/staveprofile.mdx index 9848b4652..8172bde62 100644 --- a/docs/reference/settings/display/staveprofile.mdx +++ b/docs/reference/settings/display/staveprofile.mdx @@ -1,64 +1,38 @@ --- title: display.staveProfile -description: The stave profile defining which staves are shown for the music sheet. +description: "The stave profile defining which staves are shown for the music sheet." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -AlphaTab has various stave profiles that define which staves will be shown in for the rendered tracks. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - `Default` - The profile is auto detected by the track configurations.
- `ScoreTab` - Standard music notation and guitar tablature are rendered.
- `Score` - Only standard music notation is rendered.
- `Tab` - Only guitar tablature is rendered.
- `TabMixed` - Only guitar tablature is rendered, but also rests and time signatures are not shown. This profile is typically used in multi-track scenarios.
- - - `default`
- `scoretab`
- `score`
- `tab`
- `tabmixed` - - - `0` - Default
- `1` - ScoreTab
- `2` - Score
- `3` - Tab
- `4` - TabMixed - - - `Default`
- `ScoreTab`
- `Score`
- `Tab`
- `TabMixed`
- - - `Default`
- `ScoreTab`
- `Score`
- `Tab`
- `TabMixed`
- - +### Description +The stave profile defining which staves are shown for the music sheet. AlphaTab has various stave profiles that define which staves will be shown in for the rendered tracks. Its recommended +to keep this on {"Default"} and rather rely on the options available ob {"Staff"} level -## Default Value + + +
{"staveProfile"}{":"}{" "}{"StaveProfile"}{" "}{"="}{" "}{"StaveProfile.Default"}{";"}
+ + +
{"StaveProfile"}{" "}{"StaveProfile"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"StaveProfile.Default"}
+ + +
{"var"}{" "}{"staveProfile"}{":"}{" "}{"StaveProfile"}{" "}{"="}{" "}{"StaveProfile.Default"}
+ + -`Default` diff --git a/docs/reference/settings/display/stretchforce.mdx b/docs/reference/settings/display/stretchforce.mdx index ad2e7502f..6e88bf864 100644 --- a/docs/reference/settings/display/stretchforce.mdx +++ b/docs/reference/settings/display/stretchforce.mdx @@ -1,39 +1,42 @@ --- title: display.stretchForce -description: The default stretch force to use for layouting. +description: "The default stretch force to use for layouting." sidebar_custom_props: jsOnParent: true category: Display since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -The stretch force is a setting that controls the spacing of the music notation. AlphaTab uses a varaint of the Gourlay algorithm for spacing which has springs and rods for -aligning elements. This setting controls the "strength" of the springs. The stronger the springs, the wider the spacing. +### Description +The default stretch force to use for layouting. The stretch force is a setting that controls the spacing of the music notation. AlphaTab uses a varaint of the Gourlay algorithm for spacing which has springs and rods for +aligning elements. This setting controls the "strength" of the springs. The stronger the springs, the wider the spacing. | Force 1 | Force 0.5 | |--------------------------------------------------------------|-------------------------------------------------------| | ![Default](/img/reference/property/stretchforce-default.png) | ![0.5](/img/reference/property/stretchforce-half.png) | - - -## Types - - - - `1.0`
- `1.5`
- `0.5`
- - - -## Default Value + + +
{"stretchForce"}{":"}{" "}{"number"}{" "}{"="}{" "}{"1"}{";"}
+ + +
{"double"}{" "}{"StretchForce"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"1"}
+ + +
{"var"}{" "}{"stretchForce"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"1"}
+ + -`1.0` \ No newline at end of file diff --git a/docs/reference/settings/display/systemlabelpaddingleft.mdx b/docs/reference/settings/display/systemlabelpaddingleft.mdx index 8dd2d691d..2ef07cb4c 100644 --- a/docs/reference/settings/display/systemlabelpaddingleft.mdx +++ b/docs/reference/settings/display/systemlabelpaddingleft.mdx @@ -1,31 +1,37 @@ --- title: display.systemLabelPaddingLeft -description: The padding left to the track name label of the system. +description: "The padding left to the track name label of the system." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -The padding left to the track name label of the system +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - - +### Description +The padding left to the track name label of the system. -## Default Value + + +
{"systemLabelPaddingLeft"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"SystemLabelPaddingLeft"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"systemLabelPaddingLeft"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0` \ No newline at end of file diff --git a/docs/reference/settings/display/systemlabelpaddingright.mdx b/docs/reference/settings/display/systemlabelpaddingright.mdx index 5ebf3ae8a..7a5fe480b 100644 --- a/docs/reference/settings/display/systemlabelpaddingright.mdx +++ b/docs/reference/settings/display/systemlabelpaddingright.mdx @@ -1,31 +1,37 @@ --- title: display.systemLabelPaddingRight -description: The padding left to the track name label of the system. +description: "The padding left to the track name label of the system." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -The padding right to the track name label of the system +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - - +### Description +The padding left to the track name label of the system. -## Default Value + + +
{"systemLabelPaddingRight"}{":"}{" "}{"number"}{" "}{"="}{" "}{"5"}{";"}
+ + +
{"double"}{" "}{"SystemLabelPaddingRight"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"5"}
+ + +
{"var"}{" "}{"systemLabelPaddingRight"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"5"}
+ + -`5` \ No newline at end of file diff --git a/docs/reference/settings/display/systempaddingbottom.mdx b/docs/reference/settings/display/systempaddingbottom.mdx index bf4d5ace6..e7f09eea5 100644 --- a/docs/reference/settings/display/systempaddingbottom.mdx +++ b/docs/reference/settings/display/systempaddingbottom.mdx @@ -1,31 +1,37 @@ --- title: display.systemPaddingBottom -description: The bottom padding applied to systems. +description: "The bottom padding applied to systems beside the last one." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -The bottom padding applied systems beside the last one. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - - +### Description +The bottom padding applied to systems beside the last one. -## Default Value + + +
{"systemPaddingBottom"}{":"}{" "}{"number"}{" "}{"="}{" "}{"20"}{";"}
+ + +
{"double"}{" "}{"SystemPaddingBottom"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"20"}
+ + +
{"var"}{" "}{"systemPaddingBottom"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"20"}
+ + -`20` \ No newline at end of file diff --git a/docs/reference/settings/display/systempaddingtop.mdx b/docs/reference/settings/display/systempaddingtop.mdx index 69511730e..4e66e9783 100644 --- a/docs/reference/settings/display/systempaddingtop.mdx +++ b/docs/reference/settings/display/systempaddingtop.mdx @@ -1,31 +1,37 @@ --- title: display.systemPaddingTop -description: The top padding applied to systems. +description: "The top padding applied systems beside the first one." sidebar_custom_props: jsOnParent: true category: Display since: 1.4.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + +### Description The top padding applied systems beside the first one. - - -## Types - - - - - - -## Default Value + + +
{"systemPaddingTop"}{":"}{" "}{"number"}{" "}{"="}{" "}{"10"}{";"}
+ + +
{"double"}{" "}{"SystemPaddingTop"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"10"}
+ + +
{"var"}{" "}{"systemPaddingTop"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"10"}
+ + -`10` \ No newline at end of file diff --git a/docs/reference/settings/display/systemslayoutmode.mdx b/docs/reference/settings/display/systemslayoutmode.mdx index 83bfbae26..eb48e74a8 100644 --- a/docs/reference/settings/display/systemslayoutmode.mdx +++ b/docs/reference/settings/display/systemslayoutmode.mdx @@ -1,72 +1,45 @@ --- title: display.systemsLayoutMode -description: The mode used to arrange staves and systems. +description: "The mode used to arrange staves and systems." sidebar_custom_props: jsOnParent: true category: Display - since: 1.3.0-alpha.671 + since: 1.3.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -By default alphaTab uses an own (automatic) mode to arrange and scale the bars when +### Description +The mode used to arrange staves and systems. By default alphaTab uses an own (automatic) mode to arrange and scale the bars when putting them into staves. This property allows changing this mode to change the music sheet arrangement. - - -## Types - - - - `Automatic`
- `UseModelLayout` - - - `automatic`
- `usemodellayout` - - - `0` - Automatic
- `1` - UseModelLayout - - - `Automatic`
- `UseModelLayout` - - - `Automatic`
- `UseModelLayout` - - - -## Default Value - -`automatic` - ## Supported File Formats: - -* Guitar Pro 6-8 1.3.0-alpha.671 - -If you want/need support for more file formats to respect the sizing information feel free to [open a discussion](https://github.com/CoderLine/alphaTab/discussions/new?category=ideas) on GitHub. +* Guitar Pro 6-8 +If you want/need support for more file formats to respect the sizing information feel free to [open a discussion](https://github.com/CoderLine/alphaTab/discussions/new?category=ideas) on GitHub. ## Automatic Mode In the automatic mode alphaTab arranges the bars and staves using its internal mechanisms. -For the `page` layout this means it will scale the bars according to the `stretchForce` and available width. +For the `page` layout this means it will scale the bars according to the `stretchForce` and available width. Wrapping into new systems (rows) will happen when the row is considered "full". -For the `horizontal` layout the `stretchForce` defines the sizing and no wrapping happens at all. +For the `horizontal` layout the `stretchForce` defines the sizing and no wrapping happens at all. ## Model Layout mode -File formats like Guitar Pro embed information about the layout in the file and alphaTab can read and use this information. +File formats like Guitar Pro embed information about the layout in the file and alphaTab can read and use this information. When this mode is enabled, alphaTab will also actively use this information and try to respect it. alphaTab holds following information in the data model and developers can change those values (e.g. by tapping into the `scoreLoaded`) event. @@ -75,33 +48,45 @@ alphaTab holds following information in the data model and developers can change * `score.tracks[index].systemsLayout` - An array of numbers describing how many bars should be placed within each system (row). * `score.tracks[index].defaultSystemsLayout` - The number of bars to place in a system (row) when no value is defined in the `systemsLayout`. -* `score.tracks[index].staves[index].bars[index].displayScale` - The relative size of this bar in the system it is placed. Note that this is not directly a percentage value. e.g. if there are 3 bars and all define scale 1, they are sized evenly. -* `score.tracks[index].staves[index].bars[index].displayWidth` - The absolute size of this bar when displayed. +* `score.tracks[index].staves[index].bars[index].displayScale` - The relative size of this bar in the system it is placed. Note that this is not directly a percentage value. e.g. if there are 3 bars and all define scale 1, they are sized evenly. +* `score.tracks[index].staves[index].bars[index].displayWidth` - The absolute size of this bar when displayed. **Used when multiple tracks are rendered:** -* `score.systemsLayout` - Like the `systemsLayout` on track level. -* `score.defaultSystemsLayout` - Like the `defaultSystemsLayout` on track level. +* `score.systemsLayout` - Like the `systemsLayout` on track level. +* `score.defaultSystemsLayout` - Like the `defaultSystemsLayout` on track level. * `score.masterBars[index].displayScale` - Like the `displayScale` on bar level. * `score.masterBars[index].displayWidth` - Like the `displayWidth` on bar level. ### Page Layout -The page layout uses the `systemsLayout` and `defaultSystemsLayout` to decide how many bars go into a single system (row). +The page layout uses the `systemsLayout` and `defaultSystemsLayout` to decide how many bars go into a single system (row). Additionally when sizing the bars within the system the `displayScale` is used. As indicated above, the scale is rather a ratio than a percentage value but percentages work also: - +![Page Layout](/img/reference/property/systems-layout-page-examples.png) The page layout does not use `displayWidth`. The use of absolute widths would break the proper alignments needed for this kind of display. -Also note that the sizing is including any glyphs and notation elements within the bar. e.g. if there are clefs in the bar, they are still "squeezed" into the available size. +Also note that the sizing is including any glyphs and notation elements within the bar. e.g. if there are clefs in the bar, they are still "squeezed" into the available size. It is not the case that the actual notes with their lengths are sized accordingly. This fits the sizing system of Guitar Pro and when files are customized there, -alphaTab will match this layout quite close. +alphaTab will match this layout quite close. ### Horizontal Layout -The horizontal layout uses the `displayWidth` to scale the bars to size the bars exactly as specified. This kind of sizing and layout can be useful for usecases like: +The horizontal layout uses the `displayWidth` to scale the bars to size the bars exactly as specified. This kind of sizing and layout can be useful for usecases like: * Comparing files against each other (top/bottom comparison) * Aligning the playback of multiple files on one screen assuming the same tempo (e.g. one file per track). + + +
{"systemsLayoutMode"}{":"}{" "}{"SystemsLayoutMode"}{" "}{"="}{" "}{"1"}{";"}
+ + +
{"SystemsLayoutMode"}{" "}{"SystemsLayoutMode"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"1"}
+ + +
{"var"}{" "}{"systemsLayoutMode"}{":"}{" "}{"SystemsLayoutMode"}{" "}{"="}{" "}{"1"}
+ + + diff --git a/docs/reference/settings/importer/beattextaslyrics.mdx b/docs/reference/settings/importer/beattextaslyrics.mdx index 9833a6025..663329cc5 100644 --- a/docs/reference/settings/importer/beattextaslyrics.mdx +++ b/docs/reference/settings/importer/beattextaslyrics.mdx @@ -1,52 +1,57 @@ --- title: importer.beatTextAsLyrics -description: Enables detecting lyrics from beat texts +description: "Enables detecting lyrics from beat texts" sidebar_custom_props: category: Importer since: 1.2.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -On various old Guitar Pro 3-5 files tab authors often used the "beat text" feature to add lyrics to the individual tracks. -This was easier and quicker than using the lyrics feature. +### Description +Enables detecting lyrics from beat texts On various old Guitar Pro 3-5 files tab authors often used the "beat text" feature to add lyrics to the individual tracks. +This was easier and quicker than using the lyrics feature. -These texts were optimized to align correctly when viewed in Guitar Pro with the default layout but can lead to -disturbed display in alphaTab. When `beatTextAsLyrics` is set to true, alphaTab will try to rather parse beat text -values as lyrics using typical text patterns like dashes, underscores and spaces. +These texts were optimized to align correctly when viewed in Guitar Pro with the default layout but can lead to +disturbed display in alphaTab. When `beatTextAsLyrics` is set to true, alphaTab will try to rather parse beat text +values as lyrics using typical text patterns like dashes, underscores and spaces. The lyrics are only detected if not already proper lyrics are applied to the track. Enable this option for input files which suffer from this practice. -:::note - -alphaTab tries to relate the texts and chunks to the beats but this is not perfect. -Errors are likely to happen with such kind of files. +> [!NOTE] +> alphaTab tries to relate the texts and chunks to the beats but this is not perfect. +> Errors are likely to happen with such kind of files. -::: - - - -## Types +**Enabled** - - - +![Enabled](/img/reference/property/beattextaslyrics-enabled.png) -## Default Value -`false` +**Disabled** -## Example +![Disabled](/img/reference/property/beattextaslyrics-disabled.png) -**Enabled** -![Enabled](/img/reference/property/beattextaslyrics-enabled.png) + + +
{"beatTextAsLyrics"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"BeatTextAsLyrics"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"beatTextAsLyrics"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -**Disabled** - ![Disabled](/img/reference/property/beattextaslyrics-disabled.png) \ No newline at end of file diff --git a/docs/reference/settings/importer/encoding.mdx b/docs/reference/settings/importer/encoding.mdx index 4818e7aee..d70e04f01 100644 --- a/docs/reference/settings/importer/encoding.mdx +++ b/docs/reference/settings/importer/encoding.mdx @@ -1,20 +1,26 @@ --- title: importer.encoding -description: The text encoding to use when decoding strings. +description: "The text encoding to use when decoding strings." sidebar_custom_props: category: Importer since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -By default strings are interpreted as UTF-8 from the input files. This is sometimes not the case and leads to strong display +### Description +The text encoding to use when decoding strings. By default strings are interpreted as UTF-8 from the input files. This is sometimes not the case and leads to strong display of strings in the rendered notation. Via this setting the text encoding for decoding the strings can be changed. The supported encodings depend on the browser or operating system. This setting is considered for the importers @@ -23,17 +29,15 @@ encodings depend on the browser or operating system. This setting is considered * Guitar Pro 3-5 * MusicXML - - -## Types - - - - `utf-8`
- `Windows-1252` - - - -## Default Value + + +
{"encoding"}{":"}{" "}{"string"}{" "}{"="}{" "}{"utf-8"}{";"}
+ + +
{"string"}{" "}{"Encoding"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"utf-8"}
+ + +
{"var"}{" "}{"encoding"}{":"}{" "}{"String"}{" "}{"="}{" "}{"utf-8"}
+ + -`utf-8` \ No newline at end of file diff --git a/docs/reference/settings/importer/mergepartgroupsinmusicxml.mdx b/docs/reference/settings/importer/mergepartgroupsinmusicxml.mdx index 5e4f054bf..8940b0fe9 100644 --- a/docs/reference/settings/importer/mergepartgroupsinmusicxml.mdx +++ b/docs/reference/settings/importer/mergepartgroupsinmusicxml.mdx @@ -1,28 +1,36 @@ --- title: importer.mergePartGroupsInMusicXml -description: If part-groups should be merged into a single track (MusicXML). +description: "If part-groups should be merged into a single track (MusicXML)." sidebar_custom_props: category: Importer since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -This setting controls whether multiple `part-group` tags will result into a single track with multiple staves. +import { SettingsHeader } from '@site/src/components/SettingsHeader'; - + -## Types +### Description +If part-groups should be merged into a single track (MusicXML). This setting controls whether multiple `part-group` tags will result into a single track with multiple staves. - - - + + +
{"mergePartGroupsInMusicXml"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"MergePartGroupsInMusicXml"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"mergePartGroupsInMusicXml"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -## Default Value -`false` \ No newline at end of file diff --git a/docs/reference/settings/notation/displaytranspositionpitches.mdx b/docs/reference/settings/notation/displaytranspositionpitches.mdx index 1a1cec00e..f435c112f 100644 --- a/docs/reference/settings/notation/displaytranspositionpitches.mdx +++ b/docs/reference/settings/notation/displaytranspositionpitches.mdx @@ -1,36 +1,43 @@ --- title: notation.displayTranspositionPitches -description: The transposition pitch offsets for the individual tracks used for rendering only. +description: "The transposition pitch offsets for the individual tracks used for rendering only." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -For some instruments the pitch shown on the standard notation has an additional transposition. One example is the Guitar. +### Description +The transposition pitch offsets for the individual tracks used for rendering only. For some instruments the pitch shown on the standard notation has an additional transposition. One example is the Guitar. Notes are shown 1 octave higher than they are on the piano. The following image shows a C4 for a piano and a guitar, and a C5 for the piano as comparison: ![Display Transposition Pitches example](/img/reference/property/displaytranspositionpitches.png) -The `DisplayTranspositionPitch` setting allows defining an additional pitch offset per track, that is then considered when displaying the music sheet. +The `DisplayTranspositionPitch` setting allows defining an additional pitch offset per track, that is then considered when displaying the music sheet. This setting does not affect the playback of the instrument in any way. Despite the 2 different standard notations in the above example, they both play the same note height. The transposition is defined as number of semitones and one value per track of the song can be defined. - - -## Types - - - - - -## Default Value + + +
{"displayTranspositionPitches"}{":"}{" "}{"number"}{"[]"}{" "}{"="}{" "}{"[]"}{";"}
+ + +
{"IList"}{"<"}{"double"}{">"}{" "}{"DisplayTranspositionPitches"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"[]"}
+ + +
{"var"}{" "}{"displayTranspositionPitches"}{":"}{" "}{"alphaTab.collections.DoubleList"}{" "}{"="}{" "}{"[]"}
+ + -`(empty)` \ No newline at end of file diff --git a/docs/reference/settings/notation/elements.mdx b/docs/reference/settings/notation/elements.mdx index cb99791b1..eb4c5bcfb 100644 --- a/docs/reference/settings/notation/elements.mdx +++ b/docs/reference/settings/notation/elements.mdx @@ -1,276 +1,59 @@ --- title: notation.elements -description: Render the song information or not. +description: "Whether music notation elements are visible or not." sidebar_custom_props: category: Notation since: 0.9.8 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -import { PropertyDescription } from "@site/src/components/PropertyDescription"; -import { TypeTable, TypeRow } from "@site/src/components/TypeTable"; + -## Description - -AlphaTab has quite a set of notation elements that are usually shown by default or only shown when using +### Description +Whether music notation elements are visible or not. AlphaTab has quite a set of notation elements that are usually shown by default or only shown when using the `SongBook` notation mode. This setting allows showing/hiding individual notation elements like the song information or the track names. For each element you can configure whether it is visible or not. The setting is a Map/Dictionary where -the key is the element to configure and the value is a boolean value whether it should be visible or not. - - +the key is the element to configure and the value is a boolean value whether it should be visible or not. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementDescriptionDefault Visibility
ScoreTitleThe score title shown at the start of the music sheet.visible
ScoreSubTitleThe score subtitle shown at the start of the music sheet.visible
ScoreArtistThe score artist shown at the start of the music sheet.visible
ScoreAlbumThe score album shown at the start of the music sheet.visible
ScoreWordsThe score words author shown at the start of the music sheet.visible
ScoreMusicThe score music author shown at the start of the music sheet.visible
ScoreWordsAndMusicThe score words&music author shown at the start of the music sheet.visible
ScoreCopyrightThe score copyright owner shown at the start of the music sheet.visible
GuitarTuningThe tuning information of the guitar shown above the staves.visible
TrackNamesThe track names which are shown in the accolade.visible
ChordDiagramsThe chord diagrams for guitars. Usually shown below the score info.visible
ParenthesisOnTiedBends - Parenthesis that are shown for tied bends if they are preceeded by bends. - visible
TabNotesOnTiedBends - The tab number for tied notes if the bend of a note is increased at that - point. - visible
ZerosOnDiveWhammysZero tab numbers on "dive whammys".not visible
EffectAlternateEndingsThe alternate endings information on repeats shown above the staff.visible
EffectCapo - The information about the fret on which the capo is placed shown above the - staff. - visible
EffectChordNamesThe chord names shown above beats shown above the staff.visible
EffectCrescendoThe crescendo/decrescendo angle shown above the staff.visible
EffectDynamicsThe beat dynamics shown above the staff.visible
EffectFadeInThe curved angle for fade in/out effects shown above the staff.visible
EffectFermataThe fermata symbol shown above the staff.visible
EffectFingeringThe fingering information.visible
EffectHarmonics - The harmonics names shown above the staff. (does not represent the harmonic - note heads) - visible
EffectLetRingThe let ring name and line above the staff.visible
EffectLyricsThe lyrics of the track shown above the staff.visible
EffectMarkerThe section markers shown above the staff.visible
EffectOttaviaThe ottava symbol and lines shown above the staff.visible
EffectPalmMuteThe palm mute name and line shown above the staff.visible
EffectPickSlide - The pick slide information shown above the staff. (does not control the pick - slide lines) - visible
EffectPickStrokeThe pick stroke symbols shown above the staff.visible
EffectSlightBeatVibratoThe slight beat vibrato waves shown above the staff.visible
EffectSlightNoteVibratoThe slight note vibrato waves shown above the staff.visible
EffectTapThe tap/slap/pop effect names shown above the staff.visible
EffectTempoThe tempo information shown above the staff.visible
EffectTextThe additional beat text shown above the staff.visible
EffectTrillThe trill name and waves shown above the staff.visible
EffectTripletFeelThe triplet feel symbol shown above the staff.visible
EffectWhammyBar - The whammy bar information shown above the staff. (does not control the - whammy lines shown within the staff) - visible
EffectWideBeatVibratoThe wide beat vibrato waves shown above the staff.visible
EffectWideNoteVibratoThe wide note vibrato waves shown above the staff.visible
+ + +
{"elements"}{":"}{" "}{"Map"}{"<"}{"NotationElement"}{","}{" "}{"boolean"}{">"}{" "}{"="}{" "}{"[[NotationElement.ZerosOnDiveWhammys, false]]"}{";"}
+ + +
{"Map"}{"<"}{"NotationElement"}{","}{" "}{"bool"}{">"}{" "}{"Elements"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"[[NotationElement.ZerosOnDiveWhammys, false]]"}
+ + +
{"var"}{" "}{"elements"}{":"}{" "}{"alphaTab.collections.ObjectBooleanMap"}{"<"}{"NotationElement"}{","}{" "}{"Boolean"}{">"}{" "}{"="}{" "}{"[[NotationElement.ZerosOnDiveWhammys, false]]"}
+ + ## Examples - - -Internally the setting is a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) where the key must be a `alphaTab.NotationElement` enumeration value. -For JSON input the usual enumeration serialization applies where also the names can be used. The names -are case insensitive. + defaultValue="javascript" + values={[ + { label: "JavaScript", value: "javascript"}, + { label: "C#", value: "csharp"}, + { label: "Android", value: "android"} + ]} +> + +Internally the setting is a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) where the key must be a {"NotationElement"} enumeration value. +For JSON input the usual enumeration serialization applies where also the names can be used. The names +are case insensitive. ```js const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'), { @@ -283,24 +66,19 @@ const api = new alphaTab.AlphaTabApi(document.querySelector('#alphaTab'), { }); api.settings.notation.elements.set(alphaTab.NotationElement.EffectWhammyBar, false); ``` - - - -For data attributes currently a full object must be embedded in the attribute value. - -```js -
-``` - - - - + ```cs var settings = new AlphaTab.Settings(); settings.Notation.Elements[AlphaTab.NotationElement.ScoreTitle] = false; settings.Notation.Elements[AlphaTab.NotationElement.TrackNames] = false; ``` - - \ No newline at end of file + +```kotlin +val settings = AlphaTab.Settings(); +settings.notation.elements[alphaTab.NotationElement.ScoreTitle] = false; +settings.notation.elements[alphaTab.NotationElement.TrackNames] = false; +``` + + diff --git a/docs/reference/settings/notation/extendbendarrowsontiednotes.mdx b/docs/reference/settings/notation/extendbendarrowsontiednotes.mdx index b44f150bf..464a14a73 100644 --- a/docs/reference/settings/notation/extendbendarrowsontiednotes.mdx +++ b/docs/reference/settings/notation/extendbendarrowsontiednotes.mdx @@ -1,34 +1,40 @@ --- title: notation.extendBendArrowsOnTiedNotes -description: If set to true bend arrows expand to the end of the last tied note of the string. Otherwise they end on the next beat. +description: "If set to true bend arrows expand to the end of the last tied note of the string. Otherwise they end on the next beat." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -By default the arrows and lines on bend effects are extended to the space of tied notes. This behavior is the Guitar Pro default but some applications and songbooks practice it different. +### Description +If set to true bend arrows expand to the end of the last tied note of the string. Otherwise they end on the next beat. By default the arrows and lines on bend effects are extended to the space of tied notes. This behavior is the Guitar Pro default but some applications and songbooks practice it different. There the bend only is drawn to the next beat. - - - | Enabled | Disabled | |-----------------------------------------------------------------------------|-------------------------------------------------------------------------------| | ![Enabled](/img/reference/property/extendbendarrowsontiednotes-enabled.png) | ![Disabled](/img/reference/property/extendbendarrowsontiednotes-disabled.png) | -## Types - - - - - -## Default Value + + +
{"extendBendArrowsOnTiedNotes"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"ExtendBendArrowsOnTiedNotes"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"extendBendArrowsOnTiedNotes"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/notation/extendlineeffectstobeatend.mdx b/docs/reference/settings/notation/extendlineeffectstobeatend.mdx index 76d13eb23..6e7c844c2 100644 --- a/docs/reference/settings/notation/extendlineeffectstobeatend.mdx +++ b/docs/reference/settings/notation/extendlineeffectstobeatend.mdx @@ -1,33 +1,40 @@ --- title: notation.extendLineEffectsToBeatEnd -description: If set to true, line effects like w/bar and let-ring are drawn until the end of the beat instead of the start +description: "If set to true, line effects like w/bar and let-ring are drawn until the end of the beat instead of the start" sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -By default effect annotations that render a line above the staff, stop on the beat. This is the typical display of Guitar Pro. In songbooks and some other tools -these effects are drawn to the end of this beat. +import { SettingsHeader } from '@site/src/components/SettingsHeader'; - + +### Description +If set to true, line effects like w/bar and let-ring are drawn until the end of the beat instead of the start By default effect annotations that render a line above the staff, stop on the beat. This is the typical display of Guitar Pro. In songbooks and some other tools +these effects are drawn to the end of this beat. | Enabled | Disabled | |-----------------------------------------------------------------------------|-------------------------------------------------------------------------------| | ![Enabled](/img/reference/property/extendlineeffectstobeatend-enabled.png) | ![Disabled](/img/reference/property/extendlineeffectstobeatend-disabled.png) | -## Types - - - - + + +
{"extendLineEffectsToBeatEnd"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"ExtendLineEffectsToBeatEnd"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"extendLineEffectsToBeatEnd"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -## Default Value -`false` \ No newline at end of file diff --git a/docs/reference/settings/notation/fingeringmode.mdx b/docs/reference/settings/notation/fingeringmode.mdx index 63534c6f2..97dbdc974 100644 --- a/docs/reference/settings/notation/fingeringmode.mdx +++ b/docs/reference/settings/notation/fingeringmode.mdx @@ -1,53 +1,41 @@ --- title: notation.fingeringMode -description: The fingering mode to use. +description: "The fingering mode to use." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab supports multiple modes on how to display fingering information in the music sheet. This setting controls how they should be displayed. The default behavior is to show the finger information +### Description +The fingering mode to use. AlphaTab supports multiple modes on how to display fingering information in the music sheet. This setting controls how they should be displayed. The default behavior is to show the finger information directly in the score along the notes. For some use cases of training courses and for beginners this notation might be hard to read. The effect band mode allows to show a single finger information above the staff. - - | Score | Effect Band | |-------------------------------------------------------------|-------------------------------------------------------------------| | ![Enabled](/img/reference/property/fingeringmode-score.png) | ![Disabled](/img/reference/property/fingeringmode-effectband.png) | -## Types - - - - `Score`
- `SingleNoteEffectBand` - - - `score`
- `effectband` - - - `0` - Score
- `1` - SingleNoteEffectBand - - - `Score`
- `SingleNoteEffectBand` - - - `Score`
- `SingleNoteEffectBand` - - - -## Default Value + + +
{"fingeringMode"}{":"}{" "}{"FingeringMode"}{" "}{"="}{" "}{"FingeringMode.ScoreDefault"}{";"}
+ + +
{"FingeringMode"}{" "}{"FingeringMode"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"FingeringMode.ScoreDefault"}
+ + +
{"var"}{" "}{"fingeringMode"}{":"}{" "}{"FingeringMode"}{" "}{"="}{" "}{"FingeringMode.ScoreDefault"}
+ + -`Score` \ No newline at end of file diff --git a/docs/reference/settings/notation/notationmode.mdx b/docs/reference/settings/notation/notationmode.mdx index 1057e5de5..8d53bfe55 100644 --- a/docs/reference/settings/notation/notationmode.mdx +++ b/docs/reference/settings/notation/notationmode.mdx @@ -1,37 +1,43 @@ --- title: notation.notationMode -description: The mode to use for display and play music notation elements. +description: "The mode to use for display and play music notation elements." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab provides 2 main music notation display modes `GuitarPro` and `SongBook`. +### Description +The mode to use for display and play music notation elements. AlphaTab provides 2 main music notation display modes `GuitarPro` and `SongBook`. As the names indicate they adjust the overall music notation rendering either to be more in line how [Arobas Guitar Pro](https://www.guitar-pro.com) displays it, or more like the common practice in paper song books practices the display. -The main differences in the Songbook display mode are: +The main differences in the Songbook display mode are: 1. **Bends** For bends additional grace beats are introduced. Bends are categorized into gradual and fast bends. * Gradual bends are indicated by beat text "grad" or "grad.". Bend will sound along the beat duration. * Fast bends are done right before the next note. If the next note is tied even on-beat of the next note. 2. **Whammy Bars** -Dips are shown as simple annotation over the beats. Whammy Bars are categorized into gradual and fast. +Dips are shown as simple annotation over the beats. Whammy Bars are categorized into gradual and fast. * Gradual whammys are indicated by beat text "grad" or "grad.". Whammys will sound along the beat duration. - * Fast whammys are done right the beat. + * Fast whammys are done right the beat. 3. **Let Ring** -Tied notes with let ring are not shown in standard notation. Let ring does not cause a longer playback, duration is defined via tied notes. - +Tied notes with let ring are not shown in standard notation. Let ring does not cause a longer playback, duration is defined via tied notes. + 4. **Settings** Following default setting values are applied: ```js @@ -49,33 +55,15 @@ Following default setting values are applied: } ``` - - -## Types - - - - `SongBook`
- `GuitarPro` - - - `SongBook`
- `GuitarPro` - - - `0` - SongBook
- `1` - GuitarPro - - - `SongBook`
- `GuitarPro` - - - `SongBook`
- `GuitarPro` - - - -## Default Value + + +
{"notationMode"}{":"}{" "}{"NotationMode"}{" "}{"="}{" "}{"NotationMode.GuitarPro"}{";"}
+ + +
{"NotationMode"}{" "}{"NotationMode"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"NotationMode.GuitarPro"}
+ + +
{"var"}{" "}{"notationMode"}{":"}{" "}{"NotationMode"}{" "}{"="}{" "}{"NotationMode.GuitarPro"}
+ + -`GuitarPro` \ No newline at end of file diff --git a/docs/reference/settings/notation/rhythmheight.mdx b/docs/reference/settings/notation/rhythmheight.mdx index 47b3ccb0f..8bfae5076 100644 --- a/docs/reference/settings/notation/rhythmheight.mdx +++ b/docs/reference/settings/notation/rhythmheight.mdx @@ -1,29 +1,36 @@ --- title: notation.rhythmHeight -description: Controls how high the ryhthm notation is rendered below the tab staff +description: "Controls how high the ryhthm notation is rendered below the tab staff" sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -This setting can be used in combination with the `RhythmMode` setting to control how high the rhythm notation should be rendered below the tab staff. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Controls how high the ryhthm notation is rendered below the tab staff This setting can be used in combination with the {"rhythmMode"} setting to control how high the rhythm notation should be rendered below the tab staff. -## Default Value + + +
{"rhythmHeight"}{":"}{" "}{"number"}{" "}{"="}{" "}{"15"}{";"}
+ + +
{"double"}{" "}{"RhythmHeight"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"15"}
+ + +
{"var"}{" "}{"rhythmHeight"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"15"}
+ + -`15` \ No newline at end of file diff --git a/docs/reference/settings/notation/rhythmmode.mdx b/docs/reference/settings/notation/rhythmmode.mdx index e014db4fd..0107c5454 100644 --- a/docs/reference/settings/notation/rhythmmode.mdx +++ b/docs/reference/settings/notation/rhythmmode.mdx @@ -1,53 +1,37 @@ --- title: notation.rhythmMode -description: Controls how the rhythm notation is rendered for tab staves. +description: "Controls how the rhythm notation is rendered for tab staves." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -This setting enables the display of rhythm notation on tab staffs. [Demo](/docs/showcase/guitar-tabs) +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - `Hidden` - No rhythm notation is shown
- `ShowWithBeams` - Rhythm notation is rendered with all beats having individual beams
- `ShowWithBars` - Rhythm notation is rendered with normal bars like on standard notation - - - `hidden`
- `showwithbeams`
- `showwithbars` - - - `0` - Hidden
- `1` - ShowWithBeams
- `2` - ShowWithBars - - - `Hidden`
- `ShowWithBeams`
- `ShowWithBars` - - - `Hidden`
- `ShowWithBeams`
- `ShowWithBars` - - +### Description +Controls how the rhythm notation is rendered for tab staves. This setting enables the display of rhythm notation on tab staffs. [Demo](/docs/showcase/guitar-tabs) + its automatically detected whether rhythm notation should be shown on tabs (based on the visibility of other staves). -## Default Value + + +
{"rhythmMode"}{":"}{" "}{"TabRhythmMode"}{" "}{"="}{" "}{"TabRhythmMode.Automatic"}{";"}
+ + +
{"TabRhythmMode"}{" "}{"RhythmMode"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"TabRhythmMode.Automatic"}
+ + +
{"var"}{" "}{"rhythmMode"}{":"}{" "}{"TabRhythmMode"}{" "}{"="}{" "}{"TabRhythmMode.Automatic"}
+ + -`hidden` \ No newline at end of file diff --git a/docs/reference/settings/notation/slurheight.mdx b/docs/reference/settings/notation/slurheight.mdx index 52807f9f9..5226637dd 100644 --- a/docs/reference/settings/notation/slurheight.mdx +++ b/docs/reference/settings/notation/slurheight.mdx @@ -1,37 +1,40 @@ --- title: notation.slurHeight -description: The height scale factor for slurs +description: "The height scale factor for slurs" sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -Slurs and ties currently calculate their height based on the distance they have from start to end note. Most music notation software do some complex collision detection to avoid a slur to overlap with other elements, alphaTab -only has a simplified version of the slur positioning as of today. This setting allows adjusting the slur height to avoid collisions. The factor defined by this setting, is multiplied with the logarithmic distance between start and end. +import { SettingsHeader } from '@site/src/components/SettingsHeader'; - + +### Description +The height scale factor for slurs Slurs and ties currently calculate their height based on the distance they have from start to end note. Most music notation software do some complex collision detection to avoid a slur to overlap with other elements, alphaTab +only has a simplified version of the slur positioning as of today. This setting allows adjusting the slur height to avoid collisions. The factor defined by this setting, is multiplied with the logarithmic distance between start and end. | Slur Height Default | Slur Height 14 | |------------------------------------------------------------------------|--------------------------------------------------------------| | ![Slur Height Default](/img/reference/property/slurheight-default.png) | ![Slur Height 14](/img/reference/property/slurheight-14.png) | -## Types - - - - `7`
- `14`
- `3.5` - - + + +
{"slurHeight"}{":"}{" "}{"number"}{" "}{"="}{" "}{"5"}{";"}
+ + +
{"double"}{" "}{"SlurHeight"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"5"}
+ + +
{"var"}{" "}{"slurHeight"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"5"}
+ + -## Default Value -`7` \ No newline at end of file diff --git a/docs/reference/settings/notation/smallgracetabnotes.mdx b/docs/reference/settings/notation/smallgracetabnotes.mdx index e80415c1f..f04bba007 100644 --- a/docs/reference/settings/notation/smallgracetabnotes.mdx +++ b/docs/reference/settings/notation/smallgracetabnotes.mdx @@ -1,33 +1,39 @@ --- title: notation.smallGraceTabNotes -description: If set to true the guitar tabs on grace beats are rendered smaller. +description: "If set to true the guitar tabs on grace beats are rendered smaller." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -By default, grace notes are drawn smaller on the guitar tabs than the other numbers. With this setting alphaTab can be configured to show grace tab notes with normal text size. +import { SettingsHeader } from '@site/src/components/SettingsHeader'; - + +### Description +If set to true the guitar tabs on grace beats are rendered smaller. By default, grace notes are drawn smaller on the guitar tabs than the other numbers. With this setting alphaTab can be configured to show grace tab notes with normal text size. | Enabled | Disabled | |--------------------------------------------------------------------|----------------------------------------------------------------------| | ![Enabled](/img/reference/property/smallgracetabnotes-enabled.png) | ![Disabled](/img/reference/property/smallgracetabnotes-disabled.png) | -## Types - - - - - -## Default Value + + +
{"smallGraceTabNotes"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"SmallGraceTabNotes"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"smallGraceTabNotes"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/notation/transpositionpitches.mdx b/docs/reference/settings/notation/transpositionpitches.mdx index 4d497f70f..08042b335 100644 --- a/docs/reference/settings/notation/transpositionpitches.mdx +++ b/docs/reference/settings/notation/transpositionpitches.mdx @@ -1,30 +1,37 @@ --- title: notation.transpositionPitches -description: The transposition pitch offsets for the individual tracks used for rendering and playback. +description: "The transposition pitch offsets for the individual tracks used for rendering and playback." sidebar_custom_props: category: Notation since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -This setting allows transposing of tracks for display and playback. -The `TranspositionPitches` setting allows defining an additional pitch offset per track, that is then considered when displaying the music sheet. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +The transposition pitch offsets for the individual tracks used for rendering and playback. This setting allows transposing of tracks for display and playback. +The `transpositionPitches` setting allows defining an additional pitch offset per track, that is then considered when displaying the music sheet. -## Default Value + + +
{"transpositionPitches"}{":"}{" "}{"number"}{"[]"}{" "}{"="}{" "}{"[]"}{";"}
+ + +
{"IList"}{"<"}{"double"}{">"}{" "}{"TranspositionPitches"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"[]"}
+ + +
{"var"}{" "}{"transpositionPitches"}{":"}{" "}{"alphaTab.collections.DoubleList"}{" "}{"="}{" "}{"[]"}
+ + -`(empty)` \ No newline at end of file diff --git a/docs/reference/settings/player/_slide.mdx b/docs/reference/settings/player/_slide.mdx new file mode 100644 index 000000000..ce77005f7 --- /dev/null +++ b/docs/reference/settings/player/_slide.mdx @@ -0,0 +1,5 @@ +## Slide Settings + +import SlideDocs from '@site/docs/reference/types/slideplaybacksettings/index.mdx' + + \ No newline at end of file diff --git a/docs/reference/settings/player/_vibrato.mdx b/docs/reference/settings/player/_vibrato.mdx new file mode 100644 index 000000000..e3c8df9f3 --- /dev/null +++ b/docs/reference/settings/player/_vibrato.mdx @@ -0,0 +1,5 @@ +## Vibrato Settings + +import VibratoDocs from '@site/docs/reference/types/vibratoplaybacksettings/index.mdx' + + \ No newline at end of file diff --git a/docs/reference/settings/player/buffertimeinmilliseconds.mdx b/docs/reference/settings/player/buffertimeinmilliseconds.mdx index 1bfcb6690..b330debe9 100644 --- a/docs/reference/settings/player/buffertimeinmilliseconds.mdx +++ b/docs/reference/settings/player/buffertimeinmilliseconds.mdx @@ -1,37 +1,41 @@ --- title: player.bufferTimeInMilliseconds -description: The number of milliseconds the player should buffer. +description: "The number of milliseconds the player should buffer." sidebar_custom_props: category: Player since: 1.2.3 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -Gets or sets how many milliseconds of audio samples should be buffered in total. +### Description +The number of milliseconds the player should buffer. Gets or sets how many milliseconds of audio samples should be buffered in total. -* Larger buffers cause a delay from when audio settings like volumes will be applied. +* Larger buffers cause a delay from when audio settings like volumes will be applied. * Smaller buffers can cause audio crackling due to constant buffering that is happening. This buffer size can be changed whenever needed. - - -## Types - - - - `5000`
- `1000` - - - -## Default Value + + +
{"bufferTimeInMilliseconds"}{":"}{" "}{"number"}{" "}{"="}{" "}{"500"}{";"}
+ + +
{"double"}{" "}{"BufferTimeInMilliseconds"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"500"}
+ + +
{"var"}{" "}{"bufferTimeInMilliseconds"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"500"}
+ + -`500` \ No newline at end of file diff --git a/docs/reference/settings/player/enableanimatedbeatcursor.mdx b/docs/reference/settings/player/enableanimatedbeatcursor.mdx index e9d9adc44..e078a2293 100644 --- a/docs/reference/settings/player/enableanimatedbeatcursor.mdx +++ b/docs/reference/settings/player/enableanimatedbeatcursor.mdx @@ -1,30 +1,37 @@ --- title: player.enableAnimatedBeatCursor -description: Whether the beat cursor should be animated or just ticking. +description: "Whether the beat cursor should be animated or just ticking." sidebar_custom_props: category: Player since: 1.2.3 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting configures whether the beat cursor is animated smoothly or whether it is ticking from beat to beat. +### Description +Whether the beat cursor should be animated or just ticking. This setting configures whether the beat cursor is animated smoothly or whether it is ticking from beat to beat. The animation of the cursor might not be available on all targets so it might not have any effect. - - -## Types - - - - - -## Default Value + + +
{"enableAnimatedBeatCursor"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"EnableAnimatedBeatCursor"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"enableAnimatedBeatCursor"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/player/enablecursor.mdx b/docs/reference/settings/player/enablecursor.mdx index 5a797a320..a9082146c 100644 --- a/docs/reference/settings/player/enablecursor.mdx +++ b/docs/reference/settings/player/enablecursor.mdx @@ -1,29 +1,36 @@ --- title: player.enableCursor -description: Whether playback cursors should be displayed. +description: "Whether playback cursors should be displayed." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -This setting configures whether the playback cursors are shown or not. In case a developer decides to built an own cursor system the default one can be disabled with this setting. Enabling the cursor also requires the player to be active. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Whether playback cursors should be displayed. This setting configures whether the playback cursors are shown or not. In case a developer decides to built an own cursor system the default one can be disabled with this setting. Enabling the cursor also requires the player to be active. -## Default Value + + +
{"enableCursor"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"EnableCursor"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"enableCursor"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/player/enableelementhighlighting.mdx b/docs/reference/settings/player/enableelementhighlighting.mdx index 8450cf009..295f0f49a 100644 --- a/docs/reference/settings/player/enableelementhighlighting.mdx +++ b/docs/reference/settings/player/enableelementhighlighting.mdx @@ -1,30 +1,37 @@ --- title: player.enableElementHighlighting -description: Whether the notation elements of the currently played beat should be highlighted. +description: "Whether the notation elements of the currently played beat should be highlighted." sidebar_custom_props: category: Player since: 1.2.3 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting configures whether the note elements are highlighted during playback. +### Description +Whether the notation elements of the currently played beat should be highlighted. This setting configures whether the note elements are highlighted during playback. The highlighting of elements might not be available on all targets and render engine, so it might not have any effect. - - -## Types - - - - - -## Default Value + + +
{"enableElementHighlighting"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"EnableElementHighlighting"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"enableElementHighlighting"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/player/enableplayer.mdx b/docs/reference/settings/player/enableplayer.mdx index 2bcfc35e5..07430d7ba 100644 --- a/docs/reference/settings/player/enableplayer.mdx +++ b/docs/reference/settings/player/enableplayer.mdx @@ -1,33 +1,40 @@ --- title: player.enablePlayer -description: Whether the player should be enabled. +description: "Whether the player should be enabled." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting configures whether the player feature is enabled or not. Depending on the platform enabling the player needs some additional actions of the developer. -For the JavaScript version the [player.soundFont](/docs/reference/settings/player/soundfont) property must be set to the URL of the sound font that should be used or it must be loaded manually via API. -For .net manually the soundfont must be loaded. +### Description +Whether the player should be enabled. This setting configures whether the player feature is enabled or not. Depending on the platform enabling the player needs some additional actions of the developer. +For the JavaScript version the [player.soundFont](/docs/reference/settings/player/soundfont) property must be set to the URL of the sound font that should be used or it must be loaded manually via API. +For .net manually the soundfont must be loaded. AlphaTab does not ship a default UI for the player. The API must be hooked up to some UI controls to allow the user to interact with the player. - - -## Types - - - - - -## Default Value + + +
{"enablePlayer"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"false"}{";"}
+ + +
{"bool"}{" "}{"EnablePlayer"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"false"}
+ + +
{"var"}{" "}{"enablePlayer"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"false"}
+ + -`false` \ No newline at end of file diff --git a/docs/reference/settings/player/enableuserinteraction.mdx b/docs/reference/settings/player/enableuserinteraction.mdx index 988ed6788..062739398 100644 --- a/docs/reference/settings/player/enableuserinteraction.mdx +++ b/docs/reference/settings/player/enableuserinteraction.mdx @@ -1,31 +1,37 @@ --- title: player.enableUserInteraction -description: Whether the default user interaction behavior should be active or not. +description: "Whether the default user interaction behavior should be active or not." sidebar_custom_props: category: Player since: 0.9.7 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -This setting configures whether alphaTab provides the default user interaction features like selection of the playback range and "seek on click". -By default users can select the desired playback range with the mouse and also jump to individual beats by click. This behavior can be contolled w1ith this setting. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Whether the default user interaction behavior should be active or not. This setting configures whether alphaTab provides the default user interaction features like selection of the playback range and "seek on click". +By default users can select the desired playback range with the mouse and also jump to individual beats by click. This behavior can be contolled with this setting. -## Default Value + + +
{"enableUserInteraction"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"EnableUserInteraction"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"enableUserInteraction"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/player/nativebrowsersmoothscroll.mdx b/docs/reference/settings/player/nativebrowsersmoothscroll.mdx index ec561658c..562f7fc66 100644 --- a/docs/reference/settings/player/nativebrowsersmoothscroll.mdx +++ b/docs/reference/settings/player/nativebrowsersmoothscroll.mdx @@ -1,32 +1,29 @@ --- title: player.nativeBrowserSmoothScroll -description: Whether the native browser smooth scroll mechanism should be used over a custom animation. +description: "Whether the native browser smooth scroll mechanism should be used over a custom animation." sidebar_custom_props: javaScriptOnly: true category: Player since: 1.2.3 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -This setting configures whether the [native browser feature](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) +### Description +Whether the native browser smooth scroll mechanism should be used over a custom animation. This setting configures whether the [native browser feature](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) for smooth scrolling should be used over a custom animation. -If this setting is enabled, options like `player.scrollSpeed` will not have an effect anymore. - - - -## Types - - - - +If this setting is enabled, options like {"scrollSpeed"} will not have an effect anymore. -## Default Value +
{"nativeBrowserSmoothScroll"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
-`true` \ No newline at end of file diff --git a/docs/reference/settings/player/outputmode.mdx b/docs/reference/settings/player/outputmode.mdx index cef38819b..3f7136c84 100644 --- a/docs/reference/settings/player/outputmode.mdx +++ b/docs/reference/settings/player/outputmode.mdx @@ -1,41 +1,27 @@ --- title: player.outputMode -description: The mode used for playing audio samples +description: "The mode used for playing audio samples" sidebar_custom_props: javaScriptOnly: true category: Player - JavaScript Specific since: 1.3.0 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -Controls how alphaTab will play the audio samples in the browser. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - `WebAudioAudioWorklets` - If [audio worklets](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_AudioWorklet) are available, they are used. If not fallback to the ScriptProcessorNode
- `WebAudioScriptProcessor` - Using the [ScriptProcessorNode](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode) for playback
- - - `webaudioaudioworklets`
- `webaudioscriptprocessor` - - - `0` - WebAudioAudioWorklets
- `1` - WebAudioScriptProcessor
- - +### Description +The mode used for playing audio samples Controls how alphaTab will play the audio samples in the browser. -## Default Value +
{"outputMode"}{":"}{" "}{"PlayerOutputMode"}{" "}{"="}{" "}{"PlayerOutputMode.WebAudioAudioWorklets"}{";"}
-`WebAudioAudioWorklets` \ No newline at end of file diff --git a/docs/reference/settings/player/playtripletfeel.mdx b/docs/reference/settings/player/playtripletfeel.mdx index 919056f14..9d256f2aa 100644 --- a/docs/reference/settings/player/playtripletfeel.mdx +++ b/docs/reference/settings/player/playtripletfeel.mdx @@ -1,29 +1,36 @@ --- title: player.playTripletFeel -description: Whether the triplet feel should be played or only displayed. +description: "Whether the triplet feel should be played or only displayed." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -If this setting is enabled alphaTab will play the triplet feels accordingly, if it is disabled the triplet feel is only displayed but not played. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +Whether the triplet feel should be played or only displayed. If this setting is enabled alphaTab will play the triplet feels accordingly, if it is disabled the triplet feel is only displayed but not played. -## Default Value + + +
{"playTripletFeel"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"PlayTripletFeel"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"playTripletFeel"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + -`true` \ No newline at end of file diff --git a/docs/reference/settings/player/scrollelement.mdx b/docs/reference/settings/player/scrollelement.mdx index 7eed4c6fe..b8d6918b4 100644 --- a/docs/reference/settings/player/scrollelement.mdx +++ b/docs/reference/settings/player/scrollelement.mdx @@ -1,35 +1,29 @@ --- title: player.scrollElement -description: The element to apply the scrolling on. +description: "The element to apply the scrolling on." sidebar_custom_props: javaScriptOnly: true category: Player - JavaScript Specific since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -When the player is active, it by default automatically scrolls the browser window to the currently played bar. This setting +### Description +The element to apply the scrolling on. When the player is active, it by default automatically scrolls the browser window to the currently played bar. This setting defines which elements should be scrolled to bring the played bar into the view port. By default scrolling happens on the `html,body` -selector. - - - -## Types - - - - A selector for `document.querySelector` - - - +selector. -## Default Value +
{"scrollElement"}{":"}{" "}{"string"}{" "}{"|"}{" "}{"HTMLElement"}{" "}{"="}{" "}{"html,body"}{";"}
-`html,body` \ No newline at end of file diff --git a/docs/reference/settings/player/scrollmode.mdx b/docs/reference/settings/player/scrollmode.mdx index c568cd6de..be6984568 100644 --- a/docs/reference/settings/player/scrollmode.mdx +++ b/docs/reference/settings/player/scrollmode.mdx @@ -1,54 +1,36 @@ --- title: player.scrollMode -description: The mode how to scroll. +description: "The mode how to scroll." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -This setting controls how alphaTab behaves for scrolling. It supports 3 modes: - - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -## Types +import { SettingsHeader } from '@site/src/components/SettingsHeader'; - - - `Off` - No automatic scrolling is done
- `Continuous` - Scrolling happens as soon the offsets of the cursors change
- `OffScreen` - Scrolling happens as soon the cursors exceed the displayed range - - - `off`
- `continuous`
- `offscreen` - - - `0` - Off
- `1` - Continuous
- `2` - OffScreen - - - `Off`
- `Continuous`
- `OffScreen` - - - `Off`
- `Continuous`
- `OffScreen` - + - +### Description +The mode how to scroll. This setting controls how alphaTab behaves for scrolling. -## Default Value + + +
{"scrollMode"}{":"}{" "}{"ScrollMode"}{" "}{"="}{" "}{"ScrollMode.Continuous"}{";"}
+ + +
{"ScrollMode"}{" "}{"ScrollMode"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"ScrollMode.Continuous"}
+ + +
{"var"}{" "}{"scrollMode"}{":"}{" "}{"ScrollMode"}{" "}{"="}{" "}{"ScrollMode.Continuous"}
+ + -`Continuous` \ No newline at end of file diff --git a/docs/reference/settings/player/scrolloffsetx.mdx b/docs/reference/settings/player/scrolloffsetx.mdx index 1969415a2..7d68f617e 100644 --- a/docs/reference/settings/player/scrolloffsetx.mdx +++ b/docs/reference/settings/player/scrolloffsetx.mdx @@ -1,34 +1,38 @@ --- -title: player.playerOffsetX -description: The X-offset to add when scrolling. +title: player.scrollOffsetX +description: "The X-offset to add when scrolling." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -When alphaTab does an auto-scrolling to the displayed bar, it will try to align the view port to the displayed bar. If due to -some layout specifics or for aesthetics a small padding is needed, this setting allows an additional X-offset that is added to the -scroll position. - - -## Types - - - - `-10`
- `20` - - - -## Default Value +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { SettingsHeader } from '@site/src/components/SettingsHeader'; + + + +### Description +The X-offset to add when scrolling. When alphaTab does an auto-scrolling to the displayed bar, it will try to align the view port to the displayed bar. If due to +some layout specifics or for aesthetics a small padding is needed, this setting allows an additional X-offset that is added to the +scroll position. + + + +
{"scrollOffsetX"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"ScrollOffsetX"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"scrollOffsetX"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0` \ No newline at end of file diff --git a/docs/reference/settings/player/scrolloffsety.mdx b/docs/reference/settings/player/scrolloffsety.mdx index 15daa2014..8147d1ed3 100644 --- a/docs/reference/settings/player/scrolloffsety.mdx +++ b/docs/reference/settings/player/scrolloffsety.mdx @@ -1,34 +1,38 @@ --- title: player.scrollOffsetY -description: The Y-offset to add when scrolling. +description: "The Y-offset to add when scrolling." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -When alphaTab does an auto-scrolling to the displayed bar, it will try to align the view port to the displayed bar. If due to -some layout specifics or for aesthetics a small padding is needed, this setting allows an additional Y-offset that is added to the -scroll position. - - -## Types - - - - `-10`
- `20` - - - -## Default Value +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { SettingsHeader } from '@site/src/components/SettingsHeader'; + + + +### Description +The Y-offset to add when scrolling. When alphaTab does an auto-scrolling to the displayed bar, it will try to align the view port to the displayed bar. If due to +some layout specifics or for aesthetics a small padding is needed, this setting allows an additional Y-offset that is added to the +scroll position. + + + +
{"scrollOffsetY"}{":"}{" "}{"number"}{" "}{"="}{" "}{"0"}{";"}
+ + +
{"double"}{" "}{"ScrollOffsetY"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"0"}
+ + +
{"var"}{" "}{"scrollOffsetY"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"0"}
+ + -`0` \ No newline at end of file diff --git a/docs/reference/settings/player/scrollspeed.mdx b/docs/reference/settings/player/scrollspeed.mdx index a9236dd75..45d1bfa7f 100644 --- a/docs/reference/settings/player/scrollspeed.mdx +++ b/docs/reference/settings/player/scrollspeed.mdx @@ -1,34 +1,38 @@ --- title: player.scrollSpeed -description: How fast the scrolling to the new position should happen. +description: "How fast the scrolling to the new position should happen." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -If possible from the platform, alphaTab will try to do a smooth scrolling to the played bar. +### Description +How fast the scrolling to the new position should happen. If possible from the platform, alphaTab will try to do a smooth scrolling to the played bar. This setting defines the speed of scrolling in milliseconds. -Note that `player.nativeBrowserSmoothScroll` must be set to `false` for this to have an effect. - - - -## Types - - - - `200`
- `300`
- `100` - - +Note that {"nativeBrowserSmoothScroll"} must be set to `false` for this to have an effect. + + + +
{"scrollSpeed"}{":"}{" "}{"number"}{" "}{"="}{" "}{"300"}{";"}
+ + +
{"double"}{" "}{"ScrollSpeed"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"300"}
+ + +
{"var"}{" "}{"scrollSpeed"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"300"}
+ + -## Default Value -`300` \ No newline at end of file diff --git a/docs/reference/settings/player/slide.mdx b/docs/reference/settings/player/slide.mdx index 508709f57..c4a5a2882 100644 --- a/docs/reference/settings/player/slide.mdx +++ b/docs/reference/settings/player/slide.mdx @@ -1,93 +1,27 @@ --- title: player.slide -description: The slide settings allow control how the different slide types are generated for audio. +description: "The slide settings allow control how the different slide types are generated for audio." sidebar_custom_props: - domWildCard: true + domWildcard: true category: Player - since: 0.9.9 + since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -export var SlideSettings = [ - { - name: 'simpleSlidePitchOffset', - defaultValue: 6, - type: 'int', - description: 'The 1/4 tones (bend value) offset that simple slides like slide-out-below or slide-in-above use.' - }, - { - name: 'simpleSlideDurationRatio', - defaultValue: 0.25, - type: 'double', - description: - 'The percentage which the simple slides should take up from the whole note. for "slide into" ' + - 'effects the slide will take place from time 0 where the note is plucked to 25% of the overall ' + - 'note duration. For "slide out" effects the slide will start 75% and finish at 100% of the overall note duration.' - }, - { - name: 'shiftSlideDurationRatio', - defaultValue: 0.5, - type: 'double', - description: 'The percentage which the legato and shift slides should take up ' + - ' from the whole note. For a value 0.5 the sliding will start at 50% of the overall note duration ' + - ' and finish at 100%.' - } -]; - -export function toPascalCase(v) { - return v.substr(0, 1).toUpperCase() + v.substr(1); -} - -export function SlideRow({setting}) { - return ( - - -
-
-
- - - - - - - {setting.defaultValue} - - {setting.description} - - - ); -} - -export function SlideTable() { - const settings = SlideSettings.map(c => ); - return ( - - - - - - - - - - - {settings} - -
SettingTypeDefaultSummary
- ); -} - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab supports various types of slides which can be grouped into 3 types: +### Description +The slide settings allow control how the different slide types are generated for audio. AlphaTab supports various types of slides which can be grouped into 3 types: * Shift Slides * Legato Slides @@ -96,18 +30,31 @@ AlphaTab supports various types of slides which can be grouped into 3 types: * Slide into from below * Slide into from above * Slide out to below -* Slide out to above +* Slide out to above * Pick Slide out to above * Pick Slide out to below For the first 2 groups the audio generation can be adapted. For the pick slide the audio generation cannot be adapted -as there is no mechanism yet in alphaTab to play pick slides to make them sound real. +as there is no mechanism yet in alphaTab to play pick slides to make them sound real. For the first group only the duration or start point of the slide can be configured while for the second group -the duration/start-point and the pitch offset can be configured. +the duration/start-point and the pitch offset can be configured. + + + +
{"readonly"}{" "}{"slide"}{":"}{" "}{"SlidePlaybackSettings"}{";"}
+ + +
{"SlidePlaybackSettings"}{" "}{"Slide"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"slide"}{":"}{" "}{"SlidePlaybackSettings"}
+ + + -## Slide Settings +import ManualDocs from './_slide.mdx'; - \ No newline at end of file + diff --git a/docs/reference/settings/player/songbookbendduration.mdx b/docs/reference/settings/player/songbookbendduration.mdx index 9f032eda6..dc7af6b95 100644 --- a/docs/reference/settings/player/songbookbendduration.mdx +++ b/docs/reference/settings/player/songbookbendduration.mdx @@ -1,35 +1,38 @@ --- title: player.songBookBendDuration -description: The bend duration in milliseconds for songbook bends. +description: "The bend duration in milliseconds for songbook bends." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -If the display mode `songbook` is enabled, this has an effect on the way bends are played. For songbook bends the bend is done very quickly at the end or start of the beat. -This setting defines the play duration for those bends in milliseconds. This duration is in milliseconds unlike some other settings which are in midi ticks. The reason is that on songbook bends, -the bends should always be played in the same speed, regardless of the song tempo. Midi ticks are tempo dependent. - - -## Types - - - - `75`
- `120`
- `250` - - - -## Default Value +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { SettingsHeader } from '@site/src/components/SettingsHeader'; + + + +### Description +The bend duration in milliseconds for songbook bends. If the display mode `songbook` is enabled, this has an effect on the way bends are played. For songbook bends the bend is done very quickly at the end or start of the beat. +This setting defines the play duration for those bends in milliseconds. This duration is in milliseconds unlike some other settings which are in midi ticks. The reason is that on songbook bends, +the bends should always be played in the same speed, regardless of the song tempo. Midi ticks are tempo dependent. + + + +
{"songBookBendDuration"}{":"}{" "}{"number"}{" "}{"="}{" "}{"75"}{";"}
+ + +
{"double"}{" "}{"SongBookBendDuration"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"75"}
+ + +
{"var"}{" "}{"songBookBendDuration"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"75"}
+ + -`75` \ No newline at end of file diff --git a/docs/reference/settings/player/songbookdipduration.mdx b/docs/reference/settings/player/songbookdipduration.mdx index 0e63d1a92..28dfb2fac 100644 --- a/docs/reference/settings/player/songbookdipduration.mdx +++ b/docs/reference/settings/player/songbookdipduration.mdx @@ -1,35 +1,38 @@ --- title: player.songBookDipDuration -description: The duration of whammy dips in milliseconds for songbook whammys. +description: "The duration of whammy dips in milliseconds for songbook whammys." sidebar_custom_props: category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; - -## Description - -If the display mode `songbook` is enabled, this has an effect on the way whammy dips are played. For songbook dips the whammy is pressed very quickly at the start of the beat. -This setting defines the play duration for those whammy bars in milliseconds. This duration is in milliseconds unlike some other settings which are in midi ticks. The reason is that on songbook dips, -the whammy should always be pressed in the same speed, regardless of the song tempo. Midi ticks are tempo dependent. - - -## Types - - - - `75`
- `120`
- `250` - - - -## Default Value +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; + +import { SettingsHeader } from '@site/src/components/SettingsHeader'; + + + +### Description +The duration of whammy dips in milliseconds for songbook whammys. If the display mode `songbook` is enabled, this has an effect on the way whammy dips are played. For songbook dips the whammy is pressed very quickly at the start of the beat. +This setting defines the play duration for those whammy bars in milliseconds. This duration is in milliseconds unlike some other settings which are in midi ticks. The reason is that on songbook dips, +the whammy should always be pressed in the same speed, regardless of the song tempo. Midi ticks are tempo dependent. + + + +
{"songBookDipDuration"}{":"}{" "}{"number"}{" "}{"="}{" "}{"150"}{";"}
+ + +
{"double"}{" "}{"SongBookDipDuration"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"150"}
+ + +
{"var"}{" "}{"songBookDipDuration"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"150"}
+ + -`150` \ No newline at end of file diff --git a/docs/reference/settings/player/soundfont.mdx b/docs/reference/settings/player/soundfont.mdx index 908dcef6c..f9f6d0d27 100644 --- a/docs/reference/settings/player/soundfont.mdx +++ b/docs/reference/settings/player/soundfont.mdx @@ -1,30 +1,27 @@ --- title: player.soundFont -description: The sound font file to load for the player. +description: "The sound font file to load for the player." sidebar_custom_props: javaScriptOnly: true category: Player - JavaScript Specific since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; -## Description - -When the player is enabled the soundfont from this URL will be loaded automatically after the player is ready. +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Types + - - - +### Description +The sound font file to load for the player. When the player is enabled the soundfont from this URL will be loaded automatically after the player is ready. -## Default Value +
{"soundFont"}{":"}{" "}{"string"}{" "}{"|"}{" "}{"null"}{" "}{"="}{" "}{"null"}{";"}
-`null` \ No newline at end of file diff --git a/docs/reference/settings/player/vibrato.mdx b/docs/reference/settings/player/vibrato.mdx index e974b4df4..58fdb1f6a 100644 --- a/docs/reference/settings/player/vibrato.mdx +++ b/docs/reference/settings/player/vibrato.mdx @@ -1,118 +1,47 @@ --- title: player.vibrato -description: The Vibrato settings allow control how the different vibrato types are generated for audio. +description: "The Vibrato settings allow control how the different vibrato types are generated for audio." sidebar_custom_props: - domWildCard: true category: Player since: 0.9.6 --- -import { SinceBadge } from '@site/src/components/SinceBadge'; - - -import { PropertyDescription } from '@site/src/components/PropertyDescription'; -import {TypeTable, TypeRow} from '@site/src/components/TypeTable'; +import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; +import CodeBlock from '@theme/CodeBlock'; +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; import { CodeBadge } from '@site/src/components/CodeBadge'; +import { SinceBadge } from '@site/src/components/SinceBadge'; +import DynHeading from '@site/src/components/DynHeading'; +import Link from '@docusaurus/Link'; -export var VibratoSettings = [ - { - name: 'beatSlightAmplitude', - defaultValue: 2, - description: 'The amplitude for the beat-slight vibrato in semitones.' - }, - { - name: 'beatSlightLength', - defaultValue: 480, - description: 'The wavelength of the beat-slight vibrato in midi ticks.' - }, - { - name: 'beatWideAmplitude', - defaultValue: 2, - description: 'The amplitude for the beat-wide vibrato in semitones.' - }, - { - name: 'beatWideLength', - defaultValue: 480, - description: 'The wavelength of the beat-wide vibrato in midi ticks.' - }, - { - name: 'noteSlightAmplitude', - defaultValue: 0.5, - description: 'The amplitude for the note-slight vibrato in semitones.' - }, - { - name: 'noteSlightLength', - defaultValue: 360, - description: 'The wavelength of the note-slight vibrato in midi ticks.' - }, - { - name: 'noteWideAmplitude', - defaultValue: 1, - description: 'The amplitude for the note-wide vibrato in semitones.' - }, - { - name: 'noteWideLength', - defaultValue: 240, - description: 'The wavelength of the note-wide vibrato in midi ticks.' - } -]; - -export function toPascalCase(v) { - return v.substr(0, 1).toUpperCase() + v.substr(1); -} - -export function VibratoRow({setting}) { - return ( - - -
-
-
-
- - - - - - {setting.defaultValue} - - {setting.description} - - - ); -} - -export function VibratoTable() { - const settings = VibratoSettings.map(c => ); - return ( - - - - - - - - - - - {settings} - -
SettingTypeDefaultSummary
- ); -} - +import { SettingsHeader } from '@site/src/components/SettingsHeader'; -## Description + -AlphaTab supports 4 types of vibratos, for each vibrato the amplitude and the wavelength can be configured. The amplitude controls how many semitones +### Description +The Vibrato settings allow control how the different vibrato types are generated for audio. AlphaTab supports 4 types of vibratos, for each vibrato the amplitude and the wavelength can be configured. The amplitude controls how many semitones the vibrato changes the pitch up and down while playback. The wavelength controls how many midi ticks it will take to complete one up and down vibrato. -The 4 vibrato types are: +The 4 vibrato types are: 1. Beat Slight - A fast vibrato on the whole beat. This vibrato is usually done with the whammy bar. 2. Beat Wide - A slow vibrato on the whole beat. This vibrato is usually done with the whammy bar. 3. Note Slight - A fast vibrato on a single note. This vibrato is usually done with the finger on the fretboard. 4. Note Wide - A slow vibrato on a single note. This vibrato is usually done with the finger on the fretboard. -## Vibrato Settings + + +
{"readonly"}{" "}{"vibrato"}{":"}{" "}{"VibratoPlaybackSettings"}{";"}
+ + +
{"VibratoPlaybackSettings"}{" "}{"Vibrato"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"}"}
+ + +
{"val"}{" "}{"vibrato"}{":"}{" "}{"VibratoPlaybackSettings"}
+ + + + +import ManualDocs from './_vibrato.mdx'; - \ No newline at end of file + diff --git a/docs/reference/types.mdx b/docs/reference/types.mdx new file mode 100644 index 000000000..ab3f9ad78 --- /dev/null +++ b/docs/reference/types.mdx @@ -0,0 +1,6 @@ +--- +title: All Types +--- + +This section contains the raw generated documentation of all public available types like classes, interfaces and enums +with all the related reference documentation on properties, methods etc. \ No newline at end of file diff --git a/docs/releases/release1_4.mdx b/docs/releases/release1_4.mdx index 770f21e69..845d08331 100644 --- a/docs/releases/release1_4.mdx +++ b/docs/releases/release1_4.mdx @@ -280,7 +280,7 @@ We did not thoroughly test yet the decoding of many files and the impact of the #### player: Live Change of Transposition Pitches https://github.com/CoderLine/alphaTab/pull/1642 -The [`changeTrackTranspositionPitch`](/docs/reference/api/changetracktranspositionpitch) and [`setChannelTranspositionPitch`](/docs/reference/alphasynth/setchanneltranspositionpitch) APIs allow changing transposition pitches of individual tracks (or midi channels) on-the-fly +The [`changeTrackTranspositionPitch`](/docs/reference/api/changetracktranspositionpitch) and [`setChannelTranspositionPitch`](/docs/reference/types/synth/ialphasynth/setchanneltranspositionpitch.mdx) APIs allow changing transposition pitches of individual tracks (or midi channels) on-the-fly while the song is being played. ### alphaTex Extensions diff --git a/docs/tutorial-web/player.mdx b/docs/tutorial-web/player.mdx index 2f7269d3f..f7b507a56 100644 --- a/docs/tutorial-web/player.mdx +++ b/docs/tutorial-web/player.mdx @@ -118,7 +118,7 @@ api.playerReady.on(()=>{ First we add a placeholder in which we will show the percentage value. Then we will use the [`soundFontLoad`](/docs/reference/api/soundfontload) event to indicate the load progress of the (usually larger) SoundFont. -The [`playerReady`](/docs/reference/api/readyforplayback) will tell us when to hide the indicator. +The [`playerReady`](/docs/reference/api/playerready.mdx) will tell us when to hide the indicator. ## Main player controls diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 2264c79e3..0a234cf01 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -5,6 +5,7 @@ import type { NormalizedSidebarItem, SidebarItemsGeneratorDoc, } from "@docusaurus/plugin-content-docs/src/sidebars/types.js"; +import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives"; import * as path from "path"; import * as fs from "fs"; @@ -108,6 +109,7 @@ const config: Config = { docs: { sidebarPath: "./sidebars.ts", editUrl: "https://github.com/CoderLine/alphaTabWebsite/tree/main/", + beforeDefaultRemarkPlugins: [remarkGithubAdmonitionsToDirectives], async sidebarItemsGenerator({ defaultSidebarItemsGenerator, ...args diff --git a/package-lock.json b/package-lock.json index 5cf662dbf..0c1d61a11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,8 @@ "babel-plugin-macros": "^3.1.0", "copy-webpack-plugin": "^12.0.2", "docusaurus-plugin-sass": "^0.2.6", + "prettier": "^3.5.3", + "remark-github-admonitions-to-directives": "^2.1.0", "resolve-url-loader": "^5.0.0", "sass": "^1.85.1", "tsx": "^4.19.3", @@ -16336,6 +16338,21 @@ "postcss": "^8.4.31" } }, + "node_modules/prettier": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-error": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz", @@ -17184,6 +17201,21 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remark-github-admonitions-to-directives": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/remark-github-admonitions-to-directives/-/remark-github-admonitions-to-directives-2.1.0.tgz", + "integrity": "sha512-bI3E4Oj1pKY3ym2IQrrVCdORgEu0+mSrWgpCYFNy8QvytfnLs/nAacVPjkWU/JzDMUiQio2k4nTFP7bsIr9TSA==", + "dev": true, + "dependencies": { + "@types/mdast": "^4.0.0", + "mdast-util-directive": "^3.0.0", + "unified": "^11.0.0", + "unist-util-visit": "^5.0.0" + }, + "engines": { + "pnpm": ">=9.0.0" + } + }, "node_modules/remark-mdx": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz", diff --git a/package.json b/package.json index e7564b009..e8189386e 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "babel-plugin-macros": "^3.1.0", "copy-webpack-plugin": "^12.0.2", "docusaurus-plugin-sass": "^0.2.6", + "prettier": "^3.5.3", + "remark-github-admonitions-to-directives": "^2.1.0", "resolve-url-loader": "^5.0.0", "sass": "^1.85.1", "tsx": "^4.19.3", diff --git a/scripts/generate-alphatabdoc.mts b/scripts/generate-alphatabdoc.mts index 13cefe70c..40460b039 100644 --- a/scripts/generate-alphatabdoc.mts +++ b/scripts/generate-alphatabdoc.mts @@ -1,9 +1,11 @@ import path from "path"; import url from "url"; -import fs from "fs"; -import ts from "typescript"; - -const __dirname = url.fileURLToPath(new URL(".", import.meta.url)); +import ts, { JSDocParsingMode } from "typescript"; +import { generateSettings } from "./generate-settings.mjs"; +import { GenerateContext } from "./typeschema.mjs"; +import { generateTypeDocs } from "./generate-typedocs.mjs"; +import { cconsole } from "./generate-common.mjs"; +import { generateApiDocs } from "./generate-api.mjs"; const alphaTabEntryFile = url.fileURLToPath( import.meta.resolve("@coderline/alphatab") @@ -11,154 +13,38 @@ const alphaTabEntryFile = url.fileURLToPath( const alphaTabDir = path.resolve(alphaTabEntryFile, "..", ".."); const dts = path.resolve(alphaTabDir, "dist", "alphaTab.d.ts"); -const ast = ts.createSourceFile( - dts, - await fs.promises.readFile(dts, "utf-8"), - { - jsDocParsingMode: ts.JSDocParsingMode.ParseAll, - languageVersion: ts.ScriptTarget.Latest, - }, - true, - ts.ScriptKind.TS -); - -const lookup = new Map(); - -const outDir = path.resolve(__dirname, "..", "src", "alphatabdoc"); - -async function writeType(exportedName: string, schema: any) { - const parts = exportedName.replace("alphaTab.", "").split("."); - parts[parts.length - 1] = parts[parts.length - 1] + ".ts"; +const host = ts.createCompilerHost({}, true); +host.jsDocParsingMode = JSDocParsingMode.ParseAll; - const full = path.resolve(outDir, ...parts); - await fs.promises.mkdir(path.dirname(full), { recursive: true }); +const program = ts.createProgram({ + rootNames: [dts], + options: {}, + host: host, +}); - console.log("writing", full); - try { - await fs.promises.writeFile( - full, - `export default ${JSON.stringify(schema, null, 2)};` - ); - } catch (e) { - console.error("error writing", full, e, schema); - } -} - -function jsDocCommentSchema( - d?: ts.NodeArray | ts.JSDocComment | string -) { - if (!d) { - return undefined; - } +const ast = program.getSourceFile(dts); - if (typeof d === "string") { - return [{ - kind: "text", - text: d, - }]; - } - - if ("kind" in d) { - switch (d.kind) { - case ts.SyntaxKind.JSDocText: - return [{ - kind: "text", - text: (d as ts.JSDocText).text, - }]; - case ts.SyntaxKind.JSDocLink: - return [{ - kind: "link", - name: (d as ts.JSDocLink).name?.getText(), - text: (d as ts.JSDocLink).text, - }]; - case ts.SyntaxKind.JSDocLinkPlain: - return [{ - kind: "link", - name: (d as ts.JSDocLinkPlain).name?.getText(), - text: (d as ts.JSDocLinkPlain).text, - }]; - case ts.SyntaxKind.JSDocLinkCode: - return [{ - kind: "link", - name: (d as ts.JSDocLinkCode).name?.getText(), - text: (d as ts.JSDocLinkCode).text, - }]; - } - - return [{ - kind: "unknown", - }]; - } - - return d.reduce((d, x) => [d, ...jsDocCommentSchema(x)], []); -} - -function jsDocSchema(d: ts.Node) { - const comments = ts.getJSDocCommentsAndTags(d); - return comments.map((m) => { - if (ts.isJSDoc(m)) { - return { - kind: "jsdoc", - comment: jsDocCommentSchema(m.comment), - tags: m.tags?.map((t) => { - return { - kind: "jsdoctag", - tagName: t.tagName.text, - comment: jsDocCommentSchema(t.comment), - }; - }), - }; - } else { - return { - kind: "jsdoctag", - tagName: m.tagName.text, - comment: jsDocCommentSchema(m.comment), - }; - } - }); -} - -async function writeEnumDeclaration( - d: ts.EnumDeclaration, - exportedName: string -) { - await writeType(exportedName, { - name: exportedName, - tsdoc: jsDocSchema(d), - members: d.members.map((m) => { - return { - name: m.name.getText(), - tsdoc: jsDocSchema(m), - }; - }), - }); -} -async function writeClassDeclaration( - d: ts.ClassDeclaration, - exportedName: string -) { - await writeType(exportedName, { - name: exportedName, - tsdoc: jsDocSchema(d), - }); -} +const lookup = new Map(); -async function writeInterfaceDeclaration( - d: ts.InterfaceDeclaration, - exportedName: string -) { - await writeType(exportedName, { - name: exportedName, - tsdoc: jsDocSchema(d), - }); -} +const context: GenerateContext = { + checker: program.getTypeChecker(), + dts: dts, + flatExports: new Map(), + nameToExportName: new Map(), + settings: null!, +}; -async function writeModuleDeclaration( +function walkModuleDeclaration( d: ts.ModuleDeclaration, - exportedName: string + exportedName: string, + handler: ( + exportName: string, + internalName: string, + d: ts.DeclarationStatement + ) => void ) { if (!d.body || !ts.isModuleBlock(d.body)) { - console.warn("Unsupported module declaration", exportedName); + cconsole.warn("Unsupported module declaration", exportedName); return; } @@ -180,13 +66,18 @@ async function writeModuleDeclaration( } if (lookup.has(typeName)) { - walkExports(lookup.get(typeName)!, exportedName + "." + exportName); + walkExports( + lookup.get(typeName)!, + exportedName + "." + exportName, + typeName, + handler + ); } else { - console.warn("Unresolved export", typeName, "in", exportedName); + cconsole.warn("Unresolved export", typeName, "in", exportedName); } } } else { - console.warn( + cconsole.warn( "Unsupported statement", ts.SyntaxKind[s.kind], "in", @@ -196,19 +87,24 @@ async function writeModuleDeclaration( } } -async function walkExports(d: ts.DeclarationStatement, identifier: string) { +async function walkExports( + d: ts.DeclarationStatement, + exportName: string, + internalName: string, + handler: ( + exportName: string, + internalName: string, + d: ts.DeclarationStatement + ) => void +) { if (!d.name || !ts.isIdentifier(d.name)) { return; } - if (ts.isEnumDeclaration(d)) { - await writeEnumDeclaration(d, identifier); - } else if (ts.isClassDeclaration(d)) { - await writeClassDeclaration(d, identifier); - } else if (ts.isInterfaceDeclaration(d)) { - await writeInterfaceDeclaration(d, identifier); - } else if (ts.isModuleDeclaration(d)) { - await writeModuleDeclaration(d, identifier); + if (ts.isModuleDeclaration(d)) { + walkModuleDeclaration(d, exportName, handler); + } else { + handler(exportName, internalName, d); } } @@ -238,5 +134,24 @@ for (const d of ast!.statements) { } for (const { d, identifier } of exports) { - walkExports(d, "alphaTab." + identifier); + walkExports(d, "alphaTab." + identifier, identifier, async (e, i, d) => { + if ( + ts.isEnumDeclaration(d) || + ts.isClassDeclaration(d) || + ts.isInterfaceDeclaration(d) || + ts.isTypeAliasDeclaration(d) + ) { + context.flatExports.set(e, d); + context.nameToExportName.set(i, e); + } + }); } + +context.settings = context.flatExports.get( + "alphaTab.Settings" +) as ts.ClassDeclaration; +await generateSettings(context); +await generateTypeDocs(context); +await generateApiDocs(context); + +// TODO: run prettier on MDX files \ No newline at end of file diff --git a/scripts/generate-api.mts b/scripts/generate-api.mts new file mode 100644 index 000000000..b31dcba91 --- /dev/null +++ b/scripts/generate-api.mts @@ -0,0 +1,199 @@ +import path from "path"; +import fs from "fs"; +import { GenerateContext, repositoryRoot } from "./typeschema.mjs"; +import { + collectMembers, + getCategory, + getJsDocTagText, + getSummary, + isEvent, + isTargetWeb, + writeCommonImports, + writeEventDetails, + writeMethodDetails, + writePropertyDetails, +} from "./generate-common.mjs"; +import ts from "typescript"; +import { FileStream, openFileStream } from "./util.mjs"; + +export async function generateApiDocs(context: GenerateContext) { + const basePath = path.join(repositoryRoot, "docs", "reference", "api"); + await fs.promises.mkdir(basePath, { recursive: true }); + + const properties: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] = []; + + const events: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] = []; + + const methods: (ts.MethodDeclaration | ts.MethodSignature)[] = []; + + const members: Map = new Map(); + collectMembers(context, members, context.flatExports.get( + "alphaTab.AlphaTabApiBase" + ) as ts.ClassDeclaration, false); + collectMembers(context, members, context.flatExports.get( + "alphaTab.AlphaTabApi" + ) as ts.ClassDeclaration, false); + + for (const m of Array.from(members.values())) { + if (isEvent(context, m)) { + events.push(m as (typeof events)[0]); + } else if ( + ts.isPropertyDeclaration(m) || + ts.isPropertySignature(m) || + ts.isGetAccessorDeclaration(m) + ) { + properties.push(m); + } else if (ts.isMethodDeclaration(m) || ts.isMethodSignature(m)) { + methods.push(m); + } + } + + await writeProperties(context, basePath, properties); + await writeMethods(context, basePath, methods); + await writeEvents(context, basePath, events); +} + +async function writeProperties( + context: GenerateContext, + basePath: string, + properties: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] +) { + for (const member of properties) { + await writePropertyPage(context, basePath, member); + } +} + +async function writeMethods( + context: GenerateContext, + basePath: string, + methods: (ts.MethodDeclaration | ts.MethodSignature)[] +) { + for (const member of methods) { + await writeMethodPage(context, basePath, member); + } +} + +async function writeEvents( + context: GenerateContext, + basePath: string, + events: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] +) { + for (const member of events) { + await writeEventPage(context, basePath, member); + } +} + +async function writeFrontMatter( + context: GenerateContext, + fileStream: FileStream, + memberName: string, + member: ts.ClassElement | ts.TypeElement, + kind: string +) { + await fileStream.write("---\n"); + await fileStream.write(`title: ${memberName}\n`); + await fileStream.write( + `description: ${JSON.stringify(getSummary(context, member, false))}\n` + ); + await fileStream.write(`sidebar_custom_props:\n`); + await fileStream.write(` kind: ${kind}\n`); + + const isWebOnly = isTargetWeb(context, member); + if (isWebOnly) { + await fileStream.write(` javaScriptOnly: true\n`); + } + + await fileStream.write( + ` category: ${getCategory(context, member, " - Core")}\n` + ); + + const since = getJsDocTagText(context, member, "since"); + if (since) { + await fileStream.write(` since: ${since}\n`); + } + + await fileStream.write("---\n"); + + await writeCommonImports(fileStream); + + if (since) { + await fileStream.write(`\n`); + } +} + +async function writePropertyPage( + context: GenerateContext, + basePath: string, + member: + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration +) { + let memberName = member.name!.getText(); + let fileName = memberName.toLowerCase(); + if (memberName === "index") { + fileName = "index_"; + } + + const filePath = path.join(basePath, fileName + ".mdx"); + + await using fileStream = await openFileStream(filePath); + + await writeFrontMatter(context, fileStream, memberName, member, "property"); + + await fileStream.write( + "import { PropertyDescription } from '@site/src/components/PropertyDescription';\n\n" + ); + + await fileStream.write("\n"); + + await writePropertyDetails(context, fileStream, member); +} + +async function writeEventPage( + context: GenerateContext, + basePath: string, + member: + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration +) { + const memberName = member.name!.getText(); + const filePath = path.join(basePath, memberName.toLocaleLowerCase() + ".mdx"); + + await using fileStream = await openFileStream(filePath); + + await writeFrontMatter(context, fileStream, memberName, member, "event"); + + await writeEventDetails(context, fileStream, member); +} + +async function writeMethodPage( + context: GenerateContext, + basePath: string, + member: ts.MethodDeclaration | ts.MethodSignature +) { + const memberName = member.name!.getText(); + const filePath = path.join(basePath, memberName.toLocaleLowerCase() + ".mdx"); + + await using fileStream = await openFileStream(filePath); + + await writeFrontMatter(context, fileStream, memberName, member, "method"); + await writeMethodDetails(context, fileStream, member); +} diff --git a/scripts/generate-common.mts b/scripts/generate-common.mts new file mode 100644 index 000000000..4f8acd45c --- /dev/null +++ b/scripts/generate-common.mts @@ -0,0 +1,1892 @@ +import { PrismThemeEntry, themes as prismThemes } from "prism-react-renderer"; +import path from "path"; +import fs from "fs"; +import ts from "typescript"; +import { + GenerateContext, + getTypeWithNullableInfo, + TypeWithNullableInfo, + valueOrFirstDeclarationInDts, +} from "./typeschema.mjs"; +import { styleText } from "util"; +import { FileStream, toPascalCase } from "./util.mjs"; + +function toExampleKey(title: string) { + return title + .toLowerCase() + .replaceAll("#", "sharp") + .replaceAll(/[^a-z0-9]/g, "-"); +} + +export { repositoryRoot } from "./typeschema.mjs"; + +export function collectExamples( + context: GenerateContext, + node: ts.Node +): { key: string; title: string; markdown: string }[] { + const examples: { key: string; title: string; markdown: string }[] = []; + + for (const tag of getJSDocTags(context, node)) { + if (tag.tagName.text === "example") { + const [title, ...markdown] = jsDocCommentToMarkdown( + context, + tag.comment + ).split("\n"); + examples.push({ + key: toExampleKey(title.trim()), + title: title.trim(), + markdown: markdown.join("\n").trim(), + }); + } + } + + return examples; +} + +export function isJsonOnParent( + context: GenerateContext, + node: ts.Node +): boolean { + return !!getJSDocTags(context, node).find( + (t) => t.tagName.text === "json_on_parent" + ); +} + +export function isEvent(context: GenerateContext, node: ts.Node): boolean { + return !!getJSDocTags(context, node).find( + (t) => t.tagName.text === "eventProperty" + ); +} + +export function isTargetWeb(context: GenerateContext, node: ts.Node): boolean { + let isWebOnly = !!getJSDocTags(context, node).find( + (t) => t.tagName.text === "target" && t.comment === "web" + ); + + if (!isWebOnly) { + switch (node.kind) { + case ts.SyntaxKind.MethodSignature: + case ts.SyntaxKind.MethodDeclaration: + case ts.SyntaxKind.PropertySignature: + case ts.SyntaxKind.PropertyDeclaration: + case ts.SyntaxKind.EnumMember: + isWebOnly = isTargetWeb(context, node.parent); + break; + } + } + + return isWebOnly; +} + +export function isDomWildcard( + context: GenerateContext, + node: ts.Node +): boolean { + return !!getJSDocTags(context, node).find( + (t) => t.tagName.text === "domWildcard" + ); +} + +export function getCategory( + context: GenerateContext, + node: ts.Node, + fallbackCategory: string +): string { + const category = getJsDocTagText(context, node, "category"); + if (category) { + return category; + } + + if (isEvent(context, node)) { + return "Events" + fallbackCategory; + } + switch (node.kind) { + case ts.SyntaxKind.PropertyDeclaration: + case ts.SyntaxKind.PropertySignature: + case ts.SyntaxKind.GetAccessor: + return "Properties" + fallbackCategory; + case ts.SyntaxKind.MethodSignature: + case ts.SyntaxKind.MethodDeclaration: + return "Methods" + fallbackCategory; + } + + cconsole.warn("Unknown category for kind", ts.SyntaxKind[node.kind]); + return "General"; +} + +function hasJSDocInheritDocTag(node: ts.Node) { + return ts + .getJSDocTags(node) + .some( + (tag) => + tag.tagName.text === "inheritDoc" || tag.tagName.text === "inheritdoc" + ); +} + +function getBaseTypeList( + context: GenerateContext, + node: ts.ClassDeclaration | ts.InterfaceDeclaration +): (ts.ClassDeclaration | ts.InterfaceDeclaration)[] { + let baseTypes: (ts.ClassDeclaration | ts.InterfaceDeclaration)[] = []; + switch (node.kind) { + case ts.SyntaxKind.ClassDeclaration: + case ts.SyntaxKind.InterfaceDeclaration: + const clauses = node.heritageClauses; + if (clauses) { + for (const h of clauses) { + for (const t of h.types) { + const type = context.checker.getTypeAtLocation(t); + if (type.symbol) { + const decl = valueOrFirstDeclarationInDts(context, type.symbol); + if ( + decl && + (ts.isClassDeclaration(decl) || ts.isInterfaceDeclaration(decl)) + ) { + baseTypes.push(decl); + } + } + } + } + } + break; + } + return baseTypes; +} + +function findBaseOfDeclaration( + context: GenerateContext, + node: ts.Node, + selector: (baseNode: ts.Node) => T | undefined +): T | undefined { + let baseTypes: (ts.ClassDeclaration | ts.InterfaceDeclaration)[]; + + switch (node.kind) { + case ts.SyntaxKind.ClassDeclaration: + case ts.SyntaxKind.InterfaceDeclaration: + baseTypes = getBaseTypeList( + context, + node as ts.ClassDeclaration | ts.InterfaceDeclaration + ); + + for (const t of baseTypes) { + const v = selector(t); + if (v !== undefined) { + return v; + } + } + return undefined; + + case ts.SyntaxKind.MethodSignature: + case ts.SyntaxKind.MethodDeclaration: + case ts.SyntaxKind.PropertyDeclaration: + case ts.SyntaxKind.PropertySignature: + case ts.SyntaxKind.GetAccessor: + case ts.SyntaxKind.SetAccessor: + baseTypes = getBaseTypeList( + context, + node.parent as ts.ClassDeclaration | ts.InterfaceDeclaration + ); + + for (const t of baseTypes) { + const member = t.members.find( + (m) => + m.name?.getText() === + (node as ts.ClassElement | ts.TypeElement).name?.getText() + ); + if (member) { + const v = selector(member); + if (v !== undefined) { + return v; + } + } + } + + break; + } + + return undefined; +} + +export function getJSDocCommentsAndTags( + context: GenerateContext, + node: ts.Node +) { + if (hasJSDocInheritDocTag(node)) { + const base = findBaseOfDeclaration(context, node, (baseNode) => { + if (hasJSDocInheritDocTag(baseNode)) { + return undefined; + } + const docs = ts.getJSDocCommentsAndTags(baseNode); + if (docs.length === 0) { + return undefined; + } + return docs; + }); + if (base) { + return base; + } + } + return ts.getJSDocCommentsAndTags(node); +} + +export function getJSDocTags(context: GenerateContext, node: ts.Node) { + if (hasJSDocInheritDocTag(node)) { + const base = findBaseOfDeclaration(context, node, (baseNode) => { + if (hasJSDocInheritDocTag(baseNode)) { + return undefined; + } + const tags = ts.getJSDocTags(baseNode); + if (tags.length > 0) { + return tags; + } + return undefined; + }); + if (base) { + return base; + } + } + return ts.getJSDocTags(node); +} + +export function getJsDocTagText( + context: GenerateContext, + node: ts.Node, + tagName: string +): string { + return jsDocCommentToMarkdown( + context, + getJSDocTags(context, node).find((t) => t.tagName.text === tagName)?.comment + ); +} + +export function getSummary( + context: GenerateContext, + node: ts.Node, + resolveLinks: boolean, + shorten: boolean = true +): string { + const jsDoc = getJSDocCommentsAndTags(context, node); + if ((jsDoc.length > 1 && ts.isJSDoc(jsDoc[0])) || jsDoc.length === 1) { + const text = jsDocCommentToMarkdown( + context, + jsDoc[0].comment, + resolveLinks + ); + if (shorten) { + return ( + text + .split("\n") + .find((l) => l.trim().length > 0) + ?.trim() ?? "" + ); + } else { + return text; + } + } + + return ""; +} + +let warnOnMissingDescription = false; +export function enableWarningsOnMissingDocs() { + warnOnMissingDescription = true; +} + +export function disableWarningsOnMissingDocs() { + warnOnMissingDescription = false; +} + +export function getFullDescription(context: GenerateContext, node: ts.Node) { + const description = `${getSummary( + context, + node, + true, + false + )} ${getJsDocTagText(context, node, "remarks")}`.trim(); + + if (!description) { + const isOwn = + path.basename(node.getSourceFile().fileName) === + path.basename(context.dts); + if (isOwn && warnOnMissingDescription) { + let name = + "name" in node ? (node.name as ts.Node).getText() : node.getText(); + + if (ts.isParameter(node)) { + name = + (node.parent.parent as ts.NamedDeclaration).name!.getText() + + "." + + node.parent.name!.getText() + + "(" + + name + + ")"; + } else if ( + ts.isClassDeclaration(node.parent) || + ts.isInterfaceDeclaration(node.parent) + ) { + name = node.parent.name!.getText() + "." + name; + } + + cconsole.warn( + "Missing description for", + name, + "at", + node.getSourceFile().fileName, + node.getSourceFile().getLineAndCharacterOfPosition(node.pos) + ); + } + + return "(no description)"; + } + + return description; +} + +function rewriteJsDocText(s: string): string { + return s + .replaceAll("https://alphatab.net/", "/") + .replaceAll("https://www.alphatab.net/", "/") + .replaceAll(/\{@since ([^}]+)\}/g, (_, since) => { + return ``; + }) + .replaceAll(/\{@([^}]+)\}/g, (match) => { + return `\`${match}\``; + }); +} + +export function jsDocCommentToMarkdown( + context: GenerateContext, + comment: ts.JSDoc["comment"] | ts.JSDocComment, + resolveLinks: boolean = true +) { + if (comment !== undefined) { + let text = ""; + + if (typeof comment === "string") { + text += rewriteJsDocText(comment); + } else if ("kind" in comment) { + switch (comment.kind) { + case ts.SyntaxKind.JSDocText: + text += rewriteJsDocText(comment.text); + break; + case ts.SyntaxKind.JSDocLink: + case ts.SyntaxKind.JSDocLinkCode: + case ts.SyntaxKind.JSDocLinkPlain: + const builder = new TypeReferencedCodeBuilder(context); + + let linkText = comment.text; + if (comment.name) { + if (!linkText) { + linkText = comment.name.getText(); + } + if (resolveLinks) { + // workaround for https://github.com/microsoft/TypeScript/issues/61433 + let symbol: ts.Symbol | undefined; + if (comment.name.getText().endsWith(".name")) { + // resolve parent + if (ts.isQualifiedName(comment.name)) { + symbol = context.checker.getSymbolAtLocation( + comment.name.left + ); + } else if (ts.isJSDocMemberName(comment.name)) { + symbol = context.checker.getSymbolAtLocation( + comment.name.left + ); + } + + symbol = symbol?.members?.get( + ts.escapeLeadingUnderscores("name") + ); + } else { + symbol = context.checker.getSymbolAtLocation(comment.name); + } + + if (symbol) { + builder.settingOrDeclaration(symbol, linkText); + } else { + builder.identifier(linkText); + cconsole.error( + `Could not resolve tsdoc link ${comment.name.getText()} at `, + comment + .getSourceFile() + .getLineAndCharacterOfPosition(comment.pos) + ); + } + } else { + builder.identifier(linkText); + } + } + + text += builder.toMdx("js", "inline"); + + break; + } + } else { + for (const n of comment) { + text += jsDocCommentToMarkdown(context, n, resolveLinks); + } + } + + return text; + } + return ""; +} + +function tryGetSettingsUrl( + context: GenerateContext, + symbol: ts.Symbol +): string | undefined { + if (!symbol) { + return undefined; + } + + if ("parent" in symbol && symbol.parent) { + const parentSymbol = symbol.parent as ts.Symbol; + if (parentSymbol.name.endsWith("Settings")) { + const settingsProp = context.settings.members.find( + (m) => + ts.isPropertyDeclaration(m) && + m.type && + context.checker.getTypeAtLocation(m.type).symbol == symbol.parent + ); + if (settingsProp) { + return `/docs/reference/settings/${settingsProp + .name!.getText() + .toLowerCase()}/${symbol.name.toLowerCase()}`; + } else { + cconsole.warn( + "Could not find a property of type ", + parentSymbol.name, + " in Settings" + ); + return undefined; + } + } + + return undefined; + } else { + // console.warn("Symbol", symbol.name, " has no parent symbol", + // node.getSourceFile().fileName, + // node.getSourceFile().getLineAndCharacterOfPosition(node.pos), + + // ); + return undefined; + } +} + +function getDeclarationReferenceUrl( + context: GenerateContext, + element: ts.Node, + warnOnMissingReference: boolean = true, +): string { + const fileName = element.getSourceFile().fileName; + + if (path.basename(fileName) !== path.basename(context.dts)) { + return ""; + } + + switch (element.kind) { + case ts.SyntaxKind.ClassDeclaration: + case ts.SyntaxKind.EnumDeclaration: + case ts.SyntaxKind.InterfaceDeclaration: + case ts.SyntaxKind.TypeAliasDeclaration: + let name = (element as ts.DeclarationStatement).name!.getText(); + if (context.nameToExportName.has(name)) { + name = context.nameToExportName.get(name)!; + if (name.startsWith("alphaTab.")) { + name = name.substring(9); + } + } else { + cconsole.warn( + `Type ${name} is not exported, no documentation generated and cross reference not linked` + ); + return ""; + } + + return `/docs/reference/types/${name + .replaceAll(".", "/") + .toLowerCase()}`; + + case ts.SyntaxKind.MethodDeclaration: + case ts.SyntaxKind.MethodSignature: + case ts.SyntaxKind.Constructor: + case ts.SyntaxKind.GetAccessor: + case ts.SyntaxKind.SetAccessor: + case ts.SyntaxKind.PropertyDeclaration: + case ts.SyntaxKind.PropertySignature: + let page = (element as ts.ClassElement).name!.getText().toLowerCase(); + if(page === "index") { + page = "index_"; + } + return ( + getDeclarationReferenceUrl( + context, + element.parent as ts.ClassDeclaration | ts.InterfaceDeclaration, + ) + '/' + page + ); + case ts.SyntaxKind.EnumMember: + return ( + getDeclarationReferenceUrl( + context, + element.parent as ts.EnumDeclaration + ) + + "#" + + (element as ts.EnumMember).name!.getText().toLowerCase() + ); + case ts.SyntaxKind.TypeParameter: + return ""; + default: + cconsole.error( + "Unhandled node kind", + ts.SyntaxKind[element.kind], + "at", + element.getSourceFile().fileName, + element.getSourceFile().getLineAndCharacterOfPosition(element.pos), + element.getText() + ); + } + + if (warnOnMissingReference) { + cconsole.error( + "Failed to resolve reference link for declaration ", + element + ); + } + return ""; +} + +function getTypeReferenceUrl( + context: GenerateContext, + element: TypeWithNullableInfo, + warnOnMissingReference: boolean = true +): string { + // TODO: better generation of type references, we can have multiple links e.g. Map where + // all identifiers get their own links. + + if ( + element.fullString === "any" || + element.fullString === "unknown" || + element.fullString === "void" + ) { + return ""; + } else if (element.isPrimitiveType || element.isTypedArray) { + return ""; + } else if (element.isArray) { + return getTypeReferenceUrl(context, element.arrayItemType!); + } else if (element.isFunctionType) { + return ""; + } else if (element.isTypeLiteral) { + return ""; + } else if (element.isOwnType) { + let declaration = valueOrFirstDeclarationInDts(context, element.symbol!); + if (declaration) { + return getTypeReferenceUrl(context, declaration as any); + } + } else if (element.typeArguments) { + // currently we mostly have one own type in generics (e.g. maps, sets etc.) + for (const a of element.typeArguments) { + if (a.isOwnType || a.isUnionType) { + const reference = getTypeReferenceUrl(context, a, false); + if (reference) { + return reference; + } + } + } + + // there are maps with only primitives + return ""; + } else if (element.isUnionType) { + for (const a of element.unionTypes!) { + const reference = getTypeReferenceUrl(context, a, false); + if (reference) { + return reference; + } + } + } else { + let declaration = valueOrFirstDeclarationInDts(context, element.symbol!); + if (declaration) { + return getDeclarationReferenceUrl(context, declaration as any); + } + } + + if (warnOnMissingReference) { + cconsole.error("Failed to resolve reference link for type ", element); + } + return ""; +} + +export async function writeExamples( + fileStream: FileStream, + context: GenerateContext, + element: ts.Node +) { + const examples = collectExamples(context, element); + if (examples.length === 1) { + await fileStream.write(`\n## Example - ${examples[0].title}\n\n`); + await fileStream.write(`${examples[0].markdown}\n`); + } else if (examples.length > 1) { + await fileStream.write(`\n## Examples\n\n`); + await fileStream.write("\n`); + + for (const example of examples) { + await fileStream.write( + `\n` + ); + + await fileStream.write(`${example.markdown}\n`); + + await fileStream.write(`\n`); + } + + await fileStream.write(`\n`); + } +} + +function isInternal(context: GenerateContext, node: ts.Node) { + const tags = getJSDocTags(context, node); + + if (tags.find((t) => t.tagName.text === "internal")) { + return true; + } + + return false; +} + +export async function writeEventDetails( + context: GenerateContext, + fileStream: FileStream, + member: + | ts.PropertySignature + | ts.PropertyDeclaration + | ts.GetAccessorDeclaration +) { + await writeCommonDescription(context, fileStream, member); + + await writeEventSignatures(context, fileStream, member); + + await writeManualDocs(fileStream, member); + + await writeExamples(fileStream, context, member); +} + +export async function writeEventSignatures( + context: GenerateContext, + fileStream: FileStream, + member: + | ts.PropertySignature + | ts.PropertyDeclaration + | ts.GetAccessorDeclaration +) { + await writePropertySignatures(context, fileStream, member); +} + +export async function writeMethodDetails( + context: GenerateContext, + fileStream: FileStream, + member: ts.MethodDeclaration | ts.MethodSignature +) { + await writeCommonDescription(context, fileStream, member); + + await writeMethodSignatures(context, fileStream, member); + await writeMethodParameters(context, fileStream, member); + await writeMethodReturn(context, fileStream, member); + + await writeManualDocs(fileStream, member); + + await writeExamples(fileStream, context, member); +} + +export async function writeMethodReturn( + context: GenerateContext, + fileStream: FileStream, + m: ts.MethodDeclaration | ts.MethodSignature +) { + const returnsDoc = getJsDocTagText(context, m, "returns"); + if (returnsDoc) { + await fileStream.write(`### Returns \n`); + await fileStream.write(`${returnsDoc} \n\n`); + } +} + +export async function writeMethodParameters( + context: GenerateContext, + fileStream: FileStream, + m: ts.MethodDeclaration | ts.MethodSignature +) { + if (m.parameters.length > 0) { + await fileStream.write(`\n\n`); + + for (let i = 0; i < m.parameters.length; i++) { + await fileStream.write( + ` \n` + ); + + for (const line of getFullDescription(context, m.parameters[i]).split( + "\n" + )) { + await fileStream.write(` ${line}\n`); + } + + await fileStream.write(` \n`); + } + await fileStream.write(`\n\n`); + } +} + +export async function writeMethodSignatures( + context: GenerateContext, + fileStream: FileStream, + m: ts.MethodDeclaration | ts.MethodSignature +) { + const isWebOnly = isTargetWeb(context, m); + + if (!isWebOnly) { + await fileStream.writeLine( + `` + ); + await fileStream.writeLine(``); + } + + const builder = new TypeReferencedCodeBuilder(context); + if (m.modifiers) { + for (const mod of m.modifiers) { + builder.keyword(mod.getText()); + builder.whitespace(" "); + } + } + + builder.identifier(m.name.getText()); + builder.token("("); + + for (let i = 0; i < m.parameters.length; i++) { + if (i > 0) { + builder.token(","); + builder.whitespace(" "); + } + + builder.identifier(m.parameters[i].name.getText()); + if (m.parameters[i].questionToken) { + builder.token("?"); + } + + builder.token(":"); + builder.whitespace(" "); + builder.type( + getTypeWithNullableInfo(context, m.parameters[i].type, true, false) + ); + + if (m.parameters[i].initializer) { + builder.whitespace(" "); + builder.token("="); + builder.whitespace(" "); + builder.identifier(m.parameters[i].initializer!.getText()); + } + } + + builder.token(")"); + builder.token(":"); + builder.whitespace(" "); + builder.type(getTypeWithNullableInfo(context, m.type, true, false)); + + await fileStream.writeLine(builder.toMdx("js", "block")); + + if (!isWebOnly) { + await fileStream.writeLine(``); + await fileStream.writeLine(``); + + builder.reset(); + if (m.modifiers) { + for (const mod of m.modifiers) { + switch (mod.kind) { + case ts.SyntaxKind.StaticKeyword: + case ts.SyntaxKind.AbstractKeyword: + case ts.SyntaxKind.OverrideKeyword: + builder.keyword(mod.getText()); + builder.whitespace(" "); + break; + } + } + } + + builder.type(getTypeWithNullableInfo(context, m.type, false, false)); + builder.whitespace(" "); + builder.identifier(toPascalCase(m.name!.getText())); + builder.token("("); + for (let i = 0; i < m.parameters.length; i++) { + if (i > 0) { + builder.token(","); + builder.whitespace(" "); + } + + builder.type( + getTypeWithNullableInfo( + context, + m.parameters[i].type, + false, + !!m.parameters[i].questionToken + ) + ); + + builder.whitespace(" "); + builder.identifier(m.parameters[i].name.getText()); + + if (m.parameters[i].initializer) { + builder.whitespace(" "); + builder.token("="); + builder.whitespace(" "); + builder.identifier(m.parameters[i].initializer!.getText()); + } + } + builder.token(")"); + + await fileStream.writeLine(builder.toMdx("c#", "block")); + + await fileStream.writeLine(``); + await fileStream.writeLine(``); + + builder.reset(); + + if (m.type!.getText().startsWith("Promise<")) { + builder.identifier("suspend"); + builder.whitespace(" "); + } + + builder.identifier("fun"); + builder.whitespace(" "); + builder.identifier(m.name!.getText()); + builder.token("("); + + for (let i = 0; i < m.parameters.length; i++) { + if (i > 0) { + builder.token(","); + builder.whitespace(" "); + } + + builder.identifier(m.parameters[i].name.getText()); + builder.token(":"); + builder.whitespace(" "); + builder.type( + getTypeWithNullableInfo( + context, + m.parameters[i].type, + false, + !!m.parameters[i].questionToken + ) + ); + } + + builder.token(")"); + builder.token(":"); + builder.whitespace(" "); + builder.type(getTypeWithNullableInfo(context, m.type, false, false)); + + await fileStream.writeLine(builder.toMdx("kotlin", "block")); + + await fileStream.writeLine(``); + await fileStream.writeLine(``); + } + + await fileStream.writeLine(); +} + +export async function writeCommonImports(fileStream: FileStream) { + await fileStream.writeLine(); + await fileStream.writeLine( + "import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable';" + ); + await fileStream.writeLine("import CodeBlock from '@theme/CodeBlock';"); + await fileStream.writeLine('import Tabs from "@theme/Tabs";'); + await fileStream.writeLine('import TabItem from "@theme/TabItem";'); + await fileStream.writeLine( + "import { CodeBadge } from '@site/src/components/CodeBadge';" + ); + await fileStream.writeLine( + "import { SinceBadge } from '@site/src/components/SinceBadge';" + ); + await fileStream.writeLine( + "import DynHeading from '@site/src/components/DynHeading';" + ); + await fileStream.writeLine("import Link from '@docusaurus/Link';"); + + await fileStream.writeLine(); +} + +async function writeCommonDescription( + context: GenerateContext, + fileStream: FileStream, + member: ts.TypeElement | ts.ClassElement +) { + await fileStream.write(`\n### Description\n`); + await fileStream.write(`${getFullDescription(context, member)}\n\n`); +} + +export async function writeManualDocs( + fileStream: FileStream, + member: ts.TypeElement | ts.ClassElement +) { + try { + const importFile = path.join( + path.dirname(fileStream.path), + "_" + member.name!.getText().toLowerCase() + ".mdx" + ); + await fs.promises.access(importFile, fs.constants.R_OK); + + await fileStream.write( + `\nimport ManualDocs from './_${member + .name!.getText() + .toLowerCase()}.mdx';\n` + ); + await fileStream.write("\n"); + await fileStream.write(`\n`); + } catch (e) { + // ignore + } +} + +export async function writePropertyDetails( + context: GenerateContext, + fileStream: FileStream, + member: + | ts.PropertySignature + | ts.PropertyDeclaration + | ts.GetAccessorDeclaration +) { + await writeCommonDescription(context, fileStream, member); + + await writePropertySignatures(context, fileStream, member); + + await writeManualDocs(fileStream, member); + + await writeExamples(fileStream, context, member); +} + +export const cconsole = { + log: (...args) => { + console.log(...args); + }, + debug: (...args) => { + console.log( + ...args.map((a) => (typeof a === "string" ? styleText(["dim"], a) : a)) + ); + }, + + info: (...args) => { + console.log( + ...args.map((a) => (typeof a === "string" ? styleText(["blue"], a) : a)) + ); + }, + + warn: (...args) => { + console.log( + ...args.map((a) => (typeof a === "string" ? styleText(["yellow"], a) : a)) + ); + }, + + error: (...args) => { + console.log( + ...args.map((a) => (typeof a === "string" ? styleText(["red"], a) : a)) + ); + }, +}; + +function shouldGenerateMember( + context: GenerateContext, + m: ts.TypeElement | ts.ClassElement +) { + if (!m.name) { + // e.g. constructors + return false; + } + + // private + if ( + ts.canHaveModifiers(m) && + m.modifiers?.some( + (mod) => + mod.kind == ts.SyntaxKind.PrivateKeyword || + mod.kind === ts.SyntaxKind.ProtectedKeyword + ) + ) { + return false; + } + + if (isInternal(context, m) || ts.isSetAccessor(m)) { + return false; + } + + return true; +} + +export function collectMembers( + context: GenerateContext, + members: Map, + exportedType: ts.ClassDeclaration | ts.InterfaceDeclaration, + collectBase: boolean = true +) { + for (const m of exportedType.members) { + if (shouldGenerateMember(context, m) && !members.has(m.name!.getText())) { + members.set(m.name!.getText(), m); + } + } + + const extendsClause = exportedType.heritageClauses?.find( + (c) => c.token === ts.SyntaxKind.ExtendsKeyword + ); + if (extendsClause && collectBase) { + const symbol = context.checker.getTypeAtLocation( + extendsClause.types[0] + ).symbol; + const baseType = valueOrFirstDeclarationInDts(context, symbol); + if ( + baseType && + (ts.isClassDeclaration(baseType) || ts.isInterfaceDeclaration(baseType)) + ) { + collectMembers(context, members, baseType); + } else if (symbol.members) { + for (const [_, member] of symbol.members) { + const decl = valueOrFirstDeclarationInDts(context, member); + if (decl) { + if (ts.isClassElement(decl) || ts.isTypeElement(decl)) { + if ( + shouldGenerateMember(context, decl) && + !members.has(decl.name!.getText()) + ) { + members.set(decl.name!.getText(), decl); + } + } + } + } + } + } +} + +async function writePropertySignatures( + context: GenerateContext, + fileStream: FileStream, + m: ts.PropertySignature | ts.PropertyDeclaration | ts.GetAccessorDeclaration +) { + const isWebOnly = isTargetWeb(context, m); + + if (!isWebOnly) { + await fileStream.writeLine( + `` + ); + await fileStream.writeLine(``); + } + + const builder = new TypeReferencedCodeBuilder(context); + + if (m.modifiers) { + for (const mod of m.modifiers) { + switch (mod.kind) { + case ts.SyntaxKind.AccessorKeyword: + break; + default: + builder.keyword(mod.getText()); + builder.whitespace(" "); + break; + } + } + } + + const isReadonlyAccessor = + ts.isGetAccessor(m) && + !(m.parent as ts.ClassDeclaration | ts.InterfaceDeclaration).members.some( + (p) => ts.isSetAccessor(p) && p.name.getText() === m.name.getText() + ); + + if (isReadonlyAccessor) { + builder.keyword("readonly"); + builder.whitespace(" "); + } + + builder.identifier(m.name.getText()); + if (m.questionToken) { + builder.token("?"); + } + builder.token(":"); + builder.whitespace(" "); + builder.type(getTypeWithNullableInfo(context, m.type, true, false)); + + let defaultValue = getJsDocTagText(context, m, "defaultValue"); + let defaultValueIsCode = + defaultValue.startsWith("`") && defaultValue.endsWith("`"); + if (defaultValueIsCode) { + defaultValue = defaultValue.substring(1, defaultValue.length - 1); + } + if ((m.parent as ts.NamedDeclaration).name!?.getText().endsWith("Json")) { + defaultValue = ""; + } + + if (defaultValue) { + builder.whitespace(" "); + builder.token("="); + builder.whitespace(" "); + builder.identifier(defaultValue); + } + + builder.token(";"); + + await fileStream.writeLine(builder.toMdx("js", "block")); + + if (!isWebOnly) { + await fileStream.writeLine(``); + await fileStream.writeLine(``); + + const isReadonly = + m.modifiers?.some((mod) => mod.kind === ts.SyntaxKind.ReadonlyKeyword) || + (ts.isGetAccessor(m) && + !( + m.parent as ts.ClassDeclaration | ts.InterfaceDeclaration + ).members.some( + (p) => ts.isSetAccessor(p) && p.name.getText() === m.name.getText() + )); + const isStatic = m.modifiers?.some( + (mod) => mod.kind === ts.SyntaxKind.StaticKeyword + ); + const isAbstract = m.modifiers?.some( + (mod) => mod.kind === ts.SyntaxKind.AbstractKeyword + ); + + builder.reset(); + if (isStatic) { + builder.keyword("static"); + builder.whitespace(" "); + } + + if (isAbstract) { + builder.keyword("abstract"); + builder.whitespace(" "); + } + + builder.type(getTypeWithNullableInfo(context, m.type, false, false)); + builder.whitespace(" "); + builder.identifier(toPascalCase(m.name!.getText())); + builder.whitespace(" "); + builder.token("{"); + builder.whitespace(" "); + builder.keyword("get"); + builder.token(";"); + builder.whitespace(" "); + + if (!isReadonly) { + builder.keyword("set"); + builder.token(";"); + builder.whitespace(" "); + } + + builder.token("}"); + + if (defaultValue) { + builder.whitespace(" "); + builder.token("="); + builder.whitespace(" "); + builder.identifier(defaultValue); + } + + await fileStream.writeLine(builder.toMdx("c#", "block")); + + await fileStream.writeLine(``); + await fileStream.writeLine(``); + + builder.reset(); + if (isStatic) { + builder.keyword("companion"); + builder.whitespace(" "); + builder.keyword("object"); + builder.whitespace(" "); + builder.token("{"); + builder.whitespace(" "); + } + + if (isAbstract) { + builder.keyword("abstract"); + builder.whitespace(" "); + } + + builder.keyword(isReadonly ? "val" : "var"); + builder.whitespace(" "); + builder.identifier(m.name!.getText()); + builder.token(":"); + builder.whitespace(" "); + builder.type(getTypeWithNullableInfo(context, m.type, false, false)); + + if (defaultValue) { + builder.whitespace(" "); + builder.token("="); + builder.whitespace(" "); + builder.identifier(defaultValue); + } + + if (isStatic) { + builder.whitespace(" "); + builder.token("}"); + } + + await fileStream.writeLine(builder.toMdx("kotlin", "block")); + + await fileStream.writeLine(``); + await fileStream.writeLine(``); + } + + await fileStream.writeLine(); +} + +type TypeReferencedCodeLink = { link: string; linkText: string }; +type TypeReferencedCodeToken = { + kind: "identifier" | "token" | "keyword" | "whitespace" | "type" | "link"; + content: string | TypeWithNullableInfo | TypeReferencedCodeLink; +}; + +type TypeReferencedCodeLanguage = "js" | "c#" | "kotlin"; + +export class TypeReferencedCodeBuilder { + private chunks: TypeReferencedCodeToken[] = []; + + public constructor(private context: GenerateContext) {} + + public identifier(s: string) { + this.chunks.push({ kind: "identifier", content: s }); + } + + public whitespace(s: string) { + this.chunks.push({ kind: "whitespace", content: s }); + } + + public token(s: string) { + this.chunks.push({ kind: "token", content: s }); + } + + public keyword(s: string) { + this.chunks.push({ kind: "keyword", content: s }); + } + + public type(t: TypeWithNullableInfo) { + this.chunks.push({ kind: "type", content: t }); + } + + public declaration(t: ts.NamedDeclaration, linkText?: string) { + linkText ??= t.name?.getText() ?? "UnknownReference"; + + const referenceUrl = getDeclarationReferenceUrl(this.context, t as any); + if (referenceUrl) { + this.chunks.push({ + kind: "link", + content: { link: referenceUrl, linkText }, + }); + } else { + // cconsole.error( + // `Could not resolve setting or declaration link ${linkText} for declaration `, + // t + // ); + this.chunks.push({ + kind: "identifier", + content: linkText, + }); + } + } + + public settingOrDeclaration(s: ts.Symbol, text: string) { + const settingsLink = tryGetSettingsUrl(this.context, s); + if (settingsLink) { + this.chunks.push({ + kind: "link", + content: { link: settingsLink, linkText: text }, + }); + } else { + let declaration = valueOrFirstDeclarationInDts(this.context, s); + if (declaration) { + if (!("name" in declaration)) { + cconsole.error("Unsupported declaration type", declaration); + return; + } + + this.declaration(declaration! as ts.NamedDeclaration); + } else { + cconsole.error( + `Could not resolve setting or declaration link ${text} for symbol `, + s + ); + cconsole.warn(); + this.chunks.push({ + kind: "identifier", + content: text, + }); + } + } + } + + public reset() { + this.chunks = []; + } + + public toMdx( + language: TypeReferencedCodeLanguage, + style: "block" | "inline" + ) { + // NOTE: no dark theme + const theme = prismThemes.github; + const lookup = new Map(); + + lookup.set("identifier", theme.plain); + lookup.set("token", theme.plain); + lookup.set("keyword", theme.plain); + lookup.set("whitespace", theme.plain); + + for (const styles of theme.styles) { + if (styles.types.includes("variable")) { + lookup.set("identifier", styles.style); + } + if (styles.types.includes("punctuation")) { + lookup.set("token", styles.style); + } + if (styles.types.includes("keyword")) { + lookup.set("keyword", styles.style); + } + } + + let code = ""; + + switch (style) { + case "inline": + code += ``; + break; + case "block": + code += `
`;
+        code += ``;
+        break;
+    }
+
+    const translated = this.translateChunks(this.chunks, language);
+
+    for (const chunk of translated) {
+      switch (chunk.kind) {
+        case "identifier":
+        case "token":
+        case "keyword":
+        case "whitespace":
+          code +=
+            `{` +
+            JSON.stringify(chunk.content as string) +
+            `}`;
+          break;
+
+        // case "type": // rewritten during translateChunks
+        //   break;
+        case "link":
+          const link = chunk.content as TypeReferencedCodeLink;
+          code += `{${JSON.stringify(link.linkText)}}`;
+          break;
+      }
+    }
+
+    switch (style) {
+      case "inline":
+        code += "";
+        break;
+      case "block":
+        code += `
`; + break; + } + + return code; + } + + translateChunks( + chunks: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage + ): TypeReferencedCodeToken[] { + const translated: TypeReferencedCodeToken[] = []; + + for (const chunk of chunks) { + switch (chunk.kind) { + case "identifier": + case "token": + case "keyword": + case "whitespace": + case "link": + translated.push(chunk); + break; + case "type": + this.translateType( + translated, + language, + chunk.content as TypeWithNullableInfo + ); + break; + } + } + + return translated; + } + + translateType( + tokens: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage, + type: TypeWithNullableInfo + ) { + if (type.isPrimitiveType) { + this.translatePrimitiveType(tokens, language, type); + return; + } + + if (type.isArray) { + this.translateArrayType(tokens, language, type); + return; + } + + if (type.isUnionType) { + this.translateUnionType(tokens, language, type); + return; + } + + this.translateTypeReference(tokens, language, type); + } + translateUnionType( + tokens: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage, + type: TypeWithNullableInfo + ) { + switch (language) { + case "js": + for (let i = 0; i < type.unionTypes!.length; i++) { + if (i > 0) { + tokens.push({ + kind: "whitespace", + content: " ", + }); + tokens.push({ + kind: "token", + content: "|", + }); + tokens.push({ + kind: "whitespace", + content: " ", + }); + } + + this.translateType(tokens, language, type.unionTypes![i]); + } + break; + case "c#": + case "kotlin": + cconsole.error( + "Requested generation of union type for unsupported language", + language, + type.fullString + ); + break; + } + } + + translateTypeReference( + tokens: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage, + type: TypeWithNullableInfo + ) { + const referenceLink = getTypeReferenceUrl( + this.context, + type, + false + ); + + switch (language) { + case "js": + if (referenceLink) { + tokens.push({ + kind: "link", + content: { + link: referenceLink, + linkText: type.ownTypeAsString, + }, + }); + } else { + tokens.push({ + kind: "identifier", + content: type.ownTypeAsString, + }); + } + break; + case "c#": + switch (type.ownTypeAsString) { + case "void": + tokens.push({ + kind: "keyword", + content: "void", + }); + return; + case "Error": + tokens.push({ + kind: "link", + content: { + link: "https://learn.microsoft.com/en-us/dotnet/api/system.exception", + linkText: "System.Exception", + }, + }); + break; + case "Promise": + tokens.push({ + kind: "link", + content: { + link: type.typeArguments + ? "https://learn.microsoft.com/en-us/dotnet/api/system.threading.tasks.task-1" + : "https://learn.microsoft.com/en-us/dotnet/api/system.threading.tasks.task", + linkText: "System.Threading.Task", + }, + }); + break; + default: + if (referenceLink) { + tokens.push({ + kind: "link", + content: { + link: referenceLink, + linkText: toPascalCase(type.ownTypeAsString), + }, + }); + } else { + tokens.push({ + kind: "identifier", + content: toPascalCase(type.ownTypeAsString), + }); + } + break; + } + + break; + case "kotlin": + switch (type.ownTypeAsString) { + case "void": + tokens.push({ + kind: "identifier", + content: "Unit", + }); + return; + case "Error": + tokens.push({ + kind: "link", + content: { + link: "https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-throwable/", + linkText: "kotlin.Throwable", + }, + }); + break; + case "Promise": + if (!type.typeArguments) { + tokens.push({ + kind: "identifier", + content: "Unit", + }); + } else { + this.translateType(tokens, language, type.typeArguments[0]); + } + return; + case "Map": + if ( + type.typeArguments![0].isPrimitiveType || + type.typeArguments![1].isPrimitiveType + ) { + const keyPart = type.typeArguments![0].isPrimitiveType + ? this.kotlinPrimitiveType(type.typeArguments![0]) + : "Object"; + + const valuePart = type.typeArguments![1].isPrimitiveType + ? this.kotlinPrimitiveType(type.typeArguments![1]) + : "Object"; + + tokens.push({ + kind: "identifier", + content: "alphaTab.collections." + keyPart + valuePart + "Map", + }); + } else { + tokens.push({ + kind: "identifier", + content: "alphaTab.collections.Map", + }); + } + break; + default: + if (referenceLink) { + tokens.push({ + kind: "link", + content: { + link: referenceLink, + linkText: type.ownTypeAsString, + }, + }); + } else { + tokens.push({ + kind: "identifier", + content: type.ownTypeAsString, + }); + } + break; + } + + break; + } + + this.translateTypeArguments(tokens, language, type); + + this.translateNullableInfo(tokens, language, type); + } + + translateTypeArguments( + tokens: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage, + type: TypeWithNullableInfo + ) { + if (!type.typeArguments) { + return; + } + + tokens.push({ + kind: "token", + content: "<", + }); + + for (let i = 0; i < type.typeArguments.length; i++) { + if (i > 0) { + tokens.push({ + kind: "token", + content: ",", + }); + tokens.push({ + kind: "whitespace", + content: " ", + }); + } + + this.translateType(tokens, language, type.typeArguments[i]); + } + + tokens.push({ + kind: "token", + content: ">", + }); + } + + translateArrayType( + tokens: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage, + type: TypeWithNullableInfo + ) { + switch (language) { + case "js": + this.translateType(tokens, language, type.arrayItemType!); + tokens.push({ + kind: "token", + content: "[]", + }); + break; + case "c#": + tokens.push({ + kind: "link", + content: { + linkText: "IList", + link: + "https://learn.microsoft.com/en-us/dotnet/api/system.collections.ilist", + }, + }); + tokens.push({ + kind: "token", + content: "<", + }); + this.translateType(tokens, language, type.arrayItemType!); + tokens.push({ + kind: "token", + content: ">", + }); + + break; + case "kotlin": + if (type.arrayItemType!.isPrimitiveType) { + switch (type.arrayItemType!.ownTypeAsString) { + case "boolean": + tokens.push({ + kind: "identifier", + content: "alphaTab.collections.BooleanList", + }); + break; + case "number": + tokens.push({ + kind: "identifier", + content: "alphaTab.collections.DoubleList", + }); + break; + } + } else { + tokens.push({ + kind: "identifier", + content: "alphaTab.collections.List", + }); + tokens.push({ + kind: "token", + content: "<", + }); + this.translateType(tokens, language, type.arrayItemType!); + tokens.push({ + kind: "token", + content: ">", + }); + } + break; + } + + this.translateNullableInfo(tokens, language, type); + } + + kotlinPrimitiveType(type: TypeWithNullableInfo) { + switch (type.ownTypeAsString) { + case "number": + return "Double"; + case "string": + return "String"; + case "boolean": + return "Boolean"; + case "BigInt": + return "Long"; + case "unknown": + return "Any"; + } + return type.ownTypeAsString; + } + + translatePrimitiveType( + tokens: TypeReferencedCodeToken[], + language: "js" | "c#" | "kotlin", + type: TypeWithNullableInfo + ) { + const referenceLink = getTypeReferenceUrl(this.context, type, false); + let name: string = ""; + switch (language) { + case "js": + name = type.ownTypeAsString; + break; + case "c#": + switch (type.ownTypeAsString) { + case "number": + name = "double"; + break; + case "string": + name = "string"; + break; + case "boolean": + name = "bool"; + break; + case "BigInt": + name = "long"; + break; + case "unknown": + name = "object"; + break; + } + break; + case "kotlin": + name = this.kotlinPrimitiveType(type); + break; + } + + if (referenceLink) { + tokens.push({ + kind: "link", + content: { + link: referenceLink, + linkText: name, + }, + }); + } else { + tokens.push({ + kind: "identifier", + content: name, + }); + } + + this.translateNullableInfo(tokens, language, type); + } + + translateNullableInfo( + tokens: TypeReferencedCodeToken[], + language: TypeReferencedCodeLanguage, + type: TypeWithNullableInfo + ) { + switch (language) { + case "js": + if (type.isOptional) { + tokens.push({ + kind: "whitespace", + content: " ", + }); + tokens.push({ + kind: "token", + content: "|", + }); + tokens.push({ + kind: "whitespace", + content: " ", + }); + tokens.push({ + kind: "keyword", + content: "undefined", + }); + } + if (type.isNullable) { + tokens.push({ + kind: "whitespace", + content: " ", + }); + tokens.push({ + kind: "token", + content: "|", + }); + tokens.push({ + kind: "whitespace", + content: " ", + }); + tokens.push({ + kind: "keyword", + content: "null", + }); + } + break; + case "c#": + if (type.isOptional || type.isNullable) { + tokens.push({ + kind: "token", + content: "?", + }); + } + break; + case "kotlin": + if (type.isOptional || type.isNullable) { + tokens.push({ + kind: "token", + content: "?", + }); + } + break; + } + } +} diff --git a/scripts/generate-settings.mts b/scripts/generate-settings.mts new file mode 100644 index 000000000..a32a247c9 --- /dev/null +++ b/scripts/generate-settings.mts @@ -0,0 +1,108 @@ +import path from "path"; +import fs from "fs"; +import ts from "typescript"; +import { + disableWarningsOnMissingDocs, + enableWarningsOnMissingDocs, + getCategory, + getJsDocTagText, + getSummary, + isDomWildcard, + isJsonOnParent, + isTargetWeb, + repositoryRoot, + writeCommonImports, + writePropertyDetails, +} from "./generate-common.mjs"; +import { GenerateContext } from "./typeschema.mjs"; +import { openFileStream } from "./util.mjs"; + +export async function generateSettings(context: GenerateContext) { + enableWarningsOnMissingDocs(); + try { + const allProps = context.settings.members.filter((m) => { + const isStatic = + ts.canHaveModifiers(m) && + m.modifiers?.some((mod) => mod.kind == ts.SyntaxKind.StaticKeyword); + + return ts.isPropertyDeclaration(m) && !isStatic; + }) as ts.PropertyDeclaration[]; + + for (const m of allProps) { + const basePath = path.join( + repositoryRoot, + "docs", + "reference", + "settings", + m.name.getText().toLowerCase() + ); + + const subSettingType = + context.checker.getTypeAtLocation(m).symbol.valueDeclaration; + if (subSettingType && ts.isClassDeclaration(subSettingType)) { + for (const member of subSettingType.members) { + const isSubSettingPropStatic = + ts.canHaveModifiers(member) && + member.modifiers?.some( + (mod) => mod.kind == ts.SyntaxKind.StaticKeyword + ); + + if (ts.isPropertyDeclaration(member) && !isSubSettingPropStatic) { + const settingFile = path.join( + basePath, + member.name.getText().toLowerCase() + ".mdx" + ); + + await fs.promises.mkdir(basePath, { recursive: true }); + + await using fileStream = await openFileStream(settingFile); + await fileStream.write("---\n"); + await fileStream.write( + `title: ${m.name.getText()}.${member.name.getText()}\n` + ); + + await fileStream.write( + `description: ${JSON.stringify( + getSummary(context, member, false) + )}\n` + ); + await fileStream.write(`sidebar_custom_props:\n`); + + const isWebOnly = isTargetWeb(context, member); + if (isWebOnly) { + await fileStream.write(` javaScriptOnly: true\n`); + } + + if (isDomWildcard(context, member)) { + await fileStream.write(` domWildcard: true\n`); + } + + if (isJsonOnParent(context, m)) { + await fileStream.write(` jsOnParent: true\n`); + } + + await fileStream.write( + ` category: ${getCategory(context, member, "")}\n` + ); + + const since = getJsDocTagText(context, member, "since"); + await fileStream.write(` since: ${since}\n`); + + await fileStream.write("---\n"); + + await writeCommonImports(fileStream); + + await fileStream.write( + "import { SettingsHeader } from '@site/src/components/SettingsHeader';\n\n" + ); + await fileStream.write(`\n`); + + await writePropertyDetails(context, fileStream, member); + } + } + } + } + } finally { + disableWarningsOnMissingDocs(); + } +} diff --git a/scripts/generate-typedocs.mts b/scripts/generate-typedocs.mts new file mode 100644 index 000000000..6887e5008 --- /dev/null +++ b/scripts/generate-typedocs.mts @@ -0,0 +1,523 @@ +import path from "path"; +import fs from "fs"; +import { + GenerateContext, + getTypeWithNullableInfo, + repositoryRoot, +} from "./typeschema.mjs"; +import { + collectMembers, + getFullDescription, + getJsDocTagText, + getSummary, + isEvent, + writeCommonImports, + writeEventDetails, + writeMethodDetails, + writePropertyDetails, + TypeReferencedCodeBuilder, +} from "./generate-common.mjs"; +import ts from "typescript"; +import { FileStream, openFileStream } from "./util.mjs"; + +export async function generateTypeDocs(context: GenerateContext) { + for (const [exportedName, exportedType] of context.flatExports) { + const parts = exportedName.split("."); + if (parts[0] === "alphaTab") { + parts.shift(); + } + + const basePath = path.join( + repositoryRoot, + "docs", + "reference", + "types", + ...parts.map((p) => p.toLowerCase()) + ); + + const filePath = path.join(basePath, "index.mdx"); + + await fs.promises.mkdir(basePath, { recursive: true }); + + await using fileStream = await openFileStream(filePath); + await fileStream.write("---\n"); + await fileStream.write(`sidebar_label: ${exportedType.name!.getText()}\n`); + await fileStream.write(`title: ${exportedName}\n`); + await fileStream.write("---\n"); + + await writeCommonImports(fileStream); + + await fileStream.write( + `\nDescription\n\n` + ); + await fileStream.write(`${getFullDescription(context, exportedType)}\n\n`); + + if ( + ts.isClassDeclaration(exportedType) || + ts.isInterfaceDeclaration(exportedType) || + ts.isTypeAliasDeclaration(exportedType) + ) { + let definition = new TypeReferencedCodeBuilder(context); + if (exportedType.modifiers) { + for (const m of exportedType.modifiers) { + switch (m.kind) { + case ts.SyntaxKind.AbstractKeyword: + definition.whitespace(" "); + definition.keyword("abstract"); + break; + } + } + } + + definition.whitespace(" "); + if (ts.isClassDeclaration(exportedType)) { + definition.keyword("class"); + } else if (ts.isInterfaceDeclaration(exportedType)) { + definition.keyword("interface"); + } else if (ts.isTypeAliasDeclaration(exportedType)) { + definition.keyword("type"); + } + definition.whitespace(" "); + definition.identifier(exportedType.name!.getText()); + + if ( + exportedType.typeParameters && + exportedType.typeParameters.length > 0 + ) { + definition.token("<"); + + for (let i = 0; i < exportedType.typeParameters.length; i++) { + if (i > 0) { + definition.token(","); + definition.whitespace(" "); + } + + definition.identifier(exportedType.typeParameters[i].name.getText()); + } + + definition.token(">"); + } + + if (ts.isTypeAliasDeclaration(exportedType)) { + definition.whitespace(" "); + definition.token("="); + definition.whitespace(" "); + definition.type( + getTypeWithNullableInfo(context, exportedType.type, true, false) + ); + } else if (exportedType.heritageClauses) { + for (const clause of exportedType.heritageClauses) { + switch (clause.token) { + case ts.SyntaxKind.ExtendsKeyword: + definition.whitespace(" "); + definition.keyword("extends"); + break; + case ts.SyntaxKind.ImplementsKeyword: + definition.whitespace(" "); + definition.keyword("implements"); + break; + } + + definition.whitespace(" "); + + for (const type of clause.types) { + definition.type( + getTypeWithNullableInfo(context, type, true, false) + ); + } + } + } + + await fileStream.writeLine(definition.toMdx("js", 'block')); + + const properties: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] = []; + + const events: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] = []; + + const methods: (ts.MethodDeclaration | ts.MethodSignature)[] = []; + + const members: Map = new Map(); + if (!ts.isTypeAliasDeclaration(exportedType)) { + collectMembers(context, members, exportedType); + + const sortedMembers = Array.from(members.values()).sort((a, b) => { + return a.name!.getText().localeCompare(b.name!.getText()); + }); + + for (const m of sortedMembers) { + if (isEvent(context, m)) { + events.push(m as (typeof events)[0]); + } else if ( + ts.isPropertyDeclaration(m) || + ts.isPropertySignature(m) || + ts.isGetAccessorDeclaration(m) + ) { + properties.push(m); + } else if (ts.isMethodDeclaration(m) || ts.isMethodSignature(m)) { + methods.push(m); + } + } + + await writeProperties( + context, + fileStream, + basePath, + exportedType, + properties + ); + await writeMethods( + context, + fileStream, + basePath, + exportedType, + methods + ); + await writeEvents(context, fileStream, basePath, exportedType, events); + } + } else if (ts.isEnumDeclaration(exportedType)) { + await writeEnumMembers(context, fileStream, exportedType); + } + } +} + +async function writeProperties( + context: GenerateContext, + fileStream: FileStream, + basePath: string, + parent: ts.ClassDeclaration | ts.InterfaceDeclaration, + properties: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] +) { + if (properties.length === 0) { + return; + } + + await fileStream.write( + `\nProperties\n\n` + ); + + await fileStream.write( + `\n` + ); + await fileStream.write(` \n`); + + for (const member of properties) { + await fileStream.write(` \n`); + + const referenceBuilder = new TypeReferencedCodeBuilder(context); + referenceBuilder.declaration(member); + await fileStream.write( + ` \n` + ); + + referenceBuilder.reset(); + referenceBuilder.type( + getTypeWithNullableInfo( + context, + member.type, + true, + !!member.questionToken + ) + ); + + await fileStream.writeLine( + ` {props.detailed && ()}` + ); + + let defaultValue = getJsDocTagText(context, member, "defaultValue"); + if (!defaultValue) { + defaultValue = "(no default)"; + } + await fileStream.writeLine( + ` {props.detailed && }` + ); + + let description = + getSummary(context, member, true, true) + + getInheritenceInfo(context, parent, member); + + await fileStream.write(` \n`); + + await fileStream.write(` \n`); + + await writePropertyPage(context, basePath, member); + } + await fileStream.write(` \n`); + await fileStream.write(`
${referenceBuilder.toMdx("js", "inline")}${referenceBuilder.toMdx("js", "inline")}{${JSON.stringify(defaultValue)}}\n`); + await fileStream.write( + `${description + .split("\n") + .map((l) => ` ${l}`) + .join("\n")}\n` + ); + await fileStream.write(`
\n`); +} + +async function writeMethods( + context: GenerateContext, + fileStream: FileStream, + basePath: string, + parent: ts.ClassDeclaration | ts.InterfaceDeclaration, + methods: (ts.MethodDeclaration | ts.MethodSignature)[] +) { + if (methods.length === 0) { + return; + } + + await fileStream.write( + `\nMethods\n\n` + ); + + await fileStream.write( + `\n` + ); + await fileStream.write(` \n`); + + for (const member of methods) { + await fileStream.write(` \n`); + + const parameters = member.parameters + .map((p) => p.type!.getText()) + .join(", "); + await fileStream.write( + ` \n` + ); + + let description = + getSummary(context, member, true, true) + + getInheritenceInfo(context, parent, member); + await fileStream.write(` \n`); + + await fileStream.write(` \n`); + + await writeMethodPage(context, basePath, member); + } + await fileStream.write(` \n`); + await fileStream.write(`
[\`${member.name.getText()}(${parameters})\`](./${member.name + .getText() + .toLowerCase()}.mdx)\n`); + await fileStream.write( + `${description + .split("\n") + .map((l) => ` ${l}`) + .join("\n")}\n` + ); + await fileStream.write(`
\n`); +} + +async function writeEvents( + context: GenerateContext, + fileStream: FileStream, + basePath: string, + parent: ts.ClassDeclaration | ts.InterfaceDeclaration, + events: ( + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration + )[] +) { + if (events.length === 0) { + return; + } + + await fileStream.write( + `\nEvents\n\n` + ); + + await fileStream.write( + `\n` + ); + await fileStream.write(` \n`); + + for (const member of events) { + await fileStream.write(` \n`); + + await fileStream.write( + ` \n` + ); + + let description = + getSummary(context, member, true, true) + + getInheritenceInfo(context, parent, member); + await fileStream.write(` \n`); + + await fileStream.write(` \n`); + + await writeEventPage(context, basePath, member); + } + await fileStream.write(` \n`); + await fileStream.write(`
[\`${member.name.getText()}\`](./${member.name + .getText() + .toLowerCase()}.mdx)\n`); + await fileStream.write( + `${description + .split("\n") + .map((l) => ` ${l}`) + .join("\n")}\n` + ); + await fileStream.write(`
\n`); +} + +async function writeEnumMembers( + context: GenerateContext, + fileStream: FileStream, + exportedType: ts.EnumDeclaration +) { + await fileStream.write( + `\nEnum Members\n\n` + ); + + await fileStream.write( + `\n` + ); + await fileStream.write( + ` \n` + ); + await fileStream.write(` \n`); + + for (const member of exportedType.members) { + await fileStream.write(` \n`); + + await fileStream.write( + ` \n` + ); + + const numericValue = context.checker.getConstantValue(member); + await fileStream.write(` \n`); + + let description = getFullDescription(context, member); + const since = getJsDocTagText(context, member, "since"); + if (since) { + description = `${description}\n `; + } + + await fileStream.write(` \n`); + + await fileStream.write(` \n`); + } + await fileStream.write(` \n`); + await fileStream.write(`
NameNumeric ValueDescription
\`${member.name.getText()}\`\`${numericValue}\`\n`); + await fileStream.write( + `${description + .split("\n") + .map((l) => ` ${l}`) + .join("\n")}\n` + ); + await fileStream.write(`
\n`); +} + +async function writeFrontMatter( + context: GenerateContext, + fileStream: FileStream, + memberName: string, + member: ts.ClassElement | ts.TypeElement, + kind: string +) { + await fileStream.write("---\n"); + await fileStream.write(`title: ${memberName}\n`); + await fileStream.write(`sidebar_custom_props:\n`); + await fileStream.write(` kind: ${kind}\n`); + + const since = getJsDocTagText(context, member, "since"); + if (since) { + await fileStream.write(` since: ${since}\n`); + } + + await fileStream.write("---\n"); + + await writeCommonImports(fileStream); + + if (since) { + await fileStream.write(`\n`); + } +} + +async function writePropertyPage( + context: GenerateContext, + basePath: string, + member: + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration +) { + let memberName = member.name!.getText(); + let fileName = memberName.toLowerCase(); + if (memberName === "index") { + fileName = "index_"; + } + + const filePath = path.join(basePath, fileName + ".mdx"); + + await using fileStream = await openFileStream(filePath); + + await writeFrontMatter(context, fileStream, memberName, member, "property"); + await writePropertyDetails(context, fileStream, member); +} + +async function writeEventPage( + context: GenerateContext, + basePath: string, + member: + | ts.PropertyDeclaration + | ts.PropertySignature + | ts.GetAccessorDeclaration +) { + const memberName = member.name!.getText(); + const filePath = path.join(basePath, memberName.toLocaleLowerCase() + ".mdx"); + + await using fileStream = await openFileStream(filePath); + + await writeFrontMatter(context, fileStream, memberName, member, "event"); + await writeEventDetails(context, fileStream, member); +} + +async function writeMethodPage( + context: GenerateContext, + basePath: string, + member: ts.MethodDeclaration | ts.MethodSignature +) { + const memberName = member.name!.getText(); + const filePath = path.join(basePath, memberName.toLocaleLowerCase() + ".mdx"); + + await using fileStream = await openFileStream(filePath); + + await writeFrontMatter(context, fileStream, memberName, member, "method"); + await writeMethodDetails(context, fileStream, member); +} + +function getInheritenceInfo( + context: GenerateContext, + parent: ts.ClassDeclaration | ts.InterfaceDeclaration, + member: ts.ClassElement | ts.TypeElement +) { + let info = ""; + // inheritence info + if (member.parent !== parent) { + info += " (Inherited from "; + const builder = new TypeReferencedCodeBuilder(context); + builder.declaration( + member.parent as ts.ClassDeclaration | ts.InterfaceDeclaration + ); + + let name = (member.parent as ts.NamedDeclaration).name!.getText(); + if (context.nameToExportName.has(name)) { + name = context.nameToExportName.get(name)!; + } + + info += builder.toMdx("js", "inline"); + + info += ")"; + } + return info; +} diff --git a/scripts/typeschema.mts b/scripts/typeschema.mts new file mode 100644 index 000000000..fb28bf490 --- /dev/null +++ b/scripts/typeschema.mts @@ -0,0 +1,343 @@ +import ts from "typescript"; +import path from "node:path"; +import url from "url"; + +export const repositoryRoot = path.resolve( + url.fileURLToPath(new URL(".", import.meta.url)), + ".." +); + +export type GenerateContext = { + checker: ts.TypeChecker; + settings: ts.ClassDeclaration; + dts: string; + nameToExportName: Map; + flatExports: Map; +}; + +export type TypeWithNullableInfo = { + readonly symbol: ts.Symbol | undefined; + readonly isNullable: boolean; + readonly isOptional: boolean; + readonly isUnionType: boolean; + readonly isPrimitiveType: boolean; + readonly isEnumType: boolean; + readonly isOwnType: boolean; + readonly isTypedArray: boolean; + readonly ownTypeAsString: string; + readonly fullString: string; + readonly isArray: boolean; + readonly isTypeLiteral: boolean; + readonly isFunctionType: boolean; + readonly arrayItemType?: TypeWithNullableInfo; + readonly typeArguments?: readonly TypeWithNullableInfo[]; + readonly unionTypes?: readonly TypeWithNullableInfo[]; +}; + +type Writeable = { -readonly [P in keyof T]: T[P] }; + +export function findModule(type: ts.Type) { + const symbol = type.getSymbol() ?? type.aliasSymbol; + + if (symbol && symbol.declarations) { + for (const decl of symbol.declarations) { + const file = decl.getSourceFile(); + if (file) { + const relative = path.relative( + repositoryRoot, + path.resolve(file.fileName) + ); + return relative; + } + } + + return "./" + symbol.name; + } + + return ""; +} + +export function getTypeWithNullableInfo( + context: GenerateContext, + node: ts.TypeNode | ts.ExpressionWithTypeArguments | undefined, + allowUnion: boolean, + isOptionalFromDeclaration: boolean +): TypeWithNullableInfo { + if (!node) { + return { + isNullable: false, + isOptional: isOptionalFromDeclaration, + isUnionType: false, + isPrimitiveType: false, + isEnumType: false, + isTypedArray: false, + isOwnType: false, + fullString: "unknown", + ownTypeAsString: "unknown", + isArray: false, + symbol: context.checker.getUnknownType().getSymbol(), + isTypeLiteral: false, + isFunctionType: false, + }; + } + + let typeInfo: Writeable = { + isNullable: false, + isOptional: isOptionalFromDeclaration, + isUnionType: false, + isPrimitiveType: false, + isEnumType: false, + isTypedArray: false, + isOwnType: false, + fullString: node.getText(), + ownTypeAsString: "", + isArray: false, + symbol: null!, + isTypeLiteral: false, + isFunctionType: false, + }; + let mainTypeNode: ts.TypeNode | undefined; + + const fillBaseInfoFrom = (typeNode: ts.TypeNode) => { + const type = context.checker.getTypeFromTypeNode(typeNode); + typeInfo.symbol = type.getSymbol() ?? type.aliasSymbol; + typeInfo.ownTypeAsString = typeNode.getText(); + + const modulePath = findModule(type); + typeInfo.isOwnType = + !!modulePath && path.basename(modulePath) === path.basename(context.dts); + + typeInfo.isTypeLiteral = ts.isTypeLiteralNode(typeNode); + typeInfo.isFunctionType = ts.isFunctionTypeNode(typeNode); + + if (ts.isTypeReferenceNode(typeNode) && typeNode.typeArguments) { + typeInfo.typeArguments = typeNode.typeArguments.map((p) => + getTypeWithNullableInfo(context, p, allowUnion, false) + ); + + // cut off generics on name + const genericsStart = typeInfo.ownTypeAsString.indexOf("<"); + if (genericsStart >= 0) { + typeInfo.ownTypeAsString = typeInfo.ownTypeAsString + .substring(0, genericsStart) + .trim(); + } + } + + if (isEnumType(type)) { + typeInfo.isEnumType = true; + } else if (isPrimitiveType(type)) { + typeInfo.isPrimitiveType = true; + } else if (context.checker.isArrayType(type)) { + typeInfo.isArray = true; + + if (typeInfo.typeArguments) { + typeInfo.arrayItemType = typeInfo.typeArguments[0]; + } else if (ts.isArrayTypeNode(typeNode)) { + typeInfo.arrayItemType = getTypeWithNullableInfo( + context, + typeNode.elementType, + allowUnion, + false + ); + } + } else if (typeInfo.symbol) { + switch (typeInfo.symbol.name) { + case "Uint8Array": + case "Uint16Array": + case "Uint32Array": + case "Int8Array": + case "Int16Array": + case "Int32Array": + case "Float32Array": + case "Float64Array": + typeInfo.isTypedArray = true; + typeInfo.arrayItemType = { + fullString: "number", + isArray: false, + isEnumType: false, + isNullable: false, + isOptional: false, + isOwnType: false, + isPrimitiveType: false, + isTypedArray: true, + isUnionType: false, + ownTypeAsString: "number", + symbol: context.checker.getNumberType().getSymbol(), + isTypeLiteral: false, + isFunctionType: false, + }; + break; + } + } + }; + + if (ts.isUnionTypeNode(node)) { + for (const t of node.types) { + if (t.kind === ts.SyntaxKind.NullKeyword) { + typeInfo.isNullable = true; + } else if ( + ts.isLiteralTypeNode(t) && + t.literal.kind === ts.SyntaxKind.NullKeyword + ) { + typeInfo.isNullable = true; + } else if (t.kind === ts.SyntaxKind.UndefinedKeyword) { + typeInfo.isOptional = true; + } else if ( + ts.isLiteralTypeNode(t) && + t.literal.kind === ts.SyntaxKind.UndefinedKeyword + ) { + typeInfo.isOptional = true; + } else if (!mainTypeNode) { + mainTypeNode = t; + } else if (allowUnion) { + if (!typeInfo.unionTypes) { + typeInfo.unionTypes = [ + getTypeWithNullableInfo(context, mainTypeNode!, false, false), + ]; + } + + typeInfo.isUnionType = true; + + (typeInfo.unionTypes as TypeWithNullableInfo[]).push( + getTypeWithNullableInfo(context, t, false, false) + ); + } else { + throw new Error( + "Multi union types on not supported at this location: " + + node.getSourceFile().fileName + + ":" + + node.getText() + ); + } + } + + if (!typeInfo.unionTypes && mainTypeNode) { + fillBaseInfoFrom(mainTypeNode); + } + } else if (ts.isExpressionWithTypeArguments(node)) { + const type = context.checker.getTypeAtLocation(node); + typeInfo.symbol = type.getSymbol(); + typeInfo.ownTypeAsString = node.expression.getText(); + const modulePath = findModule(type); + typeInfo.isOwnType = + !!modulePath && path.basename(modulePath) === path.basename(context.dts); + + if (node.typeArguments) { + typeInfo.typeArguments = node.typeArguments.map((p) => + getTypeWithNullableInfo(context, p, allowUnion, false) + ); + + // cut off generics on name + const genericsStart = typeInfo.ownTypeAsString.indexOf("<"); + if (genericsStart >= 0) { + typeInfo.ownTypeAsString = typeInfo.ownTypeAsString + .substring(0, genericsStart) + .trim(); + } + } + } else { + fillBaseInfoFrom(node); + } + + return typeInfo; +} + +function isEnumType(type: ts.Type) { + // if for some reason this returns true... + if (hasFlag(type, ts.TypeFlags.Enum)) return true; + // it's not an enum type if it's an enum literal type + if (hasFlag(type, ts.TypeFlags.EnumLiteral)) return true; + // get the symbol and check if its value declaration is an enum declaration + const symbol = type.getSymbol(); + if (!symbol) return false; + const { valueDeclaration } = symbol; + + return ( + valueDeclaration && valueDeclaration.kind === ts.SyntaxKind.EnumDeclaration + ); +} + +function hasFlag(type: ts.Type, flag: ts.TypeFlags): boolean { + return (type.flags & flag) === flag; +} + +function isPrimitiveType(type: ts.Type | null) { + if (!type) { + return false; + } + + if (hasFlag(type, ts.TypeFlags.Number)) { + return true; + } + if (hasFlag(type, ts.TypeFlags.String)) { + return true; + } + if (hasFlag(type, ts.TypeFlags.Boolean)) { + return true; + } + if (hasFlag(type, ts.TypeFlags.BigInt)) { + return true; + } + if (hasFlag(type, ts.TypeFlags.Unknown)) { + return true; + } + + return false; +} + +function isNumberType(type: ts.Type | null) { + if (!type) { + return false; + } + + if (hasFlag(type, ts.TypeFlags.Number)) { + return true; + } + + return false; +} + +export function valueOrFirstDeclarationInDts( + context: GenerateContext, + s: ts.Symbol, + errorNode: ts.Node +): ts.Declaration; +export function valueOrFirstDeclarationInDts( + context: GenerateContext, + s: ts.Symbol +): ts.Declaration | undefined; +export function valueOrFirstDeclarationInDts( + context: GenerateContext, + s: ts.Symbol | undefined, + errorNode?: ts.Node +) { + if (!s) { + return undefined; + } + + if (s.valueDeclaration) { + return s.valueDeclaration; + } + + const d = s.declarations?.find( + (d) => + path.basename(d.getSourceFile().fileName) == path.basename(context.dts) + ); + if (d) { + return d; + } + + if (errorNode) { + throw new Error( + "Could not resolve declarataion of symbol " + + s.name + + " at " + + errorNode.getSourceFile().fileName + + ":" + + errorNode.getSourceFile().getLineAndCharacterOfPosition(errorNode.pos) + ); + } + + return undefined; +} diff --git a/scripts/util.mts b/scripts/util.mts new file mode 100644 index 000000000..616ef6fc1 --- /dev/null +++ b/scripts/util.mts @@ -0,0 +1,43 @@ +import fs from "fs"; + +export interface FileStream extends AsyncDisposable { + readonly path: string; + write(s: string): Promise; + writeLine(s?: string): Promise; +} + +export async function openFileStream(path: string): Promise { + const fileStream = await fs.promises.open(path, "w"); + + const write = async (s: string) => { + await fileStream.write(s); + }; + const writeLine = (s?: string) => { + if (s) { + return write(s + "\n"); + } else { + return write("\n"); + } + }; + const asyncDispose = async () => { + await fileStream.close(); + }; + + return { + path, + write, + writeLine, + [Symbol.asyncDispose]: asyncDispose, + }; +} + +export function toPascalCase(v: string | string[]) { + if (typeof v === "string") { + var parts = v.split("."); + for (let i = 0; i < parts.length; i++) { + parts[i] = parts[i].slice(0, 1).toUpperCase() + parts[i].slice(1); + } + return parts.join("."); + } + return v.map(toPascalCase); +} \ No newline at end of file diff --git a/sidebars.ts b/sidebars.ts index 8ce6ff7c0..c212494a6 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -83,35 +83,16 @@ const sidebars: SidebarsConfig = { }, { type: "category", - label: "ScoreRenderer", + label: "All Types", + className: "types-item", link: { type: "doc", - id: "reference/scorerenderer", + id: "reference/types", }, - className: "reference-item", - collapsible: false, - collapsed: true, - items: [ - { - type: "autogenerated", - dirName: "reference/scorerenderer", - }, - ], - }, - { - type: "category", - label: "AlphaSynth", - link: { - type: "doc", - id: "reference/alphasynth", - }, - className: "reference-item", - collapsible: false, - collapsed: true, items: [ { type: "autogenerated", - dirName: "reference/alphasynth", + dirName: "reference/types", }, ], }, diff --git a/src/alphatabdoc.ts b/src/alphatabdoc.ts deleted file mode 100644 index ad4d69881..000000000 --- a/src/alphatabdoc.ts +++ /dev/null @@ -1,44 +0,0 @@ -export type JsDocText = { - kind: "text"; - text: string; -}; - -export type JsDocLink = { - kind: "link"; - name: string; - text: string; -}; - -export type JsDocTag = { - kind: "jsdoctag"; - tagName: string; - comment: JsDocComment; -}; - -export type JsDocComment = (JsDocText | JsDocLink)[]; - -export type JsDoc = { - kind: "jsdoc"; - comment: JsDocComment; - tags?: JsDocTag[]; -}; - -export type TsDoc = (JsDoc | JsDocTag)[]; - -export function getDescriptionText(tsdoc: TsDoc) { - let text = ""; - - for (const d of tsdoc) { - if (d.kind === "jsdoc") { - for (const x of d.comment) { - if (x.kind === "text") { - text += x.text; - } else if (x.kind === "link") { - text += x.name; - } - } - } - } - - return text; -} diff --git a/src/components/CodeBadge/index.tsx b/src/components/CodeBadge/index.tsx index 50cc05053..eaddbaacf 100644 --- a/src/components/CodeBadge/index.tsx +++ b/src/components/CodeBadge/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import styles from "./styles.module.scss"; +import Link from "@docusaurus/Link"; export type Platform = | "all" @@ -19,14 +20,15 @@ export type Platform = export type CodeBadgeProps = { type?: Platform; name?: string; + link?: string; }; -export const CodeBadge: React.FC = ({ type, name }) => { +export const CodeBadge: React.FC = ({ type, name, link }) => { if (!name) { return <>; } - type ??= 'all'; + type ??= "all"; let title: string = type; let typeStyle = styles[type]; @@ -79,10 +81,22 @@ export const CodeBadge: React.FC = ({ type, name }) => { break; } const css = `${styles["code-badge"]} ${typeStyle}`; - return ( - - {name} - {title} - - ); + + if (link) { + return ( + + + {name} + {title} + + + ); + } else { + return ( + + {name} + {title} + + ); + } }; diff --git a/src/components/DynHeading/index.tsx b/src/components/DynHeading/index.tsx new file mode 100644 index 000000000..a17d2a16a --- /dev/null +++ b/src/components/DynHeading/index.tsx @@ -0,0 +1,36 @@ +import React from "react"; + +import Heading, { type Props } from "@theme/Heading"; + +export type DynHeadingProps = Props & { + inlined?: boolean; +}; + +export const DynHeading: React.FC = (props) => { + const { inlined, ...headingProps } = props; + + if (inlined) { + switch (headingProps.as) { + case "h1": + headingProps.as = "h2"; + break; + case "h2": + headingProps.as = "h3"; + break; + case "h3": + headingProps.as = "h4"; + break; + case "h4": + headingProps.as = "h5"; + break; + case "h5": + headingProps.as = "h6"; + break; + } + } + + return ; +}; + + +export default DynHeading; \ No newline at end of file diff --git a/src/components/FileFormatFeatureTable/index.tsx b/src/components/FileFormatFeatureTable/index.tsx index ce41d30a2..b33294c5b 100644 --- a/src/components/FileFormatFeatureTable/index.tsx +++ b/src/components/FileFormatFeatureTable/index.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, ReactNode } from "react"; -import { SinceBadge } from "../SinceBadge"; +import { TooltipSinceBadge } from "../SinceBadge"; import Details from "@theme/Details"; import { Tooltip } from "react-tooltip"; import ReactDOMServer from "react-dom/server"; @@ -52,7 +52,7 @@ export const FileFormatFeatureCell: React.FC = ({ status.since || status.tooltip ? ReactDOMServer.renderToStaticMarkup( <> - {status.tooltip} + {status.tooltip} ) : ""; diff --git a/src/components/MarkdownString/index.tsx b/src/components/MarkdownString/index.tsx new file mode 100644 index 000000000..69818eb05 --- /dev/null +++ b/src/components/MarkdownString/index.tsx @@ -0,0 +1,23 @@ +// MdxPreview +import React, { useEffect, useState } from "react"; +import { evaluate } from "@mdx-js/mdx"; +import * as runtime from "react/jsx-runtime"; + +export type MarkdownStringProps = { content: string }; +export const MarkdownString: React.FC = ({ content }: MarkdownStringProps) => { + const exports = useMDX(content); + const Content = exports.default; + return ; +}; + +function useMDX(content: string) { + const [exports, setExports] = useState({ default: runtime.Fragment }); + + useEffect(() => { + evaluate(content, { ...(runtime as any) }).then((exports) => + setExports(exports as any) + ); + }, [content]); + + return exports; +} diff --git a/src/components/ParameterTable/index.tsx b/src/components/ParameterTable/index.tsx index b95cbf948..cd7d22fdc 100644 --- a/src/components/ParameterTable/index.tsx +++ b/src/components/ParameterTable/index.tsx @@ -1,11 +1,11 @@ import React from "react"; import { CodeBadge, Platform } from "../CodeBadge"; import { SinceBadge } from "../SinceBadge"; -import { MDXProvider } from "@mdx-js/react"; +import { MarkdownString } from "../MarkdownString"; function renderChild(child: React.ReactNode): React.ReactNode { if (typeof child === "string") { - return ; + return ; } else { return child; } @@ -14,7 +14,6 @@ function renderChild(child: React.ReactNode): React.ReactNode { export type ParameterRowProps = { children: React.ReactNode; platform: Platform; - type: string; name: string; since?: string; }; @@ -22,7 +21,6 @@ export type ParameterRowProps = { export const ParameterRow: React.FC = ({ children, platform, - type, name, since, }) => { @@ -31,9 +29,6 @@ export const ParameterRow: React.FC = ({ - - {type} - {Array.isArray(children) ? React.Children.map(children, renderChild) @@ -53,8 +48,7 @@ export const ParameterTable: React.FC = ({ children }) => { - - + diff --git a/src/components/PropertyDescription/index.tsx b/src/components/PropertyDescription/index.tsx index 7ac05a13f..c1fcf73bb 100644 --- a/src/components/PropertyDescription/index.tsx +++ b/src/components/PropertyDescription/index.tsx @@ -2,13 +2,11 @@ import { buildNames } from "@site/src/names"; import { Page } from "@site/src/page"; import React from "react"; import { CodeBadge } from "../CodeBadge"; -import { PropVersionDoc } from "@docusaurus/plugin-content-docs"; import { useDoc } from "@docusaurus/plugin-content-docs/lib/client/doc.js"; +import styles from "./styles.module.scss"; export interface PropertyDescriptionProps { - metadata: any; showJson: boolean; - doc: PropVersionDoc; } export const PropertyDescription: React.FC = ({ @@ -16,55 +14,22 @@ export const PropertyDescription: React.FC = ({ }) => { const doc = useDoc(); const page = new Page(doc.metadata, doc.metadata); - const { jsNames, csNames, jQueryNames, domNames, androidNames } = - buildNames(page); + const { jsNames, csNames, androidNames } = buildNames(page); const jsonNames = showJson ? jsNames : []; return ( -
ParametersTypeParameter Summary
- - {jsNames.map((n) => ( - - - - ))} - {jsonNames.map((n) => ( - - - - ))} - {jQueryNames.map((n) => ( - - - - ))} - {domNames.map((n) => ( - - - - ))} - {csNames.map((n) => ( - - - - ))} - {androidNames.map((n) => ( - - - - ))} - -
- -
- -
- -
- -
- -
- -
+
+ {jsNames.map((n) => ( + + ))} + {jsonNames.map((n) => ( + + ))} + {csNames.map((n) => ( + + ))} + {androidNames.map((n) => ( + + ))} +
); }; diff --git a/src/components/PropertyDescription/styles.module.scss b/src/components/PropertyDescription/styles.module.scss new file mode 100644 index 000000000..c12e183a3 --- /dev/null +++ b/src/components/PropertyDescription/styles.module.scss @@ -0,0 +1,3 @@ +.wrapper { + +} diff --git a/src/components/ReferenceTable/index.tsx b/src/components/ReferenceTable/index.tsx index 92a108879..1ca36ed5b 100644 --- a/src/components/ReferenceTable/index.tsx +++ b/src/components/ReferenceTable/index.tsx @@ -21,42 +21,14 @@ function buildPropertyUrl(property: Page) { type ReferenceRowProps = { property: Page; showJson: boolean }; const ReferenceRow: React.FC = ({ property, showJson }) => { - const { jsNames, csNames, jQueryNames, domNames, androidNames } = + const { mainName, javaScriptOnly } = buildNames(property); - const jsonNames = showJson ? jsNames : []; + return ( - {jsNames.map((n) => ( - - ))} - - {jsonNames.length > 0 &&
} - {jsonNames.map((n) => ( - - ))} - - {(jsonNames.length > 0 || jsonNames.length > 0) && - jQueryNames.length > 0 &&
} - {jQueryNames.map((n) => ( - - ))} - - {domNames.length > 0 &&
} - {domNames.map((n) => ( - - ))} - - {csNames.length > 0 &&
} - {csNames.map((n) => ( - - ))} - - {androidNames.length > 0 &&
} - {androidNames.map((n) => ( - - ))} + {property.prop("description", "")} @@ -130,6 +102,10 @@ export const ReferenceTable: React.FC = ({ const existingKeys = new Map(); const pages: { key: string; items: Page[] }[] = []; for (const page of allPages) { + if(page.type === "link" && page.docId?.startsWith('_') === true) { + continue; + } + const category = (page.customProps?.category as string) ?? ""; let items = existingKeys.get(category); if (!items) { diff --git a/src/components/SettingsHeader/index.tsx b/src/components/SettingsHeader/index.tsx new file mode 100644 index 000000000..eda818fac --- /dev/null +++ b/src/components/SettingsHeader/index.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { useDoc } from "@docusaurus/plugin-content-docs/client"; +import { SinceBadge } from "../SinceBadge"; +import { PropertyDescription } from "../PropertyDescription"; + +export const SettingsHeader: React.FC = () => { + const doc = useDoc(); + const since = doc.frontMatter.sidebar_custom_props?.since; + return ( + <> + {since && } + + + ); +}; diff --git a/src/components/SinceBadge/index.tsx b/src/components/SinceBadge/index.tsx index 60daa99e1..3af379f26 100644 --- a/src/components/SinceBadge/index.tsx +++ b/src/components/SinceBadge/index.tsx @@ -1,11 +1,39 @@ import React from "react"; import styles from "./styles.module.scss"; +import { useDoc } from "@docusaurus/plugin-content-docs/lib/client/doc.js"; export type SinceBadgeProps = { since?: string; inline?: boolean; }; export const SinceBadge: React.FC = ({ since, inline }) => { + const doc = useDoc(); + if ( + inline && + doc.frontMatter.sidebar_custom_props?.since && + doc.frontMatter.sidebar_custom_props?.since == since + ) { + return <>; + } + + if (since) { + return ( + + since {since} + + ); + } else { + return <>; + } +}; + +// compatible with ReactDOMServer.renderToStaticMarkup needed in tooltip scenarios +// it doesn't auto-hide if the since badge has the same version as the page +export const TooltipSinceBadge: React.FC = ({ since, inline }) => { if (since) { return ( ; + return ; } else { return child; } @@ -15,14 +15,26 @@ export type TypeRowProps = { children: React.ReactNode; type: Platform; name: string; + link?: string; }; -export const TypeRow: React.FC = ({ children, type, name }) => { +export const TypeRow: React.FC = ({ + children, + type, + name, + link, +}) => { if (children && type && name) { return ( - + {link ? ( + + + + ) : ( + + )} {Array.isArray(children) diff --git a/src/css/custom.scss b/src/css/custom.scss index 0a5575efd..8ca81122a 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -35,7 +35,7 @@ --ifm-color-primary-lightest: #648ebe; --ifm-code-font-size: 95%; --ifm-z-index-fixed: 2000; - --docusaurus-highlighted-code-line-bg: rgba(0,0,0, 0.20); + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.2); --ifm-font-family-base: "Noto Sans"; } @@ -86,6 +86,20 @@ li.reference-item ul { display: none !important; } +li.types-item .menu__list-item-collapsible { + flex-wrap: no-wrap; +} + +li.types-item .menu__list { + font-size: 0.8rem; +} + +li.types-item .menu__link { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .navbar__item.header-github-link { display: flex; align-items: center; @@ -124,5 +138,41 @@ li.reference-item ul { stroke: #0078ff; } -@import 'react-tooltip/dist/react-tooltip.css' +@import "react-tooltip/dist/react-tooltip.css"; +.codeBlockContainer { + border-radius: var(--ifm-code-border-radius); + box-shadow: var(--ifm-global-shadow-lw); + margin-bottom: var(--ifm-leading); + background: var(--prism-background-color); + color: var(--prism-color); + + & .codeBlockContent { + border-radius: inherit; + direction: ltr; + position: relative; + } + + & .codeBlock { + --ifm-pre-background: var(--prism-background-color); + margin: 0; + padding: 0; + scrollbar-width: thin; + } + + & .codeBlockLines { + float: left; + font: inherit; + min-width: 100%; + padding: var(--ifm-pre-padding); + + & a { + text-decoration: underline dotted; + } + + + & a:hover { + text-decoration: underline; + } + } +} diff --git a/src/names.ts b/src/names.ts index 675f18f41..a23c3247e 100644 --- a/src/names.ts +++ b/src/names.ts @@ -64,11 +64,12 @@ export function tojQueryPropertyNames(jsNames: string[]) { export function buildNames(property: Page) { const javaScriptOnly = property.prop("javaScriptOnly", false); - const jQueryOnly = property.prop("jQueryOnly", false); const domWildcard = property.prop("domWildcard", false); const category = property.prop("category", ""); - let jsNames = jQueryOnly ? [] : property.props("title"); + let jsNames = property.props("title"); + + let mainName = jsNames[0]; let csNames = property.props("csName"); if (!javaScriptOnly && csNames.length === 0) { @@ -117,6 +118,8 @@ export function buildNames(property: Page) { } return { + mainName, + javaScriptOnly, jsNames, csNames, jQueryNames, diff --git a/src/theme/CodeBlock/Content/String.tsx b/src/theme/CodeBlock/Content/String.tsx new file mode 100644 index 000000000..c66116713 --- /dev/null +++ b/src/theme/CodeBlock/Content/String.tsx @@ -0,0 +1,122 @@ +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common"; +import { + parseCodeBlockTitle, + parseLanguage, + parseLines, + containsLineNumbers, + useCodeWordWrap, +} from "@docusaurus/theme-common/internal"; +import { Highlight, type Language } from "prism-react-renderer"; +import Line from "../Line"; +import CopyButton from "@theme/CodeBlock/CopyButton"; +import WordWrapButton from "@theme/CodeBlock/WordWrapButton"; +import Container from "@theme/CodeBlock/Container"; +import type { Props } from "@theme/CodeBlock/Content/String"; + +import styles from "./styles.module.css"; +import { parseCodeBlockMeta, ParseLineOptions } from "../utils"; + +// Prism languages are always lowercase +// We want to fail-safe and allow both "php" and "PHP" +// See https://github.com/facebook/docusaurus/issues/9012 +function normalizeLanguage(language: string | undefined): string | undefined { + return language?.toLowerCase(); +} + +export default function CodeBlockString({ + children, + className: blockClassName = "", + metastring, + title: titleProp, + showLineNumbers: showLineNumbersProp, + language: languageProp, +}: Props): ReactNode { + const { + prism: { defaultLanguage, magicComments }, + } = useThemeConfig(); + const language = normalizeLanguage( + languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage + ); + + const prismTheme = usePrismTheme(); + const wordWrap = useCodeWordWrap(); + + // We still parse the metastring in case we want to support more syntax in the + // future. Note that MDX doesn't strip quotes when parsing metastring: + // "title=\"xyz\"" => title: "\"xyz\"" + const title = parseCodeBlockTitle(metastring) || titleProp; + + const options:ParseLineOptions = { + metastring, + language, + magicComments, + }; + + const { lineClassNames, code } = parseLines(children, options); + const showLineNumbers = + showLineNumbersProp ?? containsLineNumbers(metastring); + + const meta = parseCodeBlockMeta(options); + + return ( + + {title &&
{title}
} +
+ + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
+              
+                {tokens.map((line, i) => (
+                  
+                ))}
+              
+
+ )} + +
+ {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && ( + wordWrap.toggle()} + isEnabled={wordWrap.isEnabled} + /> + )} + +
+
+ + ); +} diff --git a/src/theme/CodeBlock/Content/styles.module.css b/src/theme/CodeBlock/Content/styles.module.css new file mode 100644 index 000000000..3760c530c --- /dev/null +++ b/src/theme/CodeBlock/Content/styles.module.css @@ -0,0 +1,87 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.codeBlockContent { + position: relative; + /* rtl:ignore */ + direction: ltr; + border-radius: inherit; +} + +.codeBlockTitle { + border-bottom: 1px solid var(--ifm-color-emphasis-300); + font-size: var(--ifm-code-font-size); + font-weight: 500; + padding: 0.75rem var(--ifm-pre-padding); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.codeBlock { + --ifm-pre-background: var(--prism-background-color); + margin: 0; + padding: 0; +} + +.codeBlockTitle + .codeBlockContent .codeBlock { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.codeBlockStandalone { + padding: 0; +} + +.codeBlockLines { + font: inherit; + /* rtl:ignore */ + float: left; + min-width: 100%; + padding: var(--ifm-pre-padding); +} + +.codeBlockLinesWithNumbering { + display: table; + padding: var(--ifm-pre-padding) 0; +} + +@media print { + .codeBlockLines { + white-space: pre-wrap; + } +} + +.buttonGroup { + display: flex; + column-gap: 0.2rem; + position: absolute; + /* rtl:ignore */ + right: calc(var(--ifm-pre-padding) / 2); + top: calc(var(--ifm-pre-padding) / 2); +} + +.buttonGroup button { + display: flex; + align-items: center; + background: var(--prism-background-color); + color: var(--prism-color); + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: var(--ifm-global-radius); + padding: 0.4rem; + line-height: 0; + transition: opacity var(--ifm-transition-fast) ease-in-out; + opacity: 0; +} + +.buttonGroup button:focus-visible, +.buttonGroup button:hover { + opacity: 1 !important; +} + +:global(.theme-code-block:hover) .buttonGroup button { + opacity: 0.4; +} diff --git a/src/theme/CodeBlock/Line/index.tsx b/src/theme/CodeBlock/Line/index.tsx new file mode 100644 index 000000000..a175c074e --- /dev/null +++ b/src/theme/CodeBlock/Line/index.tsx @@ -0,0 +1,78 @@ +import React, { type ReactNode } from "react"; +import clsx from "clsx"; +import type { Props } from "@theme/CodeBlock/Line"; + +import styles from "./styles.module.css"; +import { CodeBlockMeta } from "../utils"; +import Link from "@docusaurus/Link"; + +export type ExtendedCodeLineProps = Props & { + meta: CodeBlockMeta; +}; + + +export default function CodeBlockLine({ + line, + classNames, + showLineNumbers, + getLineProps, + getTokenProps, + meta, +}: ExtendedCodeLineProps): ReactNode { + if (line.length === 1 && line[0]!.content === "\n") { + line[0]!.content = ""; + } + + const lineProps = getLineProps({ + line, + className: clsx(classNames, showLineNumbers && styles.codeLine), + }); + + const lineTokens = line.map((token, key) => { + const trimmed = token.content.trim(); + const makeLink = token.types.some((t) => t === "plain" || t === "function"); + if (makeLink) { + const link = meta.options[`link${trimmed}`.toLowerCase()]; + if (typeof link === "string") { + const index = token.content.indexOf(trimmed); + let before = token.content.substring(0, index); + let after = token.content.substring(index + trimmed.length); + return ( + <> + {before && ( + + )} + + {after && ( + + )} + + ); + } + } + + return ; + }); + + return ( + + {showLineNumbers ? ( + <> + + {lineTokens} + + ) : ( + lineTokens + )} +
+ + ); +} diff --git a/src/theme/CodeBlock/Line/styles.module.css b/src/theme/CodeBlock/Line/styles.module.css new file mode 100644 index 000000000..7c28ed9aa --- /dev/null +++ b/src/theme/CodeBlock/Line/styles.module.css @@ -0,0 +1,45 @@ +/* Intentionally has zero specificity, so that to be able to override +the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */ +:where(:root) { + --docusaurus-highlighted-code-line-bg: rgb(72 77 91); +} + +:where([data-theme='dark']) { + --docusaurus-highlighted-code-line-bg: rgb(100 100 100); +} + +:global(.theme-code-block-highlighted-line) { + background-color: var(--docusaurus-highlighted-code-line-bg); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +.codeLine { + display: table-row; + counter-increment: line-count; +} + +.codeLineNumber { + display: table-cell; + text-align: right; + width: 1%; + position: sticky; + left: 0; + padding: 0 var(--ifm-pre-padding); + background: var(--ifm-pre-background); + overflow-wrap: normal; +} + +.codeLineNumber::before { + content: counter(line-count); + opacity: 0.4; +} + +:global(.theme-code-block-highlighted-line) .codeLineNumber::before { + opacity: 0.8; +} + +.codeLineContent { + padding-right: var(--ifm-pre-padding); +} diff --git a/src/theme/CodeBlock/utils.ts b/src/theme/CodeBlock/utils.ts new file mode 100644 index 000000000..505426084 --- /dev/null +++ b/src/theme/CodeBlock/utils.ts @@ -0,0 +1,151 @@ +import rangeParser from "parse-numeric-range"; +import { useThemeConfig } from "@docusaurus/theme-common"; + +type MagicCommentConfig = ReturnType< + typeof useThemeConfig +>["prism"]["magicComments"][0]; + +/** + * The supported types for {@link CodeBlockMeta.options} values. + */ +export type CodeMetaOptionValue = string | boolean | number; + +/** + * Any options as specified by the user in the "metastring" of codeblocks. + */ +export interface CodeBlockMeta { + /** + * The highlighted lines, 0-indexed. e.g. `{ 0: ["highlight", "sample"] }` + * means the 1st line should have `highlight` and `sample` as class names. + */ + readonly lineClassNames: { [lineIndex: number]: string[] }; + + /** + * The parsed options, key converted to lowercase. + * e.g. `"title" => "file.js", "showlinenumbers" => true` + */ + readonly options: { [key: string]: CodeMetaOptionValue }; +} + +// note: regexp/no-useless-non-capturing-group is a false positive +// the group is required or it breaks the correct alternation of +// | +const optionRegex = + // eslint-disable-next-line regexp/no-useless-non-capturing-group + /(?\w+)(?:=(?:(?:(?["'])(?.*?)\k)|(?\S*)))?/g; +const metastringLinesRangeRegex = /\{(?[\d,-]+)\}/g; +const highlightOptionKey = "highlight"; + +function parseCodeBlockOptions( + meta: CodeBlockMeta, + originalMetastring: string, + metastring: string, + magicComments: MagicCommentConfig[] +) { + if (metastring) { + optionRegex.lastIndex = 0; + + let match = optionRegex.exec(metastring); + + while (match) { + const { stringValue, rawValue } = match.groups!; + + const key = match.groups!.key!.toLowerCase(); + + // special highlight option + if (key === highlightOptionKey) { + if (magicComments.length === 0) { + throw new Error( + `A highlight range has been given in code block's metastring (\`\`\` ${originalMetastring}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.` + ); + } + const metastringRangeClassName = magicComments[0]!.className; + rangeParser(stringValue ?? rawValue!) + .filter((n) => n > 0) + .forEach((n) => { + meta.lineClassNames[n - 1] = [metastringRangeClassName]; + }); + } else if (stringValue === undefined && rawValue === undefined) { + // flag options + meta.options[key] = true; + } else if (stringValue !== undefined) { + // string option + meta.options[key] = stringValue; + } else if (rawValue === "true") { + // boolean option + meta.options[key] = true; + } else if (rawValue === "false") { + meta.options[key] = false; + } else { + const number = parseFloat(rawValue!); + if (!Number.isNaN(number)) { + // number value + meta.options[key] = number; + } else { + // non quoted string + meta.options[key] = rawValue!; + } + } + + match = optionRegex.exec(metastring); + } + } +} + +export type ParseLineOptions = { + /** + * The full metastring, as received from MDX. Line ranges declared here + * start at 1. Or alternatively the parsed {@link CodeBlockMeta}. + */ + metastring: string | undefined; + /** + * Language of the code block, used to determine which kinds of magic + * comment styles to enable. + */ + language: string | undefined; + /** + * Magic comment types that we should try to parse. Each entry would + * correspond to one class name to apply to each line. + */ + magicComments: MagicCommentConfig[]; +}; + +/** + * Rewrites the range syntax to special options. e.g. + * `{1,2,3-4,5} => highlight=1 highlight=2 highlight=3-4 highlight=5` + * @param metastring The input metastring with the range syntax + * @returns The string where the range syntax has been rewritten + */ +function rewriteLinesRange(metastring: string): string { + metastringLinesRangeRegex.lastIndex = 0; + + return metastring.replaceAll(metastringLinesRangeRegex, (_, range) => { + return (range as string) + .split(",") + .map((r) => `${highlightOptionKey}=${r}`) + .join(" "); + }); +} + +export function parseCodeBlockMeta(options: ParseLineOptions): CodeBlockMeta { + if (typeof options.metastring === "object") { + return options.metastring; + } + + const meta: CodeBlockMeta = { + lineClassNames: {}, + options: {}, + }; + + const { metastring, magicComments } = options; + + // exit early if nothing to do. + if (!metastring) { + return meta; + } + + const rewritten = rewriteLinesRange(metastring); + parseCodeBlockOptions(meta, metastring, rewritten, magicComments); + + return meta; +} diff --git a/src/types/RenderFinishedEventArgs/index.tsx b/src/types/RenderFinishedEventArgs/index.tsx deleted file mode 100644 index 2ff40a959..000000000 --- a/src/types/RenderFinishedEventArgs/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from "react"; -import { ParameterTable, ParameterRow } from '@site/src/components/ParameterTable'; - -export function RenderFinishedEventArgs() { - return ( - - - The unique id of the chunk to request rendering through [`renderResult`](/docs/reference/scorerenderer/renderresult) - Since 1.2.3 - - - The absolute x-position of the chunk within the overall music sheet. - Since 1.2.3 - - - The absolute y-position of the chunk within the overall music sheet. - Since 1.2.3 - - - The width of the current rendering result. - - - The height of the current rendering result. - - - The currently known total width of the final music sheet. - - - The currently known total height of the final music sheet. - - - The index of the first masterbar that was rendered in this result. - - - The last masterbar that was rendered in this result. - - - The render engine specific result object which contains the rendered - music sheet: - - For `svg` it will contain the raw SVG string, - - For `html5` it will contain a HTML5 canvas DOM element - - For `skia` it will contain a `SkImage` - - For `gdi` it will contain a `Bitmap` - - - ); -} From c9bd0e19501aa309e74dd0ff0c23b28775978d71 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 20 Mar 2025 23:24:03 +0000 Subject: [PATCH 06/16] build(deps): bump @babel/runtime from 7.26.9 to 7.26.10 (#117) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c1d61a11..b9ffc6173 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1806,9 +1806,10 @@ } }, "node_modules/@babel/runtime": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz", - "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==", + "version": "7.26.10", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.10.tgz", + "integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==", + "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" }, From 4dbb499cf82714cb5cf2cb82cd6ec411bcac615a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 20 Mar 2025 23:24:16 +0000 Subject: [PATCH 07/16] build(deps): bump @babel/runtime-corejs3 from 7.26.9 to 7.26.10 (#119) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9ffc6173..84c343547 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1818,9 +1818,10 @@ } }, "node_modules/@babel/runtime-corejs3": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.26.9.tgz", - "integrity": "sha512-5EVjbTegqN7RSJle6hMWYxO4voo4rI+9krITk+DWR+diJgGrjZjrIBnJhjrHYYQsFgI7j1w1QnrvV7YSKBfYGg==", + "version": "7.26.10", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.26.10.tgz", + "integrity": "sha512-uITFQYO68pMEYR46AHgQoyBg7KPPJDAbGn4jUTIRgCFJIp88MIBUianVOplhZDEec07bp9zIyr4Kp0FCyQzmWg==", + "license": "MIT", "dependencies": { "core-js-pure": "^3.30.2", "regenerator-runtime": "^0.14.0" From 66eedc20b03429f659d847d79da6780f37d32ed6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 20 Mar 2025 23:25:02 +0000 Subject: [PATCH 08/16] build(deps): bump @babel/helpers from 7.26.9 to 7.26.10 (#118) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 84c343547..5afd44333 100644 --- a/package-lock.json +++ b/package-lock.json @@ -604,12 +604,13 @@ } }, "node_modules/@babel/helpers": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz", - "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==", + "version": "7.26.10", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz", + "integrity": "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==", + "license": "MIT", "dependencies": { "@babel/template": "^7.26.9", - "@babel/types": "^7.26.9" + "@babel/types": "^7.26.10" }, "engines": { "node": ">=6.9.0" @@ -1861,9 +1862,10 @@ } }, "node_modules/@babel/types": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz", - "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==", + "version": "7.26.10", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz", + "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==", + "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" From 7bbe44ea5aef4255c600b9ea25ff4c170b2b2a6e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 2 Apr 2025 15:58:49 +0000 Subject: [PATCH 09/16] build(deps): bump image-size from 1.2.0 to 1.2.1 (#123) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5afd44333..493767d19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11061,9 +11061,10 @@ } }, "node_modules/image-size": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.0.tgz", - "integrity": "sha512-4S8fwbO6w3GeCVN6OPtA9I5IGKkcDMPcKndtUlpJuCwu7JLjtj7JZpwqLuyY2nrmQT3AWsCJLSKPsc2mPBSl3w==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz", + "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==", + "license": "MIT", "dependencies": { "queue": "6.0.2" }, From 31deab292a1e79205328fcff312515052fa562af Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 8 Apr 2025 02:10:33 +0000 Subject: [PATCH 10/16] build(deps): bump estree-util-value-to-estree from 3.3.2 to 3.3.3 (#124) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 493767d19..42307fcb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9114,9 +9114,10 @@ } }, "node_modules/estree-util-value-to-estree": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.3.2.tgz", - "integrity": "sha512-hYH1aSvQI63Cvq3T3loaem6LW4u72F187zW4FHpTrReJSm6W66vYTFNO1vH/chmcOulp1HlAj1pxn8Ag0oXI5Q==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.3.3.tgz", + "integrity": "sha512-Db+m1WSD4+mUO7UgMeKkAwdbfNWwIxLt48XF2oFU9emPfXkIu+k5/nlOj313v7wqtAPo0f9REhUvznFrPkG8CQ==", + "license": "MIT", "dependencies": { "@types/estree": "^1.0.0" }, From b448ad0f55924f2724ff355ae46a574beb5c963a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 8 Apr 2025 02:23:31 +0000 Subject: [PATCH 11/16] build(deps): bump estree-util-value-to-estree from 3.3.2 to 3.3.3 (#125) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> From 870dc746a3a55a52a8472704eea64c7a53f33e5c Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Fri, 2 May 2025 16:37:53 +0200 Subject: [PATCH 12/16] docs: Update MusicXML compatibility --- docs/formats/musicxml.mdx | 4594 ++++++++++++++--- .../FileFormatFeatureTable/index.tsx | 11 +- 2 files changed, 3760 insertions(+), 845 deletions(-) diff --git a/docs/formats/musicxml.mdx b/docs/formats/musicxml.mdx index ddc324c65..83ab490b8 100644 --- a/docs/formats/musicxml.mdx +++ b/docs/formats/musicxml.mdx @@ -11,1268 +11,4178 @@ description: The open file format format for exchanging music notation. > https://www.musicxml.com/ -**Compatibility Level:** Basic, good test coverage. +**Compatibility Level:** Mature, good test coverage. MusicXML is a very complex format allowing the same thing to be specified in multiple different ways. The format itself is very mature and supports a vast amount of notation elements to be described. This also makes it quite complex to handle as applications might have to deal with elements which are not supported by the application itself. -Additionally the different applications supporting MusicXML have their own slight dialects and expectations to where elements are placed (as element positions can be relatively adjusted). -This can easily cause visual discrepancies when exchanging files across applications. +Unfortunately MusicXML implies a lot of details on the visual arrangements of elements and expect applications like alphaTab to adhere to their layouting principles. +With alphaTab not having a strict print-page display (yet) respecting those arrangement aspects is not possible. +Additionally MusicXML differenciates between "displayed" music notation and the "sound" of elements which can be potentially inconsistent. + +alphaTab does its best to load any semantic information contained in the files (both in visual and sound related elements). +Due to this alphaTab might visually indicate some elements which are not visually described in MusicXML. This can be a benefit in some cases. + +Feel free to open any [improvement request discussion](https://github.com/CoderLine/alphaTab/discussions) if you have some needs in changed display. + +The table below describes in a [``](https://www.w3.org/2021/06/musicxml40/musicxml-reference/elements/supports/) style fashion which elements and attributes are supported by alphaTab. +Be sure to check the [MusicXML reference](https://www.w3.org/2021/06/musicxml40/musicxml-reference/elements/) for details on the features. ## Feature Table +**How to read the table:** + +* The feature table tries to describe the support matching [MusicXML 4.0 element eference](https://www.w3.org/2021/06/musicxml40/musicxml-reference/elements/). +* Every group is typically a MusicXML Element describing what attributes and sub-elements are supported. +* Elements are listed with their exact names, attributes are prefixed with `@`. +* If individual attribute values are not supported they might be listed in a format like `@attribute=value`. But for keeping this docs at a managable scale not all details might be listed. +* The sub-element support indicates whether generally the tag is considered. What parts are supported, are then listed in the dedicated group of the respective tag. +* Some common attributes are only listed once instead on each element. Some simple elements are listed as part of their parent element, while other element are listed as own feature section. +* Some attributes we considered not relevant at all are not even listed (e.g. `@id` of `credit`). +* In case of doubts: + * Consult the MusicXML documentation to learn where elements are used and relevant. + * Consult the [alphaTab Source Code](https://github.com/CoderLine/alphaTab/blob/develop/src/importer/MusicXmlImporter.ts) to see if we are handling elements and attributes. + * Consult the [notes in the MusicXML Test Suite](https://github.com/CoderLine/alphaTab/blob/develop/test/importer/MusicXmlImporterTestSuite.test.ts) to see if we marked some things as not supported or "known issue". + import { FileFormatFeatureTable, FileFormatFeatureGroup, FileFormatFeatureRow, FeatureStatus } from '@site/src/components/FileFormatFeatureTable' - - + + reading={[FeatureStatus.Supported]} + render={[FeatureStatus.Supported]} + audio={[FeatureStatus.Supported]} + tex={[FeatureStatus.Supported]} /> + + - - - + + + + - - + - - - - - - - - - - + + + + + + + + + + - + - - + + - + + + + - - - - + - + - - - + tex={[FeatureStatus.Supported]} /> + + - - - + + - + - - + - - - - - - + + - + - - + tex={[FeatureStatus.Supported]} /> + - + + - - + - - + - + + + - - + + - - - - + - - - - + + + + - + + + tex={[FeatureStatus.Partial]} /> + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + tex={[FeatureStatus.Supported]} /> + + + + + + + + + + - + + + + + + + + + + + tex={[FeatureStatus.Supported]} /> + - + - - + - - + + - - + - - + - - + + + tex={[FeatureStatus.Supported]} /> + - + + + + + - - + - - + + + tex={[FeatureStatus.Supported]} /> + + + + - + + + + - - - + + + + render={[FeatureStatus.NotSupported]} + audio={[FeatureStatus.NotSupported]} + tex={[FeatureStatus.NotSupported]} /> + - + - - - + + - - + + + + tex={[FeatureStatus.NotSupported]} /> + - + + + + + + tex={[FeatureStatus.NotSupported]} /> + - + + + + + tex={[FeatureStatus.Supported]} /> + - + + + + - - + - - + - - + + + + + + + + + - - - - - - + - - - - + - - - - + - - + + - - + - - + - - + + audio={[FeatureStatus.NotSupported]} + tex={[FeatureStatus.NotSupported]} /> + - + - - + - - + - - - - - - + - - + - - + - - - - + - - - - + - - - - + - - - - - - - - - - - - - - - - + - - + - - + - - + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - + - - + + - - + + tex={[FeatureStatus.NotSupported]} /> + + + + - + + - - + - - + + - - - - + - - - - - - - - + + tex={[FeatureStatus.Supported]} /> + - + - - + - - - - + - - - - + + tex={[FeatureStatus.Supported]} /> + - + - - + - - + - - + + tex={[FeatureStatus.NotSupported]} /> + - + - - - - + + - - + - - + - - - - + - - + - - - - + - - + - - + + + render={[FeatureStatus.NotSupported]} + audio={[FeatureStatus.Ignored]} + tex={[FeatureStatus.NotSupported]} /> - - - + - - + - - + - - + - - + - - + - - + + + - - + - - + - - - - + - - + - - + - - + - - - - - - + + render={[FeatureStatus.NotSupported]} + audio={[FeatureStatus.Ignored]} + tex={[FeatureStatus.NotSupported]} /> - - - - - - - + tex={[FeatureStatus.NotSupported]} /> - - - - - - - - + render={[FeatureStatus.NotSupported]} + audio={[FeatureStatus.Ignored]} + tex={[FeatureStatus.NotSupported]} /> + + - - - - - \ No newline at end of file diff --git a/src/components/FileFormatFeatureTable/index.tsx b/src/components/FileFormatFeatureTable/index.tsx index b33294c5b..bf144e859 100644 --- a/src/components/FileFormatFeatureTable/index.tsx +++ b/src/components/FileFormatFeatureTable/index.tsx @@ -130,18 +130,23 @@ function computeFeatureStatistics(node: React.ReactNode): { export type FileFormatFeatureGroupProps = { title: string; + tooltip: string; children: React.ReactNode; }; export const FileFormatFeatureGroup: React.FC = ({ title, children, + tooltip, }) => { - const tooltip = ReactDOMServer.renderToStaticMarkup( + const renderedTooltip = ReactDOMServer.renderToStaticMarkup( + <> + {tooltip} + ); const classNames = ["feature-status-has-tooltip", styles.noWrap]; - if (tooltip) { + if (renderedTooltip) { classNames.push(styles.hasTooltip); } @@ -149,7 +154,7 @@ export const FileFormatFeatureGroup: React.FC = ({ <> - + {title} From 2b4c0c99e9d7d2e10d8c1fafd345d1266c9f95e2 Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Fri, 2 May 2025 16:38:14 +0200 Subject: [PATCH 13/16] docs: Add deprecation guides on data attributes and dom events --- docs/guides/data-attributes.mdx | 77 ++++++++++++++++++++++++++++++++- docs/guides/dom-events.mdx | 56 +++++++++++++++++++++++- 2 files changed, 130 insertions(+), 3 deletions(-) diff --git a/docs/guides/data-attributes.mdx b/docs/guides/data-attributes.mdx index 25b3b115e..ecf05d482 100644 --- a/docs/guides/data-attributes.mdx +++ b/docs/guides/data-attributes.mdx @@ -2,4 +2,79 @@ title: Data Attributes --- -TODO: Document deprecation of Data Attributes integration and move reference doc here. \ No newline at end of file +> [!WARNING] +> Configuring alphaTab via data attributes has been deprecated in 1.5 and will be removed in 2.x. + +HTML Data Attributes are quite a common mechanism to pass configurations from the DOM to JavaScript frameworks. This practice +is quite common outside frontend frameworks like Angular or React and is known from frameworks like Bootstrap and jQuery. + +To reduce the number of configuration mechanisms we need to maintain and support, the configuration with data attributes will be removed in 2.x as a breaking change. +alphaTab anyhow requires a minimum degree of initialization via JavaScript (e.g. `new AlphaTabApi(element, settings)`) and therefore a migration to the settings object is fairly simple. +Developers can still decide to fill a settings object based on custom attribute needs. + +Until the removal we will maintain backwards compatibility but at the same time we removed any documentation from the API reference related to it. + +## Migration + +To migrate, move any properties from the respective data attributes in the HTML DOM to a JavaScript settings object. + +### Before + +The data attributes are added as `data-category-setting` to the DOM element. + +```html +
+ +``` + +### After (JSON object) + +The settings are defined in a plain JSON object (we have type definitions for it) according to the reference docs. +The JSON object will be converted internally to the real settings object. Later motifications have to be done on `api.settings`. + +```html +
+ +``` + +### After (Settings object) + +A new `Settings` instance is created and filled with the respective values on the defined properties. +This is useful to make decisions based on default values or if you want to share the same object across +multiple alphaTab instances. + +```html +
+ +``` \ No newline at end of file diff --git a/docs/guides/dom-events.mdx b/docs/guides/dom-events.mdx index e59393c98..022db8f9e 100644 --- a/docs/guides/dom-events.mdx +++ b/docs/guides/dom-events.mdx @@ -1,5 +1,57 @@ --- -title: Data Events +title: DOM Events --- -TODO: DOM Events deprecation of Data Attributes integration and move reference doc here. \ No newline at end of file +> [!WARNING] +> Listening to alphaTab via DOM events has been deprecated in 1.5 and will be removed in 2.x. + +DOM Events are quite a common mechanism to signal special events from JavaScript frameworks. This practice +is quite common outside frontend frameworks like Angular or React and is known from frameworks like Bootstrap and jQuery. + +To reduce the number of event mechanisms we need to maintain and support, and to improve performance, DOM events will be removed in 2.x as a breaking change. +alphaTab anyhow requires a minimum degree of initialization via JavaScript (e.g. `new AlphaTabApi(element, settings)`) and therefore a migration to the JavaScript events is fairly simple. + +Until the removal we will maintain backwards compatibility but at the same time we removed any documentation from the API reference related to it. +^ +## Migration + +To migrate, move any properties from the respective data attributes in the HTML DOM to a JavaScript settings object. + +### Before + +The event listeners are registered on the DOM element via `alphaTab.eventName`. The event data is contained in `e.detail`. + +```html +
+ +``` + +### After + +The event listeners are registered via `api.eventName.on(listener)`. The event data is directly passed to the listener. + +```html +
+ +``` \ No newline at end of file From f22726bbc62c700f64102616bc337f1fcf1fa67b Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sun, 4 May 2025 16:57:49 +0200 Subject: [PATCH 14/16] docs: Update feature docs and release notes --- docs/alphatex/bar-metadata.mdx | 57 ++++ docs/alphatex/beat-effects.mdx | 2 +- docs/alphatex/metadata.mdx | 30 +- docs/formats/musicxml.mdx | 12 +- docs/guides/formatting-templates.mdx | 38 +++ .../settings/core/enablelazyloading.mdx | 14 +- .../display/systemlabelpaddingright.mdx | 6 +- docs/releases/release1_5.mdx | 272 +++++++++++++++++- package-lock.json | 21 +- package.json | 2 +- .../FormattingTemplateSample/index.tsx | 117 ++++++++ static/img/release/v15/emojis.png | Bin 0 -> 22000 bytes 12 files changed, 538 insertions(+), 33 deletions(-) create mode 100644 docs/guides/formatting-templates.mdx create mode 100644 src/components/FormattingTemplateSample/index.tsx create mode 100644 static/img/release/v15/emojis.png diff --git a/docs/alphatex/bar-metadata.mdx b/docs/alphatex/bar-metadata.mdx index 7eac84d10..f0ad4e0cb 100644 --- a/docs/alphatex/bar-metadata.mdx +++ b/docs/alphatex/bar-metadata.mdx @@ -229,3 +229,60 @@ To apply simile marks use the `\simile type` where type is: {` 3.3*4 | \\simile simple | 3.3*4 | 4.3*4 | \\simile firstofdouble | \\simile secondofdouble `} + +## Bar Lines + +For some special notation needs, the default bar line can be adjusted on every bar. +The bar line styles are aligned with the ones from [MusicXML](https://www.w3.org/2021/06/musicxml40/musicxml-reference/data-types/bar-style/). + +* `\barlineLeft` adjusts the left bar line +* `\barlineRight` adjusts the right bar line + +alphaTab attempts to reuse lines on overlapping styles across bars. + +{` +\\instrument piano +. +\\track "Overlapping" + \\staff + \\barlineleft dashed + \\barlineright dotted + | + \\barlineleft heavyheavy + \\barlineright heavyheavy + + \\staff + \\barlineleft lightlight + \\barlineright lightheavy + | + \\barlineleft heavylight + \\barlineright dashed +\\track "All Styles" + \\staff + \\barlineright dashed | + \\barlineright dotted | + \\barlineright heavy | + \\barlineright heavyHeavy | + \\barlineright heavyLight | + \\barlineright lightHeavy | + \\barlineright lightlight | + \\barlineright none | + \\barlineright regular | + \\barlineright short | + \\barlineright tick | +`} + +* `automatic` - Bar lines are determined automatically based on details like repeats and free time (default). +* `dashed` +* `dotted` +* `heavy` +* `heavyheavy` +* `heavylight` +* `lightheavy` +* `lightlight` +* `none` +* `regular` +* `short` +* `tick` + + diff --git a/docs/alphatex/beat-effects.mdx b/docs/alphatex/beat-effects.mdx index 1c0275f28..9fcd397ae 100644 --- a/docs/alphatex/beat-effects.mdx +++ b/docs/alphatex/beat-effects.mdx @@ -53,7 +53,7 @@ Please find the list of supported effects in the example below. ## Dynamics -Dynamics are beat effects with the indicator `dy` followed by one of the supported dynamics values FFF, FF, F, MF, MP, P, PP or PPP. +Dynamics are beat effects with the indicator `dy` followed by one of the supported dynamics values PPP, PP, P, MP, MF, F, FF, FFF, PPPP, PPPPP, PPPPPP, FFFF, FFFFF, FFFFFF, SF, SFP, SFPP, FP, RF, RFZ, SFZ, SFFZ, FZ, N, PF, SFZP. {` 1.1.8{dy ppp} 1.1{dy pp} 1.1{dy p} 1.1{dy mp} 1.1{dy mf} 1.1{dy f} 1.1{dy ff} 1.1{dy fff} diff --git a/docs/alphatex/metadata.mdx b/docs/alphatex/metadata.mdx index 3bd5cc29f..52b4abf8e 100644 --- a/docs/alphatex/metadata.mdx +++ b/docs/alphatex/metadata.mdx @@ -3,8 +3,9 @@ title: Metadata --- import { AlphaTexSample } from '@site/src/components/AlphaTexSample'; +import { SinceBadge } from '@site/src/components/SinceBadge'; -Metadata is specified using `\tagname value value` at the beginning of the score. +Metadata is specified using `\tagname value` at the beginning of the score. It can be used to specify global information like title, tempo or track tuning. Metadata is optional, but if specified, it must be followed by a dot to indicate the end of the metadata. @@ -39,6 +40,33 @@ Please refer to the [Tracks and Staves](/docs/alphatex/tracks-staves) or details Strings can contain escape sequences: `\n`, `\r`, `\t`, `\\`, `\"`, `\'`. + its possible to also change the template and alignment of the song information +via `\tagname value template alignment`. + +The `template` is a string which can have following placeholders which are then replaced with the respective info of the song: + +* `%TITLE%` +* `%SUBTITLE%` +* `%ARTIST%` +* `%ALBUM%` +* `%WORDS%` +* `%WORDSMUSIC%` +* `%MUSIC%` +* `%TABBER%` +* `%COPYRIGHT%` + +The `alignment` is one of the following values: + +* `left` +* `center` +* `right` + +{` +\\title "Song Title" "Title: %TITLE%" left +\\artist Artist "Written by %ARTIST%" right +. +`} + ## Instrument As indicated above, the instrument can be changed via the `\instrument` metadata. Refer to the table below for all possible values and names. The list represents the General MIDI instrument list. diff --git a/docs/formats/musicxml.mdx b/docs/formats/musicxml.mdx index 83ab490b8..0934cefb4 100644 --- a/docs/formats/musicxml.mdx +++ b/docs/formats/musicxml.mdx @@ -108,19 +108,19 @@ import { FileFormatFeatureTable, FileFormatFeatureGroup, FileFormatFeatureRow, F tex={[FeatureStatus.Supported]} /> @@ -165,19 +165,19 @@ import { FileFormatFeatureTable, FileFormatFeatureGroup, FileFormatFeatureRow, F tex={[FeatureStatus.Supported]} /> diff --git a/docs/guides/formatting-templates.mdx b/docs/guides/formatting-templates.mdx new file mode 100644 index 000000000..5909822f6 --- /dev/null +++ b/docs/guides/formatting-templates.mdx @@ -0,0 +1,38 @@ +--- +title: Song Details Formatting +since: 1.5.0 +--- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import { SinceBadge } from '@site/src/components/SinceBadge'; + + + +In the page payout, alphaTab shows the information of the song directly as part of the music sheet. +The display of this song information can be adjusted in 3 ways: + +* Colors can be adjusted via the `style` (see [Coloring Music Sheet](./coloring.mdx)) +* Alignment and the text template can be adjusted via `style`. +* Fonts can be adjusted via [`settings.display.resources`](/docs/reference/settings/display/resources) + +The mechanisms are currently a bit scattered historically. With alphaTab 2.x we plan to consolidate these options. + +For some formats like Guitar Pro alphaTab will read the information contained in the file and adjust the alignments and templates. +In any case, the song info can be adjusted by updating the settings and the data model after it has been loaded. + +The examples here are written in TypeScript (for clarity on types), the same methods and properties are available on all flavors of alphaTab. +When and what to set as styles depends on your needs. You might have an own custom style applied to all files, or you have the style stored beside +your file and load it along the file itself. + +import {FormattingTemplateSample} from '@site/src/components/FormattingTemplateSample' + + + +The most important parts to know: + +* The [`style`](docs/reference/types/model/score/style) on [`alphaTab.model.Score`](/docs/reference/types/model/score) is used to adjust the style of the visual elements. +* The [`headerAndFooter`](/docs/reference/types/model/scorestyle/headerandfooter) on [`alphaTab.model.ScoreStyle`](/docs/reference/types/model/scorestyle/) is used to adjust the text, visibility and alignment of the header and footer elements. +* The [`colors`](/docs/reference/types/model/elementstyle/colors) on `alphaTab.model.ScoreStyle` is used to adjust the color of the header and footer elements (and others). +* The [`alphaTab.model.ScoreSubElement`](/docs/reference/types/model/scoresubelement) defines the possible list of elements to be styled (not all are song info related) + diff --git a/docs/reference/settings/core/enablelazyloading.mdx b/docs/reference/settings/core/enablelazyloading.mdx index 9354df942..2a19a9f5b 100644 --- a/docs/reference/settings/core/enablelazyloading.mdx +++ b/docs/reference/settings/core/enablelazyloading.mdx @@ -2,9 +2,8 @@ title: core.enableLazyLoading description: "Enables lazy loading of the rendered music sheet chunks." sidebar_custom_props: - javaScriptOnly: true jsOnParent: true - category: Core - JavaScript Specific + category: Core since: 0.9.6 --- @@ -26,6 +25,17 @@ Enables lazy loading of the rendered music sheet chunks. AlphaTab renders the mu appended to the DOM due to performance reasons. AlphaTab tries to detect which elements are visible on the screen, and only appends those elements to the DOM. This reduces the load of the browser heavily but is not working for all layouts and use cases. This setting set to false, ensures that all rendered items are instantly appended to the DOM. +The lazy rendering of partial might not be available on all platforms. + + 
{"enableLazyLoading"}{":"}{" "}{"boolean"}{" "}{"="}{" "}{"true"}{";"}
+ + +
{"bool"}{" "}{"EnableLazyLoading"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"true"}
+ + +
{"var"}{" "}{"enableLazyLoading"}{":"}{" "}{"Boolean"}{" "}{"="}{" "}{"true"}
+ + diff --git a/docs/reference/settings/display/systemlabelpaddingright.mdx b/docs/reference/settings/display/systemlabelpaddingright.mdx index 7a5fe480b..980e0d07f 100644 --- a/docs/reference/settings/display/systemlabelpaddingright.mdx +++ b/docs/reference/settings/display/systemlabelpaddingright.mdx @@ -25,13 +25,13 @@ The padding left to the track name label of the system. -
{"systemLabelPaddingRight"}{":"}{" "}{"number"}{" "}{"="}{" "}{"5"}{";"}
+
{"systemLabelPaddingRight"}{":"}{" "}{"number"}{" "}{"="}{" "}{"3"}{";"}
 -
{"double"}{" "}{"SystemLabelPaddingRight"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"5"}
+
{"double"}{" "}{"SystemLabelPaddingRight"}{" "}{"{"}{" "}{"get"}{";"}{" "}{"set"}{";"}{" "}{"}"}{" "}{"="}{" "}{"3"}
 -
{"var"}{" "}{"systemLabelPaddingRight"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"5"}
+
{"var"}{" "}{"systemLabelPaddingRight"}{":"}{" "}{"Double"}{" "}{"="}{" "}{"3"}
 diff --git a/docs/releases/release1_5.mdx b/docs/releases/release1_5.mdx index 5b3f3f35e..6a6646a1e 100644 --- a/docs/releases/release1_5.mdx +++ b/docs/releases/release1_5.mdx @@ -31,14 +31,210 @@ Supported for alphaTex and Guitar Pro. C4 D4 E4 F4 | r | r | C4 D4 E4 F4 | r | r | r | r | `} +#### rendering: Coloring of individual notation elements +https://github.com/CoderLine/alphaTab/pull/1936 + +With this release we added a long requested feature to allow styling of individual notation elements. +There is quite a list of individual items which might want to be colored and defining the colors accordingly +can be tricky. If done wrong it can have a significant impact to rendering performance. + +We think we solved this challenge and now you can color individual items of beats, bars etc. as you prefer. + +This feature is useful when you want to color elements in lessons to give hints to the player what to pay attention to. + +[Learn more about this feature here](/docs/guides/coloring) + +import { ColoringExample } from '@site/src/components/ColoringExample'; + + + +#### rendering: Score Info - Formatting templates +https://github.com/CoderLine/alphaTab/pull/2002 + +Until this release the formatting of the score information like title and artist were hard-coded. +Only the font size could be adjusted. + +With alphaTab 1.5 you can now customize additional aspects like the displayed text and alignment of the items. +Additionally we now display the contained copyright information of the file. For Guitar Pro we read the templates from the input files. + +[Learn more about this feature here](/docs/guides/formatting-templates) + +import { FormattingTemplateSample } from '@site/src/components/FormattingTemplateSample'; + + + +#### rendering: Bar Line customizations +https://github.com/CoderLine/alphaTab/pull/2031 + +This feature was added as part of extending the MusicXML support but also has landed for alphaTex. +It allows adjusting the bar lines for every individual bar. + +{` +\\instrument piano +. +\\track "Overlapping" + \\staff + \\barlineleft dashed + \\barlineright dotted + | + \\barlineleft heavyheavy + \\barlineright heavyheavy + + \\staff + \\barlineleft lightlight + \\barlineright lightheavy + | + \\barlineleft heavylight + \\barlineright dashed +\\track "All Styles" + \\staff + \\barlineright dashed | + \\barlineright dotted | + \\barlineright heavy | + \\barlineright heavyHeavy | + \\barlineright heavyLight | + \\barlineright lightHeavy | + \\barlineright lightlight | + \\barlineright none | + \\barlineright regular | + \\barlineright short | + \\barlineright tick | +`} + +#### rendering: More Dynamic Values +https://github.com/CoderLine/alphaTab/pull/2030 + +This feature was added as part of extending the MusicXML support but also has landed for alphaTex. +It extends the range of dynamic values to the full predefined range defined by [MusicXML](https://www.w3.org/2021/06/musicxml40/musicxml-reference/elements/dynamics/) + +{` +\\instrument piano +. +C4 {dy ffffff} C4 {dy mp} +`} + + +#### rendering: Different key signatures across staves +https://github.com/CoderLine/alphaTab/pull/2034 + +Up to this release alphaTab had the same restriction as Guitar Pro that key signatures had to be the same across all tracks and staves. +In this release we allow now different key signatures on every staff and track. + +{` +\\track T1 + \\staff + \\ks D + C4 D4 E4 F4 + \\staff + \\clef F4 + \\ks E + C3 D3 E3 F3 +\\track T2 + \\staff + \\ks C + C4 D4 E4 F4 +`} + +#### rendering: Use alphaSkia 3.x.135 +https://github.com/CoderLine/alphaTab/pull/2052 + +We integrated alphaSkia 3.x.135 in alphaTab which brings a variety of improvements for C# and Kotlin rendering. + +Highlights: + +* Underneath is upgrades Skia m120 to m135. +* alphaSkia can now use font fallbacks on texts allowing to render special unicode fonts and emojis if fonts are registered and specified accordingly. +* alphaSkia can now measure texts precisely (including the height) allowing more concise music sheets without overlaps on texts. + + + ### Player +### player: Allow Changing of output device +https://github.com/CoderLine/alphaTab/pull/1924 + +alphaTab exposes now an API to get a list of available output devices for playback and changing the used device. +If required by the platform the required permissions are requested. + +* On browsers it depends on a currently experimental API with only limited support. https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId#browser_compatibility +* On C# (Windows) it will load all system output devices via NAudio. +* On Android it will request permissions and load all audio sinks. + +New APIs: + +* [`enumerateOutputDevices`](/docs/reference/api/enumerateoutputdevices/) +* [`setOutputDevice`](/docs/reference/api/enumerateoutputdevices/) +* [`getOutputDevice`](/docs/reference/api/enumerateoutputdevices/) + ### alphaTex Extensions -### Guitar Pro Extensions +### alphatex: Score Info - Formatting templates +https://github.com/CoderLine/alphaTab/pull/2002 + +Text templates and alignments for song info can be specified via alphaTex. + +See [AlphaTex Metadata](/docs/alphatex/metadata). + +### alphatex: Bar Line customizations +https://github.com/CoderLine/alphaTab/pull/2031 + +The new barlines styles can also be activated via alphaTex. + +See [AlphaTex Bar Metadata](/docs/alphatex/bar-metadata#bar-lines). + +### alphatex: More Dynamic Values +https://github.com/CoderLine/alphaTab/pull/2030 + +The list of possible dynamic values (as defined by MusicXML) can also be specified in alphaTex. + +See [AlphaTex Beat Effects](/docs/alphatex/beat-effects#dynamics). + +### alphatex: Different key signatures across staves +https://github.com/CoderLine/alphaTab/pull/2034 + +The possiblity to define key signatures per staff / track is also available in alphaTex. + +The `\ks` bar meta now only impacts the current bar not all. ### MusicXML Extensions +### musicxml: Reimplemented Base Parser +https://github.com/CoderLine/alphaTab/pull/1977 + +This is one of the highlight features in this release. We reimplemented the whole base parser of MusicXML files ensuring +we are following the specification accordingly. This rewrite brings improvements like: + +* We now support partwise and timewise files +* We respect aspects like `backup` and `forward` when writing multi staff and multi voice files. +* We ensure `measure` tags result in the expected order across parts. +* We try to detect and fill the song information from a variety of tags (e.g. `credit` and `identification`) +* We try to respect instrument details like midi programs, channels etc. closer. + +See [Music XML Compatibility](/docs/formats/musicxml) for more details on what we support. + +### musicxml: Read supported notation elements +https://github.com/CoderLine/alphaTab/pull/1994 + +On top of the new parser we aimed to increase the support of the music notation contained in MusicXML. +If alphaTab supports a certain music notation, we now fill it from MusicXML accordingly. +MusicXML supports a lot more than alphaTab does, so there is still a lot to do to have full support of the format. We hope to gradually extend alphaTab itself to support more music notation to eventually fill it from formats like MusicXML but also alphaTex. + +We still primarily focus on loading the **semantic** music notation information from MusicXML but have only sparse support for adjusting only visual or sound aspects. +e.g. we do not support yet aspects where elements are visually shifted in the layout or sizes are customized. + +See [Music XML Compatibility](/docs/formats/musicxml) for more details on what we support. + +### musicxml: Percussion Support +https://github.com/CoderLine/alphaTab/pull/2009 + +Percussion in MusicXML needs special considerations in the data model and reading of the information. MusicXML uses the `unpitched` element in combination with `notehead` to define how +the notes are visually represented on the staff. Additionally the played midi key is separately defined (e.g. as `instrument`). + +We now use the information contained MusicXML files to show and play drums correctly. With this we added some general features to alphaTab which we plan to also bring for other formats: + +* Separation of displayed note from played note information. +* Customization of Note Heads + ### Improvements & Bugfixes #### player: Broken Cursor Display for repeats @@ -50,4 +246,76 @@ With this fix the beat cursor should correctly move again in such scenarios. #### player: Wrong beat cursor placement when scaling score https://github.com/CoderLine/alphaTab/pull/1934 -When drawing scores at non 100%, the beat cursor was placed wrongly. \ No newline at end of file +When drawing scores at non 100%, the beat cursor was placed wrongly. + +#### tooling: Version and Environment Info +https://github.com/CoderLine/alphaTab/pull/2015 + +alphaTab has now a special API to print detailed information about the environment. With the new `alphaTab.Environment.printEnvironmentInfo()` all important details about the used version, browser, operating system etc. is printed to the console. +And the info is printed always if the log level is increased to `debug`. + +This should make it easier to provide the correct information about the platform when reporting bugs or asking questions. + +#### rendering: Wrong staff ID for numbered bar renderer +https://github.com/CoderLine/alphaTab/pull/2057 + +Internally the bar renderer for numbered notations was registered wrongly. In some scenarios this could lead to wrong placement of music notation (like ties). + +#### export: Wrong instrument articulations in Guitar Pro exported from alphaTex +https://github.com/CoderLine/alphaTab/pull/2058 + +With the addition of percussion tabs in v1.4 we didn't consider correctly the export into Guitar Pro files. +We wrote wrong information about the instrument articulations defining details like the used note head, note placement and played midi key. + +This was fixed and exported files now show correct percussion tabs in Guitar Pro. +Unfortunately Guitar Pro is very sensitive to the used names for articulations and will not display the elements in the "Drumkit view". +They already do not show all items of their own drumkit in the rendered staff. + +### Infrastructure + +#### docs: Move reference documentation into code +https://github.com/CoderLine/alphaTab/pull/1960 + +We hope with this change keeping the reference docs up-to-date is a lot easier. Previously we were writing the docs for all APIs, settings and data model manually. +This had two problems: + +* The code documentation in the IDE was lacking information. +* The website documentation was potentially out-of-date or incomplete. + +With this item we moved all markdown docs into the code. At the same time we now generate the reference documentation from the compile output (TSDoc). + +This has now following benefits and improvements to our docs: + +* All API properties and settings are guaranteed to be listed in the docs. +* We can now generate docs for all our classes, enums and interfaces we have, and we can cross reference to them in our docs. + +Even if we have not advanced examples or full descriptions for the whole codebase, it helps checking what is be available. +We have plans to generally improve marking what docs are considered public (stable), low-level (stable but use at own risk), experimental (subject to change) or internal (not meant to be used by the public). + +#### tooling: Use Vite as bundler +https://github.com/CoderLine/alphaTab/pull/1931 + +We replaced Rollup with Vite as our bundler to build alphaTab. This brings us some benefits during development with the use of the Vite Dev Server allowing faster development (e.g. hot-reload and more incremental compilation). +It makes our general builds a bit smaller due to some limitations in Vite but its worth the benefit when working on alphaTab itself. + +#### tooling: Move from Prettier to Biome +https://github.com/CoderLine/alphaTab/pull/2011 + +We faced quite some issues with using Prettier as formatter for alphaTab due to its opinionated behaviors. These were not only problems on how things are formatted, but also on whether to format at all. +The underlying `typescript-estree` project decided to add custom semantic checks on top of the TypeScript parser, and do not rely on what the TypeScript compiler offers. +We have custom transformers and might write special code in TypeScript for the use in C# and Kotlin. While syntactically correct, we mute some parts via `@ts-ignore` or `@ts-expect-error` as we know it will be ultimately valid code in the output. + +Unfortunately Prettier cannot format such semantically invalid (but syntactically valid) files because `typescript-estree` already throws an error while parsing the AST. + +Hence we decided to move to Biome, as it: + +1. Offers a way to format files if they are considered invalid by their analyzer. +2. Offers also a linter in the same tooling and config (reducing problems with inconsistent checking across tools). + +This will become especially relevant when we'll move some runtime type implementations (e.g. Maps and Lists) into the TypeScript codebase instead of maintaining it per-language (C# / Kotlin). + +#### rendering: Change to OTF Fonts +https://github.com/CoderLine/alphaTab/pull/2002 + +Previously we were using TTF Fonts (like for Bravura or Noto) but it showed that it had some flaws in positioning. Wherever TTFs where used, we use now OTFs if they are available. +This impacts mainly the .net and Android versions of alphaTab and our internal test setup. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 42307fcb1..8d8f162cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "alphatab-website", "version": "0.0.0", "dependencies": { - "@coderline/alphatab": "^1.4.0-alpha.1326", + "@coderline/alphatab": "^1.5.0-alpha.1394", "@docusaurus/core": "^3.7.0", "@docusaurus/preset-classic": "^3.7.0", "@docusaurus/theme-mermaid": "^3.7.0", @@ -1914,14 +1914,9 @@ "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==" }, "node_modules/@coderline/alphatab": { - "version": "1.4.0-alpha.1326", - "resolved": "https://registry.npmjs.org/@coderline/alphatab/-/alphatab-1.4.0-alpha.1326.tgz", - "integrity": "sha512-vS1Kxujq2jEzlT2HwAju8cCIKrEb+jgHEYCKkUaiVJjcD0bF/PQ4ti0yd8U6CEj38Hi/VGh1Oy6+pGh+EE2FTw==", - "dependencies": { - "@types/express": "^5.0.0", - "@types/node": "^22.13.4", - "@types/opener": "^1.4.3" - }, + "version": "1.5.0-alpha.1394", + "resolved": "https://registry.npmjs.org/@coderline/alphatab/-/alphatab-1.5.0-alpha.1394.tgz", + "integrity": "sha512-R4Dnvs0xvgCZEPc/jsHZc9VaGlGx7OWFghJBeLlwes6j1Sh55dpnV+kiDKZP+/AlUplQhYfzNqKOIWSNyAAuJw==", "engines": { "node": ">=6.0.0" } @@ -5579,14 +5574,6 @@ "@types/node": "*" } }, - "node_modules/@types/opener": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/@types/opener/-/opener-1.4.3.tgz", - "integrity": "sha512-g7TYSmy2RKZkU3QT/9pMISrhVmQtMNaYq6Aojn3Y6pht29Nu9VuijJCYIjofRj7ZaFtKdxh1I8xf3vdW4l86fg==", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", diff --git a/package.json b/package.json index e8189386e..4bca40c06 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "generate-alphatabdoc": "tsx scripts/generate-alphatabdoc.mts" }, "dependencies": { - "@coderline/alphatab": "^1.4.0-alpha.1326", + "@coderline/alphatab": "^1.5.0-alpha.1394", "@docusaurus/core": "^3.7.0", "@docusaurus/preset-classic": "^3.7.0", "@docusaurus/theme-mermaid": "^3.7.0", diff --git a/src/components/FormattingTemplateSample/index.tsx b/src/components/FormattingTemplateSample/index.tsx new file mode 100644 index 000000000..71f6c053b --- /dev/null +++ b/src/components/FormattingTemplateSample/index.tsx @@ -0,0 +1,117 @@ +import { useAlphaTab, useAlphaTabEvent } from "@site/src/hooks"; +import react, { useEffect } from "react"; +import * as alphaTab from "@coderline/alphatab"; +import CodeBlock from "@theme/CodeBlock"; + +export const FormattingTemplateSample: react.FC = () => { + const tex = ` + \\title "Song Title" + \\subtitle Subtitle + \\artist Artist + . + `; + const [api, element] = useAlphaTab((s) => {}); + + function adjustStyle(score:alphaTab.model.Score) { + // ensure we have a score style + if(!score.style) { + score.style = new alphaTab.model.ScoreStyle(); + } + + // set a new style for the title + score.style.headerAndFooter.set( + alphaTab.model.ScoreSubElement.Title, + new alphaTab.model.HeaderFooterStyle( + "%TITLE% - %SUBTITLE%", // text template + true, // visible? + alphaTab.platform.TextAlign.Left + ) + ); + score.style.colors.set( + alphaTab.model.ScoreSubElement.Title, + alphaTab.model.Color.fromJson("#FF0000") + ); + + // hide the subtitle + score.style.headerAndFooter.set( + alphaTab.model.ScoreSubElement.SubTitle, + new alphaTab.model.HeaderFooterStyle( + "", // text template + false, // visible? + alphaTab.platform.TextAlign.Left + ) + ); + } + + const codeLines = ` + function adjustStyle(score: alphaTab.model.Score) { + // ensure we have a score style + if(!score.style) { + score.style = new alphaTab.model.ScoreStyle(); + } + + // set a new style for the title + score.style.headerAndFooter.set( + alphaTab.model.ScoreSubElement.Title, + new alphaTab.model.HeaderFooterStyle( + "%TITLE% - %SUBTITLE%", // text template + true, // visible? + alphaTab.platform.TextAlign.Left + ) + ); + score.style.colors.set( + alphaTab.model.ScoreSubElement.Title, + alphaTab.model.Color.fromJson("#FF0000") + ); + + // hide the subtitle + score.style.headerAndFooter.set( + alphaTab.model.ScoreSubElement.SubTitle, + new alphaTab.model.HeaderFooterStyle( + "", // text template + false, // visible? + alphaTab.platform.TextAlign.Left + ) + ); + } + + // Variant A: Adjust when the song is loaded manually + const score = alphaTab.importer.ScoreLoader.loadScoreFromBytes(loadFileFromSomewhere()); + adjustStyle(score); + alphaTabApi.renderScore(score, [0]); + + // Variant B: Adjust the style later at any point + adjustStyle(api.score); + alphaTabApi.renderScore(score, [0]); + + // Variant C: Listen for any new score loaded and adjust it + alphaTabApi.scoreLoaded.on(score => { + adjustStyle(score); + }); + `.split("\n"); + + const indent = + codeLines.find((l) => l.length > 0)?.match(/^([ ]+).*/)?.[1]?.length ?? 0; + + const trimmed = codeLines + .map((l) => l.substring(indent)) + .join("\n") + .trim(); + + useEffect(() => { + if (api) { + const score = alphaTab.importer.ScoreLoader.loadScoreFromBytes( + new TextEncoder().encode(tex) + ); + adjustStyle(score); + api.renderScore(score, [0]); + } + }, [api]); + + return ( +
+
+ {trimmed} +
+ ); +}; diff --git a/static/img/release/v15/emojis.png b/static/img/release/v15/emojis.png new file mode 100644 index 0000000000000000000000000000000000000000..f74f5eeef2d86617f22abcf985ffb0df0dcf567b GIT binary patch literal 22000 zcmeEuWmKD8v}S-7inl;<`6$6D?%G0INYUc%l;T$0LQA2z6}M8{-7Q566e#ZQ9yC~B zUdngxotZT=e`c-uHLR>8`)qm6v-dekkdlHlE*3c!2n51~$h=YpfgTcpKqy9! z(1A}--Y^6KFAtm~A*zpnKd(ooUqPUMK#*52Rozl{=UfwX)#hM_2fNn&49V6WQITx) zwBM8nf@Lr>9{nhNbXmak_0bPwsmIJiFCIO3IQsa-i%}WKgI8e9$3(ADGyHQ;9hpk09Vx*_HDmUXi%VqdPpliD zDy3iBK8q6MCSJ!DYb;2UU@P_AnTmDR;i1X}8q1~}u|cA<^u|agd0t;J7#g83_h`=; zq_xnV&2OBxd`Tv^Y`uQfzv_-{P?v^5oj0ia5g4P`0HbO4 zw=)fz_{8rEPpI_p<8(vzKZKKLb(jeWThNOB?TvlW{RJIt>N)**9o2X7-D#aVAU8LN zcju?zOQ!_>DN{g*ZQeUIXIUdC%TNTV1o?;Ou?2DSESDS1U@Ne9unoGsR`fKijaX_- zLkc)KT!k=LMEmSFRd-QA&#j)kx57Ig1vG5_aem$F+TPZa=e<*x`*D}8O+tGWYl-3S zfVl#eWZlMK!|W;S>ekS4(4(wlJ-KyvD?Z~9KSIj&f8^X-^Z8mT<{~%PaTs`_U$v3; zQ2vzFcPn7d;Cf>&c^$cu)^V&jm+E#DWWb=%a2bejv91F8-HMIb0s-A?TcE)aSv53h znL2eP;uS3m675#i>Fg5Du6;uo2Tt3VfyicQ{Xy3nzSVCVXU~0(J1Z*YdyxDsZpSxv zHZ*W!U=nuF2J|{)c9^fb`RN&lIoKXhH80nls)b{UmoCQODfqg$tJU^;W^VK2;pO=h zlfp*V9Zf&Q^qDC2t}~iYF1*PJI%?F$a7$&uSeeLi(c2OH79F)CQ#0=-UxgyS-f7|Y zqOBf7eLJ-&$Ct%1wfthA0Pi_-!hH=m9+@67zuFeI7l9jZQCI>ym!YfSgFhlgBXz`X znTdQ9DCpTAbO?p!sYuEAIknK5P)7rtkjmG-m0?lG*|5pSgX)GTaNFR+0Drys5Wg|l z(PK}mHIU~Q#4tr3%J`S^X~%SS^O3+aj()1h+nsCLi_X)h&Z9-eMyKlqNyTc_2Etxb z6^Pai*YxCa#N~7vzHMm)qL23FkBqd1)_U6>o|#&zvg^Q@2zH*a^l@5k`{F8arggErhg_JOUrEOenuKYx zy=2FHe`DSr*B$57c0?h^0JwO`Pv$|u87mto+yp7{QCiXiZta|C;jd&EZqUzlCrww0 z3<=68>}4lcvw1sD(;s;oe65N_F$Ybc@<0t<4WvFwc^qDf9iaddEk4*^H<%_g#goKY*-JBI)mki!pP%d6fSNoayV7f zX|4=bR1soOjUo_l%$#BU-tk15s1wVHfnhttrQefgXT7)Km6X)lYM1yLhdfPVHUpyi z0nUT3^yCSZ_EN}7)@_M~#Q@n^HC@0QWa@YEJ5a!&x{^u|t+(NyKZw7#iVVjM5|C8h zPll*{^+nak4r;!|9Se>J&zTsxt@>+%@Nk}f%0-O`tQmu?E!CAXQ(}z8i9WGWaMqzLeqA{kiH}{szvD zrhoDmnq*q_VHn9@Nem%w^N*UoEqn1Yj}H$_>nXC`I+A~H`LU18d4lxpI3pk38A?gH zHdjyKKit_V#C8ek{7(C1#h{S?C?>vEPyDu_kH+?_1wf$GNX)zFokEHhy_T7jTdhb< zh;FpY`v_LOX&#YVkdO{nwE3avy(%bS{ZGu-DkLV;Bel;xJKKD(!fXBCHmjz|dmv2- zk?U{519^uq7V#G8jBI)Xh&BY?giB`$E|{rNdj8r>*-T0*Cq0zHd$s{Zey>W%UJy^V z>7-xnAn1@OGu&g?_sKj;@|ADg?Iyzo+#x?za7_!)noBG#m#eWG5_b_l3T$GvODJS( z;j!HpwUVjremfDPUt1;gHj~6pUOpv+;ane=qBV2<4a9Ugm1LFCOnGd_ea0`w!uW>sM&6g-(fzwL44oOS}>JxCgqaQ@`jT z(bEx6frT`mH38p?jPc805{Oj;OolOe)S#Q$KA<0`3D4)$&`hxsZJV=4HS79tt zJGfdXNd3e@@sM}`@Zd@FFMRZ_5aZto*TI?H-fR)G8ecoZJ#SyJy}1!eU)g$1p;cEB z7bYaOm8c^f`XHNPJgV+2twVz*{aA0mE|Yk%QwnctO%qrhD#HHSNNpDDnun6+f$nI4 zmF%-_d9_Qv0=Xmty;;fI^&G|8tm@d%{2Zo(P(gcB&6vaKvY@^ZSZj<+$^N4+MuA%# z{uX-^;8YGQ$O-@jUvQmsKs>Iew=3#$q^>pArl(5OW)AW%w@P#&)gGUiuF-A9v2kU(un!g254HpXX~Oa zCsj!!6*@{=iGMyb^;Qj7A&ZRv1}MFgRP1yX{Ia2JNJh5iO}I{hU?>V5T`8;1rolqn zg|)rC4DlIm`ciy5-t;>&dEFWPq~r=}yJv~#EbzwEi{AqBg6EN%3j0n$tNCMxf)6$H zUJgKSKuy&~B3Aqwl?Q+HzY(oDTqpRQY(+`4NyJ|t59A!2N-*y?W-l%T{rIF@P~Ztt z9Umt-{nf`h_a*-T2u-a{|2uAD=|kyaEe^I$I*KJ8Ck5vRm$_nldxGgJYxqZME6?A9 z{ajxMn?4gMcRDMXMinI`NLhm!F<*{?Y6JUC&(Pumt)^EyrGABUFC%ibbGi849t)ve zs^~1h3hnH23>?JQW-Q%L=di+OawViLi3mcP5knpLRMJBnw)Ew;bDS)N`3>ie+Y|)W z#RWRY`)yxBT#lR~0YeM_T|zZf@N}_6pXeLVjB8jAwEc3B6(Nm(6Ha5XMzm!eN5UU( zaiUC!oUZ7R7v4oF!tOSMV0MPV_KncuS_3WiMVgOKHs@DbrP$&sPmVOtDm!FTJlzdt~)n?r8~!kkD5lvw*NA8s>D2N+0iBsN6st)FEogl zpjyocW4CHoH1!`Y+Bj8cB1nI0Dt+%zw`=|*h1Fmy6oAt*(>;E?napopt0maOUoS!TX(Oew#JbscbvM0^PYK8FV%m4>RpPjl8&%= zz2NGXjzR(=gnG9RbmhOAFugV*^!{GHi8zuZKiEU$Mfa!SW1rxF`SECGV8v*o?j>;?3Ia= z4PgbcC0RKYNwt86DoRic<$sjy6H2q|Ut43eJO!K{FX~^~na{+%=lqfNvJ|alCg5s; z2$D7Trz3}E17#y%#VQ#h{3a%0MW>wb;kBzZ(H=J)fVEJo$(ACP&smXgbd2hqo*LiqUxHt7W3^-f zNY3W;4<}yT13~60DjaK!OAtldI%Pf^R?yEbi(Y(Cslbpc9sHTSW8S!kC^-KTB<-IX zQHtm7OYIV^K#lmY_-Zjp=9Aq&oV>fDqJnbF3TXq$H2jf5Sm!>bVzABXG1&SqzUF5t z4J#Q2Hj`k6hIewli*3Jz`!n$0 zdG91FcIxiP$h)Ga-oS#_kh!d6G{K{aQG$FKB!uu?~$NgA{QjZ~7W!K&i`QzP(8X=W2qOpZ4uN<>#9?M}B-Rft168Qu)y78M&$ zN4p=imMoM-HMF4RmlS3jZE+I>J>YZ34NAJaGl{#U((-P;B3%v`-hx8&%QKwEw^-fdWsv=9j;Ze znyMG}65uI3Wp~RMBvszoEo;v7gP`YBgUWH>iTn2~rh`$<-Byi9mTpe8vFQ>t+dKIM zMemU{+K$^hr3%gxfFvcqumBDSW;R|uT2m{u9KSipv2m8jv-=>ET31x^ex`;c&L*!Y zgr2}a%=&P7Ls(P^xC!TPY6+$%6YyO-n@jV&*mf0A_3=7Bo1Q4J+_Cr|6Db4EE4DLi zA19Bqn{3I*so5W!11Jl4Wa$xN1S?nhq6zY%9Rh~BclQ6?Gjm@jH`NOs zbWk8DQ!?eaEt6gfssVlS!c3$i7DMjA89G1OAevoOyI@#2h7Xz-PC{b{VjAO|3(mwz zw>9ek)0fwE6)5v&?6y8Qkh&kt_!->F(Dys&{6Qq>P0jMO?jr2hj@RNR-Y%D?@czdW zD6jx~9D7Gr6YCH`xQk3#PP?My5$BZ63o<1v)xZaa28(`ra-xjBH22+YcPuC3{qyBB zl)|slZ|#Lx8L1nWDjGFjDDK`GtSYwr<^zI_Wj~8f4CMt`Z$ONr{|aU zcL95xGWPsWrH2jNhB)@J!A?V-3OGo9|K5ReSX&lCgy>wkPUH2ekAoo{TsyBx^jTAU zFPs{IyJsa;;b1RA&@$KNN%rJId>oYPe^rEeV8jNuJ!hu~!wAQU{T`1-1JZwcY$ta= zIT2>Y5fpF`N(?kv%DCv=bGVGm*>gIR+Y#mK%!*PdQWM~`5)8? z$XWS_cb-q6F$OTVc}wXypR=Xosre*JDIc9jTF*QtaKFVu3VdPt<+$jYK~PctwzPgH zNu-v2)(IP)EA!Cg=nAO=)=KC_ffYtgV1CDPBb_9kKC@f%4Dz7~Qp(rFyk_*;r+DU# z;cq#NAysW^^VL_Dr~Iz$2mr%pGaX3>HyMWFpsG~dYZ28VTx^O!QL=ngQ6})=Bg`5? zIu-A}wm0m_Z96fNjt+Wm-iE`~j38g!Qi>S!9^$~aU8l4cV|6~ulbmz)L%Dtn0sdNS zax30EDKm87)tkrq2UI~qW6pL}M`^LJ%BXXd=7kRxoUwFt2y0$+H+ITyDK#UjdD$Zb z7mHU!h}3o9mtLhdqK#_WC^w~ZHj>)Mh4&FGtXV@(v?KXiTPkbsCh}DZanANW;kXL8 zDD1pirh2)Iv%21);bb!_HADJ!v`@3&@w172>S+JtWkTTcrx41&EB z`kUid4^}p_Ojr7%Uaj`fUbvYjI8x7j|JOIQp3S(pmtd;6aA1u%bq72cJD?Lmo;{+7 z34JscLPz)1DK^8noJr1X0F%N$6lWwr097OKSTPX1lotsSd8T@WYz&$l{~|9Pj%$+s zaF&RL+zKitHC)03?mzM?^#{+=Nb1%bg<`j_gLfqP))U~G1mk4Z+YQs|^Of(^cn)0U zhp$9%&(+V1#=-In)TmzE)}lNjs=~y9TO%ZV$NB}&7P@=wZ<#X;o_Ps)OBy@8nAF|y zS|l`j-nC|N<9(0b`Pi&jL6w@pP7kBb+++$~57I9%dPD#z#k>Mo4I3Iwv{xRvD@QFN zY+Hbk{7PFIJ5ha>HY6VAvX0DYP<%;oXTX=k^_ntlJ}i!dnQhup_hySeF`&j$nW3P< z)=m8BcJFSZ{&58}S>g5|_+gog30o0TP(g zz*z(Bcd6ftY4RnT!M8VATOuw%(8!&~zlm!E-e18ocz z1B1Z)sEAtcCDmpY7(roT#YNkjuWVh>>B*Rge*6bwBi9Sy|elfysids=>^I#qV(BFw#IJXxmbruidDLwvuVm z1a>+uI1Mp823MEU7iT6LA2=U(g$bQn4OjF2m8LzPTG1mR~aVi2cm@GG-&z| z6YKktqNnpn>-fNji#hR}jgxca<-hHE6;z(}bQpl>xT)?%jn3LV zLot+@OnLq9`1k7hKR;*fv!-o&a-`x-8!hzo*}lC!LEcY5(aVY-o=Yl;L+{cwjj zlZMK|d=f*YQq}cw<^^#SI6g)2!!|a4q9o$oFKf(JCwsCzU!OF$>Zp(B<`fn2zEf9E zA{DAQ$>X1WhBu1>Zp-|H!*HDTxjFvjQYBnB$5?5C3;(?+hRucNy{_hzYV(vRg{wZ) zR#b>D?2qK0oTj9t?9j$x0L0Z+zozIq-KK8L99U>dJyGKQng3Ajb8038IgFi(qIvt# zVJ~INbwB%Shzgx}O{sEUUys;t-*9ZbQe`?qjJaGscjyN_$n7vLCsfuwt2FE5*P9J6 z>V>9feUQLT!27*WznT5p13lPrahy`noXxuLqv*eiat`u0hCtGJ{y7WjnkYx?JOq+$ zs@WPqQMJ${ew<_G`NCz(swZ_6=M3;Ag*YWPP(UD<8MXrxAq&qJ*?t)MDB?M+54IkT zWB7!~8k)|qXdc+cN+nb?4PI#lvVXuFX*A}czxXUr%oxgUD z{luVlC{$31m5`wSTeiDJ*#*4l@RJsDg_;t^UeqNBnAHl(#B&0L%UcQPB zLQtXj9^^TUF=!p?05w3s+y%0#Of}#r8Mctlx|{}&k=0muD! ziyAOPL$xGHTl{9fMA&VXU_Ab{Fqov+!_wdi1%Y;zC0NU0PX^x#e`HGM_3Ti8ZO>;g zpoa8%&AzUIu1h1NV!igS{*_fpFm4V`}ooLN8tLnE>U1^!79DWU3;k0+E2?H7v!btd9fg)~+@U1+CD#8cM# zxe)wU0anfd&bQk1Niw<(RieZ;>D*>r>~o&OSrAoKRZg2}-r(S17eT~&vK_ZsFHy_Y z+yS?XHAJ-O{6EeDc*OB0i@35QW}Wcq>FJ4xiIvsVUcY|*Fka7vtUVClZlrnMW9PYT z{Ti`)k>-$f>+yg{gh_;$3kltUm!*}}RGAT))kMid!^twElbs2Uy%o`uKT^L_MdHT_ zH3X&@i9;O5)HKSwsXep2uT5hZ^nR7x=zSEx#l`&=A75!ZCtPDQ(*^TGo3g2$8x|jE z$Cvo6qA1px#AlVX8+S6Y{$cNFjfKRp&n|hLEa=>Mmonnd>s--;ysRwK zT-F2i65XERY*~%&mBT=ET=J8#)#H&I`9|tGczo;i+ED9xC&zHb$Z@Lcyt}iF&7La@ z3(LG+NcT$Xa}Ev(^H$_pp(= z)B5V1)1X+c-9ihp7x6y4wKS)$?p(IgeDKCbxZ86zO1h-5xEQH9nJtk0>eiAhM@2IQ;cDo~4ge4J*>P z&J{oi=xA!5=cD0^!tuArD<1-rx1r)KxidLruP~o^&>{g?B|<;!!!(W!f=U{bq5v8 z+-#JFADWuJRrUGZ(mC$GclZZq#01b7Q8rLb{M>1K&PBe{6)aUi7zFYzMBt?Go-)>R z2|p6QKYJ2@xsUpV-Nmer zGS_h*1x;jR^ty;EC9iXNfYLE?YJVI=^G3+C`mp|mKeJHG&N#k(=xiN@Eaf?h{mZPu zg<-+@Zn|z+zdq;^EY*TCvyuEk%0#e_3Qv{7Y=BFF%MQyKmM{JWxcZhBeA_!Bs7_<3 z%o>MQ$D@iXd)Mix%_^|=C>YZ!5sa%`;n};d&K4R88w=ye6{KCg%?nMLpGC*DjEQr} zN=3b{_-qVOCn?xJSx~^ZNqv_12>xX8w+m@y_CoK0Ur4*}$G@vb{tRcvq_C`%^UOn| zcK-t5v5CRSGO z)&lFT;Umo|@7`}@BHjx?oCWIG)_-xGpW>SM21N2|PYjum`54 z_gB018)>>;hn*+eW6A^Nr@eiB_3KGib%$LPBQAsE000pquMivlgbJJRauvu;v0PHs zO4^$tU%S5?aZUw7HtpVn%%4ojM&Q60QG0!u*kwc$~vFv#LhK=B-tnY!=lv6_{5;x~76Km`1 z?819hBR)~v*I!8V-PquP0ANu%Ox9E7Tth+Oc-;cEKW@F3++`<=j3KPu^*LYO zmR^_jovf?RD{hU@oGYLAtCOvQsQ-p8xEkia>?=~4 zXu5phN0TKKRL-O-mF@USCgoKa+Ip=+=&%xUG9}ySI5B(}dlRK7!Yl29cKkW)3@?;^ zWB@0q4ugkEh7jGKs*LB9q5zcRANW^Ky=5tK7?EZQX#0?%8&voRCslO`+6siP*uy+W zJHG12;3%Fhg^imGK`}aeMAa=rRrCBi72ir222|G10JZczAaW>Zz~Xgl_%-g|c)P2H zp5KN)pnf}aW0&^~2~Hz*dEvuo&3*h9eR=CcbGt%|0XjdbfT{3z_5T_pGF2;r zgB5Vb76Yp4j~4E1)8b~mp$w&-JH@qi*GGM>A4E<^RW3$z#b1lIm^@h=^f}`>n>4{! z5M1)-m2S$}FDC%WVb=9M7iJR-{!~cht)|^L)Oh zVXtOJaKCP4(yFvsv(BED$9y2GtSnN|=O|{ka!|a(c<;DUx7zY4&->qo+oSn=j<@Tx zo(IhUEs7BLzJyPjM3mbvNrDE%5W3+a>|?*r&iDXe;zhVViS1eVQ(QaWdw#e=CgI~1 z7_OtQKfpJk+a4w`Kbf(D`a6j)W#!q?dPoez z9A(Zd>f?xR^Rt76Tb=CeY`!6%)|=B(>~#0_#N>3J%dI)ztS9`Sv$u0>k7wgIR`mH|5(dg*t zm=Us-k^~XgeL4UjPC$mdkp|k@mqVvJ6ZmPu&fBT5I5*Lohy$+;k#w=`yv*VHWd3-4 zkF7LT^`ZnVWo1WG;e#3S2(h!t((Rp{h|v8_s)%l1nuzW}c4p>$o11Ny^5Xi|kUY7Y zfc5@l#Ic5f_bGyqQ6Xg{>VHJ5nW&Ycc{{VWwzm5sx#>P0HARJq*E$X>RDXeLLJ7#% zK6rs^1)QcZ+8XS_A~c{cA>K#r`-6iFr#4>JAa<0?oWs4@c-}Yv!JW9n%Cp;Jq7eLy zs=dS@yEoHUwe5ADfffyk@IYRl+{U6Wts$m~*SK?3H#fr5O29G3E_%7ZTkU|Z8;<-N zd7JJ3?mg_>I~J0u-$1<=KLSl4tbQJXs5L0Zqk}k zhdddB1H1DxH0Sz)K9A~{<-BKOw?=x|)o5vp2N;Q6d=wPO_aE*)xuNs_+u@uf+XzaQ ztd^F=k3+ZrWIoKLiDI7oPV2vyItUe40a);9Z7wMZ2a<;Ph6Z8Vx+U}g9I~UEdVt`- zkq5r%TO+w6r3S5t84@;4*qDX^F6^+IW>9D&WhCc(<9A~F?o=fim+=DO$R**UN!V6h!u_@MuKt(y6Tce|_0wr#O^GBJFS`CZ5&CU~O$p*P-)iC^=s+kjGVe zoLT~Z!@_Ugy?gQ*9oP6*BrOiL=s8k)p~ah-ojvFK_kW64_KH>)db1!T`}X3O2gQG# z&2tk-8-TR3Gk-eW>!?Qsig9x}(JFp)TI!4B8FC7GwQRdcct?TeC9aq7HF#@o_gz~l zKy0ns1%=_aW2HW)K5NT#5u)6WHPPXtDvI)#>jJIrDpo6vi=VL1w9Ab+?gm%*9Jhx(W=zKuC)1V`mG(+^ zkGc3*@VVx7A|R}^%W55nG0n|b8h= z+#y6Iv|nX0f^Ik8bP>Ce?%Sfl+8~fCOdRsOzo$nlB_^g)kb}d{!N_Rohf#aL^ZK)C zE0I3*S9eJqS?GPff5OblD$gq(J(FBt!~u7ie2`%pvP&fkFWeULy_@VFH92Cs=?dI#DEwex?q;=CjZqlf|-NT04Pi8@PQSr zJDhcKS1IUK0v0keQi<|ujtHZq+9I&yFy(CPUkRMd?Vi0usX!L-%2wQOh6?7>9yv?;S2*H?Es85N%UAz7Z4 zmF1>UaxmA3@U8Ao6+!d?v@X2`-iFP%+uJ-d^FL%-v%&jR%heP5o^XJEC5Z#Lotv}+ zq^=u#wSbrr6XWA)aWddHwaeqI$45s#3xyh`3wkb7W`m*BV!}hgR->Pi?OHAtop;8? znk>f(d>Y*f_sTV`9TXG>qTNJWm;?k|9U`d3h$AS491jt#w@6$ItiPTH&UfzZeM=Y? zv3ll0ene-~y>UCh|33Z@7L$ngtcUV@{;OSDm^17L{G#SW6MYs$ITXucTlw3~P>;1W z0@&hMjDk0((6m@hC;~^(fMq@84r%wY9On0IjpU{FQZy&!)=uE0fQZCs_yOJ5cwgU% zyagSAu-i@Et-5Im7%co{6GN|wB>3<(HgPLmqj>(Qcz!4doP=Ee$^1OWHjgq zRMCICI`QFH({bXyMNe!HYfc35!DeK1ncBBkv@)ZQ@IM+io~ zc-%GSVKlQ8sYut+b4Es8>DRTxH2U`>IHr&L~2-x(i~NHPgs z>{nTCs?fi26YXLu=^(ul15{AMQO^{(#%fr=wAIH1uqGLT!##Cfy8ldx>M}F>Q+A?$ z*l-xCi*${s(L*)-8leks#xwtF2cjIulTnu$)?dY_*gA*Hgxxq-V59J`28AyX@2}&4 zAvQ6^Wcgr#RG-(lVQ`&vqM8@6Ij9F5ll={UXif@?4> zAVqV6R==Psd+3Hn`oIgU$~0~+sQ&M0Qf8ewY=u@=Y};g|7bc}YI^LOilQV!Sc_@|X zIeA1cQJUM6e0QMRINfo0S0IuAtlwx*JG5jTs(S@RR~V?PGNm~WL#zrZ#O+ap++FdR zfbvB{;s}24N4X~y&}<{`&XPzu%7>!F(LtpFEWgFL|Kncaz#KVe7$Yx$cQCy6C&;qFAC-(Lo&M!uQ|rAQy5 zamF(W`1TH>e{kvSmDwpr*K@t?k`5acPztq6VOso_;l0m~3YqDBS-upg8DwJ$zs-@3 znB{6FDK#{7;E1#RTtJ5xv8I19_wKVea){=XbojRGD)nYo9Rt*eHqt&Yb}x!@vYDQw z!{+tH47Pbc(pEugIqTAW@Yd-M5i=%R$k-l~E#4a=i=EwSLdp8=uHS?eH`V8V zEu`n%;QwPZjUc9{*uAW~?nuj9A=&BX5B1+~;sG5p&zPD4`d9L3svWBQ<`dMjI(rLQ z&L0>H@1dYz-9yCm>v+)!HG zlnbAUXBxlH@*fqI)R3o7eVf>$To*sN^C?~ra*W$qL>%5@uyCdI{MyCk6FNbg3&#SG z%S>_iA5AtFY`8=s9-Hhby7*j2{Vhnb_V}C;t-bxwaj{&lX`vJ5u~@>}QS({z<^0+g zF>K<6TL?9B6m3+XhH;;G_>;Ad96duzVv zx^%%I!lhp^1*_qmHOC0*_J}CTE@LSb)OY%g=`F7A{(j$2XMDnDmxs+4fm>)5ce<%J zYB#eU(8xblYLLEPen01iPel+WJkl3~`puUqlYf+MFOSxAh(Xnjd*hz6Ksms`qyyvZ)_F@WvZ8zwLx0D}1pUw)uL3B@SzYyD!SfRclv;s0QN zrkGR$W0I!sfy}FEd=zvvUwq6q<3-X%MVP}2S~wdgI@7~-5aXAHb(N?q9DD=|KC;kH z95(dg2`7nLZT3Hf{B{&^5_MH&E_(fWD0H5)aU+%H2f^D74GnJ3h>~-E>1=Sp&dZLvEX6fM@;xAe*(!fBADfZqpiv}EeR*)CT0=Zdz9*>q!>SJC<$~Bl?ELP>ggxYMk-Lv@XJkJ zPmhg}|Jh5g>zX9$&jqZ^VB(#6pNE|n%~-*;aRNo2o_jit!g@M?qb|R%H_6}F{bIb} z^0I*^j{UiW;nmr6GjztdT$8HfY@lbUtD<7K_D%S%lX=d{?t_59x2>D1Yb%n@3wC~@ zhJ;FJIB46FV+%;5BnRhnJy9waGM!{4%7@on(GRSvP~1T0hHlL)RW>+5?I^G~rE)=( zNpcoS8r-pHDL)#tiNKD{Q&>#KutUV-D<>F2o6uCs=x4wy8@+{jq)}giO_6V7!0asg zTa0eaTU)WGJ39txoKqI3_kbbaljOhL6{gyRJd3Lb6>8Y&)dJh#JhJg|3pLhLImdC& zXR4&t)W)JB>m)`TTu{S;nm51ADF#}?22nS@@DcAwb{aU#oO}NRJ_mILyzQ!)Byp<` zavBWi|L6#vYg1j{j(l8%vk_F3Sf}_kOeytzM#k6)Q|Spo^oSoLl+Z7`7?XRv5`j|g zrXar;w>LU5K2qo^R=!=lYR!>*@cosu=s@(9gwXf8umin&WzYNql&z|zRodLwd&x!# z97urv`Ic8)%w|wyeH=rESIh&5z?{Fg82R0kvW}CRs)68KThsG!h|^4nnB^f!R-LO; z7b88btRGtY;f_(TGa0=6*Fb+J)F3DC6XjEWf7+tMN!1Ft`eF!7jTUqIN6KXbvZue0 znLTKTPXA}aYn@5`L`6NlluvE1Ug}3o#(mNc(wv!Zxc6m56aZ)e0q0L}alN)~ryGws z8+(Nn7Z*HPW5r^L9?77is{KF}4htR_VX3JR2Hx^;ay=pG6hQ7F)c3y`#CdU$E`vhuO%Rvfr5QlXcJL>a){IO6v8F*GJv{V=dH<-_)q#~ z0!n-?B(8yL=lj4n^FdVEHtO!ShkYK+HI?ATXmFvr&84%iuiXJ{py@y};>PC#n{Qbj zj@b=|8Eu@J{4rCSP5{PjU`0aDLhO7HMr@}xxfxz(qwEE1Op`>T`M{ zcWw9g81(LHWDTOr6lO!QG0A602eN@#OXui`c)=0{N3H0HSku*5`hhWs+pSGK2=p}K z?soyimFCUkpBA_l4#{{=1d~ZvSW`@ErwduBBR;t&3KhqBXgr^(9k09z&uH~sYV$mp zJTAWbsew&h8=

vUYB(%aey1c=#JTr1jfhSA#xB)q0Hm z+o|Oru5wa$Tx|ND`#Qn{JS}N1q#`u$O#EizObkKH{(HBikv_hYtX`~l1uFn=?dZVI z_^kN#HJ!ae`{Mhsfjgi`865_q#>Pggus8Z6V`>K9PR>pd8-0)!65xZRRf6_36rkC6 z^3wt|Qu)jwx3`%?niYU4%0*mlJ!j$eD>-lI^dNiH(RV);0a8k>kz*RStmX^rg7d_z z?l;z2Yc{&91X6@i9ViAwlnC?Rwc0ebNmSBp_JEIjG`D26wjxR+L>=dcq^V-bAize7 z$X28jckVWDz62OprP@rAtLKbLgulhXt*$&`zbyFUN)Omk-l+Gy|9x3{-D zMF_KuXq5b}87st?P@@|0S^smidr%@A8B7(u8U)#wchrdP0*~*J$vvOG`vj;cb-qRYFm&8SP#yu>cOI~h?UJZj#=K&KC zWAE7o*T(KqLDavk_P4D6R~LoU!P1mmw-?pgc+)jDR}K67#R5fo$r+A$HTFwI?Lg(l zN3N4r!5N`S^&)wb%8a_nvyamKD#@I)`UC5o27eS21ncQl=i=bw+imWr9Trww)#C9{ zSz1q)o$i|!zQ#;=R2gk;GgbS%=Q?;f!`tFN?}Ajg?0rs$R9HPLt@pY(3QzYeZ*07R zb%u~ENQ@uiHAtrmB2PvnQnGT*Zd1SrbDH^(l9G~4pukgM>1xKXBZPy));DEtAWWtv zZ;^hz%Ba`~?6)&E7mx0ozLt$=pWBo8t~#cUjvgnrd%ivPnRpOT|0d^NoRam)X}_;s zG|jD8~F?RYyvmdHyCjs3mXo*o|Sa&B2FznODWD$HEFMb@Zo<{F&M zxAa`RqPOJt3MG0PcH2E2j(QmF^eRkyZ2RPvohE0Q2d{6tfo(QH#vY7<53F}W*d$`j z^sYk+NC3a&A5#~Ty}Tl6qKA-&Q5qDky$*Y0V>?`zuU_aa(4$Bm*5uWn^m8J@$M)dB zbB7m^uyt@?v-$G)kvW6ATr|EKmCP4*`J-xZy1b)I^kDqeQ3#}H&JtQr!%W;eJ%z}^K9(>P@8`DEzq!$Q7`QgdnQkFqC+2|!m$pTM;aMe@5Up@@0 zV|Fer>Aou!2v6tA-011~Tq|DjYHx*5bFNj^ah$YUJZW`7`^+X8*6`n|x$;1^vbJw( z=JR&i;q9Vmi)ni!mRd?{4La50+QKL)5wxVVwuZ69-f2hQ($ZdQEm5_V5JQPt8m28K zmY^CcDrpHSwh>Djl37pBoK& z-qK5m@^}09)cTJHV|F1}4}T`GzG_X*eISEHzx(m<#BvUD)Qb$6N2l05_)yKxL5=bgs#27tXm849hNoINWk*|WZ(gkvWO);6A%+GcYL_~XQp-gm)t zw78d1m1jlIynUO<{x8_XoS!m2S@dCONY4*5MPqCTMo>*(CQ`J`J_~!ac{NGSl+bQ9 zd_-hytH}RZAdDS6BnG)z{63KDd4&7H=@LfKe}&7PtmF(Z(S@zyv+qj#T9UeNiMQhj z229l;V%Q(GumIZMA{cnk>MmO9AaXB9GZoF3570B=6Wbv88H)Xx8PGEm2DKJVL>YH_ zZfjZUJqhx^3Q6YCWo$w%phM`2?NogZ?|tny7nak2g7LF^Cxd2704o(EYM_@RbdhH( ze3R@`{OWiv|4pe#Fs*xUf(SA$hkL_g58MY1n+%m#ND6Do z1N5tQVF68m+eQWCMC zi4nfi9rsL5f{~CBIP9vpAEBy0W_oz%Q#)X8CoBfCQLr)j_ilAw>X)LIuy*XEbjONX zczqpmUit8w#&hs3^Mb85{3Ph}AN%AS91?Yyu%3H37x`Uv5YgM)t>HU(B*&&yYt{AD z)!tF(Cp}s%^M?oo!q8^%7CEgZgbf3=VsKofu9U;I~k@Jdv?oQ@5C)Z^-Dcw8OQ zu4h#<{B6?k+kb$EfNjruCdhbF62QB-k9~AzX^+yNYwphQO)HqVfO$N*ZRNFadrcT` z0r{bfXs>gSxj$X7R^1L>&P0JU>$;-(meSUpt{*266PQRpRg{CNSasaGFvM5`X<+De zNI|v}fs{nhr3+`sPS66lT}s?pLydlYkUa4}eTEKDF-w+_kRD`*6^@ zo&0SJD2}m~PzXcK~{EtAMdMcuKB-BS{_jY7wi2PKFL0n(kb)s|Tj48!r(E2N>)8a;p!90V%h9nf1VPI~LUYX&Nx)g0A7C(~3Cfwyz6pj$iUfaZ6$vK{9wMl4K zb%*W9k3R6eCf*<7@y6uI4U5X9Q8>sseG7g@XzI~y!aM|Fh}TXf2_7uBBwEQYgb1!A zguorX>{lGLARTUjwwxh9H2Je?S3;gI0osJ-twV7?oI%8Uer)#r-D}Y44{y5r#?to# zO#pKke1Q0c5*$}F`mj~(NoI%r*f^+^$6p0zPznx0k!+_F(jH`S;f&ZGQckPe(Ez2f zLKdK`Wl@Nn^ryvas`S%`K@P$KKnhK^WB-NFpErS1Y*Fm2QGvwZRFUl0}uu^rdNvzQzX&7qBy5MqD4;$ue-Ml88FocHOIca|nT%O}-H z1%4Jh|0Xqv$1v4^y*T7;Zij+jKB?nAnvxSe{^i!X^8dXhCh)Um!ri)yK&rlCsO+-sX1x zO%30XFF$Sf&N`GEtQF&{wo-Ke;gQOQJl+qOUjGE=u8kO&_`IJ^YNTjUW64yu3t6W` z&@UHABFYtRf+y)X@_XQj@iplVtE-k!ae6+1-dFf9q&8Yr1?0L+gMslsp~NJ3GmZ3^ z*h=YxNE_!Dw8-&eE=ji7o)t1IeJ1^eX?>3DL1g0Xm)R$%n32><_RYeok(f5# zh`~PMCZDjk8CyX>Ko;gTM&8=yrsk&ZPypy&a}T6aNv%HMk!cnQLf7 zHQd>`RYDpRu#fTFiMt_#PUdeHFOc3oyR;J1(kuw6WFJk)d*7VyJHskKSK&ni2GrD_ z5N>6^(<&u%>|`*12Ki5R7U7Sa&RG)!SSma8O0}!WEw~DcQ`}WP1D&w4oe{w+=t9oV z>pxyd*BI{}^qe1!EAL%<@z-BPLB|ZF<4Aw~{$zG>k#pAYWsp7l46@YS(jH&z6QjCE zqW-oKIE@;mlsH`_?1Or3bnDXul*hjD&}X1!-H}cyY21nwtj8V3X0GiDw|G4j`Z!nf zk|ql>nq=nU<102xNExQjGfV@t=f2nolg@Z{E#BFHy^vuzqJibQ*AXkE3B^y}9b3sR zwc>98=GBH~aNwA9_oPJo2M23m4&dbwY6D3@A04B`-)<;aZcPG>8J@vuw!&7}YZbl* zQlO6%{&d;ZPBdU-#w;k_Ut5p`t7@!us27xABg_j8BtZ?}wkFdSiq&AYsfZ^5EVk|x zvn^xp`tk4vPA(jYc|PKA1BDvPJ0P@#ZmQ0RiGVTUQOF;$pXpa!Gc{w*L+vd$9-LsM z^oTeEzw+p1x+V~&JhpMIlu-mU09ef$$?jTNP)S{64ze_u9ex?nH$jSir&0Bq={ct2 z)Dr|8?Ve;Sa3by*@O?H)EJBS&Izwq$-)hvRtdiE_OM!O%j0L%d<87~ieF-0Q_lqq+ zCA&~32;Z~3%bTXQc??zCSRc!HrglQKN*ZPdUV;iU>v*T9SZZPWxOx0H_C)hS{#fzW zo7LOkFiLz6*eUmzWNX&uzrW0r!3$y%jP!NC7n^{L!PPjcXyxJVxUaELN>6QC!`o2L z(S!j*mO{nSFl0z@p?jIJ^br6`v>E6weL4?W*l4%PWW60PBIYchPztyJoBVGCqn%me zWW_%TWgC_UW4$zZH$0v9G&WH( zCQmVY6zse3hmu=N{7M)#SqpyY|*)?I9GDQ1%>$5I-r^{@*C^w)VJ2q@y91R@9AfX$xwer(a0;*iO64}0+61; z|NMCJdBEAotfqCAI0N>m2B_`Sgdo+!U= zQ7ZBd8BOp8|KWNvR;*u#Zv+dD_8alkY6Df7z2%G3(eS03{e=S(-u+3r@Lx~$iX#Id zM%l=8neM3-S$%h!-j!)_9)T`*R`J-A{-qjsT8xYHlg(UOQ$?%S_^;aw$dtOyW-5Z$ zg0;df#-Cw^^=zf~*q;28jUr0F_RFLswJDX_1;mB*%yiLX%j-X`Oq1n#Is9>u`|H8q zv;F!z!&t9{T*AS(b6q3?EHnVt)qh3?tFIiTxJEM+^Z05$r_J68@Tj6S9Px_~D)TYd zG+lGhV$$!}9t`P}AK`dR--^97YZP_f?XK@RDd21O>;WF?;y&ed*A6%Bkx?C6(ioG{@8d-VfvxBI1HSU>+6L=i_WbSmMV9zo z`gN&ueX}1_LFUZE7qsgdP;7|@)hQ{^ym~e&WLA+JG8<=@+cD*d$>E!VEcLat2rt)+ zA8=ZyYkBTa-HqI#f2y*+S|&YK&gP>_dow{#7c&DHqmTj%Qsm5o_aa(Z)A1Uuuvi|=+C5^QssnI Date: Sun, 4 May 2025 18:48:42 +0200 Subject: [PATCH 15/16] docs: Correct link to style --- docs/guides/formatting-templates.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/formatting-templates.mdx b/docs/guides/formatting-templates.mdx index 5909822f6..b2731a2f1 100644 --- a/docs/guides/formatting-templates.mdx +++ b/docs/guides/formatting-templates.mdx @@ -31,7 +31,7 @@ import {FormattingTemplateSample} from '@site/src/components/FormattingTemplateS The most important parts to know: -* The [`style`](docs/reference/types/model/score/style) on [`alphaTab.model.Score`](/docs/reference/types/model/score) is used to adjust the style of the visual elements. +* The [`style`](/docs/reference/types/model/score/style) on [`alphaTab.model.Score`](/docs/reference/types/model/score) is used to adjust the style of the visual elements. * The [`headerAndFooter`](/docs/reference/types/model/scorestyle/headerandfooter) on [`alphaTab.model.ScoreStyle`](/docs/reference/types/model/scorestyle/) is used to adjust the text, visibility and alignment of the header and footer elements. * The [`colors`](/docs/reference/types/model/elementstyle/colors) on `alphaTab.model.ScoreStyle` is used to adjust the color of the header and footer elements (and others). * The [`alphaTab.model.ScoreSubElement`](/docs/reference/types/model/scoresubelement) defines the possible list of elements to be styled (not all are song info related) From 0d647fe85ae2b339a8c6b95fc775cb709abf168a Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sun, 4 May 2025 19:01:16 +0200 Subject: [PATCH 16/16] docs: Evaluate description in table --- src/components/ReferenceTable/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ReferenceTable/index.tsx b/src/components/ReferenceTable/index.tsx index 1ca36ed5b..af2245964 100644 --- a/src/components/ReferenceTable/index.tsx +++ b/src/components/ReferenceTable/index.tsx @@ -7,6 +7,7 @@ import { PropSidebarItemCategory, } from "@docusaurus/plugin-content-docs"; import { useDocById } from "@docusaurus/plugin-content-docs/client"; +import { MarkdownString } from "../MarkdownString"; function buildPropertyUrl(property: Page) { let url = ""; @@ -31,7 +32,7 @@ const ReferenceRow: React.FC = ({ property, showJson }) => { - {property.prop("description", "")} + ); };