Search
Controlling User Interaction

There are several ways to control user actions on the diagram as a whole, or on individual items in the diagram.

Specify How User's Actions are Interpreted

The Behavior property provides several predefined sets of rules specifying how user input with the mouse or touch is interpreted. If Behavior is set to LinkShapes, dragging started from an unoccupied point of the document is processed as a ShapeNode creation request and dragging over a node creates a link. Note that such behavior leads to some extra work when creating overlaying nodes users need to draw the second node on an empty area and move it over the first one afterwards. If you want to avoid that, use the DrawShapes behavior. If LinkTables is set, dragging the mouse over an empty area creates a table and dragging over a table creates a link. Behavior options also include DrawLinks, DrawTables and Modify.

Setting Diagram Bounds

Document size can be get or set with the Bounds property. By default, users are able to move items outside the diagram bounds. To prevent this, enable the RestrictItemsToBounds property. It provides three options to restrict item positions. They might not be restricted at all. The most restrictive option is to keep items entirely inside the document area. Another option allows items to be partially outside the document area but having at least a small visible part inside.

Item Constraints

Constraints upon how users are allowed to modify a node are set through the Constraints and EnabledHandles properties. The former can be used to constrain the move direction, node size and aspect ratio. The latter enables or disables specific manipulation handles of a node. That allows making the node non-moveable, non-resizable, or resizable only horizontally/vertically.

Items can be locked by the Locked properties. Locked items are excluded from selection and users cannot select, move or modify them.

Control How Links Connect to Nodes

The AllowIncomingLinks property of the DiagramNode class specifies whether incoming links can be drawn to a node. The AllowOutgoingLinks property enables drawing of outgoing links to a node.

Anchor points define where link's ends are placed when a user attaches a link to a node. A pattern of anchor points can be assigned to a node by setting the node's AnchorPattern. The SnapToAnchor property specifies whether link ends are aligned to anchor points when creating or modifying links.

Once a link is created, a user can still move its end points to different positions, unless LinkEndsMovable is set to false. This can also be controlled on a per-link basis by the AllowMoveEnd and AllowMoveStart properties. You can dynamically validate moving of links' end points using the LinkModifying event.

The AllowSelfLoops property enables or disables drawing of reflexive links. They are allowed by default, but can be disabled if you consider them meaningless for the application. AllowLinksRepeat controls if two nodes can be connected more than once in the same direction.

In-place Text Editing

The text of nodes and tables can be edited in-place through the context menu. To enable the feature set the AllowInplaceEdit property to true. For tables, both captions and cells can be edited in this way. Handle the CellTextEditing event to enable/disable in-place editing per cell. Depending on the type of item being edited, one of these events can be fired when editing completes: NodeTextEdited, CellTextEdited. In-place editing mode is exited when users click outside the text entry control.

Validation Events

When users try to create, delete or select an item, one of the following events is raised. To ban the action, set corresponding event bool argument to false:

Event

Description

NodeCreating

Raised while a user draws a new node.

LinkCreating

Raised while a user draws a new link.

NodeSelecting

Raised when the user is trying to select a node.

LinkSelecting

Raised when the user is trying to select a link.

NodeDeleting

Raised when the user is trying to delete a node.

LinkDeleting

Raised when the user is trying to delete a link.

NodeModifying

Raised while a user modifies an existing node.

LinkModifying

Raised while a user modifies an existing link.

For more events that can be fired by user's actions, please, consult the Events section of the documentation.

Multi-touch Support

  • If MultiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
  • If MultiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
  • If MultiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
  • If MultiTouchModify property is disabled, each touch started from a node draws a diagram link.

Latter modes can be used for collaborative whiteboarding / classroom scenarios.

Interaction Properties

  • Setting the SelectAfterCreate property to true automatically selects each newly created item, so users can immediately modify it.
  • AllowMultipleResize specifies whether the user can resize multiple selected items simultaneously.
  • DelKeyAction specifies how the DiagramView handles the Delete key.
  • The ModifierKeyActions property allows assigning different functions to the CTRL, ALT and SHIFT keys.