The contextmenu behaves differently on IE9/10 than on IE Edge.

A context menu only works once in IE9/10 when pressed on a node with contextmenu bound to it.
the standard "windows" context menu appears instead. And the contextmenu stays visible after selecting / not selecting an item in the context menu.

You can try by adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
or
<meta http-equiv="X-UA-Compatible" content="IE=edge">

in the head tag.

When one contextmenu stays active all other nodes with an contextmenu cannot be used anymore. And the only contextmenu which works on all nodes is the standard windows contextmenu.

See image below:

I used version 2.9.2

I cannot use IE=10 or edge in de meta http-equiv because there is an bug in IE10 when i use background-images as SVG's (in this case i use label text as svg background images. in base64.) they appear empty. (see browser bug issue in cytoscape ticket: #795 ). For newer browsers (IE Edge and chrome + FF) i'm using the foreignobject in the SVG background so that i can use html in the labels.

Hello, any idea why this could be happening? or maybe how to disable menu background rendering as a workaround?

I have cloned the repo (v2.6.1) and am testing the demo file in Chrome and Firefox on Mac. I see strange results:

• Menus defined on "core" are working fine: Hold the mouse down over the background, and a menu will pop up. Move the mouse over a menu item and release, and the appropriate message is logged to the console.
• Menus defined on nodes are not working: Hold the mouse down over a node, and a menu will pop up. Move the mouse over a menu item and release, and nothing will be logged to the console. However, if, after doing this, you drag the node from one point to another, the message from the menu selection will be logged to the console when you release the mouse button.

Reading the code, this behavior makes sense to me: the command's select property is called from a 'cxttapend tapend' event handler which is attached to the node selector... but tapend will only be triggered on a node if the mouse is released while over the node, right? So releasing the mouse over the menu, away from the node, will not trigger tapend?

Am I missing something here? (Thanks!)

I've included demo.html code in my project and I am trying to run this but I am not able to see any context menu around nodes.

My code is as below -

var defaults_contextmenu = {
menuRadius: 100, // the radius of the circular menu in pixels
selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
commands:[
{
content: '',
select: function(){
console.log( this.id() );
}
},
{
content: '',
select: function(){
console.log( this.data('name') );
}
},
{
content: 'Text',
select: function(){
console.log( this.position() );
}
}
],
fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
activeFillColor: 'rgba(92, 194, 237, 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
separatorWidth: 3, // the empty spacing in pixels between successive commands
spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight
maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight
itemColor: 'white', // the colour of text in the command's content
itemTextShadowColor: 'black', // the text shadow colour of the command's content
zIndex: 9999 // the z-index of the ui div
};
$('#cytoscapeweb').cytoscapeCxtmenu( defaults_contextmenu );

Thanks,
Pragyesh

A function passed to the commands option should be able to return a promise. The menu would appear once the promise is resolved. Currently (3.0) this is not supported.

My application needs to dynamically enable/disable certain commands based on the user's permission. The permission calculation involves asynchronism.

My application needs to open the menu programmatically. I do so by emitting a cxttapstart event:

node.emit('cxttapstart')

This works fine. The menu appears and behaves as expected.

Furthermore my application needs to open the menu at mouse position. So I set the atMouse option to true. But in this case opening the menu fails:

Uncaught TypeError: Cannot read property 'x' of undefined

This is because the extension's event handler expects the event's renderedPosition property to be initialized with the mouse coordinates.

rp = e.renderedPosition || e.cyRenderedPosition;
...
ctrx = rp.x;
ctry = rp.y;

But my application has no chance to set the renderedPosition property when emitting the cxttapstart event because Cytoscape's emit() function doen't allow to set event properties. (It only allows to pass further args to the handler, but this does not help here as the extension's event handler does not expect further args.)

How can I solve this problem?

(I definitely need a solution to this problem. An answer like "this is impossible with Cytoscape" or "your application shouldn't do this" would not be helpful.)

Hi,

Please advise on how to allow context menu for selected nodes only (by some custom param).

Thank you!

My code:

define(['jQuery','cytoscape', 'cytoscape-cxtmenu','bootstrap'], function($, cytoscape, cxtmenu ){ cxtmenu( cytoscape ); });

console:

Uncaught TypeError: cxtmenu is not a function

A beginner need help , thank you very much!

This would allow commands to have a different menu layout depending on the available commands. This also helps the user with understanding what's behind the action.

Hi,
I took your repository as is without any change and I can't get your demo working.
I saw previous issue for the demo and tried right-click too :-).
May be some versioning changes at cytoscape?

