element-connections's Introduction

Element connections

Simple lib for drawing DOM element connections with svg.

Usage

You can install package with npm

npm install @nueq22/elements-connections

Import constructor and use

import ElementConnections from '@nueq22/elements-connections'

For simple using you need to download this repo and use element-connections.js file from dist folder.

Just create container for drawing connections.

Important: Container must be relative because we use absolute positioning for svg.

    <div class="container" id="connections-container">
        <svg id="connections"></svg>
        <!-- your elements for connection -->
        <div id="el-1"></div>
        <div id="el-2"></div>
    </div>

Add script in the bottom of the page and init new connection instance:

    <script src="element-connections.js"></script>
    <script>
        const container = document.getElementById('connections-container');

        const point1 = document.getElementById('el-1');
        const point2 = document.getElementById('el-2');

        const myConnection = new ElementConnections({
            container: container,
            elements: [point1, point2]
        })
    </script>

You can see line between centers of your elements on the page. You can see example is usage in example folder of this repo.

ElementConnections pass config object with next props:

Name	Value	Description	Required
container	SVGElement	Container for render	Yes
elements	HTMLElement[]	Elements for connection	Yes
animated	Boolean	Hide connections by default and make available animate method	No
style	Object	Object with `width` and `color` fields for line styling. `width` - integer number, `color` - css valid color	No

Available methods:

Method	Description
animate	Call animate function for drawing line between elements, work's only if `animated: true`, was passed to connections config
destroy	Unregister resize event listener from window

Recommend Projects