GraphViewerInputMode

GraphViewerInputMode

Implemented Interfaces

Remarks

This mode can be used in a viewer-centric application where there is no need to modify the IGraph but browsing of the graph should be convenient. This mode allows for clicking on items using the mouse, displaying tool tips for items, showing a context menu, allowing for easy navigation and traversal, moving the view port, and optionally doing marquee selection. Also ItemHoverInputMode can be used to get notified of the elements that the mouse is hovering over.

Due to the viewer-centric nature of this input mode, collapsing and expanding groups is disabled per default. To enable this feature, set allowCollapseGroup and allowExpandGroup to true.

This input mode manages a set of specialized input modes, each handling a specific part of the interaction with the graph. The following list details those along with their default priorities. Lower priorities come earlier when handing events.

WaitInputMode (−1) – Disables this input mode when layouts or animations run.
KeyboardInputMode (0) – Handles commands and arbitrary keyboard shortcuts.
ClickInputMode (10) – Handles mouse clicks and double-clicks.
TapInputMode (20) – Handles taps and double-tap.
MarqueeSelectionInputMode (30) – Allows dragging a rectangle to select items within it.
MoveViewportInputMode (39) – Allows panning the viewport.
ItemHoverInputMode (55) – Provides events to indicate that the mouse pointer hovers over an item.
NavigationInputMode (55) – Provides general navigation facilities, such as navigating from one item to another with the arrow keys.
ContextMenuInputMode (60) – Handles querying the context menu contents based on a location as well as preparing the menu for display.
MouseHoverInputMode (100) – Handles tool tips.

Examples

The GraphViewerInputMode can be installed by setting it as inputMode on the GraphComponent it handles.

Installing a configured GraphViewerInputMode

graphComponent.inputMode = new GraphViewerInputMode({
  toolTipItems: GraphItemTypes.LABEL_OWNER,
  clickableItems: GraphItemTypes.NODE,
  focusableItems: GraphItemTypes.NODE,
  selectableItems: GraphItemTypes.NONE,
  marqueeSelectableItems: GraphItemTypes.NONE
})

Type Details

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

Constructors

GraphViewerInputMode

()

Initializes a new instance of the GraphViewerInputMode class.

ParametersOptions Overload

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

clickHitTestOrder - GraphItemTypes[]

The order of the types of items that should be used to determine what item has been clicked or tapped. This option sets the clickHitTestOrder property on the created object.

doubleClickHitTestOrder - GraphItemTypes[]

The order of the types of items that should be used to determine what item has been double-clicked or double-tapped. This option sets the doubleClickHitTestOrder property on the created object.

detailSelectionRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines if a click should select the item that is currently visible under the mouse cursor, without giving more important items higher priority. This option sets the detailSelectionRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

cyclicSelectionRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines if a click should cycle through all the items that are currently under the mouse cursor. This option sets the cyclicSelectionRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

multiSelectionRecognizer - function(Object, EventArgs):boolean

The event recognizer that determines if a click is deemed a multi selection gesture. This option sets the multiSelectionRecognizer property on the created object.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

clickableItems - GraphItemTypes

Which types of items should be reported through the item click events. This option sets the clickableItems property on the created object.

focusableItems - GraphItemTypes

The items that can be given focus via the setCurrentItem method. This option sets the focusableItems property on the created object.

selectableItems - GraphItemTypes

Which types of items should be selectable at all. This option sets the selectableItems property on the created object.

selectablePredicate - function(IModelItem):boolean

A predicate that is queried to determine whether a given IModelItem is selectable. This option sets the selectablePredicate property on the created object.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

clickSelectableItems - GraphItemTypes

Which types of items should be selectable by mouse clicks. This option sets the clickSelectableItems property on the created object.

marqueeSelectableItems - GraphItemTypes

Which types of items should be selected during marquee selections or lasso selection. This option sets the marqueeSelectableItems property on the created object.

ignoreVoidStyles - boolean

A value indicating whether void styles (VoidNodeStyle, VoidEdgeStyle, VoidLabelStyle, and VoidPortStyle) should be ignored when selecting or focusing items. This option sets the ignoreVoidStyles property on the created object.

contextMenuInputMode - ContextMenuInputMode

The ContextMenuInputMode which handles context menus on a CanvasComponent. This option sets the contextMenuInputMode property on the created object.

contextMenuItems - GraphItemTypes

The types of items a context menu should be queried for. This option sets the contextMenuItems property on the created object.

mouseHoverInputMode - MouseHoverInputMode

The MouseHoverInputMode which is responsible for displaying Tooltips on a CanvasComponent. This option sets the mouseHoverInputMode property on the created object.

toolTipItems - GraphItemTypes

The types of the items that should be queried a tool tip for. This option sets the toolTipItems property on the created object.

clickInputMode - ClickInputMode

The ClickInputMode that is used by this instance to determine clicks. This option sets the clickInputMode property on the created object.

tapInputMode - TapInputMode

The TapInputMode which detects single and multiple taps on a CanvasComponent. This option sets the tapInputMode property on the created object.

marqueeSelectionInputMode - MarqueeSelectionInputMode

The MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them. This option sets the marqueeSelectionInputMode property on the created object.

lassoSelectionInputMode - LassoSelectionInputMode

The LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them. This option sets the lassoSelectionInputMode property on the created object.

navigationInputMode - NavigationInputMode

The NavigationInputMode which is responsible for navigating and traversing the elements in the IGraph. This option sets the navigationInputMode property on the created object.

waitInputMode - WaitInputMode

The WaitInputMode that is provided by this instance for those who need to make use of it. This option sets the waitInputMode property on the created object.

itemHoverInputMode - ItemHoverInputMode

The ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item. This option sets the itemHoverInputMode property on the created object.

moveViewportInputMode - MoveViewportInputMode

The MoveViewportInputMode associated with this instance. This option sets the moveViewportInputMode property on the created object.

keyboardInputMode - KeyboardInputMode

The KeyboardInputMode associated with this instance. This option sets the keyboardInputMode property on the created object.

allowClipboardOperations - boolean

A property that determines whether clipboard operations with the usual shortcuts are enabled on the canvas. This option sets the allowClipboardOperations property on the created object.

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.

priority - number

defaultCursor - Cursor

The cursor to use whenever no child mode prefers a different cursor. This option sets the defaultCursor property on the created object.

Properties

allowClipboardOperations

