The latest version of JointJS+ (3.5) has been released, which brings many new features and improvements according to customer requests.
You can download the update package from your Account portal. If you're not eligible for a free update, you can purchase it through our online store or request a free 30 day trial to try it out.
Curious? Have a look at the extensive update description in the full changelog here.
In addition, rebranding is underway. JointJS+ will soon be replaced by JointJS+ (which will offer the same value). With this in mind, you may come across JointJS+ in the change log or other sources. This has no effect on the functionality of our powerful library.
"Every day we talk to our customers, we monitor how they use JointJS+ and get the inspiration on what to improve. In some cases, they've been forced to use workarounds to get the job done. JointJS+ 3.5 aims to make this unnecessary and is probably the biggest, and truly customer-driven, release in our history." Roman Brückner, CTO
New plugins have been added to help you create new diagram types more efficiently, such as Kanban or Yamazumi:
Below, see an example of a Kanban board built with JointJS+. To play around with the demo yourself, visit this page.
Impressive, isn't it? Check out Yamazumi too (live demo available here).
Thanks to the scrollbars, it is no longer a problem to display huge data sets in a single shape. In addition, modifiers/decorators have been added to allow end users to modify the data flowing from one data silo to another. Check out the live demo to learn more.
For some use cases, the way paper borders expanded in the past was not always ideal. We carefully listened to your suggestions and made the blank space around the paper become a borderless paper as well.
Before...
After...
Check out this live demo to learn more.
It can be said that the more complex the diagram is, the less clear it is. In JointJS+ 3.5, you finally have the option to move link labels to a separate layer (above all other links and elements). This change makes even very complex diagrams clear and easy to read.
If you were wondering how to create an element where the content drives the size of the element, JointJS+ 3.5 is the answer. To learn more about this powerful mechanism, check out our tutorial.
Also, we're updating our CodePen profile where we are adding new tutorials regularly. Here's one we're proud of (Marey's Chart).
There is a lot to explore in the new release. Let us point out a few additions that deserve your attention.
@joint/decorators - a new package for defining shapes from an SVG template (text interpolation, data binding, using functions, define new SVG attributes).
-- CODE language-svg --
<g>
<title>My Element</title>
<rect @selector="body"
x="0"
y="0"
width="calc(w)"
height="calc(h)"
line-style="solid"
stroke-width="2"
:fill="lighten(color, 0.2)"
:stroke="color"
/>
<text @selector="label"
text-anchor="middle"
text-vertical-anchor="middle"
font-size="14"
font-family="sans-serif"
x="calc(0.5*w)"
y="calc(0.5*h)"
:fill="textColor"
>{{ capitalize(firstName) }} {{ capitalize(lastName) }}</text>
</g>
apps.Tokens - integrate high performance WebGL heatmap library. Check out the live demo here.
We hope you'll get the most from the new features and updates. Please don't hesitate to get in touch with questions or comments.
Happy diagramming!
- The JointJS Team