User Interaction

User interaction in a GraphComponent is driven by so-called input modes. Input modes implement the IInputMode interface and you can set them on GraphComponent via its inputMode property. There can be only one input mode set on GraphComponent at the same time, but there are input modes that have multiple child input modes. You can also change the input mode on GraphComponent at any time.

You can think of input modes as a higher-order event handler. GraphComponent has plenty of events that allow reacting to user input, but it can be difficult to orchestrate more complex interactions that way. For example, dragging an item around involves listening to a mouse button pressed event, then handling mouse move events until the button is released. However, input modes provide events at a higher level of abstraction, e.g. the ItemHoverInputMode can be used to determine when the mouse is being moved from one item to the next.

The higher order input modes GraphViewerInputMode and GraphEditorInputMode mediate a number of user interaction gestures. They do so by delegating to subordinate input modes or child modes. They also coordinate between their child modes to avoid conflicting gestures interfering with each other. This topic is elaborated further in section Priorities and Exclusiveness.

The sections Editing Graphs and Non-Editable Graphs offer a brief overview of the features supported by the two major input modes in yFiles for HTML: GraphEditorInputMode and GraphViewerInputMode and when to use each. Advanced customization options are discussed in Customizing User Interaction.