Graph Drawing Contest Tool

Description of the Live Challenge

Submission System

Features:

GUI
1. Resize the GUI: Drag the button bottom-right.
2. Information (top right), left to right:
  1. Grid granularity. Shows the difference between the coordinates between two grid lines.
  2. Min angle: Shows the current minimum angle in the drawing. While dragging a node, is colored green if the minimum angle increased and red if it decreased. If there is an overlap in the graph, the box is highlighted and says "overlap".
3. Buttons (top left), left to right:
  1. Toggle Pan Mode: Dragging moves the drawing instead of creating a selection box.
  2. Open File: Opens a graph file from your file system.
  3. Save File: Saves a graph to your file system.
  4. Copy Graph String: Opens a text field that contains the graph string, attempts to copy it to your clipboard. While the graph string is shown, the rest of the interface is disabled. Click the "Done" button to return to the interface.
  5. Paste Graph String: Opens a text field that contains the graph string, attempts to paste from your clipboard. While the text field is shown, the rest of the interface is disabled. Click the "Cancel" button to return to the interface or the "Load" button to load the pasted string. If there is an error or warning, it is displayed in the console. If nothing happens when pressing "Load", then there is probably an error.
  6. Load from Server: Hover the text field to show a list of graph files stored on the server. Click the button to load that graph.
  7. Undo: undo the previous movement. Stores all movements on the current graph and shows the number of undos you can do while hovering. Selections don't change, only the nodes move.
  8. Redo: redo the previous undo. Stores all 'undos' until there is a new movement. Shows the number of redos you can do while hivering.
4. Sliders
  1. Zooming: The slider on the right lets you zoom in and out of the drawing.
  2. Node size: The slider on the bottom lets you change the size of the nodes.
Graph Drawing
1. Grid: The grid is shown with the displayed granularity (see 1.2.1), but nodes also snap to "invisible" grid points.
2. Graph highlighting
  1. The two edges that have the minimum angle are highlighted with a blue halo.
  2. If there are overlaps, the corresponding nodes and edges are highlighted with a red halo.
  3. The hovered node is highlighted
  4. Selected nodes are highlighted by an orange dotted halo.
3. Translation: Use Alt+Drag somewhere in the drawing (not on a node) to move the drawing
4. Zooming: Use the mouse wheel to zoom the drawing, or use the buttons and the slider on the right.
5. Selection:
  1. Click a node to clear the selection and select the node.
  2. Shift-Click a node to add it to the current selection.
  3. Ctrl-Click a node to remove it from the current selection.
  4. Box selection: Create a box by clicking somewhere in the drawing (not on a node) with no modifier, shift modifier, or ctrl modifier. Nodes in the selection are highlighted, then added or removed according to 2.5.1-2.5.3.
  5. Clicking somewhere in the drawing area (not on a node) clears the selection.
6. Moving nodes: Dragging a node that is in the current selection moves all vertices from the selection. Dragging a node that is not in the current selection clears the selection and drags only this node.

Icons by IcoMoon (GPL / CC BY 4.0)