### Publish to npm

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Publishes the extension to the npm registry, making it available for installation by other projects. Ensure you are in the correct directory.

```bash
npm publish .
```

--------------------------------

### Register cytoscape-cxtmenu Extension

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Register the extension with Cytoscape.js before use. This example shows registration for ES modules, CommonJS, and AMD environments.

```javascript
import cytoscape from 'cytoscape';
import cxtmenu from 'cytoscape-cxtmenu';

cytoscape.use(cxtmenu); // registers cy.cxtmenu()
```

```javascript
const cytoscape = require('cytoscape');
const cxtmenu = require('cytoscape-cxtmenu');

cytoscape.use(cxtmenu);
```

```javascript
require(['cytoscape', 'cytoscape-cxtmenu'], function(cytoscape, cxtmenu) {
  cxtmenu(cytoscape);
});
```

--------------------------------

### Initialize Cytoscape with Styles and Elements

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/demo-adaptative.html

Sets up the Cytoscape.js instance with basic node and edge styling, and defines the graph elements. This is boilerplate for Cytoscape.js.

```javascript
var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){ },
  style: [
    { selector: 'node', css: { 'content': 'data(name)' } },
    { selector: 'node[id="j"]', css: { 'width': 100, 'height': 100, } },
    { selector: 'node[id="e"]', css: { 'width': 150, 'height': 150, } },
    { selector: 'node[id="k"]', css: { 'width': 20, 'height': 20, } },
    { selector: 'edge', css: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'Non-adaptative spotlight medium node' } },
      { data: { id: 'e', name: 'Adaptative spotlight big node' } },
      { data: { id: 'k', name: 'Adaptative spotlight small node' } },
      { data: { id: 'g', name: 'Non-adaptative normal node' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  }
});
```

--------------------------------

### Initialize Cytoscape with Styles and Elements

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/pages/demo-adaptative.html

Sets up the Cytoscape.js graph with basic node and edge styling, and defines the graph elements. This is boilerplate for Cytoscape.js.

```javascript
window.addEventListener('DOMContentLoaded', function(){ var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){ },
  style: [
    { selector: 'node', css: { 'content': 'data(name)' } },
    { selector: 'node[id="j"]', css: { 'width': 100, 'height': 100, } },
    { selector: 'node[id="e"]', css: { 'width': 150, 'height': 150, } },
    { selector: 'node[id="k"]', css: { 'width': 20, 'height': 20, } },
    { selector: 'edge', css: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'Non-adaptative spotlight medium node' } },
      { data: { id: 'e', name: 'Adaptative spotlight big node' } },
      { data: { id: 'k', name: 'Adaptative spotlight small node' } },
      { data: { id: 'g', name: 'Non-adaptative normal node' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  }
});
```

--------------------------------

### Initialize Cytoscape.js and Add Context Menu

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/demo.html

Sets up a Cytoscape.js graph and attaches a context menu to nodes and edges. The menu includes commands for displaying node IDs, data, and positions. One command is initially disabled.

```javascript
window.addEventListener('DOMContentLoaded', function(){ var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){ },
  style: [
    { selector: 'node', css: { 'content': 'data(name)' } },
    { selector: 'edge', css: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  }
});
cy.cxtmenu({
  selector: 'node, edge',
  commands: [
    { content: '<span class="fa fa-flash fa-2x"></span>', select: function(ele){ console.log( ele.id() ); } },
    { content: '<span class="fa fa-star fa-2x"></span>', select: function(ele){ console.log( ele.data('name') ); }, enabled: false },
    { content: 'Text', select: function(ele){ console.log( ele.position() ); } }
  ]
});
cy.cxtmenu({
  selector: 'core',
  commands: [
    { content: 'bg1', select: function(){ console.log( 'bg1' ); } },
    { content: 'bg2', select: function(){ console.log( 'bg2' ); } }
  ]
});
});
```

--------------------------------

### Watch for changes and build

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Automatically rebuilds the extension when source files change. Requires an HTTP server to be running for live reloading.

