Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display edges underneath nodes when batch edge rendering is on #241

Closed
ssidorchik opened this issue Apr 7, 2014 · 2 comments
Closed

Display edges underneath nodes when batch edge rendering is on #241

ssidorchik opened this issue Apr 7, 2014 · 2 comments
Labels
bug

Comments

@ssidorchik
Copy link
Contributor

When batch rendering is on the canvas renderer draws edges over nodes. This issue looks like similar with #220, but happens on canvas. Here is code to reproduce it:

<!doctype html>
<html>
    <head>
        <style>
            #graph {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
    </head>

    <body>
        <div id="graph"></div>

        <script src="sigma.js"></script>
        <script>
            var s = new sigma({
                renderers: [{
                    container: document.getElementById('graph'),
                    type: 'canvas'
                }]
            });

            for (var i = 0; i < 100; i++) {
                s.graph.addNode({
                    id: '' + i,
                    x: (Math.random() * 100).toFixed(),
                    y: (Math.random() * 100).toFixed(),
                    size: 1
                });
            }

            for (var i = 0; i < 100; i++) {
                for (var j = i + 1; j < 100; j++) {
                    s.graph.addEdge({
                        id: '' + i + j,
                        source: s.graph.nodes('' + i).id,
                        target: s.graph.nodes('' + j).id
                    });
                }
            }

            s.settings({
                hidEedgesOnMove: true,
                batchEdgesDrawing: true,
                defaultNodeColor: '#000000',
                defaultEdgeColor: '#7DE7C2',
                edgeColor: 'default'
            });

            s.refresh();
        </script>
</body>
</html>
@jacomyal jacomyal added the bug label Apr 10, 2014
@jacomyal
Copy link
Owner

I wanted to improve the performances of the canvas renderer, so I modified it such that, if the batchEdgesDrawing setting is falsy, nodes and edges are drawn on the same canvas. It uses two different canvases only if the edges are drawn by batches. Also, this distinction occurs at the initialization of the renderer.

In your code sample, you are setting the batchEdgesDrawing value after having initialized sigma and its renderer, which explains the weird behaviour.

Anyway, I am modifying the canvas renderer such that it always uses only one canvas, and it draws the edges behind the nodes using the ctx.globalCompositeOperation = 'destination-over' method.

Thanks for the report!

@ssidorchik
Copy link
Contributor Author

Works perfect. Thanks for your help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jacomyal @ssidorchik