Organization chart starter app​

We've added a new starter app - Organization chart. It uses our Hierarchy layout and inspector component to provide a solid foundation for your own org charts, with some nice navigation between elements.

Recently we documented the process of building a chatbot app in 3 hours and 37 minutes. A couple of days later we documented porting that to make an Angular Chatbot, and now in today's post we're going to look at porting the vanilla chatbot to React.

Inspector component​

• When in autoCommit mode (which is the default) the inspector listens for Enter key press events on text inputs and textareas, and commits the value in response.
• When JsPlumb's current selection is cleared, the inspector ensures that it commits any values that have changed but not yet been committed

Overlays​

• Fixed a sizing issue with the background element of an SVG text overlay - it now takes the underlying zoom into account.

Controls component​

• We added support for an onMaybeClear prop on the React controls component - when present, instead of popping up a browser confirm dialog in response to a click on the clear button, this function is invoked instead. This will allow you to fit the React controls component in more nicely with your apps.

Yesterday we documented the process of building a chatbot app in 3 hours and 37 minutes. We wrote that app in "vanilla" JS but we know one of the features of JsPlumb that people love is its deep integration with libraries such as Angular, Vue, React and Svelte. In today's post we're going to look at porting the vanilla chatbot to Angular.

Recently we had the idea that a good addition to our list of starter applications might be a chatbot demo. In this post we're going to track the process in real time, or real-ish time, at least. We're going to write this in ES6, and we'll use esbuild to create our bundle.

The source code of this demo is available on Github. If you're not a licensee of JsPlumb, you can start your 30 day free trial of JsPlumb here.

So - here goes.

8:10am - initialisation​

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.