Skip to main content

Release 6.6.2 - Rotating custom overlays

· 2 min read
Simon Porritt

What's new?​

In this release we've made a small tweak to the way we render custom overlays which supports automatically updating their orientation based upon the endpoints of their edge. Let's say we want to put this SVG at each end of our edges:



Since we want this at the start and at the end we'll write a factory to create a spec for a custom overlay:
function customOverlayFactory(location, color) {
    return {
        type:"Custom",
        options:{
            create:function(component) {
                const d = document.createElement("div")
                d.className="rotating-custom-overlay"
                d.style.width = "16px"
                d.style.height = "20px"
                d.innerHTML = `
                <svg width="100%" height="100%" viewBox="0 0 16 21">
                  <rect x="0" y="0" fill="${color}" width="10" height="21"/>
                  <rect x="10" y="7" fill="${color}" width="6" height="7"/>
                </svg>`
                return d
            },
            location:location
        }
    }
}

Then in the edges section of our view we'll add two of these:

view:{
    edges:{
        default:{
            overlays:[
                customOverlayFactory(0, "orangered"),
                customOverlayFactory(1, "cadetblue"),
            ]
        }
    }
}

And this is the result:

CSS Rules​

Part of this is achieved via CSS:

.rotating-custom-overlay[data-anchor-oy='1'] {
  transform: translate(-2px, 6.5px) rotate(90deg);
}

.rotating-custom-overlay[data-anchor-oy='-1'] {
  transform: translate(-8.5px, -18px) rotate(270deg);
}

.rotating-custom-overlay[data-anchor-ox='1'] {
  transform: translate(0px, -11.5px) rotate(0deg);
}

.rotating-custom-overlay[data-anchor-ox='-1'] {
  transform: translate(-15px, -8.5px) rotate(180deg);
}

What's next?​

This adds a nice new capability to the Toolkit, and we're looking forward to seeing what you do with it. It also links nicely with a concept that we're preparing to introduce in 7.x - that of markers. These will be the natural evolution of overlays, and over the next few months we'll be sharing more information about what they are, how to use them, and why we think they're the future.

Read more​

There's a full discussion of customer overlays in our documentation: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/overlays#custom

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.

Not a user of the jsPlumb Toolkit but thinking of checking it out? Head over to https://jsplumbtoolkit.com/trial. It's a good time to get started with jsPlumb.