Connect Elements On Your Webpage With Perfect Arrow

Preview:

Description:

Perfect Arrow is a web component (Custom Element) that provides customizable directional arrows to visualize collections between HTML elements.

How to use it:

1. Install and import the Perfect Arrow.

# NPM
$ npm install perfect-arrow

import { PerfectArrow } from 'perfect-arrow';

2. Register the perfect-arrow Custom Element.

PerfectArrow.register();

3. Add the <perfect-arrow> element to your HTML and specify the source and target elements using CSS selectors. For example:

<div id="source"></div>
<div id="target"></div>
<perfect-arrow type="box" source="source" target="target"></perfect-arrow>

4. You can also customize the appearance and behavior of the arrow using the following attributes:

• type (String): This lets you choose the layout algorithm for the arrow. By default, it’s set to "box", which renders the arrow around the border boxes of the elements. Alternatively, you can choose "point" to position the arrow on the midpoints of the elements.
• bow (Number): This controls the curvature of the arrow’s body. A value of 0 creates a straight line, while higher values introduce a bend, making the arrow resemble a bow.
• stretch (Number): This property affects the arrow’s bow based on its overall length. It works in conjunction with minStretch and maxStretch (explained below). A value of 0 means the stretch won’t influence the bow’s curvature.
• stretch-min (Number): This defines the length at which the arrow should have the most pronounced bow due to the stretch property. Distances shorter than this value won’t affect the bow’s curvature.
• stretch-max (Number): This defines the length at which the stretch property no longer affects the arrow’s bow. In simpler terms, the arrow will have a straighter line when its length reaches this value.
• pad-start (Number): This allows you to adjust the starting point of the arrow relative to the specified source element. A positive value moves the arrow’s starting point further away from the source, while a negative value positions it closer.
• pad-end (Number): Similar to pad-start, this adjusts the ending point of the arrow relative to the specified target element. Use positive values to move the ending point further away and negative values to bring it closer.
• flip (Boolean): This enables you to mirror the arrow’s bow angle. Setting it to true will essentially flip the curvature.
• straights (Boolean): This property creates a simpler arrow with straight lines at 45-degree angles instead of a curved bow.

<perfect-arrow
  type="box"
  bow="0"
  stretch=".25"
  stretch-min="50"
  stretch-max="420"
  pad-start="0"
  pad-end="20"
  straights
></perfect-arrow>