C

NavigationInputMode

Show Usages
An IInputMode that can navigate an IGraph displayed in a graphComponent.
ImplementsInheritance Hierarchy

Remarks

This mode is exclusive by default.

Examples

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

const navigationInputMode = mode.navigationInputMode

The NavigationInputMode supports e.g. opening and closing group nodes. These actions can be configured in detail:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT

It also reports when groups are opened or collapsed interactively by raising the following events:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.navigationInputMode.addEventListener('group-expanding', (evt) => {
  const node = evt.item
  // do something with the node before it will be expanded
})
mode.navigationInputMode.addEventListener('group-expanded', (evt) => {
  const node = evt.item
  // do something with the node after it has been expanded
})
mode.navigationInputMode.addEventListener('group-collapsing', () => {
  /* same for collapse operations */
})
mode.navigationInputMode.addEventListener('group-collapsed', () => {
  /* same for collapse operations */
})

See Also

Developer's Guide

Members

Show:

Constructors

Parameters

Properties

The default value is true.
final

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT

See Also

Developer's Guide
API
collapseGroup, collapseGroupPredicate, FoldingManager
The default value is true.
final

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT

See Also

Developer's Guide
API
enterGroupPredicate, FoldingManager
The default value is true.
final

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT

See Also

Developer's Guide
API
exitGroupPredicate, FoldingManager
The default value is true.
final

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// do not fit the content after expand/collapse
mode.navigationInputMode.fitContentAfterGroupActions = false
// expand/collapse group nodes in a way that their
// top right corner stays at its current coordinates
mode.navigationInputMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT

See Also

Developer's Guide
API
expandGroupPredicate, FoldingManager
Default value is NONE
conversionfinal

Examples

This property can be used to synchronize the fixed location with the button location of a CollapsibleNodeStyleDecorator:
navigationMode.autoGroupNodeAlignmentPolicy =
  NodeAlignmentPolicy.TOP_RIGHT
graph.groupNodeDefaults.style = new CollapsibleNodeStyleDecorator({
  buttonPlacement: InteriorNodeLabelModel.TOP_RIGHT,
})

See Also

Developer's Guide
API
expandGroup, collapseGroup

By default, all supported commands are available

Removing commands from this collection also removes the command bindings registered by this instance.

Add supported commands to make them available in this instance.

Supported commands are

readonlyfinal

See Also

Developer's Guide
The default value returns the result of the allowCollapseGroup property.
final
protectedreadonlyfinal
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 NavigationInputMode on its parent input mode
mode.navigationInputMode.enabled = false
The default value returns the result of the allowEnterGroup property.
final

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.

final
The default value returns the result of the allowExitGroup property.
final
The default value returns the result of the allowExpandGroup property.
final

Note that collapseGroup and expandGroup only fit the content when autoGroupNodeAlignmentPolicy is NONE.

The default value is false.

final
readonlyfinal

Property Value

The graph.
final

Property Value

readonlyfinal

Property Value

The graph selection.
Since NavigationInputMode navigates using its parent input mode - either GraphEditorInputMode or GraphViewerInputMode - it is necessary to set additional properties when changing the value of this property:
conversionfinal

Property Value

The navigable items.

Examples

Setting nodes and edges as navigable items:

Enabling navigation along nodes and edges
graphComponent.inputMode = new GraphEditorInputMode({
  focusableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
  selectableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
  navigationInputMode: {
    selectableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
    navigableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
  },
})

To navigate along the same item type you started with, set the navigablePredicate as follows:

Enabling navigation along edges
mode.navigationInputMode.navigablePredicate = (item) =>
  GraphItemTypes.getItemType(graphComponent.currentItem) ==
  GraphItemTypes.getItemType(item)

See Also

API
navigablePredicate
The default value returns the result of the navigableItems property for the given item.
final

Examples

This predicate can also be used to navigate along items of the same type as the current item.
Enabling navigation along edges
mode.navigationInputMode.navigablePredicate = (item) =>
  GraphItemTypes.getItemType(graphComponent.currentItem) ==
  GraphItemTypes.getItemType(item)
The value will be null if this mode is currently not installed. Use createInputModeContext to obtain a context that has this IInputMode as the inputMode.
protectedreadonlyfinal
The priority will influence the order in which the modes will be installed into the CanvasComponent. The lower the priority value, the earlier it will be installed. If two modes are using the same priority value, the first one to be registered will be installed earlier.
final
The default value is true.
final

See Also

API
ensureVisible, ensureVisible

The selectable items. The default value is NODE.

To modify the items selectable by this mode, you also need to configure the navigableItems accordingly.

conversionfinal

Examples

Setting nodes and edges as navigable items:
Enabling navigation along nodes and edges
graphComponent.inputMode = new GraphEditorInputMode({
  focusableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
  selectableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
  navigationInputMode: {
    selectableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
    navigableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
  },
})
The default value returns the result of the selectableItems property for the given item.
final
The default value returns the result of the expandGroupPredicate respectively collapseGroupPredicate.
final
final

