Draw-line-connect NPM

draw-line-connect

You can connect your dom elements with drawing lines between them

And the best part is, it can be either a diagonal line or in the shape of L!

This package can be only used in vanilla JS projects.

Installation

Install draw-line-connect with npm

  npm install draw-line-connect

or with yarn

  yarn add draw-line-connect

Usage/Examples

import { drawLine, drawL } from "draw-line-connect";

drawLine({
  startingElement: {
    id: "box1",
    x: "right",
    y: "mid",
  },
  endingElement: {
    id: "box2",
    x: "center",
    y: "top",
  },
});

drawL({
  startingElement: {
    id: "box1",
    x: "center",
    y: "bottom",
  },
  endingElement: {
    id: "box2",
    x: "left",
    y: "mid",
  },
  color: "black",
  thickness: 5,
  shape: "upsidedownL",
});

API Referance

drawLine()

This function should take an object as a parameter with following keys:

startingElement: object (required) | Key | Value | | ------------- |:-------------:| | id (required) | string | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |
endingElement: object (required) | Key | Value | | ------------- |:-------------:| | id (required) | string | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |

drawL()

This function should take an object as a parameter with following keys:

startingElement: object (required) | Key | Value | | ------------- |:-------------:| | id (required) | string | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |
endingElement: object (required) | Key | Value | | ------------- |:-------------:| | id (required) | string | | x (required) | "left" or "center" or "right" | | y (required) | "top" or "mid" or "bottom" |
shape: string ("upsidedownL", optional, defaults to "normal")