NetDiagram Programmer's Guide
User Interaction

Most likely, an application would use NetDiagram to enable users to interactively create diagrams, flowcharts and other kinds of presentation documents. A user composes or edits a diagram by drawing its elements on the DiagramView canvas area. With the help of a mouse or another pointing device users create nodes and links, possibly connecting them in complex hierarchies, graphs, trees or other structures they might need.

 Note

Interaction on the client side is fully supported when ClientSideMode is set to Canvas. Since NetDiagram version 2.1 user interaction is supported in ImageMap mode too, by means of the InteractivityExtender class.

Creating New Items

New items can be created by drawing them with the mouse. While a user drags the mouse, the view of the control is updated to show what the new item would look like at the pointer location. If the operation cannot be completed at the current mouse position, the cursor changes to a crossed out circle. When the user releases the button, the item is created. The control does not let users create very tiny nodes which would be hard to select and modify. By default, links can be drawn only between nodes, unless the AllowUnconnectedLinks property is enabled. Users can cancel item creation by pressing the right mouse button while drawing.

Modifying Items

A user modifies an item by dragging its manipulation handles. The ModificationStart property specifies when these handles appear. The first option, AutoHandles, makes the handles appear when the mouse hovers over an item; modification of the item can start immediately by pointing it and dragging a handle. The second option is SelectedOnly: in order to be modified, an item should first be selected. Manipulation handles appear around the item to indicate that now it can be moved or resized. Number and functionality of those handles depend on the item type and the value of node's HandlesStyle property.

Deleting Items

In Canvas mode, the user can delete selected items by pressing the Del key. To enable this in ImageMap mode, bind an InteractivityExtender to the DiagramView and set the DelKeyAction property.

Modifying a Node

Usually nodes have nine adjustment handles. The one at the center can be used to move the node around. Four handles at the corners resize the node by moving the two sides adjacent to the corresponding corner. Handles placed at the center of the four sides resize in horizontal or vertical directions only. Shape nodes can be rotated using the round handle drawn above them. Each handle can be enabled or disabled by setting or clearing the respective handle flag in EnabledHandles.

Modifying a Link

Variety and behavior of link adjustment handles depend on link's Shape and SegmentCount. Control-points stay at both ends of each segment that constitutes a link. NetDiagram offers three link styles. Following sections discuss how to modify links of each style.

Modifying a Table

Table modification handles are drawn as dotted lines over its borders. Dragging table's caption areas moves it. Dragging any table's side or corner resizes it.

Selecting Items

Multiple items are selected by dragging while CTRL key is down. Selection can also be toggled with CTRL + clicking an item. A rectangle appears around selected items, allowing a user to move all of them at once.

Scrolling and Panning

If the ShowScrollbars property is enabled, scrollbars are displayed, which can be used by a user to scroll the diagram's drawing area. Pressing the left mouse button and dragging while the ALT key is down scrolls the diagram too.

Interpreting Users Actions

Mouse operations can be interpreted in different ways depending on the value of the Behavior property. It defines whether dragging the mouse creates a node or selects existing items. Check the property description for more information.