```bash
npm run watch
```

--------------------------------

### cy.cxtmenu(options)

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Initializes a context menu for elements matched by the provided selector. It returns a menu instance with a `destroy()` method. Multiple independent menus can be created on the same graph.

```APIDOC
## cy.cxtmenu(options) — Initialize a context menu

Attaches a circular context menu to all elements matched by `options.selector`. Returns a menu instance with a `destroy()` method. Multiple independent menus can be created on the same graph (e.g., one for nodes, one for edges, one for the background).

### Parameters

- **options** (object) - Configuration options for the context menu.
  - **selector** (string) - Cytoscape selector that triggers the menu.
  - **menuRadius** (number | function) - Outer radius in px (node center → menu edge).
  - **fillColor** (string) - Background colour of the whole menu ring.
  - **activeFillColor** (string) - Highlight colour of the hovered wedge.
  - **activePadding** (number) - Extra px added to the active command slice.
  - **indicatorSize** (number) - px size of the pointer arrow toward the active command.
  - **separatorWidth** (number) - px gap between adjacent command slices.
  - **spotlightPadding** (number) - Extra px around the element inside the spotlight hole.
  - **minSpotlightRadius** (number) - Minimum spotlight hole radius in px.
  - **maxSpotlightRadius** (number) - Maximum spotlight hole radius in px.
  - **openMenuEvents** (string) - Space-separated events that open the menu.
  - **itemColor** (string) - Colour of command label text.
  - **itemTextShadowColor** (string) - Text-shadow colour for command labels.
  - **zIndex** (number) - CSS z-index of the menu container.
  - **atMouse** (boolean) - If true, center the menu at the mouse pointer instead of the element.
  - **outsideMenuCancel** (number | boolean) - Number of px past the menu ring that cancels the selection; false to disable.
  - **commands** (array | function) - An array of command objects or a function that returns an array of command objects.
    - **content** (string) - HTML or plain text label for the command.
    - **fillColor** (string, optional) - Optional per-item background color.
    - **contentStyle** (object, optional) - Optional inline CSS for the label cell.
    - **enabled** (boolean) - False or disabled:true disables the item.
    - **select** (function) - Called when the user releases on this item. Receives the target element and the event object.
    - **hover** (function, optional) - Called while the pointer enters this wedge. Receives the target element and the event object.

### Returns

- **object** - A menu instance with a `destroy()` method.
```

--------------------------------

### Initialize Cytoscape.js with cxtmenu

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Initializes Cytoscape.js and applies the cxtmenu extension with default options. Ensure the HTML DOM element container for Cytoscape.js is correctly referenced.

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

// the default values of each option are outlined below:
let defaults = {
  menuRadius: function(ele){ return 100; }, // the outer radius (node center to the end of the menu) in pixels. It is added to the rendered size of the node. Can either be a number or function as in the example.
  selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
  commands: [ // an array of commands to list in the menu or a function that returns the array
    /*
    { // example command
      fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
      content: 'a command name', // html/text content to be displayed in the menu
      contentStyle: {}, // css key:value pairs to set the command's css in js if you want
      select: function(ele){ // a function to execute when the command is selected
        console.log( ele.id() ) // `ele` holds the reference to the active element
      },
      hover: function(ele){ // a function to execute when the command is hovered
        console.log( ele.id() ) // `ele` holds the reference to the active element
      },
      enabled: true // whether the command is selectable
    }
    */
  ], // function( ele ){ return [ /*...*/ ] }, // a function that returns commands or a promise of commands
  fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
  activeFillColor: 'rgba(1, 105, 217, 0.75)', // the colour used to indicate the selected command
  activePadding: 20, // additional size in pixels for the active command
  indicatorSize: 24, // the size in pixels of the pointer to the active command, will default to the node size if the node size is smaller than the indicator size, 
  separatorWidth: 3, // the empty spacing in pixels between successive commands
  spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
  adaptativeNodeSpotlightRadius: false, // specify whether the spotlight radius should adapt to the node size
  minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
  maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
  openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here
  itemColor: 'white', // the colour of text in the command's content
  itemTextShadowColor: 'transparent', // the text shadow colour of the command's content
  zIndex: 9999, // the z-index of the ui div
  atMouse: false, // draw menu at mouse position
  outsideMenuCancel: false // if set to a number, this will cancel the command if the pointer is released outside of the spotlight, padded by the number given 
};

