cytoscape.js changing css on the fly

[Fabien Jourdan]

Hi,
In my code I am removing edges and then put them back.
Since I tuned up the css style of edges I would like, when I put edges back, to use my css style.
Problem, it is always the default style which is used...
Here is the idea:


var cssToKeep=e.css();
cy.remove(e);

...

cy.add(e);
edge.css(cssToKeep);

I looked at the bypass function on the github wiki but it seems to be not available.

Maby thanks for your help.

Fabien

[Max]

Have you checked the state of `cssToKeep` before you reapply?  There is no documentation in the wiki.  If you found anything there, it's very old and shouldn't be used. -Max

--
You received this message because you are subscribed to the Google Groups "cytoscapeweb-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscapeweb-dis...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Fabien Jourdan]

Hi Max,
Thanks for your quick answer.
I checked the content of cssToKeep and it was corresponding to the displayed css.
I finally found a way to go around this issue. I try to explain in the following code which works with cytoscape.js live example:

   window.cy = this;
    var j = cy.$('#j');
    j.css("color","black"); //modify the css of the node
    var cssOld=j.css();// get the css of the node to be applied to it when we put it back
    var k= cy.$('#k');
    k.css(cssOld);
    cy.remove(j);
    cy.add(j);
    j.css(cssOld);// apply the saved css

With the above code the node j is not black.

   window.cy = this;
    var j = cy.$('#j');
    j.css("color","black");
    var cssOld=j.css();
    var k= cy.$('#k');
    k.css(cssOld);
    cy.remove(j);
    cy.add(j);
    var j = cy.$('#j');
    j.css(cssOld);

Getting again the node and applying the modfied css works.

Maybe it is a javascript issue (I am new to it).
I hope it may help.

Cheers and thanks for developing Cytoscape.js
Fabien

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscapeweb-discuss+unsub...@googlegroups.com.

[Max Franz]

I've looked into this a bit more: Your issue is because you remove node `j` and then add it back rather than restoring it.  When you add back `j`, you're not really adding back that element object.  A new element is created based on the data inside the one you passed in.  This behaviour was implemented so elements could be added from one cy.js instance to another.  Instead of `cy.add(k)`, try `k.restore()`. -Max

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscapeweb-dis...@googlegroups.com.