Added Nodes Not Subject to Node-Event-Commands

73 views
Skip to first unread message

ds...@williams.edu

unread,
Aug 11, 2018, 12:08:14 AM8/11/18
to cytoscape-helpdesk
I've written a cytoscape.js program that loads a graph 'cy' with pre-existing nodes and edges.

Below my initialization of cy (its style, layout, elements, etc.) in the HTML document, I write a command allowing the user to create a new node by clicking an empty point on the viewport. I also programmed rules that alter existing nodes due to user-input events, like enlarging a node's border when the user mouses over or selects it.

This border-enlargement rule works for the nodes that were originally input in the html document, i.e. the borders of the pre-existing nodes enlarge when moused over or selected. But, after clicking an empty point on the viewport to add a new node, and then, in mousing over or selecting it, its border does not enlarge. Why is that?

For reference, below are the border-enlargement-on-mousing-over and the new-node-on-click sections of code, in that order.

cy.on("tap",(function(event){
if(event.target===cy){
var nodename = String(window.prompt("ID:", "nodename"));
cy.add([
{ group: "nodes", data: { id: nodename}, position: event.position}
]);
}
}));

cy.nodes().on("mouseover",function(event){
var targnode = event.target;
targnode.style('border-width', ((parseInt(targnode.style("border-width").replace(/px/,""))+1)+"px"));
});


Also, in case this is relevant, I run the layout (cy.layout(options.run()) and update the style (cy.style.update()) right before the closing script tag.

Christian Lopes

unread,
Aug 16, 2018, 12:36:50 PM8/16/18
to cytoscape-helpdesk
Hi,

Please ask Cytoscape.js questions on Stackoverflow: http://stackoverflow.com/questions/ask?tags=cytoscape.js
This board is not used or monitored for Cytoscape.js questions/help.  Additionally, Stackoverflow works much better with Google search.

Thanks!
Reply all
Reply to author
Forward
0 new messages