iVis-at-Bilkent/cytoscape.js-context-menus

Name: cytoscape.js-context-menus

Owner: iVis-at-Bilkent

Description: A Cytoscape.js extension to provide context menu around elements and core instance

Created: 2016-07-26 09:44:30.0

Updated: 2017-12-15 09:05:36.0

Pushed: 2017-11-28 12:21:49.0

Homepage:

Size: 66

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

cytoscape-context-menus

Description

A Cytoscape.js extension to provide context menu around elements and core instance distributed under The MIT License.

Demo

Click here (simple) or here (customized) or here (with different menu items) for demos

Dependencies

• Cytoscape.js ^{2.7.0 ||} 3.0.0
• jQuery ^{1.7.0 ||} 2.0.0 || ^3.0.0

Usage instructions

Download the library:

• via npm: npm install cytoscape-context-menus,
• via bower: bower install cytoscape-context-menus, or
• via direct download in the repository (probably from a tag).

require() the library as appropriate for your project:

CommonJS:

cytoscape = require('cytoscape');
jquery = require('jquery');
contextMenus = require('cytoscape-context-menus');

extMenus( cytoscape, jquery ); // register extension

AMD:

ire(['cytoscape', 'cytoscape-context-menus', 'jquery'], function( cytoscape, context-menus, jquery ){
ntext-menus( cytoscape, jquery ); // register extension

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

Default Options

options = {
// List of initial menu items
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
  },
  {
    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
]

API

instance = cy.contextMenus( options );

An instance has a number of functions available:

ance.isActive(); // Returns whether the extension is active.

ance.appendMenuItem(item); // Appends given menu item to the menu items list.

ance.appendMenuItems(items); // Appends menu items in the given list to the menu items list.

ance.removeMenuItem(itemID); // Removes the menu item with given ID.

ance.setTrailingDivider(itemID, status); // Sets whether the menuItem with given ID will have a following divider.

ance.insertBeforeMenuItem(item, existingItemID); // Inserts given item before the existingitem.

ance.moveBeforeOtherMenuItem(itemID, existingItemID); // Moves the item with given ID before the existingitem.

ance.disableMenuItem(itemID); // Disables the menu item with given ID.

ance.enableMenuItem(itemID); // Enables the menu item with given ID.

ance.showMenuItem(itemID); // Shows the menu item with given ID.

ance.hideMenuItem(itemID); // Hides the menu item with given ID.

ance.destroy(); // Destroys the extension instance

You can also get an existing instance:

ontextMenus('get');

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

1. Set the version number environment variable: export VERSION=1.2.3
2. Publish: gulp publish
3. If publishing to bower for the first time, you'll need to run bower register cytoscape-context-menus https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus.git

Team

• Metin Can Siper, Ugur Dogrusoz of i-Vis at Bilkent University