Skip to content

Commit 3293dca

Browse files
dpvcdpvc
committed
Update labs and add some features
1 parent 6a3608a commit 3293dca

File tree

3 files changed

+141
-68
lines changed

3 files changed

+141
-68
lines changed

‎TeX-lab.html‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<script src="lib/traceur.min.js"></script>
66
<script src="lib/system.js"></script>
77
<style>
8+
body {
9+
padding-left: .5em;
10+
}
811
#output {
912
border: 1px solid black;
1013
padding: 10px;
@@ -17,32 +20,65 @@
1720
display: inline-block;
1821
text-align: right;
1922
}
23+
#options {
24+
float: left;
25+
}
26+
#options > span {
27+
margin-left: 1em;
28+
}
29+
#package {
30+
margin-top: .5em;
31+
}
32+
#package > span > span {
33+
display: inline-block;
34+
width: 9em;
35+
white-space: nowrap;
36+
}
37+
#package span:nth-of-type(5n)::after {
38+
content: '\A';
39+
white-space: pre;
40+
}
41+
#mathml {
42+
font-size: 90%;
43+
}
44+
#link {
45+
margin-left: 1em;
46+
vertical-align: 5px;
47+
}
2048
</style>
2149
</head>
2250
<body>
2351

2452
<h1>MathJax v3 Interactive TeX Lab
25-
<a href="MML-Lab.html" style="margin-left:1em; vertical-align:5px"><button>Switch to MathML Lab</button></a>
53+
<a href="MML-Lab.html" id="link"><button>Switch to MathML Lab</button></a>
2654
</h1>
2755

2856
<div id="container">
2957
<textarea id="tex" cols="80" rows="15" onkeypress="Lab.checkKey(this,event)"></textarea><br>
30-
<span style="float:left">
58+
<span id="options">
3159
<input type="checkbox" id="display" onchange="Lab.setDisplay(this.checked)" checked /> Display mode
32-
<span style="margin-left:1em">Output:</span>
60+
<span>Output:
3361
<select id="renderer" onchange="Lab.setRenderer(this.value)">
3462
<option value="CHTML">CHTML</option>
3563
<option value="SVG">SVG</option>
3664
</select>
3765
</span>
66+
<span>
67+
<input type="checkbox" id="showMML" onchange="Lab.setMathML(this.checked)" /> Show MathML
68+
</span>
69+
</span>
3870
<input type="button" value="Keep" onclick="Lab.Keep()" />
3971
<input type="button" value="Typeset" onclick="Lab.Typeset()" />
4072
</div>
41-
<p>
4273
<div id="package"></div>
4374
<p>
4475
<div id="output"></div>
4576

77+
<p>
78+
<pre id="mathml"></pre>
79+
80+
<button onclick="Lab.sendToMathML()">Transfer to MathML Lab</button>
81+
4682
<script>
4783
System.import('./lib/TeX-lab.js').catch(function (error) {console.log(error.message)});
4884
</script>

‎lib/Mml-lab.js‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,53 @@
1-
import {MathML} from "mathjax3/input/mathml.js";
2-
import {CHTML} from "mathjax3/output/chtml.js";
3-
import {SVG} from "mathjax3/output/svg.js";
4-
import {HTMLMathItem} from "mathjax3/handlers/html/HTMLMathItem.js";
5-
import {HTMLDocument} from "mathjax3/handlers/html/HTMLDocument.js";
6-
import {handleRetriesFor} from "mathjax3/util/Retries.js";
7-
import {browserAdaptor} from "mathjax3/adaptors/browserAdaptor.js";
1+
import {MathML} from '../mathjax3/input/mathml.js';
2+
import {CHTML} from '../mathjax3/output/chtml.js';
3+
import {SVG} from '../mathjax3/output/svg.js';
4+
import {HTMLMathItem} from '../mathjax3/handlers/html/HTMLMathItem.js';
5+
import {HTMLDocument} from '../mathjax3/handlers/html/HTMLDocument.js';
6+
import {handleRetriesFor} from '../mathjax3/util/Retries.js';
7+
import {browserAdaptor} from '../mathjax3/adaptors/browserAdaptor.js';
88

9-
let mml = new MathML({forceReparse: true});
10-
let chtml = new CHTML();
11-
let svg = new SVG();
9+
const jax = {
10+
MML: new MathML({forceReparse: true}),
11+
CHTML: new CHTML(),
12+
SVG: new SVG()
13+
};
1214

