University of Bremen

Manual

Main->API->Drag and Drop Mode

Drag and Drop Mode

The drag and drop mode can be used for direct manipulation in a graph visualization to let the user create nodes and edges in cooperation with an application program in the most elegant way. The drag and drop mode can only be used inside one or between two uDraw(Graph) base windows, but not in connection with third party programs (i.e. you cannot drag objects from other applications and you cannot drop uDraw(Graph) nodes in other applications' windows). So the mode described here has nothing to do with native drag and drop that might be offered by the underlying operating system. Please read about drag and drop basics in the concepts chapter. Examples showing how to use the drag and drop feature in the graph editor application can be found in the tutorial.

First of all, your application has to activate the drag and drop mode using API command drag_and_drop(dragging_on). This command disables 2-D scrolling. The following scenarios may occur when the user takes advantage of the drag and drop mode. Your application has to react in an appropriate manner, for example by sending the API commands suggested below. If you are not sure about particular details, you can see how the graph editor application communicates with uDraw(Graph) when drag and drop operations are used. To do so, use the two command-line options -graphedit and -log.

  • Creating a new unconnected node

    In this case, the user presses the middle mouse button somewhere in the graph area of a base window where no other node is under the mouse pointer. The API sends the answer create_node(...) and the application should react by sending command drag_and_drop(new_node_at_coord(...)) to insert a new node. uDraw(Graph) will try to insert the new node at the coordinates where the mouse button was released.

  • Creating a new child node connected with a parent by a new edge

    Here, the user selects a node ("origin") with the middle mouse button, moves the mouse pointer to another location while keeping the mouse button pressed and releases the button somewhere over empty space in the graph area. The API sends the answer create_node_and_edge(...) and the application should react by sending command drag_and_drop(new_edge_and_node_at_coord(...)) to insert a new node and an edge that connects the new node with a parent node which is the origin. uDraw(Graph) will try to insert the new node at the coordinates where the mouse button was released. An abstract edge starting at the origin will follow the mouse pointer as long as the mouse button is still pressed.

  • Creating a new edge between existing nodes

    Same as creating a child node (see above), but here the user releases the middle mouse button over an existing node ("target") instead of empty space. The API sends the answer create_edge(...) and the application should react by sending command graph(update(...)) to insert a new edge between origin and target node that are specified in the answer. When the mouse pointer reaches a node as long as the mouse button is still pressed, this node is temporarily inverted to show the potential drop target.

  • Creating a new unconnected node as copy

    Here, the user selects a node ("origin") with the middle mouse button while pressing the SHIFT-key, moves the mouse pointer to another location while keeping the mouse button pressed and releases the button somewhere over empty space in the graph area (or even in the graph area of another uDraw(Graph) base window in multi-graph/view mode). The API sends the answer drop_node(...), where the node ID, context ID and window ID (if applicable) of the origin is specified and the last node ID is an empty string. The application should react by sending command drag_and_drop(new_node_at_coord(...)) to insert a new node. uDraw(Graph) will try to insert the new node at the coordinates where the mouse button was released. The new node should be a copy, so your application has to create it with all of the attribute values of the origin.

  • Creating a new child node as copy

    Same as creating an unconnected node as copy (see above), but here the user releases the middle mouse button over an existing node ("target") instead of empty space, either in the same or a different base window. The API sends the answer drop_node(...), where the node ID, context ID and window ID (if applicable) of the origin is specified and the last node ID is the target. The application should react by sending command drag_and_drop(new_edge_and_node_at_coord(...)) to insert a new node and an edge that connects the new node with a parent node which is the target. uDraw(Graph) will try to insert the new node at the coordinates where the mouse button was released. The new node should be a copy, so your application has to create it with all of the attribute values of the origin.