Simple edge styles

Whilst developing the Flowchart Builder component, we found ourselves with a requirement for which we could not identify a simple solution in the Toolkit: we wanted to set the color for each edge from the edge's backing data, and we wanted to be able to change that color in the backing data and see it change in the UI. Using cssClass was not an option as there is no finite set of allowed colours (and even if there were, it would be kind of painful mapping a color name to a style for each of them, and having to maintain that list when changes occur). Technically it is feasible to achieve this via the paintStyle of a connector, but again there was nothing exposed in the Toolkit's view to allow the paint style to be manipulated on an edge by edge basis.

So, we added the concept of "simple edge styles". Given that a code snippet says a thousand words, take a look at this:

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const tk = newInstance()
const surface = tk.render(someElement, {
    ...
    simpleEdgeStyles:true           // switch them on with this flag. NOTE: from 6.2.0 onwards simple edge styles are enabled by default.
})

// now load some data with an edge that will have styles applied:

tk.load({
    data:{
        nodes:[
            { id:"1" }, { id:"2" }
        ],
        edges:[
            {
                source:"1",
                target:"2",
                data:{
                    color:"cadetblue",
                    lineWidth:3,
                    outlineColor:"pink",
                    outlineWidth:5
                }
            }
        ]
    }
})

In this example the edge in our dataset will have a color of "cadetblue" and a stroke width of 3 pixels. It will also have an outline of 5 pixels each side, and the color of the outline will be pink. I think we can all agree it will look pretty fetching indeed.

And..that's it, basically. There's not much else to it. If you call updateEdge(...) with some new values for these properties, the edge will be updated.

note

From version 6.2.0 onwards, simple edge styles are switched on by default. If you have an app written with a prior version and after upgrading to 6.2.0 you're seeing some odd behaviour with edges, you may need to set simpleEdgeStyles:false in your render params.

Let's render that example from above. We'll render an edge with this backing data:

{
    color:"cadetblue",
    lineWidth:3,
    outlineColor:"pink",
    outlineWidth:5,
    id:"edge"  
}

(we gave it an id because we want to access it when you press a button in a moment; id is not a mandatory property).

If you now , we'll update those values:

toolkit.updateEdge("edge", {
    color:"black", 
    outlineColor:"yellow",
    lineWidth:2,
    outlineWidth:3
})

Supported properties

Currently, simple edge styles supports these properties:

• color A valid CSS color, which will be used to paint the connector
• lineWidth An integer value denoting the width, in pixels, of the connector.
• outlineColor A valid CSS color, which will be used to paint the connector's outline.
• outlineWidth An integer value denoting the width of the connector's outline. Note that this is not added to the lineWidth value; this values describes the total width of the outline. For instance, a lineWidth of 3 and an outlineWidth of 5 would result in a 1 pixel outline on either side of the connector path.

None of these properties are mandatory. The Toolkit will fall back to its defaults for these via the paintStyle mechanism if your edge data does not contain any of these properties.

Also..labels

This is covered elsewhere in the documentation but the ability to set a label easily like we're manipulating the color of these edges is also something we make use of in the Flowchart Builder component, so we thought we'd include a note about it here. We'll update the previous code to include a label property in the edge data:

{
    color:"cadetblue",
    lineWidth:3,
    outlineColor:"pink",
    outlineWidth:5,
    id:"edge",
    label:"Blue and pink"  
}

Then we need to tell the Toolkit we want to use this label property:

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const tk = newInstance()
const surface = tk.render(someElement, {
    ...
    simpleEdgeStyles:true,           // switch them on with this flag
    view:{
        edges:{
            default:{
                label:"{{label}}"
            }
        }
    }
})

Now we render it:

If you now , we'll update those values:

toolkit.updateEdge("edge", {
    color:"black", 
    outlineColor:"yellow",
    lineWidth:2,
    outlineWidth:3,
    label:"Black and yellow", 
    labelLocation:0.2
})

Note that the label's text changed and also its location was changed, by updating the value of the labelLocation property.

We were considering exposing this label functionality on a simpleEdgeLabels option for the Surface. If you like this idea, drop us a line - hello@jsplumbtoolkit.com - and we'll see if we can get it in. Or should we perhaps just fold the label functionality into the simpleEdgeStyles flag? We'd be interested to hear your thoughts.