Skip to content

Commit 42aad10

Browse files
Danielku15Danielku15
committed
Render optimizations
1 parent 13f5ca4 commit 42aad10

File tree

17 files changed

+222
-262
lines changed

17 files changed

+222
-262
lines changed

‎playground-template/alphatex-editor.html‎

Lines changed: 59 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>AlphaTab alphaTex Editor Demo</title>
63

7-
<link
8-
rel="stylesheet"
9-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10-
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
11-
crossorigin="anonymous"
12-
/>
13-
<script
14-
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
15-
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
16-
crossorigin="anonymous"
17-
></script>
18-
<script
19-
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
20-
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
21-
crossorigin="anonymous"
22-
></script>
23-
<script
24-
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
25-
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
26-
crossorigin="anonymous"
27-
></script>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>AlphaTab alphaTex Editor Demo</title>
287

29-
<link
30-
href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap"
31-
rel="stylesheet"
32-
/>
33-
<script src="https://kit.fontawesome.com/b43f0e512e.js" crossorigin="anonymous"></script>
34-
<script
35-
src="https://cdn.jsdelivr.net/npm/handlebars@4.5.3/dist/handlebars.min.js"
36-
integrity="sha256-GwjGuGudzIwyNtTEBZuBYYPDvNlSMSKEDwECr6x6H9c="
37-
crossorigin="anonymous"
38-
></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
9+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
10+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
11+
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
13+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
14+
crossorigin="anonymous"></script>
15+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
16+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
17+
crossorigin="anonymous"></script>
3918

40-
<script src="/dist/alphaTab.js"></script>
41-
<link rel="stylesheet" href="control.css" />
42-
<link rel="stylesheet" href="alphatex-editor.css" />
19+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap" rel="stylesheet" />
20+
<script src="https://kit.fontawesome.com/b43f0e512e.js" crossorigin="anonymous"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.5.3/dist/handlebars.min.js"
22+
integrity="sha256-GwjGuGudzIwyNtTEBZuBYYPDvNlSMSKEDwECr6x6H9c=" crossorigin="anonymous"></script>
4323

44-
<script
45-
src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.11/src-min/ace.js"
46-
integrity="sha256-Kr5Mbwq/xwJYw6XU4NR519/iosGvECYMyMU8IZ/rQok="
47-
crossorigin="anonymous"
48-
></script>
49-
<script
50-
src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.11/src-min/ext-language_tools.js"
51-
integrity="sha256-2/wG0EywLUH85JnoH5zJ7epl4erMdkumdq6e9l0Ngew="
52-
crossorigin="anonymous"
53-
></script>
54-
<script
55-
src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.11/src-min/mode-tex.js"
56-
integrity="sha256-i3DUcEBSJGQPDBtUKIziMPLYK/t7eBNgQXd25FgGdgo="
57-
crossorigin="anonymous"
58-
></script>
59-
</head>
60-
<body>
61-
<div id="placeholder"></div>
62-
<div class="editor-wrap">
63-
<div id="editor">
24+
<script src="/dist/alphaTab.js"></script>
25+
<link rel="stylesheet" href="control.css" />
26+
<link rel="stylesheet" href="alphatex-editor.css" />
27+
28+
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.11/src-min/ace.js"
29+
integrity="sha256-Kr5Mbwq/xwJYw6XU4NR519/iosGvECYMyMU8IZ/rQok=" crossorigin="anonymous"></script>
30+
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.11/src-min/ext-language_tools.js"
31+
integrity="sha256-2/wG0EywLUH85JnoH5zJ7epl4erMdkumdq6e9l0Ngew=" crossorigin="anonymous"></script>
32+
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.11/src-min/mode-tex.js"
33+
integrity="sha256-i3DUcEBSJGQPDBtUKIziMPLYK/t7eBNgQXd25FgGdgo=" crossorigin="anonymous"></script>
34+
</head>
35+
36+
<body>
37+
<div id="placeholder"></div>
38+
<div class="editor-wrap">
39+
<div id="editor">
6440
\title "Canon Rock"
6541
\subtitle "JerryC"
6642
\tempo 90
@@ -71,28 +47,31 @@
7147
12.2{v f} 14.2{v f}.4 :8 15.2 17.2 |
7248
14.1.2 :8 17.2 15.1 14.1{h} 17.2 |
7349
15.2{v d}.4 :16 17.2{h} 15.2 :8 14.2 14.1 17.1{b(0 4 4 0)}.4 |
74-
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 |
75-
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}
76-
</div>
50+
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
51+
14.2 |
52+
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}
53+
15.2{h}14.2{h} 15.2{h}14.2{h} 15.2{h}
7754
</div>
78-
<script type="text/javascript" src="control.js"></script>
79-
<script type="text/javascript" src="alphatex-editor.js"></script>
80-
<script type="text/javascript">
81-
const req = new XMLHttpRequest();
82-
req.onload = data => {
83-
document.getElementById('placeholder').outerHTML = req.responseText;
84-
85-
const element = document.getElementById('alphaTab');
86-
delete element.dataset.file;
87-
delete element.dataset.tracks;
88-
element.dataset.tex = true;
89-
element.innerHTML = document.getElementById('editor').innerHTML;
55+
</div>
56+
<script type="text/javascript" src="control.js"></script>
57+
<script type="text/javascript" src="alphatex-editor.js"></script>
58+
<script type="text/javascript">
59+
const req = new XMLHttpRequest();
60+
req.onload = data => {
61+
document.getElementById('placeholder').outerHTML = req.responseText;
62+
63+
const element = document.getElementById('alphaTab');
64+
delete element.dataset.file;
65+
delete element.dataset.tracks;
66+
element.dataset.tex = true;
67+
element.innerHTML = document.getElementById('editor').innerHTML;
68+
69+
window.at = setupControl('#alphaTab');
70+
setupEditor(window.at, '#editor');
71+
};
72+
req.open('GET', 'control-template.html');
73+
req.send();
74+
</script>
75+
</body>
9076

91-
window.at = setupControl('#alphaTab');
92-
setupEditor(window.at, '#editor');
93-
};
94-
req.open('GET', 'control-template.html');
95-
req.send();
96-
</script>
97-
</body>
98-
</html>
77+
</html>

