Skip to content

feat(playground): Some convenience features #2410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Danielku15 merged 3 commits into from
Dec 5, 2025
Merged

feat(playground): Some convenience features #2410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e4c4b76
feat(playground): import alphaTex into editor
Danielku15 Dec 4, 2025
359d1f9
feat(playground): expose alphaTab for fiddling
Danielku15 Dec 4, 2025
da51a07
feat(playground): allow drag&drop on whole page
Danielku15 Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion packages/playground/alphatex-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import Split from 'split.js';
import { setupControl } from './control';


async function setupLspAlphaTexLanguageSupport(editor: monaco.editor.IStandaloneCodeEditor) {
await basicEditorLspIntegration(
editor,
Expand Down Expand Up @@ -94,6 +93,17 @@ async function setupEditor(api: alphaTab.AlphaTabApi, element: HTMLElement) {
automaticLayout: true
});

let fromTex = true;
api.settings.exporter.comments = false;
api.settings.exporter.indent = 2;
api.scoreLoaded.on(score => {
if (!fromTex) {
const exporter = new alphaTab.exporter.AlphaTexExporter();
const tex = exporter.exportToString(score, api.settings);
editor.getModel()!.setValue(tex);
}
});

function loadTex(tex: string) {
const importer = new alphaTab.importer.AlphaTexImporter();
importer.initFromString(tex, api.settings);
Expand All @@ -105,7 +115,9 @@ async function setupEditor(api: alphaTab.AlphaTabApi, element: HTMLElement) {
}

sessionStorage.setItem('alphatex-editor.code', tex);
fromTex = true;
api.renderTracks(score.tracks);
fromTex = false;
}

editor.onDidChangeModelContent(() => {
Expand Down
5 changes: 3 additions & 2 deletions packages/playground/control.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,13 +251,13 @@ export function setupControl(selector: string, customSettings: alphaTab.json.Set
console.error('alphaTab error', e);
});

el.ondragover = e => {
document.ondragover = e => {
e.stopPropagation();
e.preventDefault();
e.dataTransfer!.dropEffect = 'link';
};

el.ondrop = e => {
document.ondrop = e => {
e.stopPropagation();
e.preventDefault();
const files = e.dataTransfer!.files;
Expand Down Expand Up @@ -627,6 +627,7 @@ export function setupControl(selector: string, customSettings: alphaTab.json.Set

// expose api for fiddling in developer tools
(window as any).api = at;
(window as any).alphaTab = alphaTab;

return at;
}
Expand Down
Loading