Inteface elements of new topology interface

[grdw]

Adding a new node We could also when hovering/focussing over/on a node add another bulb/'add/+' button (like here) to be able to drag a new node out of. This way moving a node can be just done by dragging without having to press Ctrl/Cmd. Also the 'add/+' button will be able to take two event handlers:

addButton
    .on('click', function () {
        // Move the new node directly under the node
    })
    .on('dragend', function () {
        // Set the node on the position where the user left it.
    })

What if someone clicks the addButton 3x?

First time:       | Second time:    | Third time:
O +                  O +               O +
|                   / \              / | \
O                  O   O            O  O  O

It should automatically space out the nodes under the 'clicked' node. What if someone accidentally drags his node over his own node? Well, than he can drag it back.

Moving a node Moving a node I would do by hitting the Ctrl/Cmd button (depending on which idea is suitable for adding a node) + dragging the node. Clicking on a node will put the node in 'focus' in essence giving it a different glow + showing the information form.

Removing a node First off the most obvious choice here is to be able to click a node and hit the DEL/Backspace key. This is similar to the example above. This removes all nodes and children under that node (I think that when you have children under a node it should alert with "Do you really want to remove your children?" or something a bit more parent-friendly.

---

Interface iteration 1:

[grdw]

Overview of interface.

You are able to add, update and remove nodes.