Rete-render-utils NPM

Rete.js Render utils

Rete.js utils

Key features

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

Getting Started

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.

import { getDOMSocketPosition } from 'rete-render-utils';

const socketsPositionWatcher = getDOMSocketPosition<Schemes, AreaExtra>(area)

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.

import { classicConnectionPath } from 'rete-render-utils';

const curvature = 0.3
const points = [sourcePoint, targetPoint] // should contain two points
const svgPath = classicConnectionPath(points, curvature)