Graph Drawing Contest

Tool

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. # Crossings: Shows the number of crossings in the drawing. While dragging a node, the text is colored green if the number of crossings decreased and red if it increased. If there is an overlap in the graph or the drawing is not upward, the box is highlighted red.
3. Buttons (top left), left to right:
  1. Toggle Pan Mode: Dragging moves the drawing instead of creating a selection box.
  2. Graph Selection: Hover the two text fields to select a category and a graph from that category. The input graphs have white background and contain only the graph id. If you submitted a solution for a graph, then you can also select you best solution for it so far, which has the form "x:y", where x is the graph id and y is the number of crossings in your solution. It has green background if it is a valid solution and red background otherwise.
  3. Load from Server: Load the selected graph from the server.
  4. Submit to Server: Submit the drawing to the submission server. Make sure that you have selected the correct graph id. Will only upload the graph if it is not worse than your best solution so far.
  5. 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.
  6. 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.
  3. Arrow size: The slider on the bottom lets you change the size of the arrows of the directed edges.
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. If an edge is not drawn upward, the it is highlighted with a red 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. You can also use the arrow keys.
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.
7. Adding bends: click "Add Bend" button or press 'A' on your keyboard to activate "add bend mode". Now drag on an edge to create a bend on it, if possible. If it already has the maximum number of bends, then the edge will be briefly highlighted.
8. Deleting bends: Select the bends you want to delete (see 2.5), then click the "Delete Bends" button or press 'DEL' on your keyboard.

Icons by IcoMoon (GPL / CC BY 4.0)