Controlling User Interaction
There are several ways to control user actions on the diagram as a whole, or on individual items in the diagram.
By setting the Enabled property of Diagram to false, you can make the diagram contents non-modifiable at all. Thus it will function as nothing more than a static image you can use to present some data to the user. The diagram can still be modified programmatically though.
The Behavior property provides several predefined sets of rules specifying how user input with the mouse/keyboard is interpreted. If Behavior is set to LinkShapes, mouse 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.
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.
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.
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.
The text of nodes and tables can be edited in-place by double-clicking the respective items. 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. Pressing ENTER or ESC exits in-place editing mode if respectively InplaceEditAcceptOnEnter and InplaceEditCancelOnEsc are enabled.
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 |
|---|---|
Raised while a user draws a new node. | |
Raised while a user draws a new link. | |
Raised when the user is trying to select a node. | |
Raised when the user is trying to select a link. | |
Raised when the user is trying to delete a node. | |
Raised when the user is trying to delete a link. | |
Raised while a user modifies an existing node. | |
Raised while a user modifies an existing link. |
Built-in multi-touch can be disabled altogether by setting EnableMultiTouch to false, e.g. if you need to handle touch events yourself or through a third-party gesture library.