‎playground-template/alphatex-editor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ function setupEditor(api, selector) {
1313
mode: 'ace/mode/tex'
1414
});
1515
editor.session.on('change', () => {
16-
api.tex(editor.getSession().getDocument().getAllLines().join('\n'));
16+
api.tex(editor.getSession().getDocument().getAllLines().join('\n'), 'all');
1717
});
1818
}

‎playground-template/control.html‎

Lines changed: 37 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>AlphaTab Control Demo</title>
63

7-
<link
8-
rel="stylesheet"
9-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10-
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
11-
crossorigin="anonymous"
12-
/>
13-
<script
14-
src="https://code.jquery.com/jquery-3.5.1.min.js"
15-
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
16-
crossorigin="anonymous"
17-
></script>
18-
<script
19-
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
20-
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
21-
crossorigin="anonymous"
22-
></script>
23-
<script
24-
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
25-
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
26-
crossorigin="anonymous"
27-
></script>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>AlphaTab Control Demo</title>
287

29-
<link
30-
href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap"
31-
rel="stylesheet"
32-
/>
33-
<script src="https://kit.fontawesome.com/b43f0e512e.js" crossorigin="anonymous"></script>
34-
<script
35-
src="https://cdn.jsdelivr.net/npm/handlebars@4.5.3/dist/handlebars.min.js"
36-
integrity="sha256-GwjGuGudzIwyNtTEBZuBYYPDvNlSMSKEDwECr6x6H9c="
37-
crossorigin="anonymous"
38-
></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
9+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
10+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
11+
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
13+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
14+
crossorigin="anonymous"></script>
15+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
16+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
17+
crossorigin="anonymous"></script>
3918