: boolean

Gets or sets a property that determines whether clipboard operations with the usual shortcuts are enabled on the canvas.

Remarks

Default value is true

Examples

Disabling clipboard operations

mode.allowClipboardOperations = false

Defined in

availableCommands

: ICollection<ICommand>

Gets a collection of commands that this input mode will handle.

Remarks

This collection can be modified by removing commands to prevent the input mode from handling them. Previously removed commands can also be re-added again to enable them again. However, the input mode will never handle commands that weren't in the initial collection. Adding those will do nothing.

Defined in

clickableItems

Gets or sets which types of items should be reported through the item click events.

Remarks

This also affects taps.

The default is ALL.

Examples

mode.clickableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

clickHitTestOrder

Gets or sets the order of the types of items that should be used to determine what item has been clicked or tapped.

Remarks

Change this field to adjust which items will be selected if there are multiple items at a given location. The default order is

Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:

['node', 'edge']
['NODE', 'EDGE']

Examples

The following example defines the order 1. bends, 2. nodes and edges (with equal priority), 3. labels.

mode.clickHitTestOrder = [
  GraphItemTypes.BEND,
  GraphItemTypes.NODE | GraphItemTypes.EDGE,
  GraphItemTypes.LABEL
]

Defined in

clickInputMode

: ClickInputMode

Gets or sets the ClickInputMode that is used by this instance to determine clicks.

Remarks

Whenever the mode detects a click, this mode will use the IHitTester<T> from the inputModeContext to determine the items being hit. If they match the clickableItems type, the ItemClicked event will be triggered. If they shouldFocus, the item will be set as the current item.

If no value has been set explicitly, the factory method createClickInputMode will be called upon first access. Upon change the onClickInputModeChanged method will be called.

By default this input mode has a priority of 10.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the ClickInputMode on its parent input mode

mode.clickInputMode.enabled = false

Defined in

clickSelectableItems

Gets or sets which types of items should be selectable by mouse clicks.

Remarks

The default is ALL.

Examples

Determine which items should be selectable by different selection gestures

// Nodes, edges, and bends are selectable
mode.selectableItems =
  GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND
// Only nodes and bends are selectable by marquee selection
mode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND
// Only nodes and edges are selectable by click selection
mode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

contextMenuInputMode

: ContextMenuInputMode

Gets or sets the ContextMenuInputMode which handles context menus on a CanvasComponent.

Remarks

If no value has been set explicitly, the factory method createContextMenuInputMode will be called upon first access. Upon change the onContextMenuInputModeChanged method will be called.

By default this input mode has a priority of 60.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the ContextMenuInputMode on its parent input mode

mode.contextMenuInputMode.enabled = false

It is recommended to configure the context menu handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the ContextMenuInputMode. This involves registering for the PopulateItemContextMenu event instead of the PopulateMenu event:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
  // Get the node which is handled or null if the item is not a node
  const node = args.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

    // Show the menu
    args.showMenu = true
    // Mark the event as handled
    args.handled = true
  }
})

Defined in

contextMenuItems

Gets or sets the types of items a context menu should be queried for.

Remarks

The items for which a context menu should be queried. The default value is NODE|EDGE.

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
  // Get the node which is handled or null if the item is not a node
  const node = args.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

    // Show the menu
    args.showMenu = true
    // Mark the event as handled
    args.handled = true
  }
})

Defined in

controller

: ConcurrencyController

Gets the installed controller.

Defined in

cyclicSelectionRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines if a click should cycle through all the items that are currently under the mouse cursor.

Remarks

If the recognizer determines that the user wanted to use the cyclic click selection behavior, the hitTester will be queried for the given item and previously reported items will be ignored. E.g. if multiple nodes are overlapping each other, clicking on them will report the first item for the first click, the second one for the second click and so on. If all elements have been reported previously, the first one is going to be reported again. If the order of the elements at the clicked location changes, the cyclic selection is restarted anew.

The default is ALT_IS_DOWN.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

Sample Graphs

Defined in

defaultCursor

: Cursor

Gets or sets the cursor to use whenever no child mode prefers a different cursor.

Remarks

The default is null

Defined in

detailSelectionRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines if a click should select the item that is currently visible under the mouse cursor, without giving more important items higher priority.

Remarks

If the recognizer determines that the user wanted to use the detail clicking behavior, the hitTester will be queried for the given item and the first item that is returned will be considered a hit. Otherwise all hit items are examined and are prioritized by item type. E.g. by default clicking on a node will select the node, even if there is a node label which has been clicked at the same point. If detail selection is recognized, the label will be selected.

The default is SHIFT_IS_DOWN.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

Examples

mode.detailSelectionRecognizer = KeyEventRecognizers.SHIFT_IS_DOWN

Sample Graphs

Defined in

doubleClickHitTestOrder

Gets or sets the order of the types of items that should be used to determine what item has been double-clicked or double-tapped.

Remarks

Change this field to adjust which items will be considered when double-clicked if there are multiple items at a given location. The default order is

Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:

['node', 'edge']
['NODE', 'EDGE']

Examples

The following example defines the order 1. bends, 2. nodes and edges (with equal priority), 3. labels.

mode.doubleClickHitTestOrder = [
  GraphItemTypes.BEND,
  GraphItemTypes.NODE | GraphItemTypes.EDGE,
  GraphItemTypes.LABEL
]

Defined in

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.

Defined in

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.

Defined in

focusableItems

Gets or sets the items that can be given focus via the setCurrentItem method.

Remarks

The focusable items. The default is NODE

Examples

mode.focusableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

: 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

itemHoverInputMode

: ItemHoverInputMode

Gets or sets the ItemHoverInputMode that is provided by this instance to detect when the cursor hovers over a graph item.

Remarks

Note that initially the hoverItems property is set to NONE, which effectively disables the functionality of the mode initially. In order to get the mode to fire events, the property should be set to a corresponding value.

If the backing field has not yet been initialized upon first access, the factory method createItemHoverInputMode will be called. Upon change the onItemHoverInputModeChanged method will be called.

By default this input mode has a priority of 55.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the ItemHoverInputMode on its parent input mode

mode.itemHoverInputMode.enabled = false

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
})

Defined in

keyboardInputMode

: KeyboardInputMode

Gets or sets the KeyboardInputMode associated with this instance.

Remarks

By default this input mode has a priority of 0.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the KeyboardInputMode on its parent input mode

