A Cytoscape.js extension to provide context menu around elements and core instance distributed under The MIT License.
Please cite the following paper when using this extension:
U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "Efficient methods and readily customizable libraries for managing complexity of large networks", PLoS ONE, 13(5): e0197238, 2018.
Here are demos: simple and customized, respectively:
Download the library:
npm install cytoscape-context-menus
,bower install cytoscape-context-menus
, orImport the library as appropriate for your project:
ES import:
Note: es import doesn't work for plain javascript applications because webpack doesn't support es module output at the moment.
import cytoscape from 'cytoscape';
import contextMenus from 'cytoscape-context-menus';
// register extension
cytoscape.use(contextMenus);
// import CSS as well
import 'cytoscape-context-menus/cytoscape-context-menus.css';
CommonJS:
var cytoscape = require('cytoscape');
var contextMenus = require('cytoscape-context-menus');
contextMenus(cytoscape); // register extension
AMD:
require(['cytoscape', 'cytoscape-context-menus'], function(cytoscape, contextMenus) {
contextMenus(cytoscape); // register extension
});
Plain HTML/JS has the extension registered for you automatically, because no require()
is needed.
var options = {
// Customize event to bring up the context menu
// Possible options https://js.cytoscape.org/#events/user-input-device-events
evtType: 'cxttap',
// List of initial menu items
// A menu item must have either onClickFunction or submenu or both
menuItems: [/*
{
id: 'remove', // ID of menu item
content: 'remove', // Display content of menu item
tooltipText: 'remove', // Tooltip text for menu item
image: {src : "remove.svg", width : 12, height : 12, x : 6, y : 4}, // menu icon
// Filters the elements to have this menu item on cxttap
// If the selector is not truthy no elements will have this menu item on cxttap
selector: 'node, edge',
onClickFunction: function () { // The function to be executed on click
console.log('remove element');
},
disabled: false, // Whether the item will be created as disabled
show: false, // Whether the item will be shown or not
hasTrailingDivider: true, // Whether the item will have a trailing divider
coreAsWell: false // Whether core instance have this item on cxttap
submenu: [] // Shows the listed menuItems as a submenu for this item. An item must have either submenu or onClickFunction or both.
},
{
id: 'hide',
content: 'hide',
tooltipText: 'hide',
selector: 'node, edge',
onClickFunction: function () {
console.log('hide element');
},
disabled: true
},
{
id: 'add-node',
content: 'add node',
tooltipText: 'add node',
image: {src : "add.svg", width : 12, height : 12, x : 6, y : 4},
selector: 'node',
coreAsWell: true,
onClickFunction: function () {
console.log('add node');
}
}*/
],
// css classes that menu items will have
menuItemClasses: [
// add class names to this list
],
// css classes that context menu will have
contextMenuClasses: [
// add class names to this list
],
// Indicates that the menu item has a submenu. If not provided default one will be used
submenuIndicator: { src: 'assets/submenu-indicator-default.svg', width: 12, height: 12 }
};
Note: selector
and coreAsWell
options are ignored for the items that are inside a submenu. Their visiblity depends on their root parent's visibility.
var instance = cy.contextMenus(options);
instance.isActive()
instance.appendMenuItem(item, parentID = undefined)
instance.appendMenuItems(items, parentID = undefined)
instance.removeMenuItem(itemID)
instance.setTrailingDivider(itemID, status)
instance.insertBeforeMenuItem(item, existingItemID)
instance.moveToSubmenu(itemID, options = null)
options
is a string
, then it is the id of the parentoptions
is a { selector?: string, coreAsWell?: boolean }
, then old properties are overwritten by them and the menu item is moved to the root. If it doesn't have either properties item is not moved.options
is null or not provided, then it is just moved to the root instance.moveBeforeOtherMenuItem(itemID, existingItemID)
item
before the existingItem
and moves it to the submenu that contains the existingItem
instance.disableMenuItem(itemID)
instance.enableMenuItem(itemID)
instance.showMenuItem(itemID)
instance.hideMenuItem(itemID)
instance.destroy()
instance.swapItems(x, y)
x
and y
are id of context menu items to be swappedinstance.getOptions()
cy.contextMenus('get')
npm run build
: Build ./src/**
into cytoscape-edge-editing.js
in production environment and minimize the file.npm run build:dev
: Build ./src/**
into cytoscape-edge-editing.js
in development environment without minimizing the file.This project is set up to automatically be published to npm and bower. To publish:
npm run build
git commit -am "Build for release"
npm version major|minor|patch
git push && git push --tags
npm publish .
bower register cytoscape-context-menus https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus.git