html-lines

    1.0.0 • Public • Published

    html-lines

    Draw a line using an HTML element between two existing elements. Lines can easily be made to work responsively when attaching the redraw method to the window.resize event. Use CSS to control line styles and animation. Use the LINES API to manipulate the lines.

    LINES

    This is the global object created when loading html-lines.js.

    <script src="html-lines.js"></script>

    If using CommonJS, LINES would be created by requiring.

    var LINES = require('html-lines');

    LINES.setOptions

    @param - {Object}
    Change the default options.

    LINES.setOptions({
        lineElementType: {String},
        nameAttribute: {String},
        stateAttribute: {String}
    });
     
    // defaults
    {
        lineElementType: 'div',
        nameAttribute: 'data-line',
        stateAttribute: 'data-line-state'
    }

    LINES.createAnchor

    @param - {Object}
    @return - {Object} instance of Anchor

    var anchor = LINES.createAnchor({
        el: {HTMLElement or querySelector String},
        xOrigin: {'center' or 'left' or 'right' or Number}, // any number is multiplied by the width
        yOrigin: {'center' or 'top' or 'left' or Number}, // any number is multiplied by the height
        xOffset: {Number},
        yOffset: {Number}
    });
     
    // defaults
    {
        el: document.body,
        xOffset: 0,
        yOffset: 0,
        xOrigin: 'center',
        yOrigin: 'center'
    }

    Anchors don't add anything to the DOM.

    LINES.createLine

    @param - {Object} instance of Anchor
    @param - {Object} instance of Anchor
    @param - {Object}
    @return - {Object} instance of Line

    LINES.createLine(anchor1, anchor2, {
        name: {String},
        state: {String},
        stroke: {Number},
        bleed: {Boolean}
    });
     
    // defaults
    {
        name: '',
        state: '',
        stroke: 1,
        bleed: false
    }

    name and state

    These are basically for CSS hooks.

    stroke

    The stroke or height of the line element needs to be set in pixels to accuratly draw a line.
    stroke demonstration

    bleed

    Bleed is used to extend lines half the width of the stroke on each end.
    bleed demonstration

    LINES.redraw

    Recalculates anchor positions and changes line position, size and angle.

    LINES.redraw();

    LINES.getAnchors

    Returns a copy of the anchors array.
    @return - {Array}

    var anchors = LINES.getAnchors();

    LINES.getLines

    Returns a copy of the lines array.
    @return - {Array}

    var lines = LINES.getLines();

    LINES.destroyAll

    LINES.destroyAll();

    Instance of Anchor

    var anchor = LINES.createAnchor(...);

    anchor.offset

    Recalculate the position of an anchor. Typically do this before calling line.redraw().

    anchor.offset();

    anchor.destory

    anchor.destory();

    Any lines attached to this anchor will also be destoryed.

    Instance of Line

    var line = LINES.createLine(...);

    line.redraw

    @return - {Object}

    var dimensions = line.redraw();
     
    console.log(dimensions.width); // {Number} length in pixels of the line
    console.log(dimensions.angle); // {Number} angle in radians of the line

    line.stroke

    Assigns a new stroke size if passing a number and always returns the stroke size.
    @param - {Number}
    @return - {Number}

    line.stroke(3);
    // or
    console.log(line.stroke()); // 3

    line.name

    Assigns a new name if passing a string and always returns the line name.
    @param - {String}
    @return - {String}

    line.name('newName');
    // or
    console.log(line.name()); // 'newName'

    line.state

    Assigns a new state if passing a string and always returns the line state.
    @param - {String}
    @return - {String}

    line.state('newState');
    // or
    console.log(line.state()); // 'newState'

    line.destroy

    This is automatically called when either of the line's anchors are destroyed.

    line.destroy();

    This should rarely be used since lines are destroyed when anchors are destroyed but not vice versa.

    ISC license

    Keywords

    Install

    npm i html-lines

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • cuth