0.3.2 • Published 1 year ago
perfect-wires v0.3.2
Functions
getWire - for wires between points
getBoxToBoxWire - for wires between boxes
Installation
npm i perfect-wiresor
yarn add perfect-wiresUsage
The functions in this library return path data for an SVG path that you can use to draw a wire. It only provides the data for the path.
getWire()
Returns path data for use in and SVG <path> object
Syntax
getWire(sx, sy, ex, ey)Parameters
| Argument | Type | Description |
|---|---|---|
sx | number | X-coordinate of the starting point. |
sy | number | Y-coordinate of the starting point. |
ex | number | X-coordinate of the end point. |
ey | number | Y-coordinate of the end point. |
Returns
SVG Path data
//Example
const pathData = getWire(400, 400, 500, 500);
console.log(pathData);
///Returns
'M400,400 L400,450 a 50,50 90 0 0 50,50 L500,500'getBoxToBoxWire()
Returns path data for use in and SVG <path> object
Syntax
getBoxToBoxWire(sBox, eBox, options )Parameters
| Argument | Type | Description |
|---|---|---|
sBox | number | X-coordinate of the starting point. |
eBox | number | Y-coordinate of the starting point. |
options | WireOptions | Optional configuration for wiring |
WireOptions
| Option | Type | Default | Description |
|---|---|---|---|
deadZone | number | 0 | Amount of space (padding) to use before creating a straight line between boxes. Useful when using boxes with rounded corners. |
Returns
SVG Path data
//Example
const box1: Box = {
x: 300,
y: 350,
h: 100,
w: 200
};
const box2: Box = {
x: 550,
y: 500,
h: 100,
w: 150
};
const pathData = getBoxToBoxWire(box1, box2, {deadZone: 5});
console.log(pathData);
///Returns
'M500,400 L575,400 a 50,50 90 0 1 50,50 L625,500'Contributing
This library is still a work in progress. Currently not accepting contributions, but feel free to create an issue.