cytoscape-cxtmenu

Initialize the plugin by calling .cxtmenu(options) on your Cytoscape instance. The menu is initialized on the same HTML DOM element container used for Cytoscape.js.

Configuration Options

Command Object Structure

Each object in the commands array can contain:

• content: (string/HTML) Text/content displayed in the menu.
• fillColor: (string) Custom background color for the item.
• contentStyle: (Object) CSS key:value pairs for the command's CSS.
• select: (function(ele)) Executed when the command is selected. ele is the active element.
• hover: (function(ele)) Executed when the command is hovered. ele is the active element.
• enabled: (boolean) Whether the command is selectable.

let cy = cytoscape({
	container: document.getElementById('cy'),
	/* ... */
});

let menu = cy.cxtmenu({
  selector: 'node',
  commands: [
    {
      content: 'Delete Node',
      select: function(ele){ 
        ele.remove();
      }
    }
  ]
});

When initializing the cytoscape-cxtmenu extension, you can provide a configuration object to customize the menu's appearance, behavior, and commands.

Menu Appearance

• fillColor: The background color of the menu (e.g., 'rgba(0, 0, 0, 0.75)').
• activeFillColor: The color used to indicate the currently selected command.
• activePadding: Additional size in pixels for the active command.
• itemColor: The color of the text in the command's content.
• itemTextShadowColor: The text shadow color of the command's content.
• zIndex: The z-index of the UI div.
• menuRadius: A function function(ele){ ... } that returns the radius of the circular menu in pixels.
• separatorWidth: The empty spacing in pixels between successive commands.

Spotlight and Interaction

• indicatorSize: The size in pixels of the pointer to the active command. Defaults to the node size if the node size is smaller than this value.
• spotlightPadding: Extra spacing in pixels between the element and the spotlight.
• adaptativeNodeSpotlightRadius: Boolean. If true, the spotlight radius adapts to the node size.
• minSpotlightRadius: The minimum radius in pixels of the spotlight (used for edges/background or when adaptativeNodeSpotlightRadius is enabled).
• maxSpotlightRadius: The maximum radius in pixels of the spotlight (used for edges/background or when adaptativeNodeSpotlightRadius is enabled).
• atMouse: Boolean. If true, the menu is drawn at the mouse position.
• outsideMenuCancel: If set to a number, the command is cancelled if the pointer is released outside of the spotlight, padded by this number.

Triggering and Selection

• selector: A Cytoscape.js selector string. Elements matching this selector will trigger the context menu (default: 'node').
• openMenuEvents: A space-separated string of Cytoscape.js events that will open the menu. Only cxttapstart and/or taphold are supported.
• commands: An array of command objects or a function function(ele){ ... } that returns an array of command objects.

The cxtmenu configuration object allows you to customize the appearance, behavior, and commands of the radial context menu. You can provide a static array of commands or a function that dynamically generates commands based on the target element.

Command Object Structure

Each command in the commands array can contain:

• content: HTML string or HTMLElement to display in the menu.
• fillColor: (Optional) Custom background color for the specific menu item.
• contentStyle: (Optional) CSS key-value pairs to apply to the command's content.
• hover: A function called when the command is hovered. Receives (ele, gestureStartEvent).
• select: A function called when the command is selected. Receives (ele, gestureStartEvent).
• enabled: Boolean indicating if the command is selectable (defaults to true).

Configuration Options

const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [ /* ... */ ],
  cxtmenu: {
    selector: 'node',
    commands: (ele) => [
      {
        content: 'Delete',
        select: (e) => e.remove(),
        fillColor: 'rgba(255, 0, 0, 0.75)'
      },
      {
        content: '<b>Bold</b>',
        contentStyle: { fontWeight: 'bold' }
      }
    ]
  }
});

The commands option defines the items available in the context menu. You can provide a static array of command objects or a function that receives the active element (ele) and returns an array of commands, allowing for dynamic menus based on the selected element.

Each command object can contain:

• content: The HTML or text content to be displayed in the menu.
• fillColor: (Optional) Custom background color for the specific menu item.
• contentStyle: (Optional) CSS key:value pairs to set the command's CSS via JavaScript.
• hover: A function function(ele){ ... } executed when the command is hovered. ele is the reference to the active element.
• select: A function function(ele){ ... } executed when the command is selected. ele is the reference to the active element.
• enabled: Boolean. Whether the command is selectable (default: true).

commands: [
  {
    content: 'a command name',
    fillColor: 'rgba(200, 200, 200, 0.75)',
    contentStyle: { fontWeight: 'bold' },
    hover: function(ele) {
      console.log('Hovering:', ele.id());
    },
    select: function(ele) {
      console.log('Selected:', ele.id());
    },
    enabled: true
  }
]