New release: Presenting JointJS+ v3.7, safe port before the big wave

In 2010, the year our CEO David released the first version of JointJS, the web looked very different from how it looks today. What we consider standard today was not doable or even imaginable. As the web evolves, the technologies supporting it must evolve too. We see more and more companies and their customers calling for visual interfaces that replace text or code-dependent environments, and more developers choosing from a wide range of existing technologies to support their efforts and make their work more efficient.

JointJS, supporting the evolution of web development, has made the promise of always being at the forefront of web development trends. With the newest version 3.7, we are pleased to announce several updates that turn our vision into reality – such as improved support for foreign objects – and a few measures that help us prepare for the next big thing: JointJS+ v4.0 coming later this year!

We have placed FLEXIBILITY at the center of this release, providing you with more options to customize the behavior of our library. For example, with v3.7, you can use your own stencil with elements of any kind thanks to a new stencil API, or dynamically change the multiple-choice inputs in the element inspector (for example, by loading the inputs from an external database). Moreover, with the new preventDefaultInteraction function, we have expanded the options to customize interactivity with the diagram.

As Roman Brückner, our CTO, says 👇

‍"There are thousands of visual and No-Code/Low-Code applications, each aiming for a different outcome. Our vision is to be there for all of them, providing them with the reliable code base they need to succeed and the flexibility to adapt our solutions to their needs without making too many compromises. With v3.7, we are strengthening our position as the most reliable and flexible solution out there."

Towards the end of 2023, you can look forward to a no-dependency version of JointJS/JointJS+. In other words, we will bid farewell to jQuery, Lodash, and will absorb a streamlined version of Backbone, which is something that many customers have asked for. The latest version 3.7 plays a crucial role in this mission as it introduces numerous bug fixes that would otherwise become obstacles for v4.0.

Roman adds to this 👇

‍"From my perspective, v3.7 is like a safe port before the big wave. This release brings the most bug fixes to ensure a smooth release of the long-anticipated version 4.0."

To learn more about version 3.7, take the next steps:

• Read through our full changelog.
• Download the update package from the customer portal (only for customers who subscribed to updates).
• If you have not yet purchased a license or are not subscribed to updates, start a no-commitment 30-day trial or purchase a license through our online store.

JointJS+ 3.7 Key Highlights:

Wondering what are the main updates of version 3.7? Let's go through them! Keep in mind that the list below is only a part of all the changes. For a full rundown of what version 3.7 brings, check out our full changelog ➡️ https://changelog.jointjs.com/.

🤝 Improved support for foreign object (HTML)

Foreign objects have become a standard in web development, despite encountering ongoing technical issues in certain browsers. The JointJS team believes in the potential of this accessible technology and is now proud to introduce comprehensive and fully-featured support for foreign objects within the SVG context. This means that you can now display HTML elements inside other SVG elements, export the HTML object as an image similar to the rest of the rendered diagram, or leverage other benefits provided by this native technology.

Below, see a code example of how foreign object is used in the ROI calculator demo.