let menu = cy.cxtmenu( defaults );
```

--------------------------------

### Dynamic Commands with an Async Function (Promise)

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Illustrates how to use an asynchronous function (returning a Promise) for the `commands` option, enabling the menu to fetch command data from a server before displaying.

```APIDOC
## `commands` as an async / Promise-returning function

When command data must be fetched asynchronously (e.g., from a server), `commands` can return a Promise. The menu opens once the promise resolves.

### Example

```js
cy.cxtmenu({
  selector: 'node',
  commands: function(ele) {
    return fetch('/api/node-actions/' + ele.id())
      .then(res => res.json())
      .then(data => data.actions.map(action => ({
        content: action.label,
        enabled: action.available,
        select: function(node) {
          console.log('Action', action.id, 'on node', node.id());
        }
      })));
  }
});
```
```

--------------------------------

### Initialize Context Menu

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Initializes the context menu plugin on a Cytoscape.js instance. The `defaults` object shows all available options with their descriptions and default values.

```APIDOC
## Initialize Context Menu

### Description
Initializes the context menu plugin on a Cytoscape.js instance. The `defaults` object shows all available options with their descriptions and default values.

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

let defaults = {
  menuRadius: function(ele){ return 100; }, // the outer radius (node center to the end of the menu) in pixels. It is added to the rendered size of the node. Can either be a number or function as in the example.
  selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
  commands: [ // an array of commands to list in the menu or a function that returns the array
    /*
    {
      fillColor: 'rgba(200, 200, 200, 0.75)', // optional: custom background color for item
      content: 'a command name', // html/text content to be displayed in the menu
      contentStyle: {}, // css key:value pairs to set the command's css in js if you want
      select: function(ele){ // a function to execute when the command is selected
        console.log( ele.id() ) // `ele` holds the reference to the active element
      },
      hover: function(ele){ // a function to execute when the command is hovered
        console.log( ele.id() ) // `ele` holds the reference to the active element
      },
      enabled: true // whether the command is selectable
    }
    */
  ], // function( ele ){ return [ /*...*/ ] }, // a function that returns commands or a promise of commands
  fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
  activeFillColor: 'rgba(1, 105, 217, 0.75)', // the colour used to indicate the selected command
  activePadding: 20, // additional size in pixels for the active command
  indicatorSize: 24, // the size in pixels of the pointer to the active command, will default to the node size if the node size is smaller than the indicator size, 
  separatorWidth: 3, // the empty spacing in pixels between successive commands
  spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
  adaptativeNodeSpotlightRadius: false, // specify whether the spotlight radius should adapt to the node size
  minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
  maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
  openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here
  itemColor: 'white', // the colour of text in the command's content
  itemTextShadowColor: 'transparent', // the text shadow colour of the command's content
  zIndex: 9999, // the z-index of the ui div
  atMouse: false, // draw menu at mouse position
  outsideMenuCancel: false // if set to a number, this will cancel the command if the pointer is released outside of the spotlight, padded by the number given 
};

let menu = cy.cxtmenu( defaults );
```
```

--------------------------------

### Build for release

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Performs a production build of the extension, typically including minification and transpilation for wider compatibility.

```bash
npm run build:release
```

--------------------------------

### Dynamic Commands with a Synchronous Function

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Demonstrates how to use a synchronous function for the `commands` option to dynamically generate menu items based on the target element's properties.

