search

skanaar / nomnoml

The sassy UML diagram renderer
https://www.nomnoml.com
MIT License
2.66k stars 208 forks source link

Improve SVG measureText #86

Closed ronkok closed 5 years ago

ronkok commented 5 years ago

This PR aims to improve SVG node sizing when possible, by improving the accuracy of the SVG measureText method. The function renderSvg(code, canvas) now has an optional parameter canvas.

The pre-existing measureText heuristic is still in place and it is the default method. measureText will instead use a CanvasRenderingContext2D to measure the text in a particular node only if three conditions are met:

  1. renderSvg is called from a browser, not from node.js.
  2. A canvas element is passed in the second, optional argument to renderSvg().
  3. The node uses one of the following fonts: Helvetica, Arial, Times, or Times New Roman.

Helvetica and Arial are font-metric identical. Ditto Times and Times New Roman. They can be safely measured without worry that a user-agent will not have a matching system font.

skanaar commented 5 years ago

I like this fallback approach. Before I can merge it I will have to think a bit about the font-list and what that could lead to. And celebrate christmas :)

Happy Holidays!

ronkok commented 5 years ago

That sounds good. Also, If I remember correctly, the font family and font size are a property of the document, not of one individual node. So I should be able to take some of the code in this PR and pull it out of the inner loop. I'll probably modify this PR sometime in the next day or two.

My hope is that you will add a button to nomnoml.com, a button that would download an SVG file rather than a PNG file. And if you would change the default font to Arial/Helvetica, that would greatly improve the default SVGs.

ronkok commented 5 years ago

I forgot to create a feature branch before writing this code. That's bad because I have two more PR's to submit.

So I am going to close this PR and open a new one for the same purpose from a feature branch.