GraphInputMode

abstract

Examples

mode.clickableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

See Also

API

clickablePredicate

See Also

API

clicked, click

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

Examples

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

See Also

API

clickSelectableItems, selectableItems, findItems

Examples

mode.clickInputMode.enabled = false

See Also

API

onItemClicked

Examples

// 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

See Also

API

clickSelectablePredicate, setSelected

See Also

API

clicked, click

Examples

mode.contextMenuInputMode.enabled = false

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

    // Show the menu
    evt.contextMenu = [
      { label: 'Delete Item', action: () => graph.remove(node) },
    ]
  }
})

Examples

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

    // Show the menu
    evt.contextMenu = [
      { label: 'Delete Item', action: () => graph.remove(node) },
    ]
  }
})

Property Value

Sample Graphs

See Also

Developer's Guide

API

adjustCursor

Property Value

Examples

mode.detailSelectionRecognizer = EventRecognizers.SHIFT_IS_DOWN

Sample Graphs

See Also

API

clicked, click

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

Examples

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

See Also

API

clickSelectableItems, selectableItems, findItems

Examples

mode.focusableItems = GraphItemTypes.NODE | GraphItemTypes.EDGE

See Also

API

clicked, click

Property Value

Property Value

Examples

mode.itemHoverInputMode.enabled = false

// 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
// handle changes on the hovered items
mode.itemHoverInputMode.addEventListener(
  'hovered-item-changed',
  (evt) => {
    const oldItem = evt.oldItem
    // e.g. remove the highlight from oldItem here
    const newItem = evt.item
    // e.g. add a highlight to newItem here
  },
)

Property Value

Examples

mode.keyboardInputMode.enabled = false

// Execute the command if the Insert key is pressed
graphEditorInputMode.keyboardInputMode.addKeyBinding(
  'Insert',
  ModifierKeys.NONE,
  () => {
    graphEditorInputMode.createNode(
      graphEditorInputMode.graphComponent!.viewport.center,
    )
  },
)

Examples

// 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

See Also

API

marqueeSelectablePredicate, setSelected

See Also

API

clicked, click

Examples

mode.marqueeSelectionInputMode.enabled = false

Examples

mode.moveViewportInputMode.enabled = false

Property Value

Examples

mode.navigationInputMode.enabled = false

// 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

// 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

API

clicked, click

See Also

API

query-item-tool-tip

Examples

// 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

See Also

API

setSelected

Examples

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

Examples