```APIDOC
## `commands` as a synchronous function

Instead of a static array, `commands` can be a function that receives the target element and returns an array. This allows per-element dynamic menus.

### Example

```js
cy.cxtmenu({
  selector: 'node',
  commands: function(ele) {
    const cmds = [
      {
        content: 'Select',
        select: function(node) { node.select(); }
      }
    ];

    // Conditionally add a command based on element data
    if (ele.data('deletable') !== false) {
      cmds.push({
        content: 'Delete',
        fillColor: 'rgba(200, 0, 0, 0.75)',
        select: function(node) { cy.remove(node); }
      });
    }

    return cmds;
  }
});
```
```

--------------------------------

### Initialize Context Menu for Nodes and Edges

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Attaches a circular context menu to nodes and edges. Configure appearance, behavior, and commands. The `destroy()` method is available on the returned menu instance.

```javascript
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a', label: 'Node A' } },
    { data: { id: 'b', label: 'Node B' } },
    { data: { source: 'a', target: 'b' } }
  ],
  style: [{ selector: 'node', css: { content: 'data(label)' } }]
});

// Menu for nodes and edges
const nodeEdgeMenu = cy.cxtmenu({
  selector: 'node, edge',
  menuRadius: function(ele) {
    return ele.isNode() ? 100 : 80;
  },
  fillColor: 'rgba(0, 0, 0, 0.75)',
  activeFillColor: 'rgba(1, 105, 217, 0.75)',
  activePadding: 20,
  indicatorSize: 24,
  separatorWidth: 3,
  spotlightPadding: 4,
  minSpotlightRadius: 24,
  maxSpotlightRadius: 38,
  openMenuEvents: 'cxttapstart taphold',
  itemColor: 'white',
  itemTextShadowColor: 'transparent',
  zIndex: 9999,
  atMouse: false,
  outsideMenuCancel: false,

  commands: [
    {
      content: '<span class="fa fa-trash fa-2x"></span>',
      fillColor: 'rgba(200, 50, 50, 0.75)',
      contentStyle: { 'font-size': '12px' },
      enabled: true,
      select: function(ele, event) {
        cy.remove(ele);
        console.log('Removed:', ele.id());
      },
      hover: function(ele, event) {
        console.log('Hovering over:', ele.id());
      }
    },
    {
      content: 'Highlight',
      select: function(ele) {
        ele.style('background-color', 'yellow');
      }
    },
    {
      content: 'Info',
      select: function(ele) {
        alert('ID: ' + ele.id() + '\nDegree: ' + ele.degree());
      }
    }
  ]
});

// Returns: { destroy: Function }
console.log(typeof nodeEdgeMenu.destroy); // "function"
```

--------------------------------

### Initialize Cytoscape.js Graph and Add Context Menu

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/pages/index.html

Initializes a Cytoscape.js graph with basic node and edge styling and then attaches a context menu to nodes and edges. The context menu has three commands: one with a flash icon, one disabled star icon, and one with text. Each command has a select function that logs information to the console.

```javascript
window.addEventListener('DOMContentLoaded', function(){ var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){ },
  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  }
});

cy.cxtmenu({
  selector: 'node, edge',
  commands: [
    { content: '<span class="fa fa-flash fa-2x"></span>', select: function(ele){ console.log( ele.id() ); } },
    { content: '<span class="fa fa-star fa-2x"></span>', select: function(ele){ console.log( ele.data('name') ); }, enabled: false },
    { content: 'Text', select: function(ele){ console.log( ele.position() ); } }
  ]
});

cy.cxtmenu({
  selector: 'core',
  commands: [
    { content: 'bg1', select: function(){ console.log( 'bg1' ); } },
    { content: 'bg2', select: function(){ console.log( 'bg2' ); } }
  ]
});

});
```

--------------------------------

### HTMLElement as Command Content

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Demonstrates using actual DOM elements (HTMLElements) for command content, allowing for richer and more interactive command displays.

```APIDOC
## HTMLElement as Command Content

### Description
The `content` field of a command accepts either an HTML string or a real `HTMLElement`. Passing a live element enables richer widgets (SVG icons, interactive labels) and avoids XSS concerns from `innerHTML`.

### Method
`cy.cxtmenu(options)

