Functions

getWire - for wires between points getBoxToBoxWire - for wires between boxes

Installation

npm i perfect-wires

or

yarn add perfect-wires

Usage

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.

Author

@nateClicks