cytoscape / cytoscape.js-cxtmenu Goto Github PK
View Code? Open in Web Editor NEWContext menu for Cytoscape.js
License: MIT License
Context menu for Cytoscape.js
License: MIT License
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!
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 ?
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
This can be reproduced using the demo.html in version 2.1.0 of the contextual menu.
Steps:
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
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.
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:
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.
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.
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.
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
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.
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
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
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.
All document event handlers (eg: bootstrap data-toggle handlers) are removed after calling detroy() on the ctxmenu instance.
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
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?
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.
Hello!
The browser error occurs when I'm trying to open the context menu.
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,
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?
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);
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.
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.
The context menu is opened in an unusual location. This has been broken since Cytoscape version 2.5.1. See demo.html.
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 !!!!
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.)
Useful for memory w.r.t. listeners and DOM refs etc
2.1 will add support for cy positions in events
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 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.
define(['jQuery','cytoscape', 'cytoscape-cxtmenu','bootstrap'], function($, cytoscape, cxtmenu ){ cxtmenu( cytoscape ); });
Uncaught TypeError: cxtmenu is not a function
A beginner need help , thank you very much!
Apply user-select: none;
to the style attribute of the div.
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...
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!
hello,
I want to achieve an effect,
click to open,click menu item to select ,
can you help me?
I have cloned the repo (v2.6.1) and am testing the demo file in Chrome and Firefox on Mac. I see strange results:
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!)
Is it possible to configure the context menu to be rectangle instead of circular?
After use Cytoscape-edgehandles.js,the command of Cytoscape-cxtmenu.js can't be selected.Why?
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.
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? --
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 ?
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.
In some projects it might be preferred to only show the context menu on right click.
Hi,
Please advise on how to allow context menu for selected nodes only (by some custom param).
Thank you!
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?
Useful for keeping menu item positions/angles consistent
Useful for cases like GeneMANIA
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.