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-vanilla-2"

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

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

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-vanilla-2"

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.

Also..labels​

Also..labels