labels for cytoscape nodes
npm install cytoscape-node-html-labelcytoscape-node-html-label
================================================================================
This extension provides ability to add labels for Cytoscape nodes. Simple example:
cyInstance.nodeHtmlLabel( [{ tpl: d => '' + d + '' }] );
Demo: https://kaluginserg.github.io/cytoscape-node-html-label/
* Cytoscape.js ^3.0.0
Download the library:
* via npm: npm install cytoscape-node-html-label,
* via bower: bower install cytoscape-node-html-label, or
* via direct download from the repository (probably from a tag).
#### Plain HTML/JS has extension registered for you automatically:
``html`
#### RequireJs approach:
require() the library as appropriate for your project:
CommonJS:
`js`
var cytoscape = require('cytoscape');
var nodeHtmlLabel = require('cytoscape-node-html-label');
nodeHtmlLabel( cytoscape ); // register extension
AMD:
`js`
require(['cytoscape', 'cytoscape-node-html-label'], function( cytoscape, nodeHtmlLabel ){
nodeHtmlLabel( cytoscape ); // register extension
});
nodeHtmlLabel parameter is an array of options:
` To make links clickable inside your labels, you need to pass Code example: // set nodeHtmlLabel for your Cy instance ' + data.id + ' ' + data.name + ' ' + data.id + ' ' + data.name + ' Demo here: https://kaluginserg.github.io/cytoscape-node-html-label/ Then, for version update and publish:js
cyInstance.nodeHtmlLabel([
{
query: 'node', // cytoscape query selector
halign: 'center', // title vertical position. Can be 'left',''center, 'right'
valign: 'center', // title vertical position. Can be 'top',''center, 'bottom'
halignBox: 'center', // title vertical position. Can be 'left',''center, 'right'
valignBox: 'center', // title relative box vertical position. Can be 'top',''center, 'bottom'
cssClass: '', // any classes will be as attribute of container for every title
tpl(data) {
return '' + data + ''; // your html template here
}
}
]);
`enablePointerEvents: true as the 3rd argument to nodeHtmlLabel:`js`
cyInstance.nodeHtmlLabel([
{
...
}
], {
enablePointerEvents: true
});`Usage example
js`
// create Cy instance
var cyInstance = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'random'
},
elements: [ // your cy elements
{ group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
{ group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
{ group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
{ group: "nodes", data: { id: 'a5', name: 'a5' }, classes: 'l2' }
]
});
cyInstance.nodeHtmlLabel([{
query: '.l1',
valign: "top",
halign: "left",
valignBox: "top",
halignBox: "left",
tpl: function(data) {
return '
}
},
{
query: '.l2',
tpl: function(data) {
return '
}
}
]);npm startHow to build and develop:
1) Run npm run test
1) Create change in src/cytoscape-node-html-label.ts
1) When finished => npm run build
1) Prepare js and min files: git commit
1) gulp patch
1) Create new npm version: , gulp feature or gulp releasenpm publish`
1)