Test for interactive structural diagrams (graphs: nodes/directed edges). (needs ECMAScript 6 support, tested with current Mozilla Firefox web browser)
Dragg- and connectable nodes using the HTML5 Canvas element.
You can create node objects by pressing key 'n'.
Drag them by pressing and holding the mouse button. (If the node object to drag is unselected before, only that becomes selected. If the object to drag is already selected, the selection is not changed and all selected objects move.)
Select an object by clicking on it, deselect by clicking on a free spot. Hold Shift key while clicking to add to selection or draw a selection box. (Shift: add to selection, Ctrl: toggle - add/remove to/from selection)
Press key 'DEL' to delete the selected objects.
Hold key 'v' and click an object to bring it to background, thus overlaid objects become visible.
Connect two nodes by holding key 'e', then press and hold the LMB on the source node and release on the target. Do the same in the reverse direction to make the edge bidirectional. Do it again in any direction while having a bidirectional connection to make it unidirectional. Hold key 'c' and draw a line to cut all crossing connections.
Press key 'ESC' to stop canvas update.
(Todo: completion of example, undo/redo, objects moving along edges - roamers, better line intersection test, optimization with quadtree, support for touch input)