Skip to content

jhonatandarosa/cytoscape.js-supportimages

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

cytoscape-supportimages

Description

A plugin that enables support images and videos on cytoscape.js. Supported video types are mp4, webm, and ogg. -- Demo

Available functionalities:

  • add image
  • remove image
  • list images
  • set image height and width
  • set image position
  • change drawing order
  • change visibility
  • change locking (can be selected or moved)
  • resize (shift pressed when resizing keeps the image center, ctrl pressed when resizing keeps the aspect ratio)

Dependencies

  • Cytoscape.js >= 2.3.8

Usage instructions

Download the library:

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

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var supportimages = require('cytoscape-supportimages');

supportimages( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-supportimages'], function( cytoscape, supportimages ){
  supportimages( cytoscape ); // register extension
});

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

API

// init/get the extension
var si = cy.supportimages();

// create rectangle object to set image position, width, and height
var bounds = si.rectangle({
	x: x,
	y: y,
	width: width,
	height: height,
});

// add a support image
si.addSupportImage({
	url: 'yourimageurl',
	name: 'yourimagename',
	bounds: bounds,
});

// list images
var imgs = si.images();

var myImg = imgs[0];

// set image locked
si.setImageLocked(myImg, true);

// set image visible
si.setImageVisible(myImg, false);

// move image up in the drawing order
si.moveImageUp(myImg);

// move image down in the drawing order
si.moveImageDown(myImg);

// remove image
si.removeSupportImage(myImg);

About

A plugin that enables support images on cytoscape.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published