-- CODE language-js --
class Investment extends dia.Element {
   defaults() {
       return {
           ...super.defaults,
           type: 'Investment',
           attrs: {
               body: {
                   rx: 10,
                   ry: 10,
                   width: 'calc(w)',
                   height: 'calc(h)',
                   stroke: '#333333',
                   fill: MAIN_COLOR,
                   strokeWidth: 2
               }
       }
           size: {
               width: 140,
               height: 225
           }
       };
   }

-- CODE language-html --
<rect @selector="body" />
<foreignObject @selector="foreignObject" overflow="hidden">
 <div @selector="content" class="jj-form" xmlns="http://www.w3.org/1999/xhtml">
   <h2>Investment</h2>
   <div class="jj-field-vertical">
     <label>How much did you invest?<input @selector="funds" class="jj-input" type="number"/>
     </label>
   </div>
   <div class="jj-field-vertical">
     <label>What year it was?<select @selector="year" class="jj-input" type="number">
         <option value="2013">2013</option>
         <option value="2014">2014</option>
         <option value="2015">2015</option>
         <option value="2016">2016</option>
         <option value="2017">2017</option>
         <option value="2018">2018</option>
         <option value="2019">2019</option>
         <option value="2020">2020</option>
         <option value="2021">2021</option>
         <option value="2022">2022</option>
         <option value="2023">2023</option>
       </select>
     </label>
   </div>
 </div>
</foreignObject>

The utilization of foreign objects as described above would not be feasible when using other rendering engines like canvas. On our blog, we will soon discuss other disadvantages of canvas compared to SVG. Stay tuned.

When you'll find this feature useful:

• Generally, if you need to insert an HTML element (e.g. field input) into a diagram while taking advantage of the advanced interactivity functions of our library.
• If you need to export a diagram to a PNG image with the HTML object content.
• If you need to support accessibility.
• If you need to control the stacking order of elements, links and ports.
• If you need to integrate JointJS+ with JavaScript frameworks (such as inserting React HTML component inside an element using React portals).

👉 View the ROI calculator demo to see foreign objects in action: https://jointjs.com/demos/roi-calculator.

ထ Unlimited customization options thanks to the preventDefaultInteraction function

We have introduced a new API that allows dynamic prevention of default JointJS interactions. This includes actions such as preventing element and link movement during dragging, adding a link when clicking on a port, or dragging link labels. With this new API, you can now customize the default interactions based on specific event characteristics, such as whether the SHIFT key was pressed or what DOM element the user interacts with.

To illustrate this capability with concrete examples, let's explore two different use cases.

In the first example, we'll look at MindManager, a commercial mind mapping software application developed by Alludo. In the footage below, you can see a different interaction than you would normally expect when using JointJS+. When dragging and dropping an image or tag in an element, only the image/tag is transferred to another element. The original element itself does not change its position.

There are situations where you want to define different interactions for certain parts of an element, similar to what we have shown above. JointJS+ v3.7 offers great support in this regard.

Second, let's take a BPMN application as an example. Let's say you've used a visual editor to map out a business process for a defined department of your company (represented by a swimlane). Duplicating the process and moving it to another department (swimlane) would have been a challenging task. You would have to look for an empty space that does not interfere with the container so that you could select all the elements within the swimlane, duplicate them, and move them to the desired location. Today, you can set up an interaction that easily selects elements even within a container. See the new preventDefaultInteraction function in action below.

👉 Try out the new functionality with an interactive demo: https://codepen.io/jointjs/pen/gOBEgOJ. By default, you can select multiple elements inside a container. If you press the SHIFT key, the container will move instead of selecting elements.

This new feature, along with a number of other diagramming features, positions JointJS+ as an excellent base technology for visual and No-Code/Low-Code applications. As small as this enhancement may seem from the outside, it helps companies efficiently address different use cases and meet different needs within their applications.

When you'll find this feature useful:

• Generally, if you expect different interactivity than the default.
• If you want to trigger custom drag & drop action.
• If you want to initialize the drawing of the selection lasso instead of moving the element.
• If you want to define different interactions for certain parts of the element.
• If you want to create new elements instead of links when dragging ports.
• If you want to replace the default drag-and-drop interaction with an image of the element that follows the pointer to minimize changes in the graph.
• If you want to control interactivity independently of what is currently set on paper.

🆕 New API to initiate Stencil dragging

The startDragging() method has been introduced to facilitate Stencil drag-and-drop interaction. This update enables the programmatic use of Stencil, meaning it can now be utilized without being rendered.

One use of this method is to reuse existing HTML components as Stencil. Have a look at the example below, which shows such an HTML component serving as Stencil when using the drag-and-drop technique.

Moreover, the Stencil dragging API can also used alongside the new preventDefaultInteraction() method of dia.CellView to enable dragging-and-dropping Element images to other Elements.

Last but not least, Stencil now supports the inclusion of Links, which can be dragged-and-dropped into the Paper just like Elements. Take a look at this demo that illustrates this functionality.

‍When you'll find this feature useful:

• If you want to reuse existing HTML components in your application as Stencil.
• If you want to initiate an arbitrary drag-and-drop interaction.
• If you want to add elements, links, images, icons, etc. to your diagram in drag-and-drop fashion.
• If you want to adjust the default behavior of our Stencil.

🪄 Dynamic input values

Often when editing elements using Inspector, you need to dynamically define input values. Previously, these inputs would need to be saved individually on each element, resulting in a more complex workflow. However, with JointJS+ 3.7, you now have the ability to retrieve these inputs from any source (even asynchronously from a database!) and render them dynamically, simplifying the process.

In the following example, the value chosen in the first select box field is used to determine the options available in the second select box field:

👉 View the new Inspector options in action: https://codepen.io/jointjs/pen/gOBZXdm

When you'll find this feature useful:

• If you want to load input values dynamically from a database.
• If the value of one input determines the value of another one.
• If the input choices are defined on the application load.

🖐️ Enabling direct interaction with selected elements

By setting the new allowCellInteraction option to true on our Selection plugin, you can allow a direct interaction with the cells. This enables interaction with features of elements (such as inputs, buttons or ports) even if the element is inside the Selection (covered by Selection frame). Let's examine how both states of allowCellInteraction function.

allowCellInteraction set to false:

allowCellInteraction set to true:

👉 Try out the new functionality with an interactive demo: https://codepen.io/jointjs/pen/gOBqgma

When you'll find this feature useful:

• If you want to interact with inputs or buttons inside elements currently selected.
• if you need to interact with ports when the elements are selected.
• If you want to display a different mouse cursor while hovered over selected elements.

🌊 Bug fixes before the big wave

As previously mentioned, the upcoming version 4.0 of JointJS+ introduces significant changes and represents a crucial milestone in the field of diagramming. In order for version 4.0 to be successfully released, we have prioritized fixing as many known bugs as possible, including even the small and seemingly insignificant ones. This dedication to bug fixing further enhances the reliability and stability of JointJS+ as a technology, making it a reliable choice for both emerging startups and large enterprises with millions of active users.

Let's list a few important bug fixes:

✅ All events on paper are reliably triggered using both mouse and touch devices.
✅ We have fixed the ref attribute to work correctly in all situations.
✅ We have improved the way ports and labels are rendered and positioned.
✅ We've fixed the highlight and tool views so that they mount and unmount along with the view of the cell they're attached to.
✅ We ensure that diagrams with foreign objects are correctly exported to images and all errors are handled properly.
✅ We've extended the SVG tagged template utility to support HTML and always preserve node order.

And much more!

Read our full changelog to get a detailed view of the newest release ➡️ https://changelog.jointjs.com/.

👌 New demo applications

In addition to the many exciting updates, we've brought a bunch of new demo apps that are part of v3.7. Let's take a look at a few of them, or start a 30-day trial and check out their source code.

Decision Tree Visualization

AI-driven experiments using reinforcement learning can be visualized as decision trees. To improve clarity, specialized display techniques are essential for handling the complexity of these graphs. Strategies like label reduction, color-coding links based on outcomes, consolidating branch results, and providing detailed information on demand enhance the visualization. Here's an example of a decision tree using random data.

Decision Tree Analysis

Playing a zero-sum game tournament like chess or checkers? Want to maximize your winning chances? Curious about the best strategy to adopt - aggressive or defensive? Explore this demo featuring the layout.TreeLayout plugin, demonstrating how to build a decision tree analysis diagram.

ROI calculator

Learn how JointJS efficiently incorporates HTML form elements into shapes using the aforementioned foreign objects. In addition, this demo demonstrates the accessibility of JointJS as it works seamlessly with screen readers.

Sankey diagram

Discover an exciting way to create interactive Sankey diagrams using link anchors, curve connectors, and stack layout. This JavaScript-based demo provides a simple drag-and-drop interface, making it effortless to generate dynamic and captivating visual representations of your data. Plus, learn a bonus technique for adding watermarks to your diagrams.

Activity diagram

Ever wondered about the intricate process of how a bill becomes law in the US? Our activity diagram breaks down this complex journey. Discover the power of collapsible swimlanes, conditional highlighters, and automatic link reconnect as you navigate through the visual representation of workflows and actions. Unveil the inner workings of legislation and explore our activity diagram while at it.

Diagram Generation from External Data (NHL Score)

Discover the art of creating interactive diagrams using REST API data, demonstrated through the exciting realm of NHL match data! Learn the techniques of utilizing curved links with tree layouts and effortlessly incorporating images into existing shapes. Immerse yourself in the demo and witness the seamless visual representation of external data in action with JointJS+.

DWDM Circuit

DWDM circuits, known as Dense wavelength-division multiplexing circuits, are commonly employed in long-distance telecommunications networks to facilitate the efficient transfer of large amounts of data over extensive distances. Additionally, they are utilized in various sectors such as cable TV and internet service providers, enabling the transmission of multiple signals through a single fiber optic connection. Take a closer look at this demo to gain a better understanding of this concept and feel free to obtain its source code if you require a graphical representation of such data transmission.

🔥 Ready to take the next steps?

Now it' s all yours - if you're subscribed to updates, you'll get the latest version of JointJS+ on our customer portal. If not, contact us so we can activate your update subscription. In case you don't own a JointJS+ license yet, feel free to start a no-obligation trial of JointJS+ and make your idea a reality! 🤞

– The JointJS team