ItemHoverInputMode

Show usages

An input mode for use in a GraphComponent that fires events when the mouse enters or leaves the visualization of a graph item.

Inheritance Hierarchy

ItemHoverInputMode

Implemented Interfaces

IInputMode

Remarks

This mode can be used to determine when the mouse is being moved from one item to the next.

This mode is exclusive by default.

Examples

Typically the ItemHoverInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the itemHoverInputMode property.

Getting the ItemHoverInputMode from its parent input mode

const itemHoverInputMode = mode.itemHoverInputMode

The ItemHoverInputMode raises the HoveredItemChanged event each time cursor hovers over a different item or the canvas in which case the hovered item is null. One can also configure the item types which are reported:

Configuring the ItemHoverInputMode to handle nodes and edges

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable the ItemHoverInputMode and let it handle edges and nodes
mode.itemHoverInputMode.enabled = true
mode.itemHoverInputMode.hoverItems = GraphItemTypes.EDGE | GraphItemTypes.NODE
// ignore items of other types which might be in front of them
mode.itemHoverInputMode.discardInvalidItems = false
// handle changes on the hovered items
mode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
  const oldItem = args.oldItem
  // e.g. remove the highlight from oldItem here
  const newItem = args.item
  // e.g. add a highlight to newItem here
})

Related Programming Samples

Graph Viewer: Displays sample graphs from various application domains.

Type Details

yfiles module: view-component
yfiles-umd modules: All view modules
Legacy UMD name: yfiles.input.ItemHoverInputMode

Constructors

ItemHoverInputMode

()

Initializes a new instance of the ItemHoverInputMode class.

ParametersOptions Overload

options - Object
A map of options to pass to the method.

priority - number
exclusive - boolean: A value indicating whether this mode will be the only one running when it has the mutex. This option sets the exclusive property on the created object.
enabled - boolean: The enabled state of this input mode. This option sets the enabled property on the created object.
hoverItems - GraphItemTypes: Which graph items are considered by this input mode. This option sets the hoverItems property on the created object.
hoverCursor - Cursor: The cursor to use when the mouse is hovering over a isValidHoverItem valid hover item. This option sets the hoverCursor property on the created object.
discardInvalidItems - boolean: A value indicating whether items that have been hit at the current location that are not valid items should be ignored (and an underlying valid item be considered instead) or reported as null. This option sets the discardInvalidItems property on the created object.

Properties

controller

: ConcurrencyController

Gets the installed controller.

currentHoverItem

: IModelItem

Gets the current item the mouse is hovering over.

discardInvalidItems

: boolean

Gets or sets a value indicating whether items that have been hit at the current location that are not valid items should be ignored (and an underlying valid item be considered instead) or reported as null.

Remarks

Set this to true if invalid items should be reported as null. Set this to false to let hit test enumeration continue to find the next valid item.

The default is true.

enabled

: boolean

Gets or sets the enabled state of this input mode.

Remarks

Clients can use this property to disable or reenable this instance. This will set the Enabled property of the installed controller so a disabled instance should never try to acquire the input mutex.

Examples

Disabling the ItemHoverInputMode on its parent input mode

mode.itemHoverInputMode.enabled = false

exclusive

: boolean

Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.

Remarks

The value of this property will be delegated to the exclusive property of the controller.

If this mode is marked as exclusive and has the mutex, all other modes added to the same MultiplexingInputMode will be deactivated. Otherwise it will always run concurrently with all other modes.

hoverCursor

: Cursor

Gets or sets the cursor to use when the mouse is hovering over a isValidHoverItem valid hover item.

hoverItems

: GraphItemTypes

Gets or sets which graph items are considered by this input mode.

Remarks

The default is ALL.

Note that the default is set to a different value if this mode is a child mode of the GraphEditorInputMode or GraphViewerInputMode. The different default is set in createItemHoverInputMode and documented there.

Examples

Configuring the ItemHoverInputMode to handle nodes and edges

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable the ItemHoverInputMode and let it handle edges and nodes
mode.itemHoverInputMode.enabled = true
mode.itemHoverInputMode.hoverItems = GraphItemTypes.EDGE | GraphItemTypes.NODE
// ignore items of other types which might be in front of them
mode.itemHoverInputMode.discardInvalidItems = false
// handle changes on the hovered items
mode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
  const oldItem = args.oldItem
  // e.g. remove the highlight from oldItem here
  const newItem = args.item
  // e.g. add a highlight to newItem here
})

inputModeContext

: IInputModeContext

Gets the context instance this mode is currently installed in or null if this instance is not installed.

Remarks

Note that this instance should not be passed down to subordinate modes or instances. Instead a corresponding context that has this instance set as the parentInputMode should be used.

Implements

IInputMode

priority

: number

Gets the priority of this input mode.

Remarks

The priority will influence the order in which the modes will be installed into the canvas control. The lower the priority value, the earlier it will be installed. If two modes are installed using the same priority value, the first one will be installed earlier.

Implements

IInputMode

Methods

cancel

()

