Supporting LaTeX labels and `Label` statements

[penrose]

Supporting LaTeX labels and `Label` statements

[wodeni]

Implementation items

TODOs

• Minimum working example with MathJax
• Refactor JS front-end code for better modularity and readability
• Parsing and rendering basic labels (e.g.: f, g...)
• Supporting more complex Latex statements
• Create labeling statements (Label f $f$)
• Adding syntactic sugar for auto labels ( AutoLabel f, g, h)
• Gaining access to Bezier curves
• How to represent Bezier curves in our Runtime? Currently, we only represent them as a list of point, which could be insufficient for optimization purposes
• We still need to parse the SVG of TeX labels back into our Runtime representation in order to optimize them. Here's an SVG parser library I found: svg-parser.

Design decisions

• On the highest level, all labels are converted to SVG strings by MathJax the first time the scene is rendered and will then be kept inside of a global dictionary called label_svgs indexed by uniqueShapeName
• Everytime Render.scene is called, _renderLabel will parse the strings into SVG fragments using Snap and place them onto canvas
• MathJax has an asynchronous API and requires queuing its "Queue" with typesetting requests. Therefore, I used Promises, await and async for all related functions (see tex2svg and _collectLabels for details)

Notes

A package called mathjax-node does it with one function call.

• The bounding box of the result is inaccurate though, as stated in the source code

Alternatively, someone on SOF wrote a script that also works. Here's a modified version of it:

window.MathJax = {
  jax: ["input/TeX", "output/SVG"],
  extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
  showMathMenu: false,
  showProcessingMessages: false,
  messageStyle: "none",
  SVG: { useGlobalCache: false },
  TeX: { extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"] },
  AuthorInit: function() {
    MathJax.Hub.Register.StartupHook("End", function() {
      var mj2img = function(texstring, callback) {
        var input = texstring;
        var wrapper = document.createElement("div");
        wrapper.innerHTML = input;
        var svg = ""
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
        MathJax.Hub.Queue(function() {
          var mjOut = wrapper.getElementsByTagName("svg")[0];
          mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
          svg = mjOut.outerHTML;
          callback(svg);
        });
      }
      mj2img("\\[f: X \\to Y\\]", function(svg){
          var parser = new DOMParser();
          var doc = parser.parseFromString(svg, "image/svg+xml");
          document.getElementsByTagName('body')[0].appendChild(doc.documentElement);
          console.log(svg)
      });
    });
  }
};

The output looks like:

[kai-qu]

Great!

To get the bounding box of an SVG, can we use a different library's method? (Relevant SO)

Does using mathjax-node require that our frontend have a proper js build system, like webpack? I'm not super clear on how node works.

Also, does the library support using a more natural TeX syntax than "\\[f: X \\to Y\\]"? Ideally we'd write $f : X \to Y$.

[wodeni]

Current problems:

• mathjax-node and many other npm packages do it in a function call, but our JS frontend is all clientside JS code. Should we browserify the packages?
• If not, we will need to write something like the code snippet in the last comment. In that case, how does this code fit into our current module?
• More generally, the JS file, client.js is getting too big to maintain and needs to be modularized. Maybe this is a good place to start dong so.

[wodeni]

I rewrote the JS frontend using the module pattern, which is more readable and maintainable.

During that process, I found the added code for new shapes to be non-readable. I have not tested the following shapes yet:

• Angle Marks (significant refactoring needed)
• Parallelogram (significant refactoring needed)
• Ellipses

One other thing is I noticed that we are dealing with SVG path string more. I don't think string concatenation is the best way to handle them. Therefore, we need to use a library like paths.js to compose these SVG strings.

[kai-qu]

Thanks for refactoring the front-end code! I agree that we should use a library like paths.js to compose SVG strings. d3 can do it too.

Can you coordinate with @dormaayan to refactor / test / document the new shapes?

[wodeni]

A quick teaser of Penrose with \LaTeX, coming soon:

[kai-qu]

Awesome. Makes the diagram look a lot nicer!

…

On Monday, June 18, 2018, wodeni ***@***.***> wrote: A quick teaser of *Penrose with \LaTeX*, coming soon: [image: latex] <https://user-images.githubusercontent.com/11740102/41574074-e38f41d2-734d-11e8-9848-e4bcb0fbc6ae.gif> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#59 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AComdPPIlZLygaRTTCTqvallvwZ1mzs9ks5t-G2UgaJpZM4TAfe5> .

[keenancrane]

Incredible. Is this being done with MathJax?

…

-- http://keenan.is/here On Tue, Jun 19, 2018 at 7:30 AM, Katherine Ye <[email protected]> wrote:

Awesome. Makes the diagram look a lot nicer! On Monday, June 18, 2018, wodeni ***@***.***> wrote: > A quick teaser of *Penrose with \LaTeX*, coming soon: > [image: latex] > <https://user-images.githubusercontent.com/11740102/41574074-e38f41d2- 734d-11e8-9848-e4bcb0fbc6ae.gif> > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#59 (comment)>, or mute > the thread > <https://github.com/notifications/unsubscribe-auth/ AComdPPIlZLygaRTTCTqvallvwZ1mzs9ks5t-G2UgaJpZM4TAfe5> > . > — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#59 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADcALYD96epSu_a1tcdnnvV1QK3TqQ45ks5t-ODQgaJpZM4TAfe5> .

[wodeni]

Yes! I used MathJax to process all labels on startup 😄

[kai-qu]

Suggestions from GC:

• set diagram font size as global { global.fontSize = CANVAS * scaleFactor } and let individual selectors use different font sizes locally e.g. X.shape.text.fontSize = global.fontSize + 10
• what unit are we using for font size? em, px?
• let people optimize labels, e.g. size and angle
• allow label rotation
• in future, leave labels unrendered on top so people can render with their fonts of choice, instead of MathJax's default

[wodeni]

Closing the issue for now since PR has been merged. We'll come back to the abovementioned features in later stages of the implementation