Adding Custom Input Modes

GraphEditorInputMode and GraphViewerInputMode support not only their predefined subordinate input modes, but also custom input modes.

const customInputMode = new CustomInputMode()
customInputMode.priority = 10

const mode = new GraphEditorInputMode()
mode.add(customInputMode)

These custom input modes are added similarly to the predefined subordinate input modes. Developers must carefully choose the priority, as described in Priorities and Exclusiveness.

Input modes don’t necessarily have to be child modes of GraphEditorInputMode or GraphViewerInputMode. If only one user interaction is required, the input mode can be directly set as the GraphComponent's inputMode:

graphComponent.inputMode = new MoveViewportInputMode()

Not all input modes in yFiles for HTML can be used stand-alone. In fact, many child input modes of GraphEditorInputMode only work because GraphEditorInputMode configures them to work properly for a graph. The most useful input mode that can be used stand-alone is probably MoveViewportInputMode.

Developers who want to add more than one input mode but still don’t need the complexity of GraphViewerInputMode or GraphEditorInputMode can use the MultiplexingInputMode:

const waitInputMode = new WaitInputMode()
waitInputMode.priority = 0
const moveViewportInputMode = new MoveViewportInputMode()
moveViewportInputMode.priority = 5

const multiplexingInputMode = new MultiplexingInputMode()
multiplexingInputMode.add(waitInputMode)
multiplexingInputMode.add(moveViewportInputMode)
graphComponent.inputMode = multiplexingInputMode

MultiplexingInputModes can be nested. For example, this occurs when a TableEditorInputMode is added to a GraphEditorInputMode (as shown in User Interaction). In that case, if one of the child input modes of the added (“inner”) MultiplexingInputMode has the mutex, the inner MultiplexingInputMode also claims the mutex from the outer input mode. On the other hand, if another input mode on the outer input mode has the mutex, the inner MultiplexingInputMode and, hence, all of its child modes are temporarily disabled.

const waitInputMode = new WaitInputMode()
waitInputMode.priority = 0
const customInputMode = new CustomInputMode()
customInputMode.priority = 5

const multiplexingInputMode = new MultiplexingInputMode()
multiplexingInputMode.priority = 10
multiplexingInputMode.add(waitInputMode)
multiplexingInputMode.add(customInputMode)

const mode = new GraphEditorInputMode()
mode.add(multiplexingInputMode)
graphComponent.inputMode = mode

Grouping a set of related input modes together in a single MultiplexingInputMode can also serve as a convenient way to enable or disable multiple related input modes in a single place, simply by enabling or disabling the MultiplexingInputMode.