ds...@williams.edu
unread,Aug 11, 2018, 12:08:14 AM8/11/18Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
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.