cytoscape-canvas

Description

An extension to create a canvas over or under a Cytoscape graph. Useful for customizing nodes/edges, drawing backgrounds, etc.

Demo

Demo

Dependencies

• Cytoscape.js >=3.0.0

Example

var cytoscape = require('cytoscape');
var cyCanvas = require('cytoscape-canvas');
 
cyCanvas(cytoscape); // Register extension
 
var cy = cytoscape({/* ... */});
 
var layer = cy.cyCanvas();
var canvas = layer.getCanvas();
var ctx = canvas.getContext('2d');
 
cy.on("render cyCanvas.resize", function(evt) {
    layer.resetTransform(ctx);
    layer.clear(ctx);
 
    // Draw fixed elements
    ctx.fillRect(0, 0, 100, 100); // Top left corner
 
    layer.setTransform(ctx);
 
    // Draw model elements
    cy.nodes().forEach(function(node) {
        var pos = node.position();
        ctx.fillRect(pos.x, pos.y, 100, 100); // At node position
    });
});
 

Usage instructions

Download the library:

• via npm: npm install cytoscape-canvas,
• via bower: bower install cytoscape-canvas, 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 cyCanvas = require('cytoscape-canvas');
 
cyCanvas(cytoscape); // Register extension

AMD:

require(['cytoscape', 'cytoscape-canvas'], function(cytoscape, cyCanvas) {
  cyCanvas(cytoscape); // Register extension
});

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

Initialisation

var cy = cytoscape({/* ... */});
 
var layer = cy.cyCanvas({
  zIndex: 1,
  pixelRatio: "auto",
});

API

layer.getCanvas()

• return: Canvas The generated canvas

layer.setTransform(ctx)

Set the context transform to match Cystoscape's zoom & pan. Further drawing will be on model position.

• param: CanvasRenderingContext2D ctx

layer.resetTransform(ctx)

Reset the context transform. Further drawing will be on rendered position.

• param: CanvasRenderingContext2D ctx

layer.clear(ctx)

Clear the entire canvas.

• param: CanvasRenderingContext2D ctx

Events

cyCanvas.resize: When the extension's canvas is resized