User Interaction

User interaction in a GraphComponent is managed by input modes. Input modes implement the IInputMode interface. You can set the input mode for a GraphComponent using its inputMode property. Only one input mode can be active on a GraphComponent at a time. However, some input modes can have multiple child input modes. You can also change the input mode on a GraphComponent at any time.

Think of input modes as specialized event handlers. GraphComponent has many events that allow you to respond to user input, but it can be difficult to manage complex interactions using these events directly. For example, dragging an item involves listening for a mouse button pressed event, then handling mouse move events until the button is released. Input modes provide events at a higher level of abstraction. For example, the ItemHoverInputMode can be used to determine when the mouse moves from one item to another.

The higher order input modes GraphViewerInputMode and GraphEditorInputMode handle various user interaction gestures by delegating to subordinate, or child, input modes. They also coordinate between their child modes to prevent conflicting gestures from interfering with each other. This is discussed further in Priorities and Exclusiveness.

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