Cytoscape.js: how to change the node and edges styles when selecting them?

[roger.o...@irbbarcelona.org]

Hi all, 

I'm wondering how to change the node and edges styles when selecting them, i.e. while pressing the mouse over the node/edge, not after (see attached images). I guess that selection-box-color, selection-box-border-color and selection-box-border-width allow to change the styles. But how? I've tried to create a new selector called "core" and set these properites, as recomends the documentation, but it doesn't work: 

.selector('core')

.css({

'selection-box-color': 'black',

'selection-box-border-width': 'black',

'selection-box-border-width': 1

    }) 

I've also tried to set those properties inside the "node", "edge" and ":selected" selectors but neither works. 

Any idea? 

Thanks in advance! :-)

Roger Olivella

[roger.o...@irbbarcelona.org]

Sorry: 

'selection-box-color': 'black',

'selection-box-border-color': 'black',

'selection-box-border-width': 1

Instead of

'selection-box-color': 'black',

'selection-box-border-width': 'black',

'selection-box-border-width': 1

Still doesn't work. 

Roger

El dimarts 15 d’octubre de 2013 14:51:16 UTC+2, roger.o...@irbbarcelona.org va escriure:

[Max]

This is how it's set in the default stylesheet:

.selector("core") // just core properties

.css({

"selection-box-color": "#ddd",

"selection-box-opacity": 0.65,

"selection-box-border-color": "#aaa",

"selection-box-border-width": 1,

"panning-cursor": "grabbing",

"active-bg-color": "black",

"active-bg-opacity": 0.15,

"active-bg-size": isTouch ? 40 : 15

})

However, this is for the core (the graph, the set of nodes and edges in an instance, etc).

It seems you are describing the active state.  Just as in HTML+CSS, you use the :active selector to indicate state and then the properties to specify the details of the style, e.g.:

.selector(":active")

.css({

"overlay-color": "black",

"overlay-padding": 10,

"overlay-opacity": 0.25 // and others… if the dev wants

})

[Max]

NB: The core in the styles is for the viewport/background as described in the docs: http://cytoscape.github.io/cytoscape.js/#style

[roger.o...@irbbarcelona.org]

Thank you very much Max, using the active selector works smooth. :)

Roger

El dimarts 15 d’octubre de 2013 20:19:22 UTC+2, Max Franz va escriure: