Always show overlay for edges in Cytoscape.js

Question

Is there a way to always show the edge line overlay in Cytoscape.js

The gif below show that the overlay is shown when the edge is active (after select or tap)

Here is the current styling I have :

var cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet()
        .selector('node')
        .css({
            'background-color': '#69B8B6',
            'border-color': '#AABFB8',
            'border-width': '2px',
            'width': '35px',
            'height': '35px',
            'content': 'data(name)',
            'font-size': '11px',
            'font-weight': 'bold',
            'color': '#337AB7'
        })
        .selector('edge')
        .css({
            'target-arrow-shape': 'triangle',
            'source-arrow-shape': 'circle',
            'curve-style': 'bezier',
            //'control-point-weight': 0.5,
            'content': 'data(name)',
            'font-size': '7px',
            'line-color': '#E4860D',
            'line-style': 'dotted',
            'overlay-color': '#c0c0c0',
            'overlay-padding': '50px',
            'overlay-opacity': 100
        })
        .selector('node:selected')
        .css({
            'background-color': '#E4860D'
        })
        .selector(':active')
        .css({
            'line-color': '#E4860D',
            'line-style': 'solid',
            'overlay-color': '#c0c0c0',
            //'overlay-padding': '100px',
            'overlay-opacity': 100
        }),
    layout: {
        name: 'grid',
        padding: 10
    },
    userZoomingEnabled: false,
    ready: function(){ console.log('ready') }
});

However this has no effect of the edge overlay for non active states.

You can see how the edge drawing works in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js — xmojmr, Jan 27 '15 at 07:59
Thank you for pointing me to this, as far as I can see I have to specify overlay colors right ? it seems like this overlay only appears when I select the edge. — Christophe Willemsen, Jan 27 '15 at 10:24
I don't know what would be the answer, neither how should the HTML5 canvas rendering code look like, neither what you really mean by the "shadow". I just know where to put the breakpoints. If you're looking for a way to specify edge's opacity and thickness then this question may be useful: http://stackoverflow.com/questions/27928151/increase-width-of-selected-edges-only-cytoscape-js — xmojmr, Jan 27 '15 at 11:24
Thanks for your answers. I edited the question and added an animated gif link to show the effect I desire. — Christophe Willemsen, Jan 27 '15 at 13:10

score 2 · Accepted Answer · answered Jan 30 '15 at 13:38

2

Just use the overlay-* properties with whatever selector you want in your stylesheet (probably just edge in your case).

answered Jan 30 '15 at 13:38

maxkfranz

11,896
1
27
36

1

I m failing to implant this.... can anyone give some fiddle. or example – Asad Ali Khan Apr 28 '18 at 07:22
I want to show overlay as long as a node is selected. I tried this "selector": "node:selected", "style": { "overlay-color": "red" } overlay disappears after "activity" is gone. My ultimate goal it to make an effect which does not affects the nodes' original properties like color, shape, size etc... like this https://pbs.twimg.com/media/DuY9pY4WsAULxyD.jpg:large – canbax Mar 19 '19 at 06:40
Don't skip properties if you're not sure what the default values are. In general, you should specify every property explicitly if it's important to your app, just as you would for css in the dom. – maxkfranz Mar 25 '19 at 15:21

Always show overlay for edges in Cytoscape.js

1 Answers1

Linked