Cytoscape js create custom renderer (renderer extension)

Question

Please can anyone help me with creation of a renderer extension for cytoscape js lib.

Here is how it is working now:

let CanvasRenderer = cytoscape('renderer', 'canvas');

CanvasRenderer.prototype.drawPolygonPath = function(context, x, y, width, height, points) {
  // my implementation goes here
}

As it says on cytoscape site it is an extensible library! As i'm using typescript in my project i want something like this:

class MyRenderer {

    constructor() {
        
    }
}

cytoscape('renderer', 'myRenderer', MyRenderer);

This code obviously throws cytoscape error that says that i have not implemented some methods...

Then i found an extension cytoscape-css-renderer and it did not work with my version of cytoscape (i'm using 2.7.13) I've also tried to solve this problem similar to the cytoscape-css-renderer:

let CanvasRenderer = cytoscape('renderer', 'canvas');

class MyRenderer {

    constructor(options) {
        CanvasRenderer.call(options);
    }

}

MyRenderer.prototype = Object.create(CanvasRenderer.prototype);
MyRenderer.prototype.constructor = MyRenderer;
$.extend(PricingRenderer, CanvasRenderer);

cytoscape('renderer', 'myRenderer', MyRenderer);

but it throws this error:

Can not register myRenderer for renderer since clientFunctions already exists in the prototype and can not be overridden

So can someone help me with this... Thank you!

Can you please tell me how to call drawPolygonpath from cytoscape canvas? any demo? — Sowmya, May 28 '18 at 11:30

score 1 · Answer 1 · answered Mar 27 '17 at 16:44

1

Use the canvas renderer as an example: https://github.com/cytoscape/cytoscape.js/tree/master/src/extensions/renderer/canvas

answered Mar 27 '17 at 16:44

maxkfranz

11,896
1
27
36

Cytoscape js create custom renderer (renderer extension)

1 Answers1