40-
<script src="/dist/alphaTab.js"></script>
41-
<link rel="stylesheet" href="control.css" />
42-
</head>
43-
<body>
44-
<div id="placeholder"></div>
45-
<script type="text/javascript" src="control.js"></script>
46-
<script type="text/javascript">
47-
const req = new XMLHttpRequest();
48-
req.onload = function(data) {
49-
document.getElementById('placeholder').outerHTML = req.responseText;
50-
window.at = setupControl('#alphaTab');
51-
};
52-
req.open('GET', 'control-template.html');
53-
req.send();
54-
</script>
55-
</body>
56-
</html>
19+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap" rel="stylesheet" />
20+
<script src="https://kit.fontawesome.com/b43f0e512e.js" crossorigin="anonymous"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.5.3/dist/handlebars.min.js"
22+
integrity="sha256-GwjGuGudzIwyNtTEBZuBYYPDvNlSMSKEDwECr6x6H9c=" crossorigin="anonymous"></script>
23+
24+
<script src="/dist/alphaTab.js"></script>
25+
<link rel="stylesheet" href="control.css" />
26+
</head>
27+
28+
<body>
29+
<div id="placeholder"></div>
30+
<script type="text/javascript" src="control.js"></script>
31+
<script type="text/javascript">
32+
const req = new XMLHttpRequest();
33+
req.onload = function (data) {
34+
document.getElementById('placeholder').outerHTML = req.responseText;
35+
window.at = setupControl('#alphaTab');
36+
};
37+
req.open('GET', 'control-template.html');
38+
req.send();
39+
</script>
40+
</body>
41+
42+
</html>

‎playground-template/full-page.html‎

Lines changed: 38 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,43 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>AlphaTab Full Page Demo</title>
63

7-
<link
8-
rel="stylesheet"
9-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10-
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
11-
crossorigin="anonymous"
12-
/>
13-
<script
14-
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
15-
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
16-
crossorigin="anonymous"
17-
></script>
18-
<script
19-
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
20-
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
21-
crossorigin="anonymous"
22-
></script>
23-
<script
24-
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
25-
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
26-
crossorigin="anonymous"
27-
></script>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>AlphaTab Full Page Demo</title>
287

29-
<link
30-
href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap"
31-
rel="stylesheet"
32-
/>
33-
<script src="https://kit.fontawesome.com/b43f0e512e.js" crossorigin="anonymous"></script>
34-
<script
35-
src="https://cdn.jsdelivr.net/npm/handlebars@4.5.3/dist/handlebars.min.js"
36-
integrity="sha256-GwjGuGudzIwyNtTEBZuBYYPDvNlSMSKEDwECr6x6H9c="
37-
crossorigin="anonymous"
38-
></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
9+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
10+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
11+
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
13+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
14+
crossorigin="anonymous"></script>
15+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
16+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
17+
crossorigin="anonymous"></script>
3918

40-
<script src="/dist/alphaTab.js"></script>
41-
<link rel="stylesheet" href="control.css" />
42-
<link rel="stylesheet" href="full-page.css" />
43-
</head>
44-
<body>
45-
<div id="placeholder"></div>
46-
<script type="text/javascript" src="control.js"></script>
47-
<script type="text/javascript">
48-
const req = new XMLHttpRequest();
49-
req.onload = function(data) {
50-
document.getElementById('placeholder').outerHTML = req.responseText;
51-
window.at = setupControl('#alphaTab');
52-
};
53-
req.open('GET', 'control-template.html');
54-
req.send();
55-
</script>
56-
</body>
57-
</html>
19+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&display=swap" rel="stylesheet" />
20+
<script src="https://kit.fontawesome.com/b43f0e512e.js" crossorigin="anonymous"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.5.3/dist/handlebars.min.js"
22+
integrity="sha256-GwjGuGudzIwyNtTEBZuBYYPDvNlSMSKEDwECr6x6H9c=" crossorigin="anonymous"></script>
23+
24+
<script src="/dist/alphaTab.js"></script>
25+
<link rel="stylesheet" href="control.css" />
26+
<link rel="stylesheet" href="full-page.css" />
27+
</head>
28+
29+
<body>
30+
<div id="placeholder"></div>
31+
<script type="text/javascript" src="control.js"></script>
32+
<script type="text/javascript">
33+
const req = new XMLHttpRequest();
34+
req.onload = function (data) {
35+
document.getElementById('placeholder').outerHTML = req.responseText;
36+
window.at = setupControl('#alphaTab');
37+
};
38+
req.open('GET', 'control-template.html');
39+
req.send();
40+
</script>
41+
</body>
42+
43+
</html>

0 commit comments

Comments
 (0)