Context Menus

Context menus are supported by both GraphEditorInputMode and GraphViewerInputMode.

The provided callbacks allow you to use a context menu implementation from any web UI framework, or a custom implementation of your choice. yFiles for HTML does not come with a context menu UI widget, though a simple implementation is provided with the Context Menu demo. The demo sources show how to register the context menu with the input modes of yFiles for HTML, and illustrates how a the menu implementation could look like.

Create a context menu

// This code example uses the sample implementation from the Context Menu demo,
// but you can use any other context menu widget as well.
// See the Context Menu demo for more details about working with context menus.
const contextMenu = new ContextMenu(graphComponent)

// Register event listeners for the various "contextmenu" events of the application.
contextMenu.addOpeningEventListeners(graphComponent, (location) => {
  // On "contextmenu" event, inform the input mode and check if the context menu may open now.
  if (graphEditorInputMode.contextMenuInputMode.shouldOpenMenu(graphComponent.toWorldFromPage(location))) {
    // Display the UI elements of the context menu at the given location.
    contextMenu.show(location)
  }
})

// Add a listener that closes the menu when the input mode requests it.
graphEditorInputMode.contextMenuInputMode.addCloseMenuListener(() => {
  contextMenu.close()
})

// If the context menu closes itself, for example because a menu item was clicked,
// we must inform the input mode to keep everything in sync.
contextMenu.onClosedCallback = () => {
  graphEditorInputMode.contextMenuInputMode.menuClosed()
}
// This code example uses the sample implementation from the Context Menu demo,
// but you can use any other context menu widget as well.
// See the Context Menu demo for more details about working with context menus.
const contextMenu = new ContextMenu(graphComponent)

// Register event listeners for the various "contextmenu" events of the application.
contextMenu.addOpeningEventListeners(graphComponent, (location) => {
  // On "contextmenu" event, inform the input mode and check if the context menu may open now.
  if (graphEditorInputMode.contextMenuInputMode.shouldOpenMenu(graphComponent.toWorldFromPage(location))) {
    // Display the UI elements of the context menu at the given location.
    contextMenu.show(location)
  }
})

// Add a listener that closes the menu when the input mode requests it.
graphEditorInputMode.contextMenuInputMode.addCloseMenuListener(() => {
  contextMenu.close()
})

// If the context menu closes itself, for example because a menu item was clicked,
// we must inform the input mode to keep everything in sync.
contextMenu.onClosedCallback = (): void => {
  graphEditorInputMode.contextMenuInputMode.menuClosed()
}

A context menu can be opened and populated in a handler for GraphEditorInputMode’s or GraphViewerInputMode’s PopulateItemContextMenu event. This event occurs after the user has requested a context menu, but before the menu is actually displayed. This allows you to create context menus that are, well, contextual to the item that has been right-clicked by appropriately populating the context menu with MenuItems:

// handle context menus only for nodes
graphEditorInputMode.contextMenuItems = GraphItemTypes.NODE
// register a listener for populating the menu
graphEditorInputMode.addPopulateItemContextMenuListener(populateItemContextMenuCallback)

Handler for populating a context menu

/**
 * @param {!GraphEditorInputMode} source
 * @param {!PopulateItemContextMenuEventArgs.<IModelItem>} args
 */
function populateItemContextMenuCallback(source, args) {
  if (args.item instanceof INode) {
    // create a menu item to delete the node
    graphComponent.graph.remove(args.item)
    // show the menu
    args.showMenu = true
    // and mark the event as handled
    args.handled = true
  }
}function populateItemContextMenuCallback(
  source: GraphEditorInputMode,
  args: PopulateItemContextMenuEventArgs<IModelItem>
): void {
  if (args.item instanceof INode) {
    // create a menu item to delete the node
    graphComponent.graph.remove(args.item)
    // show the menu
    args.showMenu = true
    // and mark the event as handled
    args.handled = true
  }
}

The contextMenuItems property on GraphEditorInputMode and GraphViewerInputMode controls for which items the context menu events trigger when clicked. A more specific distinction can be obtained by overriding shouldPopulateContextMenu.

The actual work is done by the ContextMenuInputMode which is a child input mode for both GraphEditorInputMode and GraphViewerInputMode.

Further customizations can be done on the ContextMenuInputMode. GraphEditorInputMode and GraphViewerInputMode trigger the PopulateItemContextMenu upon ContextMenuInputMode’s PopulateMenu event. You can override the actual dispatching method, onPopulateMenu for customizations.

validMenuLocationHitTestable: specifies the area in which a context menu can be requested.

Tooltips Drag and Drop