{"id":16347397,"url":"https://github.com/cuth/html-lines","last_synced_at":"2025-10-26T02:30:19.871Z","repository":{"id":27037051,"uuid":"30502081","full_name":"cuth/html-lines","owner":"cuth","description":"Draw a line using an HTML element between two existing elements.","archived":false,"fork":false,"pushed_at":"2015-02-26T14:06:52.000Z","size":276,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-30T02:58:58.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://cuth.github.io/html-lines/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-08T19:08:59.000Z","updated_at":"2024-01-03T12:16:05.000Z","dependencies_parsed_at":"2022-07-12T16:09:01.253Z","dependency_job_id":null,"html_url":"https://github.com/cuth/html-lines","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fhtml-lines","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fhtml-lines/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fhtml-lines/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fhtml-lines/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuth","download_url":"https://codeload.github.com/cuth/html-lines/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238241445,"owners_count":19439768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T00:42:03.785Z","updated_at":"2025-10-26T02:30:19.505Z","avatar_url":"https://github.com/cuth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"html-lines\n==========\n\nDraw 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.\n\nLINES\n-----\nThis is the global object created when loading html-lines.js.\n```html\n\u003cscript src=\"html-lines.js\"\u003e\u003c/script\u003e\n```\n\nIf using CommonJS, **LINES** would be created by requiring.\n```js\nvar LINES = require('html-lines');\n```\n\n### LINES.setOptions\n@param - {Object}  \nChange the default options.\n```js\nLINES.setOptions({\n    lineElementType: {String},\n    nameAttribute: {String},\n    stateAttribute: {String}\n});\n\n// defaults\n{\n    lineElementType: 'div',\n    nameAttribute: 'data-line',\n    stateAttribute: 'data-line-state'\n}\n```\n\n### LINES.createAnchor\n@param - {Object}  \n@return - {Object} instance of Anchor\n```js\nvar anchor = LINES.createAnchor({\n    el: {HTMLElement or querySelector String},\n    xOrigin: {'center' or 'left' or 'right' or Number}, // any number is multiplied by the width\n    yOrigin: {'center' or 'top' or 'left' or Number}, // any number is multiplied by the height\n    xOffset: {Number},\n    yOffset: {Number}\n});\n\n// defaults\n{\n    el: document.body,\n    xOffset: 0,\n    yOffset: 0,\n    xOrigin: 'center',\n    yOrigin: 'center'\n}\n```\n*Anchors don't add anything to the DOM.*\n\n### LINES.createLine\n@param - {Object} instance of Anchor  \n@param - {Object} instance of Anchor  \n@param - {Object}  \n@return - {Object} instance of Line\n```js\nLINES.createLine(anchor1, anchor2, {\n    name: {String},\n    state: {String},\n    stroke: {Number},\n    bleed: {Boolean}\n});\n\n// defaults\n{\n    name: '',\n    state: '',\n    stroke: 1,\n    bleed: false\n}\n```\n\n#### name and state\nThese are basically for CSS hooks.\n\n#### stroke\nThe stroke or height of the line element needs to be set in pixels to accuratly draw a line.  \n![stroke demonstration](stroke.png)\n\n#### bleed\nBleed is used to extend lines half the width of the stroke on each end.  \n![bleed demonstration](bleed.png)\n\n### LINES.redraw\nRecalculates anchor positions and changes line position, size and angle.\n```js\nLINES.redraw();\n```\n\n### LINES.getAnchors\nReturns a copy of the anchors array.  \n@return - {Array}\n```js\nvar anchors = LINES.getAnchors();\n```\n\n### LINES.getLines\nReturns a copy of the lines array.  \n@return - {Array}\n```js\nvar lines = LINES.getLines();\n```\n\n### LINES.destroyAll\n```js\nLINES.destroyAll();\n```\n\nInstance of Anchor\n------------------\n\n```js\nvar anchor = LINES.createAnchor(...);\n```\n\n### anchor.offset\nRecalculate the position of an anchor. Typically do this before calling `line.redraw()`.\n```js\nanchor.offset();\n```\n\n### anchor.destory\n```js\nanchor.destory();\n```\n*Any lines attached to this anchor will also be destoryed.*\n\nInstance of Line\n----------------\n\n```js\nvar line = LINES.createLine(...);\n```\n\n### line.redraw\n@return - {Object}\n```js\nvar dimensions = line.redraw();\n\nconsole.log(dimensions.width); // {Number} length in pixels of the line\nconsole.log(dimensions.angle); // {Number} angle in radians of the line\n```\n\n### line.stroke\nAssigns a new stroke size if passing a number and always returns the stroke size.  \n@param - {Number}  \n@return - {Number}\n```js\nline.stroke(3);\n// or\nconsole.log(line.stroke()); // 3\n```\n\n### line.name\nAssigns a new name if passing a string and always returns the line name.  \n@param - {String}  \n@return - {String}\n```js\nline.name('newName');\n// or\nconsole.log(line.name()); // 'newName'\n```\n\n### line.state\nAssigns a new state if passing a string and always returns the line state.  \n@param - {String}  \n@return - {String}\n```js\nline.state('newState');\n// or\nconsole.log(line.state()); // 'newState'\n```\n\n### line.destroy\nThis is automatically called when either of the line's anchors are destroyed.\n```js\nline.destroy();\n```\n*This should rarely be used since lines are destroyed when anchors are destroyed but not vice versa.*\n\n*ISC license*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fhtml-lines","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuth%2Fhtml-lines","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fhtml-lines/lists"}