mode.keyboardInputMode.enabled = false

Adding a handler for a keyboard event

const keyboardInputMode = graphEditorInputMode.keyboardInputMode
const myCommand = ICommand.createCommand('MyCommand')

// The command creates a new node in the center of the viewport
keyboardInputMode.addCommandBinding(
  myCommand,
  (command, parameter, target) => {
    graphEditorInputMode.createNode(
      graphEditorInputMode.graphComponent.viewport.center
    )
    return true
  },
  (command, parameter, target) => true
)

// Execute the command if the Insert key is pressed
keyboardInputMode.addKeyBinding(Key.INSERT, ModifierKeys.NONE, myCommand)const keyboardInputMode = graphEditorInputMode.keyboardInputMode
const myCommand = ICommand.createCommand('MyCommand')

// The command creates a new node in the center of the viewport
keyboardInputMode.addCommandBinding(
  myCommand,
  (command, parameter, target) => {
    graphEditorInputMode.createNode(
      graphEditorInputMode.graphComponent!.viewport.center
    )
    return true
  },
  (command, parameter, target) => true
)

// Execute the command if the Insert key is pressed
keyboardInputMode.addKeyBinding(Key.INSERT, ModifierKeys.NONE, myCommand)

Defined in

lassoSelectionInputMode

: LassoSelectionInputMode

Gets or sets the LassoSelectionInputMode which handles the selection of multiple elements by drawing a polygon around them.

Remarks

If no value has been set explicitly, the factory method createLassoSelectionInputMode will be called upon first access. Upon change the onLassoSelectionInputModeChanged method will be called.

The lassoSelectionInputMode respects the selectableItems and the marqueeSelectableItems as well as method shouldMarqueeSelect.

By default this input mode has a priority of 49 and is disabled.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Defined in

marqueeSelectableItems

Gets or sets which types of items should be selected during marquee selections or lasso selection.

Remarks

The default is a combination of NODE, EDGE, and BEND.

Examples

Determine which items should be selectable by different selection gestures

// Nodes, edges, and bends are selectable
mode.selectableItems =
  GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND
// Only nodes and bends are selectable by marquee selection
mode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND
// Only nodes and edges are selectable by click selection
mode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

marqueeSelectionInputMode

: MarqueeSelectionInputMode

Gets or sets the MarqueeSelectionInputMode which handles the selection of multiple elements by drawing a rectangle around them.

Remarks

If no value has been set explicitly, the factory method createMarqueeSelectionInputMode will be called upon first access. Upon change the onMarqueeSelectionInputModeChanged method will be called.

The marqueeSelectionInputMode respects the selectableItems and the marqueeSelectableItems as well as method shouldMarqueeSelect.

By default this input mode has a priority of 50.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the MarqueeSelectionInputMode on its parent input mode

mode.marqueeSelectionInputMode.enabled = false

Defined in

mouseHoverInputMode

: MouseHoverInputMode

Gets or sets the MouseHoverInputMode which is responsible for displaying Tooltips on a CanvasComponent.

Remarks

If no value has been set explicitly, the factory method createMouseHoverInputMode will be called upon first access. Upon change the onMouseHoverInputModeChanged method will be called.

By default this input mode has a priority of 100.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the MouseHoverInputMode on its parent input mode

mode.mouseHoverInputMode.enabled = false

It is recommended to configure the tooltip handling on the parent GraphEditorInputMode or GraphViewerInputMode instead of the MouseHoverInputMode. This involves registering for the QueryItemToolTip event instead of the QueryToolTip event:

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
  if (args.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = args.item
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    args.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    args.handled = true
  }
})// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
  if (args.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = args.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    args.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    args.handled = true
  }
})

Defined in

moveViewportInputMode

: MoveViewportInputMode

Gets or sets the MoveViewportInputMode associated with this instance.

Remarks

If no value has been set explicitly, the factory method createMoveViewportInputMode will be called upon first access. Upon change the onMoveViewportInputModeChanged method will be called.

By default this input mode has a priority of 39.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the MoveViewportInputMode on its parent input mode

mode.moveViewportInputMode.enabled = false

Defined in

multiSelectionRecognizer

: function(any, EventArgs):boolean

Gets or sets the event recognizer that determines if a click is deemed a multi selection gesture.

Remarks

If the multiSelectionRecognizer returns true for the current gesture the element which is selected with that gesture will be added to the current selection. Otherwise, the selection will be cleared before adding the newly selected element.

The default is an or-combination of CTRL_IS_DOWN and META_IS_DOWN.

Signature Details

function(eventSource: any, evt: EventArgs) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

eventSource - any: The source of the event.
evt - EventArgs: The arguments of the event to be decided to handle.

Returns

boolean: true if the evt is considered to be handled.

Defined in

mutexOwner

: IInputMode

Gets the IInputMode that currently owns the mutex.

Defined in

navigationInputMode

: NavigationInputMode

Gets or sets the NavigationInputMode which is responsible for navigating and traversing the elements in the IGraph.

Remarks

If no value has been set explicitly, the factory method createNavigationInputMode will be called upon first access. Upon change the onNavigationInputModeChanged method will be called.

By default this input mode has a priority of 55.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the NavigationInputMode on its parent input mode

mode.navigationInputMode.enabled = false

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

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode

// enable expanding and collapsing group nodes
mode.navigationInputMode.allowCollapseGroup = true
mode.navigationInputMode.allowExpandGroup = true
// don't 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.addGroupExpandingListener((sender, args) => {
  const node = args.item
  // do something with the node before it will be expanded
})
mode.navigationInputMode.addGroupExpandedListener((sender, args) => {
  const node = args.item
  // do something with the node after it has been expanded
})
mode.navigationInputMode.addGroupCollapsingListener((sender, args) => {
  /* same for collapse operations */
})
mode.navigationInputMode.addGroupCollapsedListener((sender, args) => {
  /* same for collapse operations */
})

Defined in

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

selectableItems

Gets or sets which types of items should be selectable at all.

Remarks

The default is ALL.

Examples

Determine which items should be selectable by different selection gestures

// Nodes, edges, and bends are selectable
mode.selectableItems =
  GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.BEND
// Only nodes and bends are selectable by marquee selection
mode.marqueeSelectableItems = GraphItemTypes.NODE | GraphItemTypes.BEND
// Only nodes and edges are selectable by click selection
mode.clickSelectableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

