Large Diagrams

[achudars]

For large diagrams, top/bottom left/right get's cut off.

If you add these two CSS styles, it should do the trick:

#wrap {
     overflow: auto;
}

#canvas {
    top: 0;
}

Alternatively, you could make the #canvas element draggable and resizable using jQuery (or any other preferred method) for better visibility and control over the output of the diagram.

Otherwise, great job on the tool!

[achudars]

Another alternative without the use of jQuery:
CSS resize: https://developer.mozilla.org/en-US/docs/Web/CSS/resize
HTML drag & drop: http://www.html5rocks.com/en/tutorials/dnd/basics/

[skanaar]

The difficulty that arises is that I really like that the transparent textarea floats on top of the canvas. This causes some issues when scrolling both or just one of the canvas and/or textarea. Especially horizontally.

There is probably some nice solution out there. Probably looking into some kind of zoom/pan tool.
Up until then the #zoom: directive and export to image are our friends.

[macino]

Maybe a partially solution in https://github.com/macino/nomnoml. I added some move handlers to the canvas so you can drag it wherever you want. Double click restores the original position. The position of the canvas is not affected by it.

Unfortunately, it works only in FF. Chrome has some difficulties handling the mouse event on canvas. Don't know why, but looking to it.

[skanaar]

I try to keep compatibility with IE9, Firefox and Chrome.

[macino]

I'll keep that in mind. I'll let you know when I solve that problem.

[skanaar]

We now have a candidate solution to this issue.
Anyone who is interested can do some QA here: http://www.nomnoml.com/releasecandidate/ before I deploy it at root.

[ctzurcanu]

Too bad the image becomes fuzzy when becoming smaller (such thing does not happen with the SVG renderer.. #15 ;) )

[achudars]

@ctzurcanu do you mean the fuzziness when downloading an image?

[ctzurcanu]

@achudars that too, but in general the letters on canvas are less sharp than SVG letters of the same dims even when displaying.