Adding Custom Input Modes

GraphEditorInputMode and GraphViewerInputMode do not only support their predefined subordinate input modes. It is also possible to add custom input modes.

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

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

These custom input modes are added in a similar way than the predefined subordinate input modes. Developers have to chose carefully the priority like shown in section Priorities and Exclusiveness.

Input modes do not necessarily have to be a child mode of GraphEditorInputMode or GraphViewerInputMode. If only one user interaction is required the input mode can be directly set as 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. This is, for example, the case 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 claims the mutex from the outer input mode, too. 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.