Defined in

selectablePredicate

: function(IModelItem):boolean

Gets or sets a predicate that is queried to determine whether a given IModelItem is selectable.

Remarks

This allows to further restrict which items are selectable, compared to selectableItems. If this property is set to null the effect is the same as a predicate that always returns true.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Examples

In the following example items are only selectable if their tag is the string "I am selectable":

mode.selectablePredicate = (item) => item.tag === 'I am selectable'mode.selectablePredicate = (item: IModelItem): boolean =>
  item.tag === 'I am selectable'

Defined in

tapInputMode

: TapInputMode

Gets or sets the TapInputMode which detects single and multiple taps on a CanvasComponent.

Remarks

If no value has been set explicitly, the factory method createTapInputMode will be called upon first access. Upon change the onTapInputModeChanged method will be called.

By default this input mode has a priority of 20.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the TapInputMode on its parent input mode

mode.tapInputMode.enabled = false

Defined in

toolTipItems

Gets or sets the types of the items that should be queried a tool tip for.

Remarks

The items for which a tool tip text should be queried. The default value is a combination of NODE, EDGE, LABEL, and PORT, i.e. everything except bends.

Examples

Configuring the MouseHoverInputMode to display tooltips for nodes

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
  if (args.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = args.item
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    args.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    args.handled = true
  }
})// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
  if (args.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = args.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    args.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    args.handled = true
  }
})

Defined in

waitInputMode

: WaitInputMode

Gets or sets the WaitInputMode that is provided by this instance for those who need to make use of it.

Remarks

If no value has been set explicitly, the factory method createWaitInputMode will be called upon first access. Upon change the onWaitInputModeChanged method will be called.

By default this input mode has a priority of -1.

Throws

Exception({ name: 'NotSupportedError' }): If an attempt is made to change the instance while this mode is . To exchange a mode, first , then to ensure that all data is initialized correctly.

Examples

Disabling the WaitInputMode on its parent input mode

mode.waitInputMode.enabled = false

Blocking user interaction during an asynchronous process

graphEditorInputMode.waiting = true
await longRunningAsyncProcess()
graphEditorInputMode.waiting = false

Defined in

Methods

add

(mode: IInputMode)

Adds the given mode.

Remarks

The input modes will be ordered according to their priority: Input modes with lower priority will be installed earlier.

Input modes will run exclusively if the exclusive property of their installed controller is set to true. Otherwise they can not and will not be deactivated if another IInputMode acquires the mutex.

Parameters

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

mode - IInputMode: The input mode to add to this mode.

Throws

Exception({ name: 'ArgumentError' }): If the same mode has is already added to this instance.

Examples

const multiplexingInputMode = new MultiplexingInputMode()
const waitInputMode = new WaitInputMode()
waitInputMode.priority = 0
multiplexingInputMode.add(waitInputMode)
const moveInputMode = new MoveViewportInputMode()
moveInputMode.priority = 5
multiplexingInputMode.add(moveInputMode)
graphComponent.inputMode = multiplexingInputMode

const mode = new GraphEditorInputMode()
const customInputMode = new CustomInputMode()
customInputMode.priority = 10
mode.add(customInputMode)

Defined in

adjustCursor

()

Adjusts the cursor of the CanvasComponent according to the current input mutex owner or the first mode in the list whose ConcurrencyController returns a non-null preferredCursor.

Remarks

This method will set defaultCursor as the current cursor if no other preferredCursor has been specified.

Defined in

cancel

()

Cancels all modes.

Implements

GraphInputMode.childInputModeContextLookup

childInputModeContextLookup

(type: Class) : any

Called by the child context's lookup method.

Parameters

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

type - Class: The type argument passed to lookup.

Returns

↪any: The result of the lookup query, or null.

Overrides

clearSelection

()

Clears the selection on the current graphSelection.

Remarks

This implementation may be overridden for customizations. All it does is call clear.

Defined in

click

(item: IModelItem, evt: ClickEventArgs)

Actually performs the click on the given item.

Remarks

This will raise the ItemLeftClicked, ItemRightClicked (depending on the button), and ItemClicked events. If either event is unhandled by all its event handlers the item will be selected and focused. Before selection the current selection will be cleared, unless the multiSelectionRecognizer is triggered.

Parameters

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

item - IModelItem: The item that has been clicked.
evt - ClickEventArgs: The original event arguments for the click. Setting its handled property to true will indicate that the click was handled. By default this happens when the clicked item is either selected or focused.

Defined in

clickClearSelection

(context: IInputModeContext) : boolean

Clears the selection on click if the click is not recognized by multiSelectionRecognizer.

Remarks

This method is only called if no item has been hit and at least one item is currently selected.

This will use the clearSelection method to deselect all items.

Parameters

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

context - IInputModeContext: The context where the click appeared

Returns

↪boolean: Whether the selection has been cleared by this method.

Defined in

copy

()

Copies the currently selected elements to the clipboard.

Examples

mode.copy()

Defined in

createChildInputModeContext

() : IInputModeContext

Yields an IInputModeContext for the child modes of this mode.

Remarks

This method is called during installation to create a new context for the child modes and can be used by client code to obtain a suitable context object. The inputModeContext property is already set, when this method is called. lookup calls for the created context will be resolved by this instance's childInputModeContextLookup method.

Returns

↪IInputModeContext: A new instance that delegates to the parent's context.

Defined in

createClickInputMode

() : ClickInputMode

Factory method for the clickInputMode property.

Remarks

This method will be called upon first access to the clickInputMode property.

This implementation activates both LEFT and RIGHT

Returns

↪ClickInputMode: a new instance of ClickInputMode

Defined in

createContextMenuInputMode

() : ContextMenuInputMode

Factory method for the contextMenuInputMode property.

Remarks

This method will be called upon first access to the contextMenuInputMode property.

Returns

↪ContextMenuInputMode: a new instance of ContextMenuInputMode

Defined in

createInputModeEventArgs

(context: IInputModeContext) : InputModeEventArgs

Helper method that yields a suitably configured InputModeEventArgs for this input mode.

Parameters

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

context - IInputModeContext: An input mode context that is available in the InputModeEventArgs.
Can be null in which case a new context for this instance is created automatically.

Returns

↪InputModeEventArgs: An input mode event argument that is configured for this instance.

Defined in

createItemHoverInputMode

() : ItemHoverInputMode

Factory method for the itemHoverInputMode property.