Property Value

true if the current item should be used as a fallback; false otherwise, which is the default.

If set to true, the direction is interpreted in view coordinates.

Default is true.

final

Methods

This implementation will try to delegate to adjustContentBounds if it can find the GraphEditorInputMode in the parentInputModeContext, otherwise updateContentBounds is called.
protected
protected

Parameters

collapse: boolean
true iff the node has just been collapsed.
groupNode: INode
The node that has changed its state.
expandedSize?: Rect
The size of the group node when it is expanded.

This will be called prior to the uninstalling of this instance and when other input modes temporarily acquire the mutex.

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

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

Parameters

groupNode: INode
The group node to collapse.

See Also

API
FoldingManager, allowCollapseGroup
It is possible to both use a local group node that is part of the currently displayed graph as the node argument, as well as an item that belongs to the masterGraph to allow for switching to group nodes which are currently not being displayed in this view.

Parameters

node: INode
The node that needs to be either part of the current graph, or part of the masterGraph.

See Also

API
enterGroupPredicate, allowEnterGroup, FoldingManager
This method will also clear the selection and select the exited group node.

See Also

API
FoldingManager, allowExitGroup, exitGroupPredicate

Parameters

groupNode: INode
The group node to expand

See Also

API
FoldingManager, allowExpandGroup

Parameters

direction: MoveFocusDirection
The direction to move the focus and extend the selection.

The default implementation uses the Euclidean distance from the location of the startItem, which is additionally weighted to prefer items in the geometric direction. This method is called by the default implementation of findNextItem when MoveFocusDirection corresponds to an actual direction in the geometric sense. The method will be called at most twice by the default implementation of findNextItem. If it returns null the first time with a smaller set of possible candidates, the default implementation will call it again with more possible candidates.

Note that the default implementation ignores any projection and treats directions to be in world coordinates unless useViewCoordinates is set.

protected

Parameters

context: IInputModeContext
The current input mode context.
startItem: IModelItem
The currently selected item reference location for the gesture.
direction: MoveFocusDirection
The direction for the move action.
itemsToCheck: IEnumerable<IModelItem>
The items that should be considered. Note that this will include startItem, but obviously this should not normally be returned, when other candidates are better matches.

Return Value

IModelItem
The nearest item in direction or null if no suitable item can be determined.
protected

Parameters

context: IInputModeContext
The current input mode context.
direction: MoveFocusDirection
The direction of the command.

Return Value

IModelItem
The next item in direction, or null.
This implementation will try to delegate to FIT_CONTENT if it can be executed, otherwise fitContent is called.
protected
This method is used by findNearestItem to calculate distances between various item candidates.
protected

Parameters

item: IModelItem
The item to get a reference location for.

Return Value

Point
The reference location for the given item.

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

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.

See Also

API
uninstall

Parameters

direction: MoveFocusDirection
The direction to move the focus.

Parameters

direction: MoveFocusDirection
The direction to move the focus and selection.

Can be overridden in subclasses to perform additional actions after the mode has been canceled.

This implementation does nothing.

protected

Can be overridden in subclasses to perform additional actions after the mode has been activated.

Overriding implementations should call the base implementation.

protected

Can be overridden in subclasses to perform additional actions after the mode has been deactivated.

Overriding implementations should call the base implementation.

protected
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

evt: InputModeItemEventArgs<INode>
The InputModeItemEventArgs<TModelItem> instance containing the event data.
protected

Parameters

graphComponent: GraphComponent
The graphComponent to set the current item of.
item: IModelItem
The item to set.

Return Value

boolean
Whether the operation was actually performed.

Can be overridden in subclasses to perform additional actions after the mode has been stopped.

This implementation does nothing.

protected
This method delegates to selectItem.
protected

Parameters

graphComponent: GraphComponent
item: IModelItem
The item to select.
extendSelection: boolean
if set to true the current selection is extended; otherwise, it is cleared beforehand.

See Also

API
clearSelection
The current item will not be set if graphComponent is null.

Parameters

item: IModelItem
The item to set as the current item.

See Also

API
onSetCurrentItem
This will register or unregister the Commands for the control. This method is called in response to install and uninstall.
protected

Parameters

graphComponent: GraphComponent
The control to use or null.

This resets the state of any other input mode, unless it currently possesses the mutex.

The value of this method is queried for COLLAPSE_GROUP, EXPAND_GROUP, TOGGLE_EXPANSION_STATE, ENTER_GROUP and EXIT_GROUP.

protected

Return Value

boolean
whether the input mode should request the mutex.

Parameters

groupNode: INode
The group node to toggle the state for.

See Also

API
FoldingManager

Return Value

boolean
true iff this instance does not own the mutex.

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

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

Events

context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.
context: IInputModeContext
Gets the context for the current event.
item: TModelItem
Gets the item which has been created or changed.