How do I use the jquery.cxtmenu.js plugin packaged with cytoscape.js?

Question

Hi can someone please tell me how I am supposed to setup and use the jquery.cxtmenu that comes packaged with cytoscape.js? I can't seem to find any documentation on it.

I've included the script file but I am not sure how to initialise and setup my menu.

Update: I think there is a bug in the code? I'm not sure but it seems to be calling a function that doesn't exist on right mouse click.

 ele.renderedPosition()

Many thanks.

Answer 1

The plugins will be better documented with the next release when the documentation is improved and when the plugins are separated on the jQuery plugin system (they are jQuery plugins after all).

For now, here is an example for you:

$('#graph').cxtmenu({
  selector: 'node',
  commands: [
    {
      content: '<span class="icon-arrow-right"></span><label>Connect</label>',
      select: function(){
        $('#graph').cytoscapeEdgehandles('start', this.id());
      }
    },

    {
      content: '<span class="icon-remove destructive-light"></span><label class="">Delete</label>',
      select: function(){
        doc.removeEntity( this.id() );
      }
    }

  ]
});