Numeric Production Mechanism

    dom-freeline

    1.0.0 • Public • Published

    dom-freeline

    Draw a straight line anywhere in the DOM.

    The webpage: Try dom-freeline.

    Install

    npm install --save dom-freeline

    Then use browserify, webpack, or rollup to build your script.

    Or Download one of these files from the Github repo:

    dist/dom-freeline.js
    dist/dom-freeline.min.js
    

    If you use one of these prepackaged files the global name is freeLine.

    Usage

    import freeLine from 'dom-freeline';
    //Set the starting coordinates.
    let line = freeLine({x1: 10, y1: 10, x2: 100, y2: 100});
    
    document.body.appendChild(line.element);
    //Set some styles.
    line.css({width: 2, 'background-color': 'red'});
    //Add 10 to the first x property.
    line.x1 = line.x1 + 10;

    API

    freeLine(element, options) -> line

    Construct an element line, and pass an options object.

    element should be a valid DOM element. Most likely a div element, but other elements will work. Even an input element will work for instance.

    options are mostly for setting line geometry on construction.

    options.x1, options.y1

    These options set the x/y coordinates for the first point of the line.

    options.x2, options.y2

    Set the x/y coordinates for the second point of the line.

    options.width

    Set the line with.

    line.x1, line.y1

    Change the first x/y of a line object.

    line.x2, line.y2

    Change the second x/y of the line object.

    line.css(styles)

    Pass a styles object to change the appearance of the line.

    line.css() uses dom-css

    About

    This is a very light weight library for drawing straight lines using coordinates relative to the view-port of the browser.

    Contributing

    Before making any pull requests post an issue about what you'd like to change.

    Resources

    Install

    npm i dom-freeline

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • hollowdoor