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.

Disabling Interaction

First of all, setting the Enabled property of DiagramView to false you can make 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.

To implement interaction in Canvas mode, set it up as described in NetDiagram Front-ends topic.

User interaction on the client side in ImageMap mode is disabled by default. To activate user interaction in ImageMap mode, perform the steps described in Setting up ImageMap mode topic.

Drawing Modes

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 over an empty document area is processed as a ShapeNode creation request and dragging over a node creates an link.

Note
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 through the Locked property. 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 lets you specify whether incoming links can be drawn to a node. The AllowOutgoingLinks property lets you do that for outgoing links.

Anchor points define where link's ends should be 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 means of 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 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 or 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 fired. 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.
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.

Interaction Properties

• allowSelfLoops property of Diagram specifies whether users can draw reflexive / self-loop links.
• allowUnconnectedLinks property specifies whether users can create links without connecting them to nodes (e.g. for simple line or curve graphics in a drawing).
• delKeyAction specifies how the DiagramView handles the Delete key.
• modifierKeyActions allows changing the function of modifier keys.
• leftButtonActions, middleButtonActions and rightButtonActions allow mapping interaction types to mouse buttons.
• mouseWheelAction allows changing the function of the mouse wheel.
• allowIncomingLinks and allowOutgoingLinks properties of DiagramNode specify if a node accepts respective types of links.
• setting the locked property of a DiagramItem prevents users from interacting with it altogether.

Multi-touch Support

The control handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items:

• 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.

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. If disabled, the control will revert to its mouse event handling code from previous versions. It will also no longer be able to capture mouse input during drag operations (to detect mouse pointer leaving the view), which is handled through DOM Pointers API.