Multiple features

[zickgraf]

First of all, thanks for this really nice and helpful tool :-)

I have added some new features to my master branch at https://github.com/zickgraf/tikzcd-editor/commits/master and I think some of them might be interesting for all users. If you are interested in some of them, let me know and I will provide pull requests.

I will give short descriptions of the changes:

• https://github.com/zickgraf/tikzcd-editor/commit/d1d2448ec341e782df5c5db6f07a44f22ff27d91 This commit puts a textarea in the right half of the screen which immediately displays the code every time the diagram is changed. Additionally, if code is pasted in the textarea it gets parsed (with a very crude parser) and the diagram is shown/updated on the left.
• https://github.com/zickgraf/tikzcd-editor/commit/1557aac6fa46b01ed5bfb2d8b6cd9fd7723ae1f7 This commit installs a local copy of MathJax for offline use.
• https://github.com/zickgraf/tikzcd-editor/commit/8facd8101320899d5cbcd99a7048cc96eceb726c This commit pads the generated code such that all ampersands are aligned vertically.
• https://github.com/zickgraf/tikzcd-editor/commit/1bc3a485a5ebc9f44074c03386361f83872e4a9c This commit adds parsing of "near start", "near end", "very near start" and "very near end" to the textarea mentioned above.

Note that nothing of this is polished yet but of course I will polish it before providing pull requests.

[yishn]

Wow, that's amazing work! I'd be most interested in the tikzcd diagram code parser (The diagram.fromCode() function) along with parsing of (very) near (start|end). Maybe we can find a better UI solution than for the text box taking up half of the available screen space. The automatic alignment of the generated code is also very nice.

[zickgraf]

For my workflow, the text box taking up half of the screen is actually a feature: I can quickly draw new nodes and edges (that's where the visual editor is great) and at the same time copy/paste or search/replace (that's where manipulating the code is much easier), and the other part is always updated automatically. Maybe that feature could be toggled in the toolbox? Alternatively, there could be a button in the toolbar which pops up a textarea. Then one could paste code into the textarea, the code gets parsed, and the textarea is closed again. Or both options could be available. What do you think, do you have other suggestions?

Regarding the automatic alignment: I think it would be much less hacky to to this in jsx-tikzcd directly. Shall I provide a PR there? If yes, should this be optional?

[yishn]

Yes, I was thinking of a button in the toolbar which pops up a textarea. Some people don't have big screens and/or don't want to fully maximize the window.

Sure, send in a pull request in jsx-tikzcd. We can pass an options object to render() to state if we want the code to align the & or not, i.e. render(diagram, {align: true}) for aligned code; align defaults to false for compatibility.

[zickgraf]

Okay, perfect, I plan to learn a bit more about React/JSX, then polish the code, and afterwards open the PRs :-)

[zickgraf]

This is all merged now. Thanks for the nice collaboration :-)

[yishn]

Thank you for your contributions! I'll find some time in the next month to polish things further and release a new version with your changes.