Package Exports

webish

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webish) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Webish

Visual SVG web of connected draggable components.

Demo

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
}