webish

Visual web to connect draggable components

Usage no npm install needed!

<script type="module">
  import webish from 'https://cdn.skypack.dev/webish';
</script>

README

Webish

Build Status npm version

Visual SVG web of connected draggable components.

Features

  • Super Lightweight (400B compressed)
  • Uses SVG web for performance.
  • Pure Javascript (Uses No JQuery or Frameworks).
    • But can be used with any.
  • Typescript (Types included).
  • Fully customizable using CSS.
  • Works in Chrome, Safari, IE, Firefox.

Usage

<div id=container>
    <div class=box id=e1></div>
    <div class=box id=e2></div>
    <div class=long-box id=e3></div>
</div>
import Webish from 'webish';

let container = document.getElementById('container');
let web = new Webish(container /* containerEl */, [
    
    // Array of the connected components, with the direction of connection.
    // The components would be connected clockwise in order.
    {node: document.getElementById('e1'), direction: 'bottom'},
    {node: document.getElementById('e2'), direction: 'right'},
    {node: document.getElementById('e3'), direction: 'top'}
]);

// To redraw the web, maybe on dragEnd
container.addEventListener('dragend', (e) => {
    // ...
    webish.redraw();
})
.webish-connector {
    fill: rgba(0, 0, 255, 0.1); // Color of the web
}