applying specific css to added edges in cytoscape edgehandles

Question

I want to add specific CSS (for instance a specific line-color) to certain, but all, edges added with cytoscape.js-edgehandles.js.

I used to cy.edges(selector) command to apply a specific line-color (red) to the edges with source ('I'). But this only works for already existing edges, but not for added edges.

$('#cy').cytoscape({

ready: function(){

window.cy = this;

cy.edges("[source='I']").addClass('red');

},

elements: {
                    nodes: [
                        { data: { id: 'I', name: 'Irlande' } },
                        { data: { id: 'H', name: 'Pays-Bas' } },
                        { data: { id: 'F', name: 'France' } },
                        { data: { id: 'L', name: 'Luxembourg' } }
                    ],
                    edges: [

                        { data: { source: 'I', target: 'F' } },

                        { data: { source: 'I', target: 'H' } }
                        { data: { source: 'I', target: 'L' } },
                        { data: { source: 'H', target: 'I' } },
                        { data: { source: 'H', target: 'F' } },
                        { data: { source: 'F', target: 'I' } },
                        { data: { source: 'F', target: 'H' } },
                        { data: { source: 'F', target: 'L' } },
                        { data: { source: 'L', target: 'I' } }

                    ]

                },

});

This leads me to a couple of related questions:

Do the added edges merge with the existing edges? If the answer is 'no', how can I get them to merge with edges[]?

The relevant code in cytoscape.js-edgehandles.js is :

var edge = cy.add($.extend( true, { group: 'edges', data: { source: source.id(), target: target.id() } }, options().edgeParams(source, target, 0))).addClass(classes);

          added = added.add( edge );

          break;

        default:
          target.removeClass('edgehandles-target');
          break; // don't add anything
        }
      }

Thanks,

Umbolt

score 0 · Accepted Answer · answered Jan 12 '15 at 18:52

0

There are classes you can use in your stylesheet for this purpose. They will take on the style specified in the stylesheet, regardless of when they are created -- similar to CSS stylesheets in HTML.

answered Jan 12 '15 at 18:52

maxkfranz

11,896
1
27
36

Hi Max, thanks for your answer. I will try to use classes as you suggest. But at first sight they refer to nodes and not to edges. Am I wrong? As I wrote in my message, I tryed to apply a style to specific edges (with a specific source), but it only altered existing edges, and no added ones. – umbolt Jan 13 '15 at 07:52
And my other question: is the added edges data stored somewhere? In the elements.edges array? How can I have access to it so that I can add class and trigger events when they are created? – umbolt Jan 13 '15 at 08:01
I found a partial answer to my questions: added edges from a specific source may be styled in the style section using a specific selector : {selector: 'edge[source = "I"]', css: {'line-color': 'red',}}. this led me to the conclusion that the added edges do merge with existing edges. – umbolt Jan 20 '15 at 21:33

applying specific css to added edges in cytoscape edgehandles

1 Answers1