### Parameters
#### Options
- **selector** (string) - Required - Selector for the elements to which the menu should be attached.
- **commands** (array) - Required - An array of command objects.
  - **content** (string | HTMLElement) - The text or HTML element to display for the command.
  - **select** (function) - The callback function to execute when the command is selected.

### Request Example
```js
function makeIcon(iconClass) {
  const span = document.createElement('span');
  span.className = 'fa ' + iconClass + ' fa-2x';
  return span;
}

cy.cxtmenu({
  selector: 'node',
  commands: [
    {
      content: makeIcon('fa-trash'),    // real DOM node — appended with appendChild
      select: function(ele) { cy.remove(ele); }
    },
    {
      content: makeIcon('fa-star'),
      select: function(ele) { ele.data('starred', true); }
    }
  ]
});
```
```

--------------------------------

### CSS Styling for Commands

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Explains how to style command labels using CSS classes `.cxtmenu-content` and `.cxtmenu-disabled`.

```APIDOC
## CSS Styling - `.cxtmenu-content` and `.cxtmenu-disabled`

### Description
Command labels are rendered as DOM elements with class `cxtmenu-content`. Disabled items additionally receive class `cxtmenu-disabled`. Both classes can be targeted with plain CSS.

### CSS Selectors
- **`.cxtmenu-content`**: Targets the text or icon inside every command slice.
- **`.cxtmenu-disabled`**: Targets disabled command items for visual styling.

### CSS Example
```css
/* Style the text/icon inside every command slice */
.cxtmenu-content {
  font-family: 'FontAwesome', sans-serif;
  font-size: 14px;
}

/* Visually dim disabled commands */
.cxtmenu-disabled {
  opacity: 0.333;
  pointer-events: none;
}
```

### JavaScript Example (Disabling a command)
```js
// Mark a command as disabled at definition time
cy.cxtmenu({
  selector: 'node',
  commands: [
    {
      content: '<span class="fa fa-lock fa-2x"></span>',
      enabled: false  // receives .cxtmenu-disabled; select callback is never fired
    },
    {
      content: 'Active',
      enabled: true,
      select: function(ele) { console.log(ele.id()); }
    }
  ]
});
```
```

--------------------------------

### Configure cxtmenu for Adaptative Spotlight Nodes

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/demo-adaptative.html

Configures the context menu for specific nodes with `adaptativeNodeSpotlightRadius: true`. This enables the adaptative spotlight effect, adjusting the spotlight radius based on node size.

```javascript
cy.cxtmenu({
  selector: 'node[id="e"], node[id="k"]',
  adaptativeNodeSpotlightRadius: true,
  commands: [
    { content: '<span class="fa fa-flash fa-2x"></span>', select: function(ele){ console.log( ele.id() ); } },
    { content: '<span class="fa fa-star fa-2x"></span>', select: function(ele){ console.log( ele.data('name') ); }, enabled: false },
    { content: 'Text', select: function(ele){ console.log( ele.position() ); } }
  ]
});
```

--------------------------------

### Development build with webpack dev server

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Builds the extension and enables live reloading using webpack dev server. This is intended for active development.

```bash
npm run dev
```

--------------------------------

### Dynamic Context Menu Commands with Async Function (Promise)

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Generates context menu commands dynamically using an asynchronous function that returns a Promise. Useful for fetching command data from an API before opening the menu.

```javascript
cy.cxtmenu({
  selector: 'node',
  commands: function(ele) {
    return fetch('/api/node-actions/' + ele.id())
      .then(res => res.json())
      .then(data => data.actions.map(action => ({
        content: action.label,
        enabled: action.available,
        select: function(node) {
          console.log('Action', action.id, 'on node', node.id());
        }
      })));
  }
});
```

--------------------------------

### Register with Bower

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Registers the project with Bower if it's the first time publishing to Bower. This command makes the package discoverable via Bower.

```bash
bower register cytoscape-cxtmenu https://github.com/cytoscape/cytoscape.js-cxtmenu.git
```

--------------------------------

### Build Cytoscape.js-cxtmenu

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Builds the extension from source files into a distributable JavaScript file. This is a standard build step for the project.

```bash
npm run build
```

--------------------------------

### Initialize Cytoscape.js and Add Context Menu

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/pages/demo.html

This snippet initializes a Cytoscape.js graph and configures a context menu for nodes and edges. The menu items have associated 'select' functions that log information to the console. One menu item is initially disabled.

```javascript
window.addEventListener('DOMContentLoaded', function(){ var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){ },
  style: [
    { selector: 'node', css: { 'content': 'data(name)' } },
    { selector: 'edge', css: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  }
});