Remarks

This method will be called upon first access to the itemHoverInputMode property.

Factory method that creates the keyboardInputMode instance.

Defined in

GraphInputMode.createLassoSelectionInputMode

createLassoSelectionInputMode

() : LassoSelectionInputMode

Factory method for the lassoSelectionInputMode property.

Remarks

This method will be called upon first access to the lassoSelectionInputMode property.

The created input mode is disabled per default.

Returns

↪LassoSelectionInputMode: a new instance of LassoSelectionInputMode

Overrides

createMarqueeSelectionInputMode

() : MarqueeSelectionInputMode

Factory method for the marqueeSelectionInputMode property.

Remarks

This method will be called upon first access to the marqueeSelectionInputMode property.

Returns

↪MarqueeSelectionInputMode: a new instance of MarqueeSelectionInputMode

Overrides

GraphInputMode.createMarqueeSelectionInputMode

createMouseHoverInputMode

() : MouseHoverInputMode

Factory method for the MouseHoverInputMode property.

Remarks

This method will be called upon first access to the MouseHoverInputMode property.

Returns

↪MouseHoverInputMode: a new instance of MouseHoverInputMode

Defined in

createMoveViewportInputMode

() : MoveViewportInputMode

Factory method for the moveViewportInputMode property.

Remarks

This method will be called upon first access to the moveViewportInputMode property.

Returns

↪MoveViewportInputMode: a new instance of moveViewportInputMode

Defined in

GraphInputMode.createNavigationInputMode

createNavigationInputMode

() : NavigationInputMode

Factory method for the navigationInputMode property.

Remarks

This method will be called upon first access to the navigationInputMode property.

Returns

↪NavigationInputMode: a new instance of NavigationInputMode

Overrides

createSelectionEventArgs

(context: IInputModeContext) : SelectionEventArgs<IModelItem>

Helper method that yields a suitably configured SelectionEventArgs<T> using the graphSelection for this input mode.

Parameters

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

context - IInputModeContext: An input mode context that is available in the SelectionEventArgs<T>.
Can be null in which case a new context for this instance is created automatically.

Returns

↪SelectionEventArgs<IModelItem>: A selection event argument that is configured for this instance.

Defined in

createTapInputMode

() : TapInputMode

Factory method for the tapInputMode property.

Remarks

This method will be called upon first access to the tapInputMode property.

Returns

↪TapInputMode: a new instance of TapInputMode

Defined in

createWaitInputMode

() : WaitInputMode

Factory method for the waitInputMode property.

Remarks

This method will be called upon first access to the waitInputMode property.

Returns

↪WaitInputMode: a new instance of waitInputMode

Defined in

doubleClick

(item: IModelItem, evt: ClickEventArgs)

Actually performs a double-click on the given item.

Remarks

This will raise the ItemLeftDoubleClicked and ItemRightDoubleClicked (depending on the button), and ItemDoubleClicked events.

Parameters

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

item - IModelItem: The item that has been double-clicked.
evt - ClickEventArgs: The original event arguments for the click. Setting its handled property to true will indicate that the double-click was handled and events on other items in the same location are no longer raised.

Defined in

doubleTap

(item: IModelItem, evt: TapEventArgs)

Actually performs a double-tap on the given item.

Remarks

This will raise the ItemDoubleTapped and ItemDoubleClicked event.

Parameters

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

item - IModelItem: The item that has been double-tapped.
evt - TapEventArgs: The original event arguments for the tap. Setting its handled property to true will indicate that the double-tap was handled and events on other items in the same location are no longer raised.

Defined in

findItems

(location: Point, tests: GraphItemTypes[], filter?: function(IModelItem):boolean) : IEnumerable<IModelItem>

Used as a callback to find the items hit underneath a certain point.

Remarks

This implementation uses the hitTester to determine the hit items.

Parameters

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

location - Point

The location to test.

tests - GraphItemTypes[]

An array of GraphItemTypes values that encode for which model items the hit test should be performed for prioritizing. Arrays that contain strings describing the name of GraphItemTypes are converted to an array of GraphItemTypes. For example:

['node', 'edge']
['NODE', 'EDGE']

filter - function(IModelItem):boolean

The predicate that can be used to filter the results. May be null.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Returns

↪IEnumerable<IModelItem>: An enumerable over the items that have been found for the location.

Examples

/**
 * @param {!IInputModeContext} context
 * @param {!Point} location
 */