Called by the client to unconditionally cancel all editing.

Remarks

This will be called prior to the uninstalling of this instance.

In order to stop an active input mode manually, client code should use the following idiom:

if (!mode.tryStop()) {
  mode.cancel()
}

Implements

IInputMode

getHitItemsAt

(location: Point) : IEnumerable<IModelItem>

Gets the items that have been hit at the given location.

Parameters

options - Object
A map of options to pass to the method.

location - Point: The location in world coordinates to query.

Returns

↪IEnumerable<IModelItem>: An enumerable over all items that have been hit at the given location.

install

(context: IInputModeContext, controller: ConcurrencyController)

Installs this mode into the given context that is provided by the canvas.

Remarks

In general a mode can only be installed into a single canvas at all times.

This method is called to initialize this instance. Subclasses should override this method to register the corresponding event handler delegates for the various input events they need to register with.

Overriding implementations should call the base implementation, first.

Parameters

options - Object
A map of options to pass to the method.

context - IInputModeContext: The context that this instance shall be installed into. The same instance will be passed to this instance during uninstall. A reference to the context may be kept and queried during the time the mode is installed.
controller - ConcurrencyController: The controller for this mode.

Implements

IInputMode

isValidHoverItem

(item: IModelItem) : boolean

Determines whether the given item is a valid item to be considered for hovering.

Remarks

This implementation checks whether the item is covered by the hoverItems set, only.

Parameters

options - Object
A map of options to pass to the method.

item - IModelItem: The item to check.

Returns

↪boolean: true if it is valid to report a hover over the specified item; false otherwise.

tryStop

() : boolean

Overridden to only return true if this instance does not currently have the input mutex.

Returns

↪boolean: true iff this instance does not own the mutex.

Implements

IInputMode

uninstall

(context: IInputModeContext)

Uninstalls this mode from the given context.

Remarks

This code should clean up all changes made to the canvas in the install method. After a mode has been uninstalled it can be installed again into the same or another canvas.

Overriding implementations should call the base implementation after their own code.

Parameters

options - Object
A map of options to pass to the method.

context - IInputModeContext: The context to deregister from. This is the same instance that had been passed to install during installation.

Implements

IInputMode

updateHover

(location?: Point)

Forces a reevaluation of the item that the mouse is currently hovering over or at a specific location.

Remarks

This method may be called by code that is aware of the fact that the visualization has changed, but the mouse may not have been moved. By default this implementation will only re-query the items at the mouse location when the mouse has moved. This method can be called to force a reevaluation in other cases.

Parameters

options - Object
A map of options to pass to the method.

location - Point: The query location.

Events

HoveredItemChanged

Occurs when the item that is being hovered over with the mouse changes.

Remarks

This event is also fired when the mouse pointer leaves an item.

Examples

The ItemHoverInputMode raises the HoveredItemChanged event each time cursor hovers over a different item or the canvas in which case the hovered item is null. One can also configure the item types which are reported:

Configuring the ItemHoverInputMode to handle nodes and edges

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable the ItemHoverInputMode and let it handle edges and nodes
mode.itemHoverInputMode.enabled = true
mode.itemHoverInputMode.hoverItems = GraphItemTypes.EDGE | GraphItemTypes.NODE
// ignore items of other types which might be in front of them
mode.itemHoverInputMode.discardInvalidItems = false
// handle changes on the hovered items
mode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
  const oldItem = args.oldItem
  // e.g. remove the highlight from oldItem here
  const newItem = args.item
  // e.g. add a highlight to newItem here
})

Event Registration

addHoveredItemChangedListener(function(this, HoveredItemChangedEventArgs):void)

Event Deregistration

removeHoveredItemChangedListener(function(this, HoveredItemChangedEventArgs):void)

Signature Details

function(sender: this, evt: HoveredItemChangedEventArgs)

Represents the method that will handle an event when the event provides data.

Parameters

sender - this: The source of the event.
evt - HoveredItemChangedEventArgs: An object that contains the event data.

ItemHoverInputMode

Remarks

Examples

Related Programming Samples

Type Details

Constructors

ItemHoverInputMode

ParametersOptions Overload

Properties

controller

currentHoverItem

discardInvalidItems

Remarks

See Also

enabled

Remarks

Examples

exclusive

Remarks

hoverCursor

hoverItems

Remarks

Examples

inputModeContext

Remarks

Implements

priority

Remarks

See Also

Implements

Methods

cancel

Remarks

Implements

getHitItemsAt

Parameters

Returns

install

Remarks

Parameters

See Also

Implements

isValidHoverItem

Remarks

Parameters

Returns

See Also

onCanceled

Remarks

onConcurrencyControllerActivated

Remarks

onConcurrencyControllerDeactivated

Remarks

onHoveredItemChanged

Parameters

onStopped

Remarks

tryStop

Returns

See Also

Implements

uninstall

Remarks

Parameters

Implements

updateHover

Remarks

Parameters

Events

HoveredItemChanged

Remarks

Examples

Event Registration

Event Deregistration

Signature Details

Parameters