Update TeX lab to work with changes in processing, and save the package list on 'keep'

Author: dpvc

TeX-lab.html

@@ -29,7 +29,6 @@
 <input type="button" value="Keep" onclick="Lab.Keep()" />
 <input type="button" value="Typeset" onclick="Lab.Typeset()" />
 </div>
-<p>
 <div id="package"></div>
 <p>
 <div id="output"></div>

lib/Mml-lab.js

@@ -21,9 +21,8 @@ const Lab = window.Lab = {
     let text = this.output.appendChild(document.createTextNode(''));
 
     let MML = this.mml.value;
-    let math = new HTMLMathItem(MML,mml);
+    let math = new HTMLMathItem(MML, mml, this.display);
     math.setMetrics(16,8,16*20,100000,1);
-    math.display = this.display;
     math.start = {node: text, n: 0, delim: ''};
     math.end = {node: text, n: 0, delim: ''};
     this.jax = math;

lib/TeX-lab.js

@@ -1,25 +1,25 @@
-import {TeX} from "mathjax3/input/tex.js";
-import {CHTML} from "mathjax3/output/chtml.js";
-import {HTMLMathItem} from "mathjax3/handlers/html/HTMLMathItem.js";
-import {HTMLDocument} from "mathjax3/handlers/html/HTMLDocument.js";
-import {handleRetriesFor} from "mathjax3/util/Retries.js";
-import {browserAdaptor} from "mathjax3/adaptors/browserAdaptor.js";
+import {TeX} from '../mathjax3/input/tex.js';
+import {CHTML} from '../mathjax3/output/chtml.js';
+import {HTMLMathItem} from '../mathjax3/handlers/html/HTMLMathItem.js';
+import {HTMLDocument} from '../mathjax3/handlers/html/HTMLDocument.js';
+import {handleRetriesFor} from '../mathjax3/util/Retries.js';
+import {browserAdaptor} from '../mathjax3/adaptors/browserAdaptor.js';
 
-import {ConfigurationHandler} from 'mathjax3/input/tex/Configuration.js';
+import {ConfigurationHandler} from '../mathjax3/input/tex/Configuration.js';
+import '../mathjax3/input/tex/base/BaseConfiguration.js';
+import '../mathjax3/input/tex/ams/AmsConfiguration.js';
+import '../mathjax3/input/tex/noundefined/NoUndefinedConfiguration.js';
+import '../mathjax3/input/tex/boldsymbol/BoldsymbolConfiguration.js';
+import '../mathjax3/input/tex/newcommand/NewcommandConfiguration.js';
 
-import 'mathjax3/input/tex/base/BaseConfiguration.js';
-import 'mathjax3/input/tex/ams/AmsConfiguration.js';
-import 'mathjax3/input/tex/noundefined/NoUndefinedConfiguration.js';
-import 'mathjax3/input/tex/boldsymbol/BoldsymbolConfiguration.js';
-import 'mathjax3/input/tex/newcommand/NewcommandConfiguration.js';
-
-let tex = new TeX();
-let chtml = new CHTML();
-
-let doc = new HTMLDocument(document, browserAdaptor(), {InputJax: tex, OutputJax: chtml});
+const chtml = new CHTML();
+const adaptor = browserAdaptor();
+const doc = new HTMLDocument(document, adaptor, {OutputJax: chtml});
 document.head.appendChild(chtml.styleSheet(doc));
 
 const Lab = window.Lab = {
+  doc: doc,
+  TeX: null,
   tex: document.getElementById('tex'),
   output: document.getElementById('output'),
   display: true,
@@ -29,24 +29,28 @@ const Lab = window.Lab = {
     this.output.innerHTML = '';
     let text = this.output.appendChild(document.createTextNode(''));
 
-    let tex = new TeX({packages: this.getPackages()});
     let LaTeX = this.tex.value;
-    let math = new HTMLMathItem(LaTeX,tex);
-    math.setMetrics(16,8,16*20,100000,1);
-    math.display = this.display;
+    let math = new HTMLMathItem(LaTeX, this.TeX, this.display);
+    math.setMetrics(16, 8, 16*20, 100000, 1);
     math.start = {node: text, n: 0, delim: ''};
     math.end = {node: text, n: 0, delim: ''};
     this.jax = math;
 
     handleRetriesFor(function () {
       math.compile();
-      math.typeset(doc);
-      math.updateDocument(doc);  
-    }).catch(err => {console.log("Error: " + err.message); console.log(err.stack)});
+      math.typeset(this.doc);
+      math.updateDocument(this.doc);  
+    }.bind(this)).catch(err => {console.log('Error: ' + err.message); console.log(err.stack)});
   },
 
   Keep() {
-    window.location.search = "?" + (this.display ? 1 : 0) + encodeURIComponent(this.tex.value);
+    const flags = this.getPackageFlags();
+    window.location.search = '?' + (this.display ? 1 : 0) + flags + encodeURIComponent(this.tex.value);
+  },
+
+  getPackageFlags() {
+    const keys = Object.keys(this.packages);
+    return keys.map(key => document.getElementById(this.packages[key]).checked ? 1 : 0).join('');
   },
 
   Update(html) {
@@ -69,10 +73,11 @@ const Lab = window.Lab = {
     for (let key of ConfigurationHandler.getInstance().keys()) {
       if (key === 'empty') continue;
       let checkbox = document.createElement('input');
-      checkbox.type = "checkbox";
+      checkbox.type = 'checkbox';
       checkbox.name = key;
       checkbox.value = key;
       checkbox.id = 'package-' + key;
+      checkbox.onchange = function () {Lab.newPackages()};
       if (key === 'base') checkbox.checked = true;
       let label = document.createElement('label');
       label.htmlFor = 'package-' + key;
@@ -83,6 +88,12 @@ const Lab = window.Lab = {
       this.packages[key] = 'package-' + key;
     }
   },
+
+  newPackages() {
+    this.TeX = new TeX({packages: this.getPackages()});
+    this.doc = new HTMLDocument(document, adaptor, {InputJax: this.TeX, OutputJax: chtml});
+    Lab.Typeset();
+  },
 
   setDisplay(checked) {
     this.display = checked;
@@ -102,11 +113,20 @@ const Lab = window.Lab = {
 
 }
 
-if (window.location.search !== "") {
-  Lab.tex.value = decodeURIComponent(window.location.search.substr(2));
+Lab.Packages();
+
+if (window.location.search !== '') {
+  const n = Lab.getPackageFlags().length;
+  Lab.tex.value = decodeURIComponent(window.location.search.substr(n + 2));
   Lab.display = window.location.search.substr(1,1) === '1';
   document.getElementById('display').checked = Lab.display;
-  Lab.Packages();
-  Lab.Typeset();
+  const flags = window.location.search.substr(2,n); 
+  let i = 0;
+  for (const key in Lab.packages) {
+    if (flags.charAt(i++) === '1') {
+      document.getElementById(Lab.packages[key]).checked = true;
+    }
+  }
 }
 
+Lab.newPackages();