JointJS+ v3.7

Improves support for foreign objects within SVG context.
May 30, 2023
New Version

Features

  • Improved support for foreign object (HTML) - Foreign objects have become a standard in web development, and JointJS+ has now introduced comprehensive and fully-featured support for foreign objects within 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.
  • Unlimited customization options thanks to the 'preventDefaultInteraction' function - 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.
  • New API to initiate Stencil dragging - The startDragging() method has been added to facilitate stencil drag-and-drop interaction. This update enables the programmatic use of a stencil, meaning it can now be utilized without being rendered.
  • 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 this release, you now have the ability to retrieve these inputs from any source (even asynchronously from a database) and render them dynamically, simplifying the process.
  • Enabling direct interaction with selected elements - By setting the new allowCellInteraction option to true on the Selection plugin, you can allow a direct interaction with 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).
  • New demo applications - Added several new demo apps:
    • 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 enhances the visualization.
    • Decision Tree Analysis - 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 with screen readers.
    • Sankey diagram - This 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 - Discover the power of collapsible swimlanes, conditional highlighters, and automatic link reconnect as you navigate through the visual representation of workflows and actions.
    • Diagram Generation from External Data (NHL Score) - Discover the art of creating interactive diagrams using REST API data, demonstrated through 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.
JointJS+ v3.7
JointJS+

JointJS+

JavaScript diagramming library powering exceptional UIs.

Get Quote Buy Now

Got a Question?

Live Chat with our JointJS licensing specialists now.