function HandleItemAtLocation(context, location) {
  const graphEditorInputMode = context.lookup(GraphEditorInputMode.$class)

  const graphItem = graphEditorInputMode
    .findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
    .first()

  if (graphItem instanceof INode) {
    // ... handle node
  } else if (graphItem instanceof IEdge) {
    // ... handle edge
  }function HandleItemAtLocation(
  context: IInputModeContext,
  location: Point
): void {
  const graphEditorInputMode = context.lookup(
    GraphEditorInputMode.$class
  ) as GraphEditorInputMode

  const graphItem = graphEditorInputMode
    .findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
    .first()

  if (graphItem instanceof INode) {
    // ... handle node
  } else if (graphItem instanceof IEdge) {
    // ... handle edge
  }

Defined in

findItems

(context: IInputModeContext, location: Point, tests: GraphItemTypes[], filter?: function(IModelItem):boolean) : IEnumerable<IModelItem>

Used as a callback to find the items hit underneath a certain point.

Remarks

This implementation uses the hitTester to determine the hit items.

Parameters

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

context - IInputModeContext

The context to use for to the isHit callback.

location - Point

The location to test.

tests - GraphItemTypes[]

['node', 'edge']
['NODE', 'EDGE']

filter - function(IModelItem):boolean

The predicate that can be used to filter the results. May be null.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Returns

↪IEnumerable<IModelItem>: An enumerable over the items that have been found for the location.

Examples

/**
 * @param {!IInputModeContext} context
 * @param {!Point} location
 */
function HandleItemAtLocation(context, location) {
  const graphEditorInputMode = context.lookup(GraphEditorInputMode.$class)

  const graphItem = graphEditorInputMode
    .findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
    .first()

  if (graphItem instanceof INode) {
    // ... handle node
  } else if (graphItem instanceof IEdge) {
    // ... handle edge
  }function HandleItemAtLocation(
  context: IInputModeContext,
  location: Point
): void {
  const graphEditorInputMode = context.lookup(
    GraphEditorInputMode.$class
  ) as GraphEditorInputMode

  const graphItem = graphEditorInputMode
    .findItems(location, [GraphItemTypes.NODE | GraphItemTypes.EDGE])
    .first()

  if (graphItem instanceof INode) {
    // ... handle node
  } else if (graphItem instanceof IEdge) {
    // ... handle edge
  }

Defined in

getSortedModes

() : IList<IInputMode>

Returns a list of all modes managed by this instance in sorted order.

Returns

↪IList<IInputMode>: A list of the modes.

Defined in

handleClickListener

(context: IInputModeContext, item: IModelItem, location: Point) : boolean

Called by click to query the item for an IClickListener in its lookup and handle it appropriately.

Remarks

This method will query the IClickListener and check whether it was hit by the click, and if so, will invoke onClicked and return true.

Parameters

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

context - IInputModeContext: The context for the click.
item - IModelItem: The item that has been clicked.
location - Point: The click location.

Returns

↪boolean: Whether the action has been invoked and handling should be stopped.

Defined in

initialize

()

Performs one-time initialization of this instance.

Remarks

This method should not be invoked by subclasses. This will be done automatically upon first installation of this mode.

This code will be executed only once per instance. The inputModeContext property will be null when this code is executed. This method should not be used to install this mode into a specific canvas. Subclasses should always call base.Initialize() first.

Defined in

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.

When this instance gets uninstalled from the context the same context instance will be passed to it.

Implementations may hold a reference to the context instance and use it while they are being installed.

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 ConcurrencyController for this mode.

Parameters

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

oldMode - ClickInputMode: the old value, which may be null the first time
newMode - ClickInputMode: the new value

Defined in

GraphInputMode.onConcurrencyControllerActivated

onConcurrencyControllerActivated

()

Called after the active property of the installed ConcurrencyController has been set to true.

Remarks

This implementation reenables previously disabled concurrent child modes.

Overrides

onConcurrencyControllerDeactivated

()

Called after the active property of the installed ConcurrencyController has been set to false.

Remarks

This implementation sets the preferredCursor property to null and releases the mutex if the mutex is currently owned by this instance. Also, all concurrent child modes will be disabled.

Overrides

GraphInputMode.onConcurrencyControllerDeactivated

onContextMenuInputModeChanged

(oldMode: ContextMenuInputMode, newMode: ContextMenuInputMode)

Called when the ContextMenuInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - ContextMenuInputMode: the old value, which may be null the first time
newMode - ContextMenuInputMode: the new value

Defined in

onItemClicked

Raises the ItemClicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

Defined in

onItemDoubleClicked

Raises the ItemDoubleClicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been double clicked.

Defined in

onItemDoubleTapped

(evt: ItemTappedEventArgs<IModelItem>)

Raises the ItemDoubleTapped event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemTappedEventArgs<IModelItem>: The ItemTappedEventArgs<T> instance that contains the item that has been double tapped.

Defined in

onItemHoverInputModeChanged

(oldMode: ItemHoverInputMode, newMode: ItemHoverInputMode)

Called when the itemHoverInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - ItemHoverInputMode: the old value, which may be null the first time
newMode - ItemHoverInputMode: the new value

Defined in

onItemLeftClicked

Raises the ItemLeftClicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

Defined in

onItemLeftDoubleClicked

Raises the ItemLeftDoubleClicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been double clicked.

Defined in

onItemRightClicked

Raises the ItemRightClicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

Defined in

onItemRightDoubleClicked

Raises the ItemRightDoubleClicked event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemClickedEventArgs<IModelItem>: The ItemClickedEventArgs<T> instance that contains the item that has been double clicked.

Defined in

onItemTapped

(evt: ItemTappedEventArgs<IModelItem>)

Raises the ItemTapped event.

Remarks

This implementation will stop the event propagation as soon as an event handler has set the handled property to true.

Parameters

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

evt - ItemTappedEventArgs<IModelItem>: The ItemTappedEventArgs<T> instance that contains the item that has been tapped.

Defined in

onKeyboardInputModeChanged

(oldMode: KeyboardInputMode, newMode: KeyboardInputMode)

Called when the keyboardInputMode changed.

Parameters

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

oldMode - KeyboardInputMode: The old keyboardInputMode.
newMode - KeyboardInputMode: The new keyboardInputMode.

Defined in

onLassoSelect

(context: IInputModeContext, lassoBorder: GeneralPath)

Performs lasso-selection with the given path.

Remarks

This method is called internally when either the lassoSelect method is called or the user performs a lasso-selection gesture via lassoSelectionInputMode.

Parameters

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

context - IInputModeContext: The input mode context.
lassoBorder - GeneralPath: The lasso selection path.

Defined in

onLassoSelectionInputModeChanged

(oldMode: LassoSelectionInputMode, newMode: LassoSelectionInputMode)

Called when the lassoSelectionInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - LassoSelectionInputMode: the old value, which may be null the first time
newMode - LassoSelectionInputMode: the new value

Defined in

onLassoSelectItems

(context: IInputModeContext, lassoBorder: GeneralPath, items: IEnumerable<IModelItem>, predicate: function(IModelItem):boolean)

Selects the given elements in the editor inside the provided lasso-selection path.

Remarks

This implementation iterates over the items and queries them for an implementation of ILassoTestable using their lookup. This instance will be used to determine whether the item should be selected.

This method is, in the default implementation, only called with individual item types in items.

Parameters

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

context - IInputModeContext

The input mode context.

lassoBorder - GeneralPath

The lasso path in world coordinates.

items - IEnumerable<IModelItem>

The items to iterate over.

predicate - function(IModelItem):boolean

The predicate that determines whether the provided item should be tested at all. May be null.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

onMarqueeSelect

(context: IInputModeContext, marqueeRectangle: Rect)

Performs marquee selection with the given rectangle.

Remarks

This method is called internally when either the marqueeSelect method is called or the user performs a marquee-selection gesture via marqueeSelectionInputMode.

Parameters

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

context - IInputModeContext: The input mode context.
marqueeRectangle - Rect: The selection rectangle.

Defined in

onMarqueeSelectionInputModeChanged

(oldMode: MarqueeSelectionInputMode, newMode: MarqueeSelectionInputMode)

Called when the marqueeSelectionInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MarqueeSelectionInputMode: the old value, which may be null the first time
newMode - MarqueeSelectionInputMode: the new value

Defined in

onMarqueeSelectItems

(context: IInputModeContext, marqueeRectangle: Rect, items: IEnumerable<IModelItem>, predicate?: function(IModelItem):boolean)

Selects the given elements in the editor inside the provided marquee-selection rectangle.

Remarks

This implementation iterates over the items and queries them for an implementation of IMarqueeTestable using their lookup. This instance will be used to determine whether the item should be selected.

This method is, in the default implementation, only called with individual item types in items.

Parameters

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

context - IInputModeContext

The input mode context.

marqueeRectangle - Rect

The rectangle in world coordinates.

items - IEnumerable<IModelItem>

The items to iterate over.

predicate - function(IModelItem):boolean

The predicate that determines whether the provided item should be tested at all. May be null.

Signature Details

function(obj: IModelItem) : boolean

Represents the method that defines a set of criteria and determines whether the specified object meets those criteria.

Parameters

obj - IModelItem: The object to compare against the criteria defined within the method represented by this delegate.

Returns

boolean: true if obj meets the criteria defined within the method represented by this delegate; otherwise, false.

Defined in

onMouseHoverInputModeChanged

(oldMode: MouseHoverInputMode, newMode: MouseHoverInputMode)

Called when the MouseHoverInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MouseHoverInputMode: the old value, which may be null the first time
newMode - MouseHoverInputMode: the new value

Defined in

onMoveViewportInputModeChanged

(oldMode: MoveViewportInputMode, newMode: MoveViewportInputMode)

Called when the moveViewportInputMode property value changes and after initialization of the property.

Parameters

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

oldMode - MoveViewportInputMode: the old value, which may be null the first time
newMode - MoveViewportInputMode: the new value

Defined in

onMultiSelectionFinished

(evt: SelectionEventArgs<IModelItem>)

Raises the MultiSelectionFinished event.

Defined in

Clears the current selection and selects all nodes and bends in this graph.

Remarks

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether the item should be clicked in response to a detected mouse click.

Defined in

shouldClickSelect

(item: IModelItem) : boolean

Called to determine whether the given item should be selected when clicked with the primary mouse button.

Remarks

This implementation uses the clickSelectableItems value to determine whether the item should be selected. Note that this method will not be called for items that don't match clickSelectableItems and selectableItems for performance reasons.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether the item should be selected in response to a detected mouse click with the primary button.

Defined in

shouldDoubleClick

(item: IModelItem) : boolean

Called to determine whether the given item can be double clicked.

Remarks

This implementation uses the shouldClick method to determine whether the item should be double clicked. Note that this method will not be called for items that don't match clickableItems for performance reasons.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether the item should be double clicked in response to a detected mouse click.

Defined in

shouldFocus

(item: IModelItem) : boolean

Determines whether the provided IModelItem should be set to the current item.

Remarks

This implementation uses the focusableItems property to determine whether the item can be set to the current item. It also honors the ignoreVoidStyles property.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether to set the item as the current item.

Defined in

shouldInstallCommand

(command: ICommand) : boolean

CUsed to determine which of the built-in ICommands to install.

Remarks

This implementation unconditionally returns true, subclasses may override this method to adjust the behavior.

Parameters

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

command - ICommand: The command to install.

Returns

↪boolean: Whether to install this command.

Defined in

shouldMarqueeSelect

(item: IModelItem) : boolean

Used by marqueeSelect and lassoSelect that takes marqueeSelectableItems and shouldSelectItem into account.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether to possibly marquee or lasso select the item.

Defined in

shouldPopulateContextMenu

(item: IModelItem) : boolean

Determines whether for the given item a context menu should be queried.

Remarks

This implementation uses the contextMenuItems property to determine whether a context menu should be queried for the given item.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether to raise a PopulateItemContextMenu event for the given item.

Defined in

shouldQueryToolTip

(item: IModelItem) : boolean

Determines whether for the given item a tool tip should be queried.

Remarks

This implementation uses the toolTipItems property to determine whether tool tip should be queried for the given item.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: Whether to raise a QueryItemToolTip event for the given item.

Defined in

shouldSelectItem

(item: IModelItem) : boolean

Called as a broad classification whether an item can generally be selected.

Remarks

This implementation uses and honors the selectableItems, ignoreVoidStyles and selectablePredicate properties. This method is by default also called by shouldClickSelect and shouldMarqueeSelect, so turning selection off here also turns it off in other places.

Parameters

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

item - IModelItem: The item to check.

Returns

↪boolean: true if the item is selectable in general, false if not.

Defined in

subModePriorityChanged

()

Called when the priority of an installed sub mode has changed.

Remarks

This implementation uninstalls all sub modes and then re-installs them according to their new priorities.

Defined in

tap

(item: IModelItem, evt: TapEventArgs)

Actually performs the tap on the given item.

Remarks

This will raise the ItemClicked event. If the event is unhandled by all its event handlers the item will be selected and focused. Before selection the current selection will be cleared.

Parameters

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

item - IModelItem: The item that has been tapped.
evt - TapEventArgs: The original event arguments for the tap. Setting its handled property to true will indicate that the tap was handled. By default this happens when the tapped item is either selected or focused.

Defined in

tryStop

() : boolean

Tries to stop all modes.

Returns

↪boolean: true if and only if the editing has been stopped or there was no edit in progress

Implements

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.

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.

Overrides

IInputMode.uninstall

Events

CanvasClicked

Occurs when the empty canvas area has been clicked or tapped.

Remarks

If one of the event handlers sets the handled property to true the event will not be propagated anymore.

This event will also be raised for taps. In this case the CanvasTapped event will be raised before this event. If it is marked handled this event will not be raised anymore.

Defined in

Event Registration

addCanvasClickedListener(function(this, ClickEventArgs):void)

Event Deregistration

removeCanvasClickedListener(function(this, ClickEventArgs):void)

Signature Details

function(sender: this, evt: ClickEventArgs)

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

Parameters

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

CanvasTapped

Occurs when the empty canvas area has been tapped.

Remarks

This event will be raised before the CanvasClicked event. If one of the event handlers sets the handled property to true the event will not be propagated anymore. This also means that the CanvasClicked event will not be raised in that case.

Defined in

Event Registration

addCanvasTappedListener(function(this, TapEventArgs):void)

Event Deregistration

removeCanvasTappedListener(function(this, TapEventArgs):void)

Signature Details

function(sender: this, evt: TapEventArgs)

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

Parameters

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

ElementsCopied

Occurs when the copy operation finished successfully.

Defined in

Event Registration

addElementsCopiedListener(function(this, EventArgs):void)

Event Deregistration

removeElementsCopiedListener(function(this, EventArgs):void)

Signature Details

function(sender: this, evt: EventArgs)

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

Parameters

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

ItemClicked

Occurs when an item has been clicked or tapped.

Remarks

If one of the event handlers sets the handled property to true the event will not be propagated anymore.

This event will also be raised for taps.

Button-specific and input type specific events (ItemLeftClicked, ItemRightClicked and ItemTapped) will be raised before this event. If one of those is marked handled this event will not be raised anymore.

Examples

mode.addItemClickedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Event Deregistration

removeItemClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemClickedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemClickedEventArgs<IModelItem>: An object that contains the event data.

ItemDoubleClicked

Occurs when an item has been double clicked.

Remarks

If one of the event handlers sets the handled property to true the event will not be propagated anymore.

Depending on the value of the doubleClickPolicy property of clickInputMode this event may be preceded by no, one, or two ItemClicked events (as well as the corresponding button-specific event).

Button-specific and input-type specific events (ItemLeftDoubleClicked, ItemRightDoubleClicked and ItemDoubleTapped) will be raised before this event. If one of those is marked handled this event will not be raised anymore.

Examples

mode.addItemDoubleClickedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Event Deregistration

removeItemDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemClickedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemClickedEventArgs<IModelItem>: An object that contains the event data.

ItemDoubleTapped

Occurs when an item has been double tapped.

Remarks

This event will be raised before the ItemDoubleClicked event. If one of the event handlers sets the handled property to true the event will not be propagated anymore. This also means that the ItemDoubleClicked event will not be raised in that case.

Examples

mode.addItemDoubleTappedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemDoubleTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)

Event Deregistration

removeItemDoubleTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemTappedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemTappedEventArgs<IModelItem>: An object that contains the event data.

ItemLeftClicked

Occurs when an item has been left clicked.

Remarks

This event will be raised before the ItemClicked event. If one of the event handlers sets the handled property to true the event will not be propagated anymore. This also means that the ItemClicked event will not be raised in that case.

Examples

mode.addItemLeftClickedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemLeftClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Event Deregistration

removeItemLeftClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemClickedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemClickedEventArgs<IModelItem>: An object that contains the event data.

ItemLeftDoubleClicked

Occurs when an item has been left double clicked.

Remarks

Examples

mode.addItemLeftDoubleClickedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemLeftDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Event Deregistration

removeItemLeftDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemClickedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemClickedEventArgs<IModelItem>: An object that contains the event data.

ItemRightClicked

Occurs when an item has been right clicked.

Remarks

Examples

mode.addItemRightClickedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemRightClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Event Deregistration

removeItemRightClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemClickedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemClickedEventArgs<IModelItem>: An object that contains the event data.

ItemRightDoubleClicked

Occurs when an item has been right double clicked.

Remarks

Examples

mode.addItemRightDoubleClickedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemRightDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Event Deregistration

removeItemRightDoubleClickedListener(function(this, ItemClickedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemClickedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemClickedEventArgs<IModelItem>: An object that contains the event data.

ItemTapped

Occurs when an item has been tapped.

Remarks

Examples

mode.addItemTappedListener((sender, args) => {
  const node = args.item
  if (node !== null) {
    doSomethingWithNode(node)
    args.handled = true
  }
})

Defined in

Event Registration

addItemTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)

Event Deregistration

removeItemTappedListener(function(this, ItemTappedEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: ItemTappedEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - ItemTappedEventArgs<IModelItem>: An object that contains the event data.

MultiSelectionFinished

Occurs when a single or multi select operation has been finished.

Remarks

The event is not triggered for the individual selection operations that constitute a multi selection operation.

Defined in

Event Registration

addMultiSelectionFinishedListener(function(this, SelectionEventArgs<IModelItem>):void)

Event Deregistration

removeMultiSelectionFinishedListener(function(this, SelectionEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: SelectionEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - SelectionEventArgs<IModelItem>: An object that contains the event data.

MultiSelectionStarted

Occurs when a single or multi select operation has been started.

Remarks

The event is not triggered for the individual selection operations that constitute a multi selection operation.

Defined in

Event Registration

addMultiSelectionStartedListener(function(this, SelectionEventArgs<IModelItem>):void)

Event Deregistration

removeMultiSelectionStartedListener(function(this, SelectionEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: SelectionEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - SelectionEventArgs<IModelItem>: An object that contains the event data.

PopulateItemContextMenu

Occurs when the context menu over an item is about to be opened to determine the contents of the context menu.

Remarks

This method will only be called for items that match the contextMenuItems type.

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.contextMenuItems = GraphItemTypes.NODE
mode.addPopulateItemContextMenuListener((sender, args) => {
  // Get the node which is handled or null if the item is not a node
  const node = args.item
  // Create the context menu items
  if (node !== null) {
    // Create a menu item to delete the node

    // Show the menu
    args.showMenu = true
    // Mark the event as handled
    args.handled = true
  }
})

Defined in

Event Registration

addPopulateItemContextMenuListener(function(this, PopulateItemContextMenuEventArgs<IModelItem>):void)

Event Deregistration

removePopulateItemContextMenuListener(function(this, PopulateItemContextMenuEventArgs<IModelItem>):void)

Signature Details

function(sender: this, evt: PopulateItemContextMenuEventArgs<IModelItem>)

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

Parameters

sender - this: The source of the event.
evt - PopulateItemContextMenuEventArgs<IModelItem>: An object that contains the event data.

QueryItemToolTip

Occurs when the mouse is hovering over an item to determine the tool tip to display.

Remarks

This method will only be called for items that match the toolTipItems type.

Examples

Configuring the MouseHoverInputMode to display tooltips for nodes

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
  if (args.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = args.item
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    args.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    args.handled = true
  }
})// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addQueryItemToolTipListener((src, args) => {
  if (args.handled) {
    // A tooltip has already been assigned -> nothing to do.
    return
  }
  // We can safely cast here because we set ToolTipItems to only Node.
  const hitNode = args.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    args.toolTip = hitNode.labels.get(0).text

    // Indicate that the tooltip content has been set.
    args.handled = true
  }
})

Defined in