6 posts tagged with "react callflow"

We are excited today to announce that the new era for JsPlumb has arrived - https://visuallyjs.com.

VisuallyJs is a rewrite of the core JsPlumb rendering engine, with fully modernized APIs that take advantage of all of the latest features of React, Angular, Svelte and Vue, and a number of significant new additions.

Diagrams​

In JsPlumb it was possible to create a pure SVG diagram but there was a certain amount of boilerplate that it was necessary to setup. VisuallyJs offers dedicated SVG diagram support that is a snap to include in your page:

import { DiagramComponent, DiagramProvider, DiagramPalette } from "@visuallyjs/browser-ui-react"
import { FLOWCHART_SHAPES } from "@visuallyjs/browser-ui"

export default function MyDiagram() {
    return <DiagramProvider>
        <DiagramComponent options={{
            shapes:[FLOWCHART_SHAPES]
        }}/>
        <DiagramPalette/>
    </DiagramProvider>
}

Charts​

VisuallyJs offers a powerful 2D chart engine with support for a number of common charts such as bar/column, scatter/bubble, area, line and pie, as well as more specialized charts such as Sankey. As with diagrams, these are very simple to drop into your page:

import { BarChartComponent } from "@visuallyjs/browser-ui-react"

export default function MyChart() {
    return <BarChartComponent options={{
            series:[ {valueField:"value"}]
        }} data={{...}}/>
}

Apps​

VisuallyJs continues JsPlumb's role as the premium solution for apps where the nodes have rich content, and improves upon the ergonomics of JsPlumb's API to make it easier than ever to rapidly create a compelling user experience.

Dashboards​

The image at the top of the page shows our Network Infrastructure starter app, in which the diagram canvas and the two charts on the side are all powered by the same model. The possibilities for this are endless.

General improvements​

This is not an exhaustive list, but some highlights are:

• 3 times faster rendering speed
• Modernised API across all library integrations - fully compatible with the latest releases of the major UI libraries
• Support for edges that are unattached at one or both ends
• More intuitive controls for editing paths
• Support for "click to add" edges as an option instead of "drag to add"
• Improved documentation
• Updates to shapes, including a set of BPMN shapes/icons, and support for labels and images in the basic shapes
• Several new starter apps, including BPMN and ERD

Check it out​

We invite you to head over to https://visuallyjs.com to take a look.

I'm a licensee​

If you're a licensee we will be sending you an email introducing the changes and explaining what it means for your license. TL;DR: if you have an active JsPlumb subscription then you're good to go with VisuallyJs.

This release contains a few nice enhancements to our Hierarchy layout:

• All "child" vertices of an already placed vertex are located in the next layer down.

Previously, certain arrangements of nodes (generally involving multiple parents) could result in the target of some edge being placed on the same layer of the hierarchy as the source o the edge. In 7.3.5 this does not happen.

• Arrangements where leaf nodes are at the start/end of each layer are preferred

The Hierarchy layout runs in several stages, one of which - the "crossing" stage - is responsible for rearranging each layer of the hierarchy to reduce edge crossings. Previously, we would make no distinction between two orderings if they had the same number of crossings. In 7.3.5 when we have two orderings that have the same number of edge crossings we pick the ordering which has the most number of leaf vertices at either the start or end of its layers.

• Updated to ensure child elements of vertices that have multiple parents are always placed correctly

In some instances involving multiple parents, child elements were being shifted multiple times, taking them out of alignment. This is fixed in 7.3.5.

• Updated size calculation code to reduce reflows, resulting in a 35% reduction in load time on Chromium browsers and a 19% reduction in load time on Firefox.

• Updated setType method to ensure type changed event is always fired.

This page covers releases 7.3.3, 7.3.2 and 7.3.1. The main focus of these releases is the introduction of nested shape sets.

Nested Shape Sets​

From 7.3.1 onwards it is possible to nest shape sets, via the children property of a shape set. For example, here is a spec for a shape set which has no shapes of its own, but two shape sets declared inside children:

Nested sets are displayed when Show All is selected in the palette:

When a set that contains children is the selected set, users are initially shown all of the nested sets, with a picker allowing them to select a nested set:

Shape sets can be nested to arbitrary depth - the only limit is really the question of usability!

Read more at https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/nodes-and-groups/shape-libraries#nested-shape-sets

Full changelog​

• Added support for shape sets to nest other shape sets.
• Fixed an SVG export issue in which in certain scenarios edge paths could be painted with an incorrect offset
• Added transformOrigin to the payload return by the exportData method on a Surface
• Added JS docs for various parameter interfaces
• Updated shape library palette to use CSS to hide/show sets, rather than directly manipulating their style elements. This helps ensure that JsPlumb doesn't impose itself on how you want to style those elements.

Start a free trial

Not a user of JsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

This release contains several updates that bring an extra level of professionalism to your flowchart/diagram apps.

Multiline SVG labels​

We updated the ShapeLibrary to add support for multiline labels on shapes, and updated our Flowchart Builder starter app to include this new functionality.

Recent color history in inspectors​

When working with inspectors, it is extremely useful to be able to choose a color from a list of recent colors - JsPlumb now provides support for this out of the box. You can use multiple color pickers and they all share the same context - here's the node inspector in our flowchart builder now:

and here's the edge inspector:

Cloning vertices in the Surface canvas​

Another feature of professional flowchart builders is the ability to clone some existing vertex - this has been added to JsPlumb in version 7.3.0, and we use it in the flowchart builder starter app:

Save/load data and Surface state​

In 7.3.0 you can now call exportData() on a Surface, not just on the model. When you call it on a Surface, the returned payload contains the dataset along with the current pan/zoom for the Surface, and also any context information stored by attached inspectors. Coupled with the new load method on the Surface, you can now save and restore the UI to the exact state it was in.

Callflow Builder starter app​

We've added a Callflow Builder starter app, with Angular and React versions:

Check it out here.

Updates​

• We implemented a new default paint mechanism for Bezier where the curviness is reduced as the elements get closer together, because the control point is specified as a fraction of the distance between the two anchors. This results in a curve that doesn't spike past the anchor points and generally has a nicer aesthetic. See Breaking section if you want the old way.

• Connectors and Endpoints now use an SVG g element as their container when useSvgContainer is set on the surface options.

• Updated the Inspector to track programmatic updates in items it is inspecting, and to update its UI when a matching update is found.

• Added an InspectorComponent to the Angular integration, making it easier to add an Inspector to your Angular apps.

• The selector prop on the React PaletteComponent is now optional, defaulting to "[data-jtk-type]"

• The selector prop on the Angular jsplumb-drag-drop directive is now optional, defaulting to "[data-jtk-type]"

• The selector param on DropManager and SurfaceDropManager is now optional, defaulting to "[data-jtk-type]"

• Inspectors now support the RANGE input type.

• The React InspectorComponent now supports an optional afterUpdate callback prop. This is invoked after the underlying inspector has run an update.

• The onEdit callback of the DrawingToolsPlugin now passes the Surface and Toolkit to the callback function.

• We've ported our Gantt starter to React