On Background: - click and drag: pan graph - scroll up and down: zoom in and out On Node: - click: select node On Selected Node: - click and drag: create connection to another node - press "-": delete node On Edge: - click: select edge On Selected Edge: - press "-": delete edge Buttons: - undo: undo an action - redo: redo an action - Add Node: create a new node in the graph Keyboard Shortcuts: - press "=": create a new node in the graph - press "-": remove a selected node/edge - z: undo an action - y: redo an action
Brandes, Ulrik & Walter, Julian & Zink, Johannes. (2020). Erratum: Fast and Simple Horizontal Coordinate Assignment. 10.48550/arXiv.2008.01252. https://doi.org/10.48550/arXiv.2008.01252 For anyone wondering, I am against the usage of ai on a children’s educational website, as I feel that it undercuts the educational value that this site offers. For this project: I took a JavaScript implementation and manually simplified it to only scratch-equivalent logic, and then made and used a transpiler which converts it to scratchblocks syntax, and used another project to convert that into scratch xml. I cleaned that up by hand, and then made the visualization and undo implementation in the editor. The ui is inspired by a ui mockup I found called Bauhaus