Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sizing Node Relative to Label in cytoscape

Tags:

cytoscape.js

So I'm aware you can use a function to compute a css property in Cytoscape.js e.g.

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': function(ele) {
        return 12;
    })

I'm also aware of the special value 'label' that can be the value of the property e.g.

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': 'label'
    })

What I'm wondering is is there any particular property I could use to scale the label by some factor, e.g. what I want is something like

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': function(ele) {
        return labelWidth * 1.5; //Where to get labelWidth from
    })

Specially I want the ability to be able to calculate the height and width of an ellipse so that the label is completely contained within the ellipse (which can be computed using some math e.g. Ellipse bounding a rectangle).

But I haven't been able to find a way to get the labelWidth. I did manage to do it using rscratch but only if the node actually got rendered twice (e.g. multiple .selectors), any proper way to get the label width and height from a given element (or at least a way to calculate how it'll be rendered?).

like image 668
Jamesernator Avatar asked Nov 08 '22 17:11

Jamesernator


1 Answers

If you want to do more sophisticated sizing, your calculations are going to have to be more sophisticated.

Options :

(1) Calculate the dimensions of the text yourself using a div.

(2) Use the auto sizing, and then adjust the size based on the current size.

(1) is cleaner than (2).

It doesn't make sense for Cytoscape.js to expose rendered calculated values for you in the stylesheet. Those values are calculated from the stylesheet, creating a dependency cycle.

like image 80
maxkfranz Avatar answered Jan 04 '23 02:01

maxkfranz