cytoscape.js-layers icon indicating copy to clipboard operation
cytoscape.js-layers copied to clipboard

How to restyle with renderPerEdge

Open mttucl opened this issue 1 year ago • 4 comments

Hello,

How can I change the style after calling renderPerEdge? Example, changing the color between red and blue using two buttons. It seems to rerender additionally for each click if I call below code on button click.

layers.renderPerEdge(customLayer, (ctx, edge, path) => {
  ctx.strokeStyle = btnColor;
  ctx.stroke(path);
});

mttucl avatar Feb 04 '24 13:02 mttucl

the customLayer should have an update function that you can call to force a rerender.

Alternatively, you can customize using the third parameter which events should trigger a rerender.

sgratzl avatar Feb 05 '24 00:02 sgratzl

Sorry I'm not very good at this and not sure how to update with customLayer. What I did is assigning a variable to layers.renderPerEdge and then remove that variable renderedEdges.remove(). If it is an acceptable solution, please close this issue or let me know to close it.

mttucl avatar Feb 05 '24 21:02 mttucl

have you tried calling customLayer.update() to force a render update instead?

sgratzl avatar Feb 06 '24 14:02 sgratzl

Hi @sgratzl, I just tried and it works great. Is there any disadvantage of removing layers.renderPerEdge.

mttucl avatar Feb 06 '24 19:02 mttucl