https://github.com/retejs/render-utils
https://github.com/retejs/render-utils
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/retejs/render-utils
- Owner: retejs
- License: mit
- Created: 2022-11-13T18:02:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T16:53:36.000Z (9 months ago)
- Last Synced: 2025-04-20T08:22:00.857Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://retejs.org
- Size: 298 KB
- Stars: 1
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Rete.js Render utils
====
[](https://stand-with-ukraine.pp.ua)
[](https://discord.gg/cxSFkPZdsV)
**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.
```ts
import { getDOMSocketPosition } from 'rete-render-utils';
const socketsPositionWatcher = getDOMSocketPosition(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`.
```ts
import { classicConnectionPath } from 'rete-render-utils';
const curvature = 0.3
const points = [sourcePoint, targetPoint] // should contain two points
const svgPath = classicConnectionPath(points, curvature)
```
## Contribution
Please refer to the [Contribution](https://retejs.org/docs/contribution) guide
## License
[MIT](https://github.com/retejs/render-utils-plugin/blob/main/LICENSE)