Skip to main content
Version: 4.3

JointJS+ Changelog v4.3.2

JointJS+ 4.3.2 ships with @joint/core 4.3.2, @joint/react 4.3.5, and the new @joint/router-avoid 4.3.2.

Overview​

Introducing @joint/router-avoid​

A new open-source package, @joint/router-avoid, brings automatic obstacle-avoiding orthogonal link routing to JointJS. It wraps libavoid – a C++ library for incremental connector routing – compiled to WebAssembly.

Unlike the built-in routers, which compute one link at a time, the avoid router maintains a single incremental engine shared by the whole graph: every element is an obstacle, every link is a connector, and moving an element reroutes only the links affected by it. The package listens to a dia.Graph and writes the computed routes straight onto the links' vertices and anchors. Routing can run on the main thread or in a Web Worker.

The package requires JointJS 4.3 or newer.

dia​

Paper​

dia.Paper – the guard option can now veto blank pointer events​

The guard callback is now consulted for pointerdown events that did not hit a cell view – a press on the blank paper area or on DOM content rendered inside the paper element (an overlay, a popup, a toolbar). Returning true prevents the paper from starting a blank interaction (panning, selection lasso, blank:pointerdown events).

For such events the view argument is undefined:

const paper = new dia.Paper({
    // ...
    guard: (evt, view) => {
        // ignore presses inside our own overlay
        return !view && evt.target.closest('.my-overlay') !== null;
    }
});

Only an explicit veto counts for blank events. The built-in tag-name checks (GUARDED_TAG_NAMES) still apply to cell views only.

dia.Paper – form controls inside cell views are matched along the DOM path​

Presses on markup nested inside a form control (for example the <span> label inside a <button>, or an <option> inside a <select>) are now treated as presses on the control itself. Previously only the exact event target was tested, so a press on a button's label could start an element drag.

The list of tag names that keep the browser's default action (FORM_CONTROL_TAG_NAMES) is now separate from the list that prevents the default paper interaction (PREVENT_INTERACTION_TAG_NAMES). Both default to TEXTAREA, INPUT, BUTTON, and SELECT. Narrow PREVENT_INTERACTION_TAG_NAMES on a Paper subclass to let a control both be clicked and start a drag – for example, dropping BUTTON makes a button inside a magnet draggable to create a link while it stays clickable.

routers​

rightAngle​

routers.rightAngle – internal refactoring​

The path-finding algorithm of the rightAngle router was extracted into a standalone utility and duplicated code was consolidated into helpers. There is no change in routing behaviour.

react​

<Paper />​

<Paper /> – support interactive controls nested inside magnets​

Buttons, inputs, and other form controls nested inside a magnet can now be used without the press starting a link drag or an element move. A press on the control is only ever a click.

<Paper /> – account for the arrowhead when a custom link anchor is used​

The default anchor connection point of the link routing preset now accounts for the arrowhead length even when the link end defines a custom anchor. Previously the arrowhead of such a link overlapped the target element.

<Paper /> – fix events dispatched at the paper container itself being guarded​

Fix an issue where pointer events whose target was the paper container element itself were treated as events from portaled React content and therefore ignored by the paper.

Fix an issue where a link connected to another link stayed permanently hidden. The check that waits for the React content of a link's endpoints to mount only looked the endpoint up among elements.

<GraphProvider />​

<GraphProvider /> – fix stale cell keys when a single commit swaps ids​

Fix an issue where replacing cells with different ids in a single commit, without changing the number of cells, left subscribers with stale cell keys. Membership changes now notify key-list subscribers, and large-graph rendering no longer defers id updates.

Hooks​

useCell – tolerate a cell removed from the graph mid-render​

Fix an issue where useCell() threw when the cell it observed was removed from the graph while React was rendering.

Forwarded refs are assigned during the commit phase​

Refs forwarded by the @joint/react components are now assigned during React's commit phase rather than during render, so ref callbacks always receive a mounted DOM node.

useMarkup – tolerate a cell view whose markup has not been rendered yet​

Fix an issue where useMarkup() failed for a cell view whose markup had not been rendered yet, which could happen with synchronous rendering in development.

react-plus​

<Stencil />​

<Stencil /> – fix drag paper styling when rendered as a popover​

Fix the styling of the stencil drag paper now that ui.Stencil renders the dragged clone as a popover in the browser top layer.

Other changes​

Per-package changelogs​

JointJS+ releases are now managed with changesets. Every distributed package carries its own CHANGELOG.md describing the changes in that package. The single CHANGELOG file in the root of the distribution is kept for historical records only.