Custom node renderer for Cytoscape + restrict drag points

Question

I am working on a web-based graph visualization/manipulation tool and I am evaluating a bunch of JS libraries including Cytoscape.js, jsPlumb, visjs for this purpose. Some of the high-level requirements include:

• Ability to display a graph of nodes based on JSON data (supported by Cytoscape.js out-of-the-box).

• Support creation of new nodes by dragging from a pallette outside the canvas and dropping it on the canvas (Cytoscape-node-add somewhat supports this use-case)

• Ability to connect nodes by clicking on specific points in source node and dragging a connection to a specific point on a target node. (mostly supported using the extensions Edge-Editation and Edge-handles)

• A good 'event' system for letting the enclosing system know when interesting things happen (e.g. a new node was created/dropped, user has selecting a node, user has moved nodes etc)

I really like what I read in the Cytoscape documentation and the demos convey that this is a pretty robust library. However, I have the following questions:

• Is it possible to provide a HTML snippet to be rendered for each node? For e.g depending on the 'type' attribute of each node (specified in json) I would like to display an image, show some text etc, on each node. The documentation mentions background-image for a node, but that's not exactly what I am looking for.

• Is it possible to restrict the points on a node that a user can start dragging from, to connect different nodes? I realize the Edge-Editation extension already provides some support, but using it, the user can start dragging from any point on the node. Also, after connecting two nodes, the edges move around the borders of the node if a user drags a node around the canvas. I would like to restrict this behavior so that the edge is always attached to the same point on the source/target node.

Given the specific requirements, I am guessing that I have to write my own Cytoscape extensions to do these things. But I wanted to know if there was something that I could re-use or re-purpose.

This is a rough sketch of what I want to achive.

Any help with these would be really appreciated.

Thanks

Ruella

Answer 1

(1) You can't render HTML in canvases, but Cytoscape does have support for SVG background images on nodes. So you can put whatever content you want to draw on nodes that way.

(2) You can make a PR on one of the edge editing extensions if you want to have more control over the handle placement. They already have some customisability in that regard, but it sounds like you want a bit more.

Burnham