65 posts tagged with "svg"

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

JsPlumb Toolkit uses individual SVG elements to render edges and individual SVG/HTML elements to render nodes, which is a different approach to other libraries in this space. In this post we're going to discuss the reasons why we do this, give a little historical background, and also share our vision for the near future.

JsPlumb does not use a single SVG context element because we do not consider jsPlumb to be limited to being strictly a diagramming library. jsPlumb's approach to rendering - allowing you to use any HTML or SVG to render your nodes - means that it is capable of building a whole other class of applications that many other libraries in this space cannot, or at least not in a straightforward and maintainable way.

Export to SVG, PNG and JPG​

This is an exciting new capability that JsPlumb offers. When using a Shape library to render the nodes in your UI, you can now export the Surface canvas to either SVG, PNG or JPG.

We've added support for this to our Flowchart builder starter app:

When you click one of these you'll see a preview window, from which you can download the export:

Release 6.5.0 of JsPlumb Toolkit is now available.

What's new?​

We're pleased to announce the availability of a new connector type in 6.5.0 - Segmented. This connector consists of a set of straight line segments, and can be smoothed to a set of bezier curves. We've also shipped a path editor for this new connector type.

Release 6.2.5 of JsPlumb Toolkit is now available. This release contains a bunch of useful new things, and sees an update to our most popular demonstrations to turn them into fully-fledged starter applications from which you can build your own apps quicker than ever.

What's new?​

Many things. The full changelog is available here. In this post we're going to discuss all of the changes from 6.2.0 through to 6.2.5.