Dotted and dashed lines

[franciscorubin]

I'm trying to add dashed lines to my graph, but can't find support for it in the last version of SigmaJS. I see mentions online of the "customEdgeShapes" plugin, but it doesn't appear to exist in the current version.

[jacomyal]

The plugin you mention was indeed a solution, in a time when sigma was still rendering networks using canvas. Now, all nodes and edges are drawn using WebGL, and there is no implemented solution yet.

Now, I feel that implementing dashed line should be doable - probably easier than proper dotted lines with circles, actually. And both would certainly be useful to other people.

[franciscorubin]

I can give it a try if you give me some pointers on where to start, or any similar PRs to reference.

[jacomyal]

Hi @franciscorubin,

Sorry for the delay, it's been a busy month. A PR would be great! I just published a short notice on how to start a new package in the monorepo here: https://www.sigmajs.org/docs/advanced/new-packages

Then, you can look at existing edge renderers, both in the core package or as additional packages (only @sigma/edge-curve yet).

About how to render dashed lines using WebGL, basically, the vertex shader would have to return a rectangle (built using two triangles) exactly as EdgeRectangleProgram does. Then, the fragment shader would only colorize each pixel based on this pixel's distance to an axis orthogonal to the edge. The only place yet where we pick which edge pixels to colorize is in @sigma/edge-curve, but we do similar things in multiple node renderers as well.

Don't hesitate if you need some help, I'll try to be more reactive from now.
Thanks and good luck!