documentationfor yFiles for HTML 2.6

Customizing Cursors

Input modes often indicate that a certain interaction is possible or in progress by changing the mouse cursor. For example, when the mouse hovers over a movable item, MoveInputMode changes the cursor to a move cursor.

In section Priorities and Exclusiveness you have learned that MultiplexingInputModes like GraphEditorInputMode or GraphViewerInputMode keep a list of their input modes sorted by priority. This list is processed from highest to lowest priority and the first preferredCursor which is not null is the effective current cursor. If no input mode has a non-nullpreferredCursor the multiplexing input mode’s defaultCursor is used.

For example, once the mouse hovers over a node, CreateEdgeInputMode indicates that it is possible to create an edge here by changing the cursor to a hand. If the node is movable, though, MoveInputMode also wants to indicate possible interaction with a move cursor. Since MoveInputMode has the higher priority, the parent input mode chooses its cursor.

Cursors indicating possible user interaction while moving the mouse
Moving a node
Starting edge creation
Marquee selection

As soon as a GraphEditorInputMode, GraphViewerInputMode, or another MultiplexingInputMode is registered as the GraphComponent's inputMode that input mode will change the GraphComponent's cursor with its child mode’s preferred cursors. Therefore, any cursor set on the GraphComponent will be changed sooner or later. To set a new default cursor one has to set it as the defaultCursor.

Ideally, cursors are handled automatically by the input modes. Setting the defaultCursor should only be necessary if it is indeed the default cursor which should be set or if the cursor should indicate something which is not mediated by an input mode.If the expected cursor is not displayed properly this might indicate that the input mode doesn’t recognize the current gesture properly or another input mode takes precedence. Please refer to Priorities and Exclusiveness to let your input mode handle the desired gesture.

The built-in input modes usually have properties for each interaction state state of the input mode. For example, CreateEdgeInputMode's validBeginCursor indicates that an edge creation can start at the current location whereas its validEndCursor indicates that the edge might end at the current location. Developers who want to change the yFiles defaults should look for such properties.