13-
let docs = {
14-
CHTML: new HTMLDocument(document, browserAdaptor(), {InputJax: mml, OutputJax: chtml}),
15-
SVG: new HTMLDocument(document, browserAdaptor(), {InputJax: mml, OutputJax: svg})
15+
const docs = {
16+
CHTML: new HTMLDocument(document, browserAdaptor(), {InputJax: jax.MML, OutputJax: jax.CHTML}),
17+
SVG: new HTMLDocument(document, browserAdaptor(), {InputJax: jax.MML, OutputJax: jax.SVG})
1618
};
17-
document.head.appendChild(chtml.styleSheet(docs.CHTML));
18-
document.head.appendChild(svg.styleSheet(docs.SVG));
1919

2020
const Lab = window.Lab = {
2121
mml: document.getElementById('mml'),
2222
output: document.getElementById('output'),
2323
renderer: 'CHTML',
2424
doc: docs.CHTML,
25+
jax: jax.CHTML,
2526

2627
Typeset() {
2728
this.output.innerHTML = '';
2829
let text = this.output.appendChild(document.createTextNode(''));
30+
if (!document.getElementById(this.renderer + '-styles')) {
31+
document.head.appendChild(this.jax.styleSheet(this.doc));
32+
}
2933

3034
let MML = this.mml.value;
31-
let math = new HTMLMathItem(MML,mml);
35+
let math = new HTMLMathItem(MML, jax.MML, this.display);
3236
math.setMetrics(...this.metrics);
33-
math.display = this.display;
3437
math.start = {node: text, n: 0, delim: ''};
3538
math.end = {node: text, n: 0, delim: ''};
36-
this.jax = math;
39+
this.mathItem = math;
3740

3841
handleRetriesFor(function () {
3942
math.compile();
4043
math.typeset(Lab.doc);
4144
math.updateDocument(Lab.doc);
42-
}).catch(err => {console.log("Error: " + err.message); console.log(err.stack)});
45+
}).catch(err => {console.log('Error: ' + err.message); console.log(err.stack)});
4346
},
4447

