Simple edge styles

Simple edge styles allow you to map values from an edge's backing data to its appearance.

Supported 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.

Example

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
})

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.