CODEWITHSUNDEEP
javascriptjqueryhtmlcytoscape.js
Nick
Nick

Reputation: 23

Cytoscape.js node/edge label editor on label tap/click

Is there any library that can provide edit capabilities on node/edge labels? I have searched all over npm and github and I haven't found anything useful. A library close to my needs is 'zngduong/cytoscape.js-edit-content' but it is not working properly. I implemented context menu and one of the options I created is to edit the element's label. I am having trouble in spawning an input tag on the element's position. Below is my current code using this library.

cy.cxtmenu({ selector: 'node, edge', commands: [ { content: '<span class="glyphicon glyphicon-pencil"></span>', select: function(ele) { var $input = '<input type="text" value="'+ ele.data('name') +'" size="20" style="z-index: 10000;"/>'; $('div#cy').append($input); } }, { content: '<span class="glyphicon glyphicon-remove"></span>', select: function(ele){ } }, { content: '<span class="glyphicon glyphicon-trash"></span>', select: function(ele){ ele.remove(); } } ] });

Upvotes: 2

Views: 1896

Answers (1)

maxkfranz
maxkfranz

Reputation: 12250

(1) You can't append anything to the Cytoscape div.

(2) You should be storing the label text in the element's data.

(3) You should be using the stylesheet to map a data field to the label (e.g. label: data(label)).

(4) By (3) and (4), setting node.data('label', newLabel) changes the label text. How you design your UI for this is open for you to decide. For example, you could show a text box in a qtip.

Upvotes: 3

Related Questions