This plugin is based on the retejs/connection-plugin and the retejs/connection-mastery-plugi
Plugin to render the connections between nodes
import { ConnectionPlugin } from '@naetverkjs/connections';
editor.use(ConnectionPlugin);
editor.use(ConnectionPlugin, {
createAndConnect: false,
pickConnection: false,
});
-
createAndConnect: When dropping a connection - press the Key to cll the event emitter for the
contextmenu
-
pickConnection: When selecting a connection while pressing the Key, the connection will be removed.
editor.use(ConnectionPlugin, {
createAndConnect: { keyCode: 'ControlLeft' },
pickConnection: { keyCode: 'KeyD' },
});
To display the connections, add the following scss to your component. You can also overwrite this if you want.
.connection {
overflow: visible !important;
position: absolute;
z-index: -1;
pointer-events: none;
> * {
pointer-events: all;
}
.main-path {
fill: none;
stroke-width: 5px;
stroke: steelblue;
}
}
The connections plugin adds events to the editor to render the connecting lines between the node sockets.
editor.on('connectionpath', (data) => {
const {
points, // array of numbers, e.g. [x1, y1, x2, y2]
connection, // Naetverk.Connection instance
d, // string, d attribute of <path>
} = data;
data.d = `M ${x1} ${y1} ${x2} ${y2}`; // Override of the the path curve
});
editor.on('connectiondrop', (io) /* Input or Output */ => {
// triggered when the user drops picked connection
});
editor.on('connectionpick', (io) /* Input or Output */ => {
// triggered when the user tries to pick a connection
// you can prevent it
return false;
});
editor.trigger('resetconnection'); // reset pseudo connection