cy.cxtmenu({
  selector: 'node, edge',
  commands: [
    { content: '<span class="fa fa-flash fa-2x"></span>', select: function(ele){ console.log( ele.id() ); } },
    { content: '<span class="fa fa-star fa-2x"></span>', select: function(ele){ console.log( ele.data('name') ); }, enabled: false },
    { content: 'Text', select: function(ele){ console.log( ele.position() ); } }
  ]
});

cy.cxtmenu({
  selector: 'core',
  commands: [
    { content: 'bg1', select: function(){ console.log( 'bg1' ); } },
    { content: 'bg2', select: function(){ console.log( 'bg2' ); } }
  ]
});
});
```

--------------------------------

### Dynamic Context Menu Commands with Synchronous Function

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Generates context menu commands dynamically for each element using a synchronous function. Allows conditional commands based on element properties.

```javascript
cy.cxtmenu({
  selector: 'node',
  commands: function(ele) {
    const cmds = [
      {
        content: 'Select',
        select: function(node) { node.select(); }
      }
    ];

    // Conditionally add a command based on element data
    if (ele.data('deletable') !== false) {
      cmds.push({
        content: 'Delete',
        fillColor: 'rgba(200, 0, 0, 0.75)',
        select: function(node) { cy.remove(node); }
      });
    }

    return cmds;
  }
});
```

--------------------------------

### Configure Multiple Context Menus

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Define separate context menus for nodes, edges, and the graph background using distinct selectors. The order of registration matters if an element matches multiple selectors, as the first registered menu will be used.

```javascript
// Node-specific menu
cy.cxtmenu({
  selector: 'node',
  menuRadius: 100,
  commands: [
    { content: 'Delete Node', select: function(n) { cy.remove(n); } },
    { content: 'Expand',      select: function(n) { loadNeighbours(n); } }
  ]
});

// Edge-specific menu
cy.cxtmenu({
  selector: 'edge',
  menuRadius: 80,
  commands: [
    { content: 'Delete Edge', select: function(e) { cy.remove(e); } },
    { content: 'Reverse',     select: function(e) {
        const src = e.data('source'), tgt = e.data('target');
        cy.remove(e);
        cy.add({ data: { source: tgt, target: src } });
    }}
  ]
});

// Background menu
cy.cxtmenu({
  selector: 'core',
  commands: [
    { content: 'Add Node', select: function(ele, evt) {
        cy.add({ data: { id: 'n' + cy.nodes().length }, position: evt.position });
    }},
    { content: 'Fit',      select: function() { cy.fit(); } }
  ]
});
```

--------------------------------

### Run Mocha tests

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Executes the test suite using Mocha. This command is part of the development and build process.

```bash
npm run test
```

--------------------------------

### Bump version and tag

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Increments the project's version number (major, minor, or patch) and creates a corresponding Git tag. This is a crucial step before publishing.

```bash
npm version major|minor|patch
```

--------------------------------

### ES Import and Registration

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Import Cytoscape.js and the cxtmenu extension, then register the extension with Cytoscape.js. This is the standard method for ES module projects.

```javascript
import cytoscape from 'cytoscape';
import cxtmenu from 'cytoscape-cxtmenu';