mode.toolTipInputMode.enabled = false

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
  if (evt.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 = evt.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    evt.toolTip = hitNode.labels.get(0).text

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

Examples

// mode is either an instance of GraphEditorInputMode or GraphViewerInputMode
mode.toolTipItems = GraphItemTypes.NODE
// register a listener
mode.addEventListener('query-item-tool-tip', (evt) => {
  if (evt.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 = evt.item as INode
  if (hitNode.labels.size > 0) {
    // Show the text of the first label as tooltip.
    evt.toolTip = hitNode.labels.get(0).text

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

type: Constructor

The type argument passed to lookup.

Return Value

any

The result of the lookup query, or null.

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.

context: IInputModeContext

The context where the click appeared.

Return Value

boolean

Whether the selection has been cleared by this method.

Examples

mode.copy()

Return Value

IInputModeContext

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

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.

Return Value

InputModeEventArgs

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

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.

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']

Copy

filter?: function(IModelItem): boolean

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

Function Details

Return Value

IEnumerable<IModelItem>

An enumerable over the items that have been found for the location.

Examples

function HandleItemAtLocation(
  context: IInputModeContext,
  location: Point,
): void {
  const graphEditorInputMode = context.lookup(
    GraphEditorInputMode,
  ) as GraphEditorInputMode

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

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

context: IInputModeContext

The context to use for the isHit callback.

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']

Copy

filter?: function(IModelItem): boolean

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

Function Details

Return Value

IEnumerable<IModelItem>

An enumerable over the items that have been found for the location.

Examples

function HandleItemAtLocation(
  context: IInputModeContext,
  location: Point,
): void {
  const graphEditorInputMode = context.lookup(
    GraphEditorInputMode,
  ) as GraphEditorInputMode

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

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

Return Value

IList<IInputMode>

A list of the modes.

context: IInputModeContext

The context for the click.

item: IModelItem

The item that has been clicked.

location: Point

The click location.

Return Value

boolean

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

See Also

API

IClickListener, click

See Also

API

install

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 while the mode is installed.

controller: ConcurrencyController

The ConcurrencyController for this mode.

lassoPath: GeneralPath

The lasso selection path.

selectionPolicy?: SelectionPolicy

The policy to use for changing the selection of the elements.

marqueeRectangle: Rect

The selection rectangle.

selectionPolicy?: SelectionPolicy

The policy to use for changing the selection of the elements.

evt: ClickEventArgs

The ClickEventArgs instance that contains the information about the click.

oldMode: ClickInputMode

the old value, which may be null the first time

newMode: ClickInputMode

the new value

oldMode: ContextMenuInputMode

the old value, which may be null the first time

newMode: ContextMenuInputMode

the new value

evt: ItemClickedEventArgs<IModelItem>

The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

evt: ItemClickedEventArgs<IModelItem>

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

oldMode: ItemHoverInputMode

the old value, which may be null the first time

newMode: ItemHoverInputMode

the new value

evt: ItemClickedEventArgs<IModelItem>

The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

evt: ItemClickedEventArgs<IModelItem>

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

evt: ItemClickedEventArgs<IModelItem>

The ItemClickedEventArgs<T> instance that contains the item that has been clicked.

evt: ItemClickedEventArgs<IModelItem>

The ItemClickedEventArgs<T> instance that contains the item that has been double clicked.

oldMode: KeyboardInputMode

The old keyboardInputMode.

newMode: KeyboardInputMode

The new keyboardInputMode.

context: IInputModeContext

The input mode context.

lassoPath: GeneralPath

The lasso selection path.

selectionPolicy: SelectionPolicy

The policy to use for changing the selection of the elements.

oldMode: LassoSelectionInputMode

the old value, which may be null the first time

newMode: LassoSelectionInputMode

the new value

context: IInputModeContext

The input mode context.

marqueeRectangle: Rect

The selection rectangle.

selectionPolicy: SelectionPolicy

The policy for changing the selection.

oldMode: MarqueeSelectionInputMode

the old value, which may be null the first time

newMode: MarqueeSelectionInputMode

the new value

oldMode: MoveViewportInputMode

the old value, which may be null the first time

newMode: MoveViewportInputMode

the new value

evt: SelectionEventArgs<IModelItem>

The SelectionEventArgs<IModelItem> that provides the selection.

evt: SelectionEventArgs<IModelItem>

The SelectionEventArgs<IModelItem> that provides the selection.

oldMode: NavigationInputMode

the old value, which may be null the first time

newMode: NavigationInputMode

the new value

evt: PopulateItemContextMenuEventArgs<IModelItem>

The PopulateItemContextMenuEventArgs<TModelItem> instance containing the event data.

evt: QueryItemToolTipEventArgs<IModelItem>

The QueryItemToolTipEventArgs<TModelItem> instance containing the event data.

oldMode: ToolTipInputMode

the old value, which may be null the first time

newMode: ToolTipInputMode

the new value

oldMode: WaitInputMode

the old value, which may be null the first time

newMode: WaitInputMode

the new value

mode: IInputMode

The mode to remove.

See Also

API

clearSelection, setSelected, SELECT_ALL, selectableItems, ignoreVoidStyles

item: IModelItem

The item to set as the new "current" item.

item: IModelItem

The item to set the selection state on.

selected: boolean

The new selection state.

context: IInputModeContext

The context in which the hit testing is performed.

hitLabel: ILabel

The label that was hit before a non-label at the same location.

location: Point

The location the label was hit.

Return Value

boolean

Whether to first report the non-label during hit testing.

Return Value

boolean

true if the editing process was successfully stopped, or if there was no edit in progress to stop; otherwise, false.

altKey: boolean

Gets a value indicating whether the alt modifier was pressed at the time of the click.

clickCount: number

Gets the number of clicks associated with this event.

context: IInputModeContext

Gets the context for the current event.

ctrlKey: boolean

Gets a value indicating whether the control modifier was pressed at the time of the click.

handled: boolean

writable

Gets or sets a value indicating whether this instance has been handled.

item: T

Gets the item that is the subject of the event.

location: Point

Gets the location of the click.

metaKey: boolean

Gets a value indicating whether the meta modifier was pressed at the time of the click.

modifiers: ModifierKeys

Gets the state of the modifiers at the time of the click.

originalEventArgs: PointerEventArgs

Gets the pointer event args that caused this event.

pointerButtons: PointerButtons

Gets the PointerButtons that have changed for this event.

pointerType: PointerType

Gets the type of the pointer that was the source of this event.

shiftKey: boolean

Gets a value indicating whether the shift modifier was pressed at the time of the click.

Examples

mode.addEventListener('item-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

See Also

Developer's Guide

API

clickableItems, item-double-clicked, item-left-clicked, item-right-clicked

altKey: boolean

Gets a value indicating whether the alt modifier was pressed at the time of the click.

clickCount: number

Gets the number of clicks associated with this event.

context: IInputModeContext

Gets the context for the current event.

ctrlKey: boolean

Gets a value indicating whether the control modifier was pressed at the time of the click.

handled: boolean

writable

Gets or sets a value indicating whether this instance has been handled.

item: T

Gets the item that is the subject of the event.

location: Point

Gets the location of the click.

metaKey: boolean

Gets a value indicating whether the meta modifier was pressed at the time of the click.

modifiers: ModifierKeys

Gets the state of the modifiers at the time of the click.

originalEventArgs: PointerEventArgs

Gets the pointer event args that caused this event.

pointerButtons: PointerButtons

Gets the PointerButtons that have changed for this event.

pointerType: PointerType

Gets the type of the pointer that was the source of this event.

shiftKey: boolean

Gets a value indicating whether the shift modifier was pressed at the time of the click.

Examples

mode.addEventListener('item-double-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

See Also

Developer's Guide

API

item-clicked, clickableItems, item-left-double-clicked, item-right-double-clicked

altKey: boolean

Gets a value indicating whether the alt modifier was pressed at the time of the click.

clickCount: number

Gets the number of clicks associated with this event.

context: IInputModeContext

Gets the context for the current event.

ctrlKey: boolean

Gets a value indicating whether the control modifier was pressed at the time of the click.

handled: boolean

writable

Gets or sets a value indicating whether this instance has been handled.

item: T

Gets the item that is the subject of the event.

location: Point

Gets the location of the click.

metaKey: boolean

Gets a value indicating whether the meta modifier was pressed at the time of the click.

modifiers: ModifierKeys

Gets the state of the modifiers at the time of the click.

originalEventArgs: PointerEventArgs

Gets the pointer event args that caused this event.

pointerButtons: PointerButtons

Gets the PointerButtons that have changed for this event.

pointerType: PointerType

Gets the type of the pointer that was the source of this event.

shiftKey: boolean

Gets a value indicating whether the shift modifier was pressed at the time of the click.

Examples

mode.addEventListener('item-left-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

See Also

API

clickableItems, item-double-clicked, item-clicked, item-right-clicked, item-left-double-clicked

altKey: boolean

Gets a value indicating whether the alt modifier was pressed at the time of the click.

clickCount: number

Gets the number of clicks associated with this event.

context: IInputModeContext

Gets the context for the current event.

ctrlKey: boolean

Gets a value indicating whether the control modifier was pressed at the time of the click.

handled: boolean

writable

Gets or sets a value indicating whether this instance has been handled.

item: T

Gets the item that is the subject of the event.

location: Point

Gets the location of the click.

metaKey: boolean

Gets a value indicating whether the meta modifier was pressed at the time of the click.

modifiers: ModifierKeys

Gets the state of the modifiers at the time of the click.

originalEventArgs: PointerEventArgs

Gets the pointer event args that caused this event.

pointerButtons: PointerButtons

Gets the PointerButtons that have changed for this event.

pointerType: PointerType

Gets the type of the pointer that was the source of this event.

shiftKey: boolean

Gets a value indicating whether the shift modifier was pressed at the time of the click.

Examples

mode.addEventListener('item-left-double-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

See Also

API

clickableItems, item-double-clicked, item-right-double-clicked

altKey: boolean

Gets a value indicating whether the alt modifier was pressed at the time of the click.

clickCount: number

Gets the number of clicks associated with this event.

context: IInputModeContext

Gets the context for the current event.

ctrlKey: boolean

Gets a value indicating whether the control modifier was pressed at the time of the click.

handled: boolean

writable

Gets or sets a value indicating whether this instance has been handled.

item: T

Gets the item that is the subject of the event.

location: Point

Gets the location of the click.

metaKey: boolean

Gets a value indicating whether the meta modifier was pressed at the time of the click.

modifiers: ModifierKeys

Gets the state of the modifiers at the time of the click.

originalEventArgs: PointerEventArgs

Gets the pointer event args that caused this event.

pointerButtons: PointerButtons

Gets the PointerButtons that have changed for this event.

pointerType: PointerType

Gets the type of the pointer that was the source of this event.

shiftKey: boolean

Gets a value indicating whether the shift modifier was pressed at the time of the click.

Examples

mode.addEventListener('item-right-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

See Also

API

clickableItems, item-double-clicked, item-clicked, item-left-clicked, item-right-double-clicked

altKey: boolean

Gets a value indicating whether the alt modifier was pressed at the time of the click.

clickCount: number

Gets the number of clicks associated with this event.

context: IInputModeContext

Gets the context for the current event.

ctrlKey: boolean

Gets a value indicating whether the control modifier was pressed at the time of the click.

handled: boolean

writable

Gets or sets a value indicating whether this instance has been handled.

item: T

Gets the item that is the subject of the event.

location: Point

Gets the location of the click.

metaKey: boolean

Gets a value indicating whether the meta modifier was pressed at the time of the click.

modifiers: ModifierKeys

Gets the state of the modifiers at the time of the click.

originalEventArgs: PointerEventArgs

Gets the pointer event args that caused this event.

pointerButtons: PointerButtons

Gets the PointerButtons that have changed for this event.

pointerType: PointerType

Gets the type of the pointer that was the source of this event.

shiftKey: boolean

Gets a value indicating whether the shift modifier was pressed at the time of the click.

Examples

mode.addEventListener('item-right-double-clicked', (evt) => {
  const node = evt.item
  if (node !== null) {
    doSomethingWithNode(node)
    evt.handled = true
  }
})

See Also

API

clickableItems, item-double-clicked, item-left-double-clicked

context: IInputModeContext

Gets the context for the current event.

items: IListEnumerable<IModelItem>

Gets the items that are the subjects for this event.

See Also

Developer's Guide

context: IInputModeContext

Gets the context for the current event.

selection: IObservableCollection<T>

Gets the selection these event arguments refer to.

context: IInputModeContext

Gets the context for the current event.

selection: IObservableCollection<T>

Gets the selection these event arguments refer to.

context: IInputModeContext

Gets the context for the current event.

contextMenu: ContextMenuContent

writable

Gets or sets the context menu content to use.

handled: boolean

writable

Gets or sets a value indicating whether this PopulateContextMenuEventArgs has been handled.

item: TModelItem

Gets the item for which the context menu is queried.

queryLocation: Point

Gets the queried location in world coordinates.

showMenu: boolean

writable

Gets or sets a value indicating whether to actually display the context menu.

Examples

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

    // Show the menu
    evt.contextMenu = [
      { label: 'Delete Item', action: () => graph.remove(node) },
    ]
  }
})