Thanks a lot in advance,
Vadim

Is there any selector with which I can add a context menu to the background?
It would be very useful for adding new nodes at right-clicked position and general commands like changing layout, saving/exporting the graph...

When using IE9 (actually IE10 in emulation mode with ) cxtmenu.js is complaining about Object expected.

this is because IE9 has (i guess) no support for:
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

So implement a polyfill for IE9.

requestAnimationFrame polyfill

given your demo.html I added classes to the nodes

elements: {
	nodes: [
		{ data: { id: 'j', name: 'Jerry' }, classes: 'jerry' },
		{ data: { id: 'e', name: 'Elaine' }, classes: 'elaine' },
		{ data: { id: 'k', name: 'Kramer' }, classes: 'kramer' },
		{ data: { id: 'g', name: 'George' }, classes: 'george' }

then I tried to get a ctx menu on only Jerry by id -- which works

cy.cxtmenu({
	selector: '#j',

then I tried to get a ctx menu on only Jerry by name -- which works

cy.cxtmenu({
	selector: '[name="Jerry"]',

then I tried to get a ctx menu on only Jerry by class -- which didn't work

cy.cxtmenu({
	selector: '.jerry',

-- what am I doing wrong? --

If the cytoscape container is offset by scrolling, the mouse position for the menu item selection is offset as well. If the page is not scrolled then the selection works as expected. I see this behaviour in Chrome 70.0.3538.110 and Firefox 62.0.3, but it behaves as expected in Safari 12.0.1. Here is a jsfiddle demonstrating the issue (assuming that the browser window is small enough): https://jsfiddle.net/3rfw1qja/7/. Triggering the context menu on the top node should work fine, but scrolling down to the bottom one and triggering the menu should demonstrate the issue.

Steps to reproduce

• Using a touch device or chrome debugger
• tap and hold to bring up menu
• release to select but it does not select

This works in 2.9.2 but not in 2.9.4. This behavior occurred in the chrome debugger with touch events and on my Android phone.

Hi folks. First of all, congrats for the functionality. Well, I'm trying to open a modal dialog with jquery.
This is my js code:

select: function (ele) {
                    $("#modal-content,#modal-background").toggleClass("active");
                }

And I have this html elements:

<div id="modal-background"></div>
<div id="modal-content">
    <button id="modal-close">Close Modal Window</button>
</div>

And my css:

#modal-background {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .50;
            -webkit-opacity: .5;
            -moz-opacity: .5;
            filter: alpha(opacity=50);
            z-index: 1001;
        }

        #modal-content {
            background-color: white;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            box-shadow: 0 0 20px 0 #222;
            -webkit-box-shadow: 0 0 20px 0 #222;
            -moz-box-shadow: 0 0 20px 0 #222;
            display: none;
            height: 240px;
            left: 50%;
            margin: -120px 0 0 -160px;
            padding: 10px;
            position: absolute;
            top: 50%;
            width: 320px;
            z-index: 1001;
        }

            #modal-background.active, #modal-content.active {
                display: block;
            }

After I choose an item from cxtmenu, the common right click from the browser appears to my (that one that shows "inspect, show source code, etc...", at the same time my dialog is shown.

What am I doing wrong? Thanks for the support!

2.1 will add support for cy positions in events

I use the context menu 2.1.0 in my cyto graph (unstable branch). I started using the new destroy function since I need to change the menu from time to time in my application. But when I do this, at some point I ended up with multiple context menu wrapper which causes the menu to look really weird. Not at each destroy call, so I'm not quite sure how this happens although I've been trying to figure out.

I do a destroy and then I create a new context menu with different commands and selector. Each create is paired with a destroy.

The only thing I could think of is that somehow the destroy is asynchrone so the new instance is sometime created before the destroy has completed. But looking at the destroy code, I couldn't see how this would be possible.

Any thougths?

It would be cool if you could create nested commands:

You have the normal, inner ring, which you define via

commands: [
{
...
},
{
...
},
]

and then you can specify inner commands within the command brackets, so when you click on such a command you open an outer ring with new commands (so the click on the inner ring command did nothing but open a new submenu in form of an outer ring).

Do you think this might be a neat feature?

I register the extension with:

cxtmenu(cytoscape)

But how to unregister?

Unregistering is needed in conjunction with Webpack's hot module replacement.

If not unregistered the extension might get registered again while development, causing this error:

Can not register `cxtmenu` for `core` since `cxtmenu` already exists in the prototype and can not be overridden

It would be nice if commands' existence and content could depend on the element you click, which would mean implementing the command's enabled and content attributes as functions of the element clicked.

Cheers for the good work!

PS: This could ideally also be the case for other menu parameters like activeFillColor or itemColor

I get TypeError: this.cy.ctxmenu is not a function when trying to add ctxmenu to cytoscape graph.

import * as cytoscape from 'cytoscape';
import * as ctxmenu from 'cytoscape-cxtmenu';

... removed for brevity ...
        this.cy = cytoscape({
            container: this.cytoscapeElem.nativeElement,
            elements: [
                { data: { id: 'a' } },
                { data: { id: 'b' } },
                { data: { id: 'ab', source: 'a', target: 'b' } }
            ],
            style: [
                {
                    selector: 'node',
                    style: {
                        'background-color': '#666',
                        'label': 'data(id)'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 3,
                        'line-color': '#ccc',
                        'target-arrow-color': '#ccc',
                        'target-arrow-shape': 'triangle'
                    }
                }
            ],
            layout: {
                name: 'cose'
            }         
        });
        
        let defaults = {
            menuRadius: 100, // the radius of the circular menu in pixels
            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
                },
                enabled: true // whether the command is selectable
              }
              */
            ], // function( ele ){ return [ /*...*/ ] }, // example function for 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
            separatorWidth: 3, // the empty spacing in pixels between successive commands
            spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
            minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight
            maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight
            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
        };

        this.cy.ctxmenu(defaults);

Hi, I am testing viewing cytoscapeJS network graphs on an Android tablet. I have also implemented the cytoscapeJS circular (radial) context menu.
The radial context menu shows up on a taphold gesture. However, it stays locked on the 1st menu item and does not allow me to select the other options in the menu. I can select my 1st menu item but not any of the rest. Does this work for anyone ?

Note: This is related to #16 and also to #2

I set openMenuEvents: 'cxttapstart taphold' and can now open the context menu with either the right or the left mouse button. However when opening it with the left mouse button, it takes longer to open and it doesn't execute any of the chosen functions.

I use cytoscape.js 2.7.16, cytoscape.js-cxtmenu 2.9.6 and Firefox 52.0.1.

Hi,
Is there any existing API documentation for the cxtmenu plugin that shows how to change its default css properties such as the size and type of the font for menuitem Text ?

Note: I read that it is possible to change font css for itemText by using the cxtmenu-content class but there are no available examples or ducmentation of the same.

This can be reproduced using the demo.html in version 2.1.0 of the contextual menu.

Steps:

1. Right-Click on a node so the menu shows
2. While still holding the right click, click on the node using a left click
3. Release the right click. Menu will stay displayed until you right click somewhere new (but it cannot be used anymore)

jQuery was used only for IE support. That's not so important now.

People who really want to support IE can stay on old versions.

This would be very nice to have, but it's difficult to find time to do this given everything planned for the main lib. If anyone is using this extension in their app who doesn't want to use jQuery, a pull request to remove jQuery from this extension would be greatly appreciated!

Useful for keeping menu item positions/angles consistent

Useful for cases like GeneMANIA

All document event handlers (eg: bootstrap data-toggle handlers) are removed after calling detroy() on the ctxmenu instance.

Commands with option enabled: false are still selectable -- in contrast to the README.

Surprisingly when using disabled: true it works as expected -- despite a disabled option is not mentioned in the README.

Observed with 3.0.0

Useful for memory w.r.t. listeners and DOM refs etc

The context menu is opened in an unusual location. This has been broken since Cytoscape version 2.5.1. See demo.html.

In some projects it might be preferred to only show the context menu on right click.

forgive me if this is already possible, but I haven't been able to find out how to create multiple sets of commands that get show based on different selectors. Presumably it'd be first match, or maybe merge when multiple selectors match. Let me know if this would be a good feature, I'll try to make time to implement this if it is. Would just manage multiple instances.

Hello!

The browser error occurs when I'm trying to open the context menu.

Here is an error stack trace:

Source:

const test = cy.elements('node[qq]')

cy.cxtmenu({
	openMenuEvents: 'cxttapstart',
	selector: test,
	commands: [
		{
			content: 'Add State',
			select: ({ position }) => {
				const pos = { ...position }
				pos.y = pos.y + 30
				newNode({ position: pos })
			}
		},
	]
})

This is the okay-version:

cy.cxtmenu({
	openMenuEvents: 'cxttapstart',
	selector: 'node[qq]',
	commands: [
		{
			content: 'Add State',
			select: ({ position }) => {
				const pos = { ...position }
				pos.y = pos.y + 30
				newNode({ position: pos })
			}
		},
	]
})

Hi .. Awesome plugin for cytoscope thanks !

I'm probably doing something wrong, but I'm finding when the menu opens over a node, the function I specify in the 'select' part of the config doesnt fire untill I click on another node, and the action is performed on the 'other' node not the original. Is this the intended behaviour or do I have a miss configuration?

This is my instantiation:

var cytoscape = require('cytoscape');
var jquery = require('jquery');
var cxtmenu = require('cytoscape-cxtmenu');

cxtmenu(cytoscape, jquery);

And this is my config:

// Add CXT Circular menu
      $scope.cy.cxtmenu({
        selector: 'node',
        fillColor: 'rgb(4, 77, 149)', // the background colour of the menu
        activeFillColor: 'rgb(0, 102, 204)', // the colour used to indicate the selected command
        openMenuEvents: 'cxttapstart taphold tap',
        commands: [
          {
            content: 'Create Card',
            select: function(ele){
              console.log( ele.id() );
            }
          },
          {
          content: '<span class="fa fa-star fa-2x"></span>',
            select: function(ele){
              console.log( ele.data('name') );
            }
          },
          {
            content: 'Remove',
            select: function(ele){
              console.log( ele.position() );
              $scope.cy.remove(ele);
              //$scope.cy.layout();
            }
          }
        ]
      });

With this example when I click on the 'Remove' section, nothing happens and then when I click on another node, the other node is removed from the graph and not the original.

Thanks once again !!!!

hello,
I want to achieve an effect,
click to open,click menu item to select ,
can you help me?

Apply user-select: none; to the style attribute of the div.

I have made a few changes to let menu stay open after user right-clicks on a node. However, selecting does not work. Current events are working only if user is hovering on a node.
I can see this is due to options.selector being set to 'node', is there a way to watch mousemove events on the cytoscape grid?

https://github.com/ersel/cytoscape.js-cxtmenu

You can set the selector as node and then select a node, menu opens fine. Then select a command. It does not trigger the command until you interact with the node again, either moving node or clicking the node.

the same is true for edge

This is not true when selector is equal to core

here is my sample code

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

I want the select function to trigger immediately after selecting an option in the menu

Hi,
I'm using cxtmenu and it works with right click in windows but doesn't work with touch-tap&hold in Windows or Android.

Any ideas?

After use Cytoscape-edgehandles.js，the command of Cytoscape-cxtmenu.js can't be selected.Why?

Repro(s):

git clone [email protected]:cytoscape/cytoscape.js-cxtmenu.git
cd cytoscape.js-cxtmenu
open demo.html (Mac open Chrome browser 35.0.1916.114)
tried right click, left click one of the nodes

Expect: Context menu with command options
Actual: Context menu quickly appear then disappear within microseconds.

Hi,
I am using the circular context menu in my cytoscapeJS code. However, on tablets, it is not allowing me to hold to get the menu to appear and then click a menu item using multi-finger gestures. Is there code for touch gestures in the cxtmenu that can be modified to enable this ?
Or do I have to modify my cytoscapeJS code to allow for this ?

Right-click selection only selects, but does not activate the command.

This can be reproduced using demo.html in version 2.9.4.

To provoke issue:

1. Right-Click on a node so that the menu shows
2. Select a command
3. Release the right-click. Command is not executed, and no console.log output is shown in the debug window.

When clicking on a node, and holding it down, the menu will be shown due to 'taphold'. Select a command and the command is activated and the output is shown.

Is it possible to configure the context menu to be rectangle instead of circular?