cytoscape.use( cxtmenu );
```

--------------------------------

### AMD Require and Registration

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Use AMD's require function to load Cytoscape.js and the cxtmenu extension, then register the extension. Suitable for projects using AMD module loading.

```javascript
require(['cytoscape', 'cytoscape-cxtmenu'], function( cytoscape, cxtmenu ){
  cxtmenu( cytoscape ); // register extension
});
```

--------------------------------

### Attach Context Menu to Core (Background)

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Use `selector: 'core'` to attach a context menu that appears when the user right-clicks on the empty canvas background. The `event.position` object provides the graph coordinates of the click.

```js
cy.cxtmenu({
  selector: 'core',
  commands: [
    {
      content: 'Add Node',
      select: function(ele, event) {
        // event.position holds the graph coordinates of the click
        cy.add({ data: { id: 'new-' + Date.now() }, position: event.position });
      }
    },
    {
      content: 'Fit Graph',
      select: function() {
        cy.fit();
      }
    },
    {
      content: 'Reset Zoom',
      select: function() {
        cy.zoom(1);
        cy.center();
      }
    }
  ]
});
```

--------------------------------

### Configure cxtmenu for Core (Background)

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/demo-adaptative.html

Configures the context menu for the core (background) of the Cytoscape graph. This menu appears when clicking on the background.

```javascript
cy.cxtmenu({
  selector: 'core',
  commands: [
    { content: 'bg1', select: function(){ console.log( 'bg1' ); } },
    { content: 'bg2', select: function(){ console.log( 'bg2' ); } }
  ]
});
```

--------------------------------

### Destroy cxtmenu instance

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Demonstrates how to destroy an initialized cxtmenu instance using its API. This is useful for cleaning up resources when the menu is no longer needed.

```javascript
let menu = cy.cxtmenu( someOptions );

menu.destroy();
```

--------------------------------

### Configure cxtmenu for Non-Adaptative Spotlight Nodes/Edges

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/demo-adaptative.html

Configures the context menu for specific nodes and edges with `adaptativeNodeSpotlightRadius: false`. This disables the adaptative spotlight effect for these elements.

```javascript
cy.cxtmenu({
  selector: 'node[id="j"], node[id="g"], edge',
  adaptativeNodeSpotlightRadius: false,
  commands: [
    { content: '<span class="fa fa-flash fa-2x"></span>', select: function(ele){ console.log( ele.id() ); } },
    { content: '<span class="fa fa-star fa-2x"></span>', select: function(ele){ console.log( ele.data('name') ); }, enabled: false },
    { content: 'Text', select: function(ele){ console.log( ele.position() ); } }
  ]
});
```

--------------------------------

### Push to origin and tags

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Pushes the latest commits and tags to the remote repository. This synchronizes local changes with the remote.

```bash
git push && git push --tags
```

--------------------------------

### Node and Edge Context Menu with Outside Cancel

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/pages/demo-cancel-outside.html

Configures a context menu for nodes and edges. The menu will be cancelled if the click occurs more than 10 pixels away from the menu. The `enabled: false` property is also demonstrated.

```javascript
window.addEventListener('DOMContentLoaded', function(){ var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  ready: function(){

  },
  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'Jerry' } },
      { data: { id: 'e', name: 'Elaine' } },
      { data: { id: 'k', name: 'Kramer' } },
      { data: { id: 'g', name: 'George' } }
    ],
    edges: [
      { data: { source: 'j', target: 'e' } },
      { data: { source: 'j', target: 'k' } },
      { data: { source: 'j', target: 'g' } },
      { data: { source: 'e', target: 'j' } },
      { data: { source: 'e', target: 'k' } },
      { data: { source: 'k', target: 'j' } },
      { data: { source: 'k', target: 'e' } },
      { data: { source: 'k', target: 'g' } },
      { data: { source: 'g', target: 'j' } }
    ]
  }
});

