documentationfor yFiles for HTML 3.0.0.3

ContextMenuInputMode

Show usages

An implementation of the IInputMode interface that handles the display of a custom context menu when the user right-clicks on the CanvasComponent.

Inheritance Hierarchy
ContextMenuInputMode
Implemented Interfaces
IInputMode

Remarks

This mode can be used with any context menu implementation since it does not impose any specific requirements. Typically, it is used in the following way:

When this mode is informed that the user wants to show the context menu for example because a contextmenu event was fired, it checks whether its current state allows opening a context menu, and fires the populate-menu and GraphInputMode.populateItemContextMenu events.

If the context menu was closed because of user interaction with it, for example the user selected a menu entry in a custom context menu, this mode must be informed by calling the method closeMenu.

The context menu HTML element is positioned using "position: absolute". It is therefore positioned with respect to it's offset parent, which is the closest ancestor with "position: relative". In summary, for the context menu to work properly, the element containing the graph component must be styled with "position: relative".

Examples

Typically, the ContextMenuInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the contextMenuInputMode property.

Getting the ContextMenuInputMode from its parent input mode
const contextMenuInputMode = mode.contextMenuInputMode

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

// 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) },
    ]
  }
})

Related Programming Samples

Context Menu
Shows how to add a context menu to the nodes of a graph and to the canvas background.

Type Details

yFiles module
view
For applications that are tailored towards touch input where you want support both, context menu and long-press gestures (e.g. edge creation), we recommend to lower the longPressTime value to (e.g.) 100ms because handling the context-menu event will stop other input modes from acting on the subsequent long-press event. Therefore, lowering the longPressTime will extend the time frame between the long-press and the context-menu event.

Constructors

Properties

Methods

Events