Rete.js Render utils ==== [](https://stand-with-ukraine.pp.ua) [](http
npm install rete-render-utilsRete.js Render utils
====


Rete.js utils
- Basic connection paths: provides the classic and loop SVG paths
- Sockets position: enables the calculation of socket positions
- DOM-based: calculates the position of sockets using offsetTop/offsetLeft
Before using this package, make sure to install it as a peer and dev dependency into your the render plugin.
This package exposes getDOMSocketPosition, which is a SocketPositionWatcher type and used by default in render plugins.
``ts
import { getDOMSocketPosition } from 'rete-render-utils';
const socketsPositionWatcher = getDOMSocketPosition
socketPositionWatcher.attach(area)
const unwatch = positionWatcher.listen(nodeId, portSide, portKey, (position) => {
/// called when the socket position changes
})
`
The render plugins also use its default implementations for rendering connection paths using classicConnectionPath and loopConnectionPath.
`ts
import { classicConnectionPath } from 'rete-render-utils';
const curvature = 0.3
const points = [sourcePoint, targetPoint] // should contain two points
const svgPath = classicConnectionPath(points, curvature)
``
Please refer to the Contribution guide