cy.cxtmenu({
  selector: 'node, edge',
  outsideMenuCancel: 10,
  commands: [
    { content: '<span class="fa fa-flash fa-2x"></span>', select: function(ele){ console.log( ele.id() ); } },
    { content: '<span class="fa fa-star fa-2x"></span>', select: function(ele){ console.log( ele.data('name') ); }, enabled: false },
    { content: 'Text', select: function(ele){ console.log( ele.position() ); } }
  ]
});
```

--------------------------------

### Adaptive Spotlight Radius

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Configures the spotlight radius for context menus attached to nodes. When `adaptativeNodeSpotlightRadius` is true, the spotlight size adjusts to the node's rendered size.

```APIDOC
## cy.cxtmenu() - Adaptive Spotlight Radius

### Description
By default the spotlight hole that reveals the element underneath uses a radius clamped between `minSpotlightRadius` and `maxSpotlightRadius`. Setting `adaptativeNodeSpotlightRadius: true` makes the hole grow proportionally with the rendered node size, ensuring the spotlight always fits the node exactly — useful when nodes have variable sizes.

### Method
`cy.cxtmenu(options)

### Parameters
#### Options
- **selector** (string) - Required - Selector for the elements to which the menu should be attached.
- **adaptativeNodeSpotlightRadius** (boolean) - Optional - If true, the spotlight radius adapts to the node's rendered size.
- **minSpotlightRadius** (number) - Optional - The minimum spotlight radius (used when `adaptativeNodeSpotlightRadius` is false).
- **maxSpotlightRadius** (number) - Optional - The maximum spotlight radius (used when `adaptativeNodeSpotlightRadius` is false).
- **commands** (array) - Required - An array of command objects.

### Request Example
```js
// Fixed spotlight for all nodes (default behaviour)
cy.cxtmenu({
  selector: 'node.small',
  adaptativeNodeSpotlightRadius: false,
  minSpotlightRadius: 24,
  maxSpotlightRadius: 38,
  commands: [{ content: 'Action', select: function(ele) { console.log(ele.id()); } }]
});

// Spotlight that tracks each node's actual rendered size
cy.cxtmenu({
  selector: 'node.large',
  adaptativeNodeSpotlightRadius: true, // spotlight radius = renderedOuterWidth / 2
  commands: [{ content: 'Action', select: function(ele) { console.log(ele.id()); } }]
});
```
```

--------------------------------

### Commit build for release

Source: https://github.com/cytoscape/cytoscape.js-cxtmenu/blob/master/README.md

Commits the built files to version control as part of the release process. This should be done after building for release.

```bash
git commit -am "Build for release"
```

--------------------------------

### CSS Styling for Context Menu Commands

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Style command labels using the `.cxtmenu-content` class and disabled items with `.cxtmenu-disabled`. These classes can be targeted with plain CSS to customize appearance, such as font and opacity.

```css
/* Style the text/icon inside every command slice */
.cxtmenu-content {
  font-family: 'FontAwesome', sans-serif;
  font-size: 14px;
}

/* Visually dim disabled commands */
.cxtmenu-disabled {
  opacity: 0.333;
  pointer-events: none;
}
```

--------------------------------

### Adaptive Spotlight Radius Configuration

Source: https://context7.com/cytoscape/cytoscape.js-cxtmenu/llms.txt

Configure the spotlight radius behavior for context menus attached to nodes. `adaptativeNodeSpotlightRadius: true` makes the spotlight hole grow proportionally with the rendered node size, ensuring it always fits the node exactly. Set to `false` for a fixed spotlight radius clamped between `minSpotlightRadius` and `maxSpotlightRadius`.

```js
// Fixed spotlight for all nodes (default behaviour)
cy.cxtmenu({
  selector: 'node.small',
  adaptativeNodeSpotlightRadius: false,
  minSpotlightRadius: 24,
  maxSpotlightRadius: 38,
  commands: [{ content: 'Action', select: function(ele) { console.log(ele.id()); } }]
});

// Spotlight that tracks each node's actual rendered size
cy.cxtmenu({
  selector: 'node.large',
  adaptativeNodeSpotlightRadius: true, // spotlight radius = renderedOuterWidth / 2
  commands: [{ content: 'Action', select: function(ele) { console.log(ele.id()); } }]
});
```