html-lines
v1.0.0
Published
Draw a line using an HTML element between two existing elements.
Downloads
6
Readme
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.
bleed
Bleed is used to extend lines half the width of the stroke on each end.
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