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.
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.
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.
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.
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.
This morning we've released version 6.0.0 of both the Toolkit and Community editions of jsPlumb.
There is no functional change between version 6.0.0 and the last 5.x version, 5.13.7. What has changed, though, is the way that jsPlumb is packaged.
In 5.x we distributed both the Toolkit and Community editions as a set of packages, with the intention being that users could keep their code size down by omitting packages they did not need. In practice, though, all Toolkit users needed the core Toolkit packages - which were the largest - and all Community users needed the core Community packages, also the largest. The gain of distributing the code amongst several packages was negligible.
From a development perspective, the practice of spreading code around the various packages meant that the developer needed to know which package to go to in order to import something. For Toolkit users in particular, this could get tedious. Is the import in the Toolkit edition core? The Community edition core? Common? A renderer? etc.
So in 6.x we're distributing everything in a single Toolkit package and a single Community package, and users of each edition need only import one single package - either @jsplumbtoolkit/browser-ui or @jsplumb/browser-ui.
The packages contain a Common JS module, an ES6 module, and a UMD. For users who have a tree shaker incorporated in their build chain this setup will be good for their bundle sizes: exporting everything from a single package means the tree shaker can be very granular.
These packages are available now. For Community Edition users, @jsplumb/browser-ui version 6.0.0 is in the public NPM repository.
Release 5.13.1 of JsPlumb Toolkit is now available. This is a minor release consisting mainly of updates to the Hierarchy layout that came about through work on our series of World Cup visualizations.
getAllEdges method does not return edges connected to children of the group as of this release; this method behaves the same for Group as it does for Node now. It's not very likely that users of the API would be using this method.Hierarchy layout places elements when invert is switched on.groupUnattachedRoots flag to the options for the Hierarchy layout. When a dataset contains one or more elements that have no child elements, the layout will ordinarily place these elements such that they do not intersect the area that the space child elements of the previous root take up. But when groupUnattachedRoots is set, these root nodes will be placed next to the previous root node. You can see this behaviour in the high level tournament view from our World Cup site:
Today we released version 5.10.8 of the Toolkit edition of JsPlumb. In fact we're released a few versions in rapid succession as we've honed the API for a new piece of functionality: generated grid backgrounds.
We're excited to have added this functionality to JsPlumb - it provides a polish to applications using JsPlumb with an extremely easy to use API. The backgrounds themselves consist of a single SVG element with a repeated pattern, and so are very performant.
The full documentation for generated grid backgrounds can be found here
But here's a quick example: