Breaking Changes
- Nodes with multiple handles are now treated differently: Before, we used a combination of the nodeId and the handleId as
targetorsourceproperty (e.g.nodeId__handleId). This has been now split into two properties:target/source(same as before) andtargetHandle/sourceHandle. This makes it easier and cleaner to work with multiple handles and connections between them. If you have used multiple handles before, you might have to edit youronConnectmethod and add a new edge with the new properties. Thanks to @jasonpul and @nadenf for working on this!
Example Code:
// lets say we have 2 nodes, one input node with a source handle and a custom node with two target handles which have the ids a and b
// our goal is to have a connection from the input node to each of the target handles of the custom node
const nodes = [
{ id: '1', type: 'input', data: { label: 'Node with one source handle' } },
{
id: '2',
type: 'multiHandleNode',
data: { label: 'This node contains 2 handles with ids a and b' },
},
];
// in v6 and below we only had the target property to tell react-flow which handle is connected
// this has been done using __ in the target id
const elementsV6 = [
...nodes,
{
id: 'e1-2a',
source: '1',
target: '2__a', // targetNode 2, targetHandle a
},
{
id: 'e1-2a',
source: '1',
target: '2__b', // targetNode 2, targetHandle b
},
];
// from v7 onwards we can use the targetHandle/sourceHandle properties to define which handle the edge is connecting exactly
const elementsV7 = [
...nodes,
{
id: 'e1-2a',
source: '1',
target: '2',
targetHandle: 'a',
},
{
id: 'e1-2a',
source: '1',
target: '2',
targetHandle: 'b',
},
];New Features
panOnScrollproperty: The library now supports panning with the mousewheel or trackpad. This can be used instead of the default behaviour which uses the mousewheel to zoom the canvaspanOnScrollSpeedproperty: New property that can be used in combination with thepanOnScrolloption to control the speed the movement
Website
- The website is now in its own repository