4548
Keep() {
4649
window.location.search = [
47-
"?",
50+
'?',
4851
this.renderer.charAt(0),
4952
encodeURIComponent(this.mml.value)
5053
].join('');
@@ -53,6 +56,7 @@ const Lab = window.Lab = {
5356
setRenderer(value) {
5457
this.renderer = value;
5558
this.doc = docs[value];
59+
this.jax = jax[value];
5660
this.Typeset();
5761
},
5862

@@ -68,9 +72,8 @@ const Lab = window.Lab = {
6872
},
6973

7074
Init() {
71-
let text = this.output.appendChild(document.createTextNode(''));
72-
let test = chtml.getTestElement(text, true);
73-
let {em, ex, containerWidth, lineWidth, scale} = chtml.measureMetrics(test);
75+
let test = jax.CHTML.getTestElement(this.output);
76+
let {em, ex, containerWidth, lineWidth, scale} = jax.CHTML.measureMetrics(test);
7477
this.metrics = [em, ex, containerWidth, lineWidth, scale];
7578
this.output.removeChild(test);
7679
},
@@ -80,11 +83,12 @@ const Lab = window.Lab = {
8083
this.mml.value = decodeURIComponent(data.substr(1)).trim();
8184
this.renderer = {C: 'CHTML', S: 'SVG'}[data.charAt(0)];
8285
this.doc = docs[this.renderer];
86+
this.jax = jax[this.renderer];
8387
document.getElementById('renderer').value = this.renderer;
8488
this.Typeset();
8589
}
8690

8791
}
8892

8993
Lab.Init();
90-
if (window.location.search !== "") Lab.Load();
94+
if (window.location.search !== '') Lab.Load();

‎lib/TeX-lab.js‎

Lines changed: 73 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,63 @@
1-
import {TeX} from "mathjax3/input/tex.js";
2-
import {CHTML} from "mathjax3/output/chtml.js";
3-
import {SVG} from "mathjax3/output/svg.js";
4-
import {HTMLMathItem} from "mathjax3/handlers/html/HTMLMathItem.js";
5-
import {HTMLDocument} from "mathjax3/handlers/html/HTMLDocument.js";
6-
import {handleRetriesFor} from "mathjax3/util/Retries.js";
7-
import {browserAdaptor} from "mathjax3/adaptors/browserAdaptor.js";
1+
import {TeX} from '../mathjax3/input/tex.js';
2+
import {CHTML} from '../mathjax3/output/chtml.js';
3+
import {SVG} from '../mathjax3/output/svg.js';
4+
import {HTMLMathItem} from '../mathjax3/handlers/html/HTMLMathItem.js';
5+
import {HTMLDocument} from '../mathjax3/handlers/html/HTMLDocument.js';
6+
import {handleRetriesFor} from '../mathjax3/util/Retries.js';
7+
import {browserAdaptor} from '../mathjax3/adaptors/browserAdaptor.js';
8+
import {SerializedMmlVisitor} from '../mathjax3/core/MmlTree/SerializedMmlVisitor.js';
89

9-
import {ConfigurationHandler} from 'mathjax3/input/tex/Configuration.js';
10-
import 'mathjax3/input/tex/AllPackages.js';
10+
import {ConfigurationHandler} from '../mathjax3/input/tex/Configuration.js';
11+
import {AllPackages} from '../mathjax3/input/tex/AllPackages.js';
1112

12-
let chtml = new CHTML();
13-
let svg = new SVG();
14-
15-
let docs = {
16-
CHTML: new HTMLDocument(document, browserAdaptor(), {OutputJax: chtml}),
17-
SVG: new HTMLDocument(document, browserAdaptor(), {OutputJax: svg})
13+
const jax = {
14+
TeX: new TeX(),
15+
CHTML: new CHTML(),
16+
SVG: new SVG()
17+
};
18+
const docs = {
19+
CHTML: new HTMLDocument(document, browserAdaptor(), {InputJax: jax.TeX, OutputJax: jax.CHTML}),
20+
SVG: new HTMLDocument(document, browserAdaptor(), {InputJax: jax.TeX, OutputJax: jax.SVG})
1821
};
19-
document.head.appendChild(chtml.styleSheet(docs.CHTML));
20-
document.head.appendChild(svg.styleSheet(docs.SVG));
22+
23+
const visitor = new SerializedMmlVisitor();
24+
const toMml = (node => visitor.visitTree(node, Lab.doc.document));
2125

2226
const Lab = window.Lab = {
2327
tex: document.getElementById('tex'),
2428
output: document.getElementById('output'),
29+
mathml: document.getElementById('mathml'),
2530
display: true,
31+
showMML: false,
32+
packages: {},
2633
renderer: 'CHTML',
2734
doc: docs.CHTML,
28-
TeX: null,
29-
packages: {},
35+
jax: jax.CHTML,
36+
mml: '',
3037

3138
Typeset() {
3239
this.output.innerHTML = '';
3340
let text = this.output.appendChild(document.createTextNode(''));
41+
if (!document.getElementById(this.renderer + '-styles')) {
42+
document.head.appendChild(this.jax.styleSheet(this.doc));
43+
}
3444

3545
let TeX = this.tex.value;
36-
let math = new HTMLMathItem(TeX, this.TeX, this.display);
46+
let math = new HTMLMathItem(TeX, jax.TeX, this.display);
3747
math.setMetrics(...this.metrics);
3848
math.start = {node: text, n: 0, delim: ''};
3949
math.end = {node: text, n: 0, delim: ''};
4050
this.mathItem = math;
4151

52+
jax.TeX.parseOptions.tags.reset();
53+
4254
handleRetriesFor(function () {
43-
math.compile(this.doc);
55+
math.compile();
56+
this.mml = toMml(math.root);
57+
this.mathml.innerHTML = '';
58+
if (this.showMML) Lab.mathml.appendChild(document.createTextNode(this.mml));
4459
math.typeset(this.doc);
45-
math.updateDocument(this.doc);
60+
math.updateDocument(this.doc);
4661
}.bind(this)).catch(err => {console.log("Error: " + err.message); console.log(err.stack)});
4762
},
4863

@@ -51,6 +66,7 @@ const Lab = window.Lab = {
5166
'?',
5267
this.renderer.charAt(0),
5368
(this.display ? 1 : 0),
69+
(this.showMML ? 1 : 0),
5470
this.getPackageFlags(),
5571
encodeURIComponent(this.tex.value)
5672
].join('');
@@ -73,32 +89,41 @@ const Lab = window.Lab = {
7389

7490
Packages() {
7591
let div = document.getElementById('package');
76-
for (let key of ConfigurationHandler.keys()) {
92+
for (let key of Array.from(ConfigurationHandler.keys()).sort()) {
7793
if (key === 'empty' || key === 'extension') continue;
7894
let checkbox = document.createElement('input');
79-
checkbox.type = "checkbox";
95+
checkbox.type = 'checkbox';
8096
checkbox.name = key;
8197
checkbox.value = key;
8298
checkbox.id = 'package-' + key;
99+
checkbox.onchange = function () {Lab.newPackages()};
83100
if (key === 'base') checkbox.checked = true;
84101
let label = document.createElement('label');
85102
label.htmlFor = 'package-' + key;
86103
label.appendChild(document.createTextNode(key[0].toUpperCase() + key.slice(1)));
87104
checkbox.appendChild(label);
88-
div.appendChild(checkbox);
89-
div.appendChild(label);
105+
let span = div.appendChild(document.createElement('span'));
106+
span = span.appendChild(document.createElement('span'));
107+
span.appendChild(checkbox);
108+
span.appendChild(label);
90109
this.packages[key] = 'package-' + key;
91110
}
92111
},
93-
112+
94113
newPackages() {
95-
this.TeX = new TeX({packages: this.getPackages()});
96-
docs.CHTML = new HTMLDocument(document, browserAdaptor(), {InputJax: this.TeX, OutputJax: chtml});
97-
docs.SVG = new HTMLDocument(document, browserAdaptor(), {InputJax: this.TeX, OutputJax: svg});
114+
jax.TeX = new TeX({packages: this.getPackages()});
115+
docs.CHTML.inputJax = [jax.TeX];
116+
docs.SVG.inputJax = [jax.TeX];
98117
this.doc = docs[this.renderer];
118+
jax.TeX.setAdaptor(this.doc.adaptor);
119+
jax.TeX.setMmlFactory(this.doc.mmlFactory);
99120
Lab.Typeset();
100121
},
101-
122+
123+
sendToMathML() {
124+
window.location = 'MML-Lab.html?' + this.renderer.charAt(0) + encodeURIComponent(this.mml);
125+
},
126+
102127
setDisplay(checked) {
103128
this.display = checked;
104129
this.Typeset();
@@ -107,10 +132,16 @@ const Lab = window.Lab = {
107132
setRenderer(value) {
108133
this.renderer = value;
109134
this.doc = docs[value];
135+
this.jax = jax[value];
110136
this.Typeset();
111137
},
112138

113-
checkKey: function (textarea, event) {
139+
setMathML(checked) {
140+
this.showMML = checked;
141+
this.Typeset();
142+
},
143+
144+
checkKey(textarea, event) {
114145
if (!event) event = window.event;
115146
var code = event.which || event.keyCode;
116147
if ((event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) &&
@@ -121,24 +152,26 @@ const Lab = window.Lab = {
121152
}
122153
},
123154

124-
Init() {
125-
let text = this.output.appendChild(document.createTextNode(''));
126-
let test = chtml.getTestElement(text, true);
127-
let {em, ex, containerWidth, lineWidth, scale} = chtml.measureMetrics(test);
155+
Init() {
156+
let test = jax.CHTML.getTestElement(this.output);
157+
let {em, ex, containerWidth, lineWidth, scale} = jax.CHTML.measureMetrics(test);
128158
this.metrics = [em, ex, containerWidth, lineWidth, scale];
129159
this.output.removeChild(test);
130160
},
131161

132162
Load() {
133-
const n = Lab.getPackageFlags().length;
134163
const data = decodeURIComponent(window.location.search.substr(1));
135-
this.tex.value = data.substr(n + 2).trim();
164+
const n = Lab.getPackageFlags().length;
165+
this.tex.value = data.substr(n + 3).trim();
166+
this.showMML = data.charAt(2) === '1';
136167
this.display = data.charAt(1) === '1';
137168
this.renderer = {C: 'CHTML', S: 'SVG'}[data.charAt(0)];
138169
this.doc = docs[this.renderer];
170+
this.jax = jax[this.renderer];
139171
document.getElementById('renderer').value = this.renderer;
140172
document.getElementById('display').checked = this.display;
141-
const flags = data.substr(2,n);
173+
document.getElementById('showMML').checked = this.showMML;
174+
const flags = data.substr(3,n);
142175
let i = 0;
143176
for (const key in Lab.packages) {
144177
if (flags.charAt(i++) === '1') {
@@ -151,5 +184,5 @@ const Lab = window.Lab = {
151184

152185
Lab.Packages();
153186
Lab.Init();
154-
if (window.location.search !== "") Lab.Load();
187+
if (window.location.search !== '') Lab.Load();
155188
Lab.newPackages();

0 commit comments

Comments
 (0)