{"id":13418857,"url":"https://github.com/anseki/leader-line","last_synced_at":"2025-09-27T10:31:52.436Z","repository":{"id":37271526,"uuid":"71755845","full_name":"anseki/leader-line","owner":"anseki","description":"Draw a leader line in your web page.","archived":true,"fork":false,"pushed_at":"2025-04-11T01:40:49.000Z","size":1481,"stargazers_count":3180,"open_issues_count":1,"forks_count":459,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-09-21T06:00:41.618Z","etag":null,"topics":["arrow","attention","bubble","highlight","leader","line","markup","mouse","spotlight","svg"],"latest_commit_sha":null,"homepage":"http://anseki.github.io/leader-line/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anseki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-24T05:48:56.000Z","updated_at":"2025-09-18T02:46:09.000Z","dependencies_parsed_at":"2022-07-08T19:02:37.050Z","dependency_job_id":null,"html_url":"https://github.com/anseki/leader-line","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/anseki/leader-line","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fleader-line","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fleader-line/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fleader-line/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fleader-line/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anseki","download_url":"https://codeload.github.com/anseki/leader-line/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fleader-line/sbom","scorecard":{"id":198011,"data":{"date":"2025-08-11","repo":{"name":"github.com/anseki/leader-line","commit":"34f59beb51739bc5d61fdc341c3308154e19f082"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5g97-whc9-8g7j","Warn: Project is vulnerable to: GHSA-8r4g-cg4m-x23c"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T22:11:30.901Z","repository_id":37271526,"created_at":"2025-08-16T22:11:30.901Z","updated_at":"2025-08-16T22:11:30.901Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276562600,"owners_count":25664430,"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","status":"online","status_checked_at":"2025-09-23T02:00:09.130Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["arrow","attention","bubble","highlight","leader","line","markup","mouse","spotlight","svg"],"created_at":"2024-07-30T22:01:07.994Z","updated_at":"2025-09-27T10:31:52.168Z","avatar_url":"https://github.com/anseki.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# LeaderLine\n\n[![npm](https://img.shields.io/npm/v/leader-line.svg)](https://www.npmjs.com/package/leader-line) [![GitHub issues](https://img.shields.io/github/issues/anseki/leader-line.svg)](https://github.com/anseki/leader-line/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nDraw a leader line in your web page.\n\n**\u003ca href=\"https://anseki.github.io/leader-line/\"\u003eDocument and Examples https://anseki.github.io/leader-line/\u003c/a\u003e**\n\n```html\n\u003cdiv id=\"start\"\u003estart\u003c/div\u003e\n\u003cdiv id=\"end\"\u003eend\u003c/div\u003e\n```\n\n```js\n// Add new leader line from `start` to `end` (HTML/SVG element, basically).\nnew LeaderLine(\n  document.getElementById('start'),\n  document.getElementById('end')\n);\n```\n\n[![ex-010](img/ex-010.png)](https://anseki.github.io/leader-line/)\n\nIt supports options to customize.\n\n[![ex-020](img/ex-020.gif)](https://anseki.github.io/leader-line/)\n\nBasically, it can indicate HTML/SVG element such as `\u003cdiv\u003e`, `\u003cbutton\u003e`, `\u003cul\u003e`, `\u003ctd\u003e`, `\u003ccircle\u003e`, `\u003ctext\u003e`, etc.\n\n[![ex-021](img/ex-021.png)](https://anseki.github.io/leader-line/)\n\nIt can indicate a part of an element also instead of the element.\n\n[![ex-030](img/ex-030.png)](https://anseki.github.io/leader-line/)\n\n[![ex-031](img/ex-031.png)](https://anseki.github.io/leader-line/)\n\nAlso, it can indicate an element of another library.  \nFor example, the following uses LeaderLine with [D3.js](https://d3js.org/). Move the mouse on the list.\n\n[![ex-040](img/ex-040.gif)](https://anseki.github.io/leader-line/)\n\n## Usage\n\nLoad LeaderLine into your web page.\n\n```html\n\u003cscript src=\"leader-line.min.js\"\u003e\u003c/script\u003e\n```\n\nPass two HTML/SVG elements to `LeaderLine` constructor. Then a leader line is drawn between those elements.\n\n```js\nnew LeaderLine(\n  document.getElementById('element-1'),\n  document.getElementById('element-2')\n);\n```\n\n[![ex-050](img/ex-050.png)](https://anseki.github.io/leader-line/)\n\nAny element that has bounding-box is accepted. For example, `\u003cdiv\u003e`, `\u003cbutton\u003e`, `\u003cul\u003e`, `\u003ctd\u003e`, `\u003ccircle\u003e`, `\u003ctext\u003e`, and also, elements in another window (i.e. `\u003ciframe\u003e`). (See [`start` and `end`](#start-end) option.)\n\nAnd, the constructor accepts options.\n\n```js\nvar startElement = document.getElementById('element-1'),\n  endElement = document.getElementById('element-2');\n\n// New leader line has red color and size 8.\nnew LeaderLine(startElement, endElement, {color: 'red', size: 8});\n```\n\n[![ex-060](img/ex-060.png)](https://anseki.github.io/leader-line/)\n\nAlso, the options can be accessed via properties of the instance (readable and writable).\n\n```js\nvar line = new LeaderLine(startElement, endElement);\nline.color = 'red'; // Change the color to red.\nline.size++; // Up size.\nconsole.log(line.size); // Output current size.\n```\n\nYou can change the style of the leader line via [`color`](#options-color), [`size`](#options-size), [`outlineColor`](#outlinecolor), and more [options](#options).\n\n```js\nnew LeaderLine(startElement, endElement, {\n  color: '#fff',\n  outline: true,\n  endPlugOutline: true,\n  endPlugSize: 1.5\n});\n```\n\n[![ex-070](img/ex-070.png)](https://anseki.github.io/leader-line/)\n\nYou can add effects to the leader line via some options.\n\n```js\nnew LeaderLine(element1, element2, {\n  startPlugColor: '#1a6be0',\n  endPlugColor: '#1efdaa',\n  gradient: true\n});\nnew LeaderLine(element2, element3, {dash: {animation: true}});\nnew LeaderLine(element4, element5, {dropShadow: true});\nnew LeaderLine(element5, element6, {dash: true});\n```\n\n[![ex-080](img/ex-080.gif)](https://anseki.github.io/leader-line/)\n\nYou can change symbols that are shown at the end of the leader line via [`startPlug` and `endPlug`](#startplug-endplug) options.\n\n```js\nnew LeaderLine(startElement, endElement, {\n  startPlug: 'square',\n  endPlug: 'hand'\n});\n```\n\n[![ex-090](img/ex-090.png)](https://anseki.github.io/leader-line/)\n\nYou can indicate a point or area of an element instead of the element via [`pointAnchor`](#pointanchor) or [`areaAnchor`](#areaanchor) attachment. You can indicate a point or area of the document also.\n\nYou can specify additional labels via [`startLabel`, `middleLabel` and `endLabel`](#startlabel-middlelabel-endlabel) options. Also, [`captionLabel`](#captionlabel) and [`pathLabel`](#pathlabel) attachments can be specified as labels.\n\n```js\nnew LeaderLine(\n  startElement1,\n  LeaderLine.pointAnchor(endElement, {\n    x: 60,\n    y: 20\n  }),\n  {endLabel: LeaderLine.pathLabel('This is additional label')}\n);\n\nnew LeaderLine(\n  startElement2,\n  LeaderLine.areaAnchor(endElement, {\n    x: 80,\n    y: 60,\n    width: 50,\n    height: 80,\n  }),\n  {endLabel: 'This is additional label'}\n);\n```\n\n[![ex-100](img/ex-100.png)](https://anseki.github.io/leader-line/)\n\nYou can show and hide the leader line with effects by [`show` and `hide`](#show-hide) methods.  \n[`mouseHoverAnchor`](#mousehoveranchor) attachment allows it to implement showing and hiding with mouse moving, easily.\n\n```js\nnew LeaderLine(LeaderLine.mouseHoverAnchor(startElement), endElement);\n```\n\n[![ex-110](img/ex-110.gif)](https://anseki.github.io/leader-line/)\n\nFor more details, refer to the following.\n\n## Constructor\n\n```js\nline = new LeaderLine(options)\n```\n\nOr\n\n```js\nline = new LeaderLine(start, end[, options])\n```\n\nThe `options` argument is an Object that can have properties as [options](#options). [`hide`](#hide-option) option also can be contained.\n\nThe `start` and `end` arguments are shortcuts to `options.start` and `options.end`. The following two codes work same.\n\n```js\nnew LeaderLine({start: element1, end: element2});\nnew LeaderLine({start: element3, end: element4, color: 'red'});\n```\n\n```js\nnew LeaderLine(element1, element2);\nnew LeaderLine(element3, element4, {color: 'red'});\n```\n\nThe instance has properties that have the same name as each option to get or set those values (other than [`hide`](#hide-option) option).\n\n```js\nvar line = new LeaderLine(startElement, endElement);\n\nupButton.addEventListener('click', function() {\n  if (line.size \u003c 20) { line.size++; }\n}, false);\n\ndownButton.addEventListener('click', function() {\n  if (line.size \u003e 4) { line.size--; }\n}, false);\n```\n\nIf you want to set multiple options after it was constructed, using [`setOptions`](#setoptions) method instead of the properties may give better performance.\n\nWhen you will do something about HTML document regardless of the LeaderLine, you typically do that after the HTML document is ready (i.e. the HTML document has been loaded and parsed by web browser).  \nFor example:\n\n```js\n// Wait for HTML document to get ready\nwindow.addEventListener('load', function() { // NOT `DOMContentLoaded`\n  // Do something about HTML document\n  var line = new LeaderLine(\n    document.getElementById('start'),\n    document.getElementById('end')\n  );\n});\n```\n\nIf you don't wait for HTML document to be ready, you might not be able to get a target element yet, or problems with incomplete layout may occur. Also, you should do so asynchronous like the above for the performance because synchronous code blocks parsing HTML.\n\n### `hide` option\n\nOnly the constructor accepts `hide` option. That is, the instance doesn't have `hide` property. (Note that the instance has [`hide`](#show-hide) method.)  \nIf `true` is specified, the leader line is not shown, it is shown by [`show`](#show-hide) method.  \nThis is used to hide it without using [`hide`](#show-hide) method, it is not shown at all until `show` method is called.\n\n```js\n// The leader line is never shown until the button is clicked.\nvar line = new LeaderLine(startElement, endElement, {hide: true});\nbutton.addEventListener('click', function() { line.show(); });\n```\n\n## Methods\n\n### `setOptions`\n\n```js\nself = line.setOptions(options)\n```\n\nSet one or more options.  \nThe `options` argument is an Object that can have properties as [options](#options).\n\nSince this method updates a view only once after it sets all specified options, it may give better performance than setting options via the properties when multiple options are set to the instance that already exists.\n\n### `show`, `hide`\n\n```js\nself = line.show([showEffectName[, animOptions]])\n```\n\n```js\nself = line.hide([showEffectName[, animOptions]])\n```\n\nShow or hide the leader line.\n\n```js\nvar line = new LeaderLine(startElement, endElement, {hide: true});\nshowButton.addEventListener('click', function() { line.show(); }, false);\nhideButton.addEventListener('click', function() { line.hide(); }, false);\n```\n\n#### \u003ca name=\"methods-show-hide-showeffectname\"\u003e\u003c/a\u003e`showEffectName`\n\n*Type:* string  \n*Default:* Value that was specified last time, or `fade` at first time\n\nOne of the following keywords as effect:\n\n- `none`\n- `fade`  \nDefault `animOptions`: `{duration: 300, timing: 'linear'}`\n- `draw`  \nDefault `animOptions`: `{duration: 500, timing: [0.58, 0, 0.42, 1]}`\n\n#### \u003ca name=\"methods-show-hide-animoptions\"\u003e\u003c/a\u003e`animOptions`\n\n*Type:* Object  \n*Default:* See above\n\nAn Object that can have properties as [Animation Options](#animation-options).\n\n### `position`\n\n```js\nself = line.position()\n```\n\nRe-position the leader line with current position and size of the elements as [`start` or `end`](#start-end) option.  \nBy default, the position of each leader line is fixed automatically when the window that loads LeaderLine was resized. You should call `position` method if your web page moved or resized the elements without resizing the window. For example, animation, a box that was scrolled or `\u003ciframe\u003e` that was resized.\n\n```js\nscrollableBox.addEventListener('scroll', AnimEvent.add(function() {\n  line.position();\n}), false);\n```\n\n(The code above uses [AnimEvent](https://github.com/anseki/anim-event) for a better performance.)\n\nIf you want to disable the fixing the position automatically, set `LeaderLine.positionByWindowResize` to `false`.\n\n### `remove`\n\n```js\nline.remove()\n```\n\nRemove the leader line from the web page. It can't be used anymore.\n\n## Options\n\nThe following options are specified by [constructor](#constructor) or [`setOptions`](#setoptions) method. And also, those are accessed via each property of instance.\n\n### `start`, `end`\n\n*Type:* HTML/SVG element or [Attachment](#attachments)\n\nThe leader line is drawn from the `start` element to the `end` element.\n\n```js\nline.end = document.getElementById('end-element');\n```\n\nAny element that has bounding-box is accepted. For example, `\u003cdiv\u003e`, `\u003cbutton\u003e`, `\u003cul\u003e`, `\u003ctd\u003e`, `\u003ccircle\u003e`, `\u003ctext\u003e`, and also, elements in another window (i.e. `\u003ciframe\u003e`).\n\nNote: if you want to handle elements in another window regardless of LeaderLine, you should understand about security.\n\nOr you can specify an [attachment](#attachments) instead of HTML/SVG element to indicate something.\n\n### \u003ca name=\"options-color\"\u003e\u003c/a\u003e`color`\n\n*Type:* string  \n*Default:* `'coral'`\n\nA color (see [Color Value](#color-value)) of the leader line.\n\n```js\nline.color = 'rgba(30, 130, 250, 0.5)';\n```\n\n### \u003ca name=\"options-size\"\u003e\u003c/a\u003e`size`\n\n*Type:* number  \n*Default:* `4`\n\nThe width of the leader line, in pixels.\n\n```js\nline.size = 20;\n```\n\n### `path`\n\n*Type:* string  \n*Default:* `'fluid'`\n\nOne of the following keywords to indicate how to draw the line:\n\n- `straight`\n- `arc`\n- `fluid`\n- `magnet`\n- `grid`\n\n[![ex-180](img/ex-180.png)](https://anseki.github.io/leader-line/)\n\n### `startSocket`, `endSocket`\n\n*Type:* string  \n*Default:* `'auto'`\n\nThe string to indicate which side of the element the leader line connects. It can be `'top'`, `'right'`, `'bottom'`, `'left'` or `'auto'`.\n\n```js\nline.setOptions({startSocket: 'bottom', endSocket: 'top'});\n```\n\nIf `'auto'` (default) is specified, the closest side is chosen automatically.\n\n### `startSocketGravity`, `endSocketGravity`\n\n*Type:* number, Array or string  \n*Default:* `'auto'`\n\nThe force of gravity at a socket.\n\nIf a number is specified, the leader line is pulled in the direction of the socket. The number is pull strength.\n\n```js\nline.startSocketGravity = 400;\n```\n\nIf an Array that is coordinates `[x, y]` is specified, the leader line is pulled in the direction of the coordinates. The distance between the coordinates and `[0, 0]` is pull strength.  \nFor example, if `[50, -100]` is specified, it is pulled in the direction of the rightward and upward (The strength in the Y axis direction is larger than the X axis direction). If `[-50, 0]` is specified, it is pulled in the direction of the leftward (no strength in the Y axis direction).\n\nFor example, parabola:\n\n```js\nline.setOptions({\n  startSocketGravity: [192, -172],\n  endSocketGravity: [-192, -172]\n});\n```\n\nIf `'auto'` (default) is specified, it is adjusted to gravity suitable for current [`path`](#path) option automatically.\n\n### `startPlug`, `endPlug`\n\n*Type:* string  \n*Default:* `startPlug`: `'behind'` | `endPlug`: `'arrow1'`\n\nOne of the following keywords to indicate type of plug (symbol that is shown at the end of the leader line):\n\n- `disc`  \n`outlineMax`: `4`\n- `square`  \n`outlineMax`: `4`\n- `arrow1`  \n`outlineMax`: `1.5`\n- `arrow2`  \n`outlineMax`: `1.75`\n- `arrow3`  \n`outlineMax`: `2.5`\n- `hand`  \n[`startPlugOutline`/`endPlugOutline`](#startplugoutline-endplugoutline) option is ignored  \n[`startPlugColor`/`endPlugColor`](#startplugcolor-endplugcolor) option is ignored\n- `crosshair`  \n[`startPlugOutline`/`endPlugOutline`](#startplugoutline-endplugoutline) option is ignored\n- `behind`  \n[`startPlugOutline`/`endPlugOutline`](#startplugoutline-endplugoutline) option is ignored  \n[`startPlugColor`/`endPlugColor`](#startplugcolor-endplugcolor) option is ignored\n\n[![ex-220](img/ex-220.png)](https://anseki.github.io/leader-line/)\n\n### `startPlugColor`, `endPlugColor`\n\n*Type:* string  \n*Default:* `'auto'`\n\nEach option for when a plug that accepts this option is specified for [`startPlug`/`endPlug`](#startplug-endplug) option.\n\nA color (see [Color Value](#color-value)) of a plug.  \nIt is painted separately from the line (i.e. Those don't overlap each other). Therefore one of [`color`](#options-color) and `startPlugColor`/`endPlugColor` or both options can have an alpha channel.\n\n```js\nlineA.setOptions({ // element-1, element-2\n  color: 'rgba(30, 130, 250, 0.5)', // translucent\n  startPlugColor: 'rgb(241, 76, 129)',\n  endPlugColor: 'rgba(241, 76, 129, 0.5)' // translucent\n});\n\nlineB.setOptions({ // element-3, element-4\n  color: 'rgb(30, 130, 250)',\n  startPlugColor: 'rgb(241, 76, 129)',\n  endPlugColor: 'rgba(241, 76, 129, 0.5)' // translucent\n});\n```\n\nIf `'auto'` (default) is specified, a value of `color` option is set synchronously (i.e. it is changed when `color` was changed).\n\n### `startPlugSize`, `endPlugSize`\n\n*Type:* number  \n*Default:* `1`\n\nEach option for when a value other than `behind` is specified for [`startPlug`/`endPlug`](#startplug-endplug) option.\n\nA multiplying factor of the size of a plug.  \nThe plugs are resized synchronously, with the following options that contain [`size`](#options-size):\n\nPlug Size: `size` * [default-plug-scale] * [`startPlugSize` or `endPlugSize`]\n\n```js\nnew LeaderLine(element1, element2, {\n  startPlug: 'arrow1',\n  size: 4,\n  startPlugSize: 1,\n  endPlugSize: 2\n});\n\nnew LeaderLine(element3, element4, {\n  startPlug: 'arrow1',\n  size: 8,\n  startPlugSize: 1,\n  endPlugSize: 2\n});\n```\n\n### `outline`\n\n*Type:* boolean  \n*Default:* `false`\n\nIf `true` is specified, an outline of the leader line is enabled.\n\n```js\nline.outline = true;\n```\n\n### `outlineColor`\n\n*Type:* string  \n*Default:* `'indianred'`\n\nAn option for when `true` is specified for [`outline`](#outline) option.\n\nA color (see [Color Value](#color-value)) of an outline of the leader line.  \nIt is painted separately from inside of the line (i.e. Those don't overlap each other). Therefore one of [`color`](#options-color) and `outlineColor` or both options can have an alpha channel.\n\n```js\nlineA.setOptions({ // element-1, element-2\n  color: 'rgb(248, 205, 30)',\n  outlineColor: 'rgb(30, 130, 250)'\n});\n\nlineB.setOptions({ // element-3, element-4\n  color: 'rgba(248, 205, 30, 0.5)', // translucent\n  outlineColor: 'rgba(30, 130, 250, 0.5)' // translucent\n});\n\nlineC.setOptions({ // element-5, element-6\n  color: 'rgba(248, 205, 30, 0.5)', // translucent\n  outlineColor: 'rgb(30, 130, 250)'\n});\n\nlineD.setOptions({ // element-7, element-8\n  color: 'rgb(248, 205, 30)',\n  outlineColor: 'rgba(30, 130, 250, 0.5)' // translucent\n});\n```\n\n### `outlineSize`\n\n*Type:* number  \n*Default:* `0.25`\n\nAn option for when `true` is specified for [`outline`](#outline) option.\n\nA multiplying factor of the size of an outline of the leader line, it is greater than `0` and is less than or equal to `0.48`.  \nThe outline is resized synchronously, with the following options that contain [`size`](#options-size):\n\nOutline Size: `size` * `outlineSize`\n\n```js\nlineA.setOptions({ // element-1, element-2\n  size: 12,\n  outlineSize: 0.4\n});\n\nlineB.setOptions({ // element-3, element-4\n  size: 24,\n  outlineSize: 0.08\n});\n```\n\n### `startPlugOutline`, `endPlugOutline`\n\n*Type:* boolean  \n*Default:* `false`\n\nEach option for when a plug that accepts this option is specified for [`startPlug`/`endPlug`](#startplug-endplug) option.\n\nIf `true` is specified, an outline of the plug is enabled.\n\n```js\nline.endPlugOutline = true;\n```\n\n### `startPlugOutlineColor`, `endPlugOutlineColor`\n\n*Type:* string  \n*Default:* `'auto'`\n\nEach option for when `true` is specified for [`startPlugOutline`/`endPlugOutline`](#startplugoutline-endplugoutline) option.\n\nA color (see [Color Value](#color-value)) of an outline of the plug.  \nIt is painted separately from inside of the plug (i.e. Those don't overlap each other). Therefore one of [`startPlugColor`/`endPlugColor`](#startplugcolor-endplugcolor) and `startPlugOutlineColor`/`endPlugOutlineColor` or both options can have an alpha channel.\n\n```js\nlineA.setOptions({ // element-1, element-2\n  startPlugColor: 'rgb(248, 205, 30)',\n  startPlugOutlineColor: 'rgb(30, 130, 250)',\n  endPlugColor: 'rgba(248, 205, 30, 0.5)', // translucent\n  endPlugOutlineColor: 'rgb(30, 130, 250)'\n});\n\nlineB.setOptions({ // element-3, element-4\n  startPlugColor: 'rgb(248, 205, 30)',\n  startPlugOutlineColor: 'rgba(30, 130, 250, 0.5)', // translucent\n  endPlugColor: 'rgba(248, 205, 30, 0.5)', // translucent\n  endPlugOutlineColor: 'rgba(30, 130, 250, 0.5)' // translucent\n});\n```\n\nIf `'auto'` (default) is specified, a value of [`outlineColor`](#outlinecolor) option is set synchronously (i.e. it is changed when `outlineColor` was changed).\n\n### `startPlugOutlineSize`, `endPlugOutlineSize`\n\n*Type:* number  \n*Default:* `1`\n\nEach option for when `true` is specified for [`startPlugOutline`/`endPlugOutline`](#startplugoutline-endplugoutline) option.\n\nA multiplying factor of the size of an outline of the plug, it is greater than or equal to `1` and is less than or equal to `outlineMax` that is shown in [`startPlug`/`endPlug`](#startplug-endplug) option.  \nThe outline is resized synchronously, with the following options that contain [`size`](#options-size):\n\nPlug Outline Size: `size` * [default-plug-scale] * [[`startPlugSize` or `endPlugSize`](#startplugsize-endplugsize)] * [default-plug-outline-scale] * [`startPlugOutlineSize` or `endPlugOutlineSize`]\n\n```js\nlineA.setOptions({ // element-1, element-2\n  size: 4,\n  startPlugSize: 1.5,\n  startPlugOutlineSize: 2.5,\n  endPlugSize: 3,\n  endPlugOutlineSize: 1\n});\n\nlineB.setOptions({ // element-3, element-4\n  size: 10,\n  startPlugSize: 1.5,\n  startPlugOutlineSize: 1,\n  endPlugSize: 3,\n  endPlugOutlineSize: 2.5\n});\n```\n\n### `startLabel`, `middleLabel`, `endLabel`\n\n*Type:* string or [Attachment](#attachments)  \n*Default:* `''`\n\nAn additional label that is shown on the leader line.\n\n```js\nnew LeaderLine(startElement, endElement, {\n  startLabel: 'START',\n  middleLabel: 'MIDDLE',\n  endLabel: 'END'\n});\n```\n\nOr you can specify an [attachment](#attachments) instead of a string.\n\n### \u003ca name=\"options-dash\"\u003e\u003c/a\u003e`dash` (effect)\n\n*Type:* boolean or Object  \n*Default:* `false`\n\nEnable the effect with specified Object that can have properties as the following options.  \nOr `true` to enable it with all default options.\n\n```js\nnew LeaderLine(startElement, endElement, {dash: true});\n```\n\n#### `len`, `gap`\n\n*Type:* number or string  \n*Default:* `'auto'`\n\nThe size of parts of the dashed line, in pixels.  \n`len` is length of drawn lines, `gap` is gap between drawn lines.\n\nIf `'auto'` (default) is specified, the following each value is set synchronously (i.e. it is changed when `size` was changed).\n\n`len`: [`size`](#options-size) * 2\n`gap`: `size`\n\n```js\nnew LeaderLine(element1, element2, {\n  dash: {len: 4, gap: 24}\n});\n\nnew LeaderLine(element3, element4, {\n  size: 8,\n  dash: true // len: 16, gap: 8\n});\n```\n\n#### `animation`\n\n*Type:* boolean or Object  \n*Default:* `false`\n\nAn Object that can have properties as [Animation Options](#animation-options) to animate the effect.  \nOr `true` to animate it with the following default options.\n\nDefault Animation Options: `{duration: 1000, timing: 'linear'}`\n\n```js\nnew LeaderLine(startElement, endElement, {dash: {animation: true}});\n```\n\n### `gradient` (effect)\n\n*Type:* boolean or Object  \n*Default:* `false`\n\nEnable the effect with specified Object that can have properties as the following options.  \nOr `true` to enable it with all default options.\n\n```js\nnew LeaderLine(startElement, endElement, {startPlugColor: '#a6f41d', gradient: true});\n```\n\n#### `startColor`, `endColor`\n\n*Type:* string  \n*Default:* `'auto'`\n\nThe start color (see [Color Value](#color-value)) and end color of the gradient.\n\nIf `'auto'` (default) is specified, each value of [`startPlugColor` and `endPlugColor`](#startplugcolor-endplugcolor) is set synchronously (i.e. it is changed when `startPlugColor`/`endPlugColor` was changed).\n\n```js\nlineA.setOptions({ // element-1, element-2\n  gradient: {\n    startColor: '#2e17c3',\n    endColor: '#1df3f9'\n  }\n});\n\nlineB.setOptions({ // element-3, element-4\n  gradient: {\n    startColor: 'rgba(17, 148, 51, 0.1)',\n    endColor: 'rgb(17, 148, 51)'\n  }\n});\n```\n\nSince the gradient is made from only two colors, it might be not beautiful.\n\n### `dropShadow` (effect)\n\n*Type:* boolean or Object  \n*Default:* `false`\n\nEnable the effect with specified Object that can have properties as the following options.  \nOr `true` to enable it with all default options.\n\n```js\nnew LeaderLine(startElement, endElement, {dropShadow: true});\n```\n\n#### `dx`, `dy`\n\n*Type:* number  \n*Default:* `dx`: `2` | `dy`: `4`\n\nThe offset X and offset Y of the drop shadow, in pixels.\n\n```js\nline.setOptions({\n  color: '#f7f5ee',\n  dropShadow: {dx: 0, dy: 3}\n});\n```\n\n#### `blur`\n\n*Type:* number  \n*Default:* `3`\n\nThe standard deviation for the blur operation in the drop shadow.\n\n```js\nline.setOptions({\n  dropShadow: {\n    dx: 6,\n    dy: 8,\n    blur: 0.2\n  }\n});\n```\n\n#### \u003ca name=\"options-dropshadow-color\"\u003e\u003c/a\u003e`color`\n\n*Type:* string  \n*Default:* `'#000'`\n\nA color (see [Color Value](#color-value)) of the drop shadow.  \nAn alpha channel can be contained but [`opacity`](#opacity) option should be used instead.\n\n```js\nnew LeaderLine(startElement, endElement, {dropShadow: {color: 'blue', dx: 0, dy: 0}});\n```\n\n#### `opacity`\n\n*Type:* number  \n*Default:* `0.8`\n\nA number ranging from `0` to `1` to indicate the transparency of the drop shadow.\n\n## Attachments\n\nAttachments are passed to the leader line via some options, and those make that option have special behavior.\n\nYou can get new attachment instance by individual static methods of `LeaderLine` (not instance methods).  \nFor example, `LeaderLine.pointAnchor` method makes new [`pointAnchor`](#pointanchor) attachment instance. It is attached to the leader line via [`start` or `end`](#start-end) option of the leader line.  \nThe following code passes a new `pointAnchor` attachment instance to `LeaderLine` constructor, via second argument as `end` option.\n\n```js\nnew LeaderLine(startElement, LeaderLine.pointAnchor(endElement));\n```\n\nIn the case of the plan to use the attachment afterward.\n\n```js\nvar attachment = LeaderLine.pointAnchor(endElement);\n\nfunction attach() {\n  line.end = attachment;\n}\n```\n\n### `pointAnchor`\n\n```js\nattachment = LeaderLine.pointAnchor(options)\n```\n\nOr\n\n```js\nattachment = LeaderLine.pointAnchor(element[, options])\n```\n\nAn attachment that is specified instead of an element for the [`start` or `end`](#start-end) option of the leader line, for indicating a point instead of the element.\n\n```js\nnew LeaderLine(startElement, LeaderLine.pointAnchor(endElement));\n```\n\nThe `options` argument is an Object that can have properties as options that are described later.\n\nThe `element` argument is shortcut to `options.element`. The following two codes work same.\n\n```js\nattachment1 = LeaderLine.pointAnchor({element: element1});\nattachment2 = LeaderLine.pointAnchor({element: element2, x: 16, y: 32});\n```\n\n```js\nattachment1 = LeaderLine.pointAnchor(element1);\nattachment2 = LeaderLine.pointAnchor(element2, {x: 16, y: 32});\n```\n\nThis attachment can be shared between multiple leader lines.\n\n```js\n// A new attachment instance is shared between `line1` and `line2`.\nline1.end = line2.end = LeaderLine.pointAnchor(endElement);\n```\n\n```js\nline1.end = LeaderLine.pointAnchor(endElement);\n\nfunction share() {\n  // The `line1`'s attachment instance is shared with `line2`.\n  line2.end = line1.end;\n}\n```\n\nAfter the attachment was attached by `start` or `end` option of the leader line, when something else is specified for that option, the leader line is detached from the attachment. When the last leader line is detached, the attachment is removed from the web page automatically, and it can't be used anymore.\n\n#### \u003ca name=\"attachments-pointanchor-element\"\u003e\u003c/a\u003e`element`\n\n*Type:* HTML/SVG element\n\nAn element that is a base of the point. See [`x` and `y`](#attachments-pointanchor-x-y) options.  \nYou can specify a `\u003cbody\u003e` element also. That is, you can make the leader line indicate anywhere in the document.\n\n#### \u003ca name=\"attachments-pointanchor-x-y\"\u003e\u003c/a\u003e`x`, `y`\n\n*Type:* number or string  \n*Default:* `'50%'`\n\nThe X and Y coordinates of the point, in pixels, relative to the top-left corner of the specified element for [`element`](#attachments-pointanchor-element) option.  \nEach value can be a percentage of the element's width or height. For example, `{x: '50%', y: '50%'}` (default) indicates the center of the element, `{x: '100%', y: 0}` indicates the top-right corner.  \nAnd also, each value can be a negative value or a value over the element's width or height, it indicates the outside of the element.\n\n```js\nnew LeaderLine(element1, LeaderLine.pointAnchor(element3, {x: 10, y: 30}));\nnew LeaderLine(element2, LeaderLine.pointAnchor(element3, {x: '100%', y: 0}));\n```\n\n### `areaAnchor`\n\n```js\nattachment = LeaderLine.areaAnchor(options)\n```\n\nOr\n\n```js\nattachment = LeaderLine.areaAnchor(element[, shape][, options])\n```\n\nAn attachment that is specified instead of an element for the [`start` or `end`](#start-end) option of the leader line, for indicating an area instead of the element.\n\n```js\nnew LeaderLine(startElement, LeaderLine.areaAnchor(endElement));\n```\n\nThe `options` argument is an Object that can have properties as options that are described later.\n\nThe `element` and `shape` arguments are shortcuts to `options.element` and `options.shape`. The following two codes work same.\n\n```js\nattachment1 = LeaderLine.areaAnchor({element: element1});\nattachment2 = LeaderLine.areaAnchor({element: element2, color: 'red'});\nattachment3 = LeaderLine.areaAnchor({element: element3, shape: 'circle'});\nattachment4 = LeaderLine.areaAnchor({element: element4, shape: 'circle', color: 'red'});\n```\n\n```js\nattachment1 = LeaderLine.areaAnchor(element1);\nattachment2 = LeaderLine.areaAnchor(element2, {color: 'red'});\nattachment3 = LeaderLine.areaAnchor(element3, 'circle');\nattachment4 = LeaderLine.areaAnchor(element4, 'circle', {color: 'red'});\n```\n\nThis attachment can be shared between multiple leader lines. See [`pointAnchor`](#pointanchor) attachment for the sharing and the life cycle.\n\n#### \u003ca name=\"attachments-areaanchor-element\"\u003e\u003c/a\u003e`element`\n\n*Type:* HTML/SVG element\n\nAn element that is a base of the area. See [`x`, `y`](#attachments-areaanchor-x-y), [`width` and `height`](#width-height) options.  \nYou can specify a `\u003cbody\u003e` element also. That is, any area in the document can be indicated.\n\n#### `shape`\n\n*Type:* string  \n*Default:* `'rect'`\n\nOne of the following keywords to indicate the shape of the area:\n\n- `rect`\n- `circle`\n- `polygon`\n\n[![ex-450](img/ex-450.png)](https://anseki.github.io/leader-line/)\n\n#### \u003ca name=\"attachments-areaanchor-x-y\"\u003e\u003c/a\u003e`x`, `y`\n\n*Type:* number or string  \n*Default:* `'-5%'`\n\nAn option for when `rect` or `circle` is specified for [`shape`](#shape) option.\n\nThe X and Y coordinates for the top-left corner of the area, in pixels, relative to the top-left corner of the specified element for [`element`](#attachments-areaanchor-element) option.  \nEach value can be a percentage of the element's width or height. For example, `{x: '50%', y: '50%'}` indicates the center of the element, `{x: '100%', y: 0}` indicates the top-right corner.  \nAnd also, each value can be a negative value or a value over the element's width or height, it indicates the outside of the element.\n\n#### `width`, `height`\n\n*Type:* number or string  \n*Default:* `'110%'`\n\nAn option for when `rect` or `circle` is specified for [`shape`](#shape) option.\n\nThe width and height of the area, in pixels.  \nEach value can be a percentage of the element's width or height. For example, `{x: '50%', y: 0, width: '50%', height: '100%'}` indicates the right half of the element.  \nAnd also, each value can be a value over the element's width or height.\n\n#### `radius`\n\n*Type:* number  \n*Default:* `0`\n\nAn option for when `rect` is specified for [`shape`](#shape) option.\n\nThe radius to round corners of the area, in pixels.\n\n```js\nnew LeaderLine(startElement,\n  LeaderLine.areaAnchor(endElement,\n    {x: '20%', y: '20%', width: '60%', height: '60%', radius: 10}));\n```\n\n#### `points`\n\n*Type:* Array  \n\nAn option for when `polygon` is specified for [`shape`](#shape) option.\n\nAn Array that contains three or more points of the polygon. Each item that is a point is an Array that contains the X and Y coordinates for the point. That is, it is Array that contains Array, like `[[x1, y1], [x2, y2], ...]`.  \nThe X and Y coordinates are handled as same as [`x` and `y`](#attachments-areaanchor-x-y) options.\n\n```js\nnew LeaderLine(startElement,\n  LeaderLine.areaAnchor(endElement,\n    {shape: 'polygon', points: [[10, 15], ['90%', '70%'], [10, '80%']]}));\n```\n\n#### \u003ca name=\"attachments-areaanchor-color\"\u003e\u003c/a\u003e`color`\n\n*Type:* string  \n*Default:* [`color`](#options-color) of current first attached leader line (synchronously)\n\nA color (see [Color Value](#color-value)) of the border of the area.  \nBy default, a value of [`color`](#options-color) option of the first leader line in current attached leader lines is set synchronously (i.e. it is changed when `color` of the leader line was changed).\n\n#### `fillColor`\n\n*Type:* string  \n*Default:* `''`\n\nA fill-color (see [Color Value](#color-value)) of the area.  \nIf it is not specified (default), the area is not painted. It is better than specifying `'rgba(0, 0, 0, 0)'`.\n\n```js\nnew LeaderLine(startElement,\n  LeaderLine.areaAnchor(endElement,\n    {x: 14, y: 20, width: 42, height: 60, radius: 10, fillColor: '#f8cd1e'}));\n```\n\n#### \u003ca name=\"attachments-areaanchor-size\"\u003e\u003c/a\u003e`size`\n\n*Type:* number  \n*Default:* [`size`](#options-size) of current first attached leader line (synchronously)\n\nThe width of the border of the area, in pixels.  \nIf `0` is specified, the border is not drawn.\n\n```js\nnew LeaderLine(startElement,\n  LeaderLine.areaAnchor(endElement,\n    {shape: 'polygon', points: [[10, 15], [63, 70], [10, 80]],\n      fillColor: '#f8cd1e', size: 0}));\n```\n\n#### \u003ca name=\"attachments-areaanchor-dash\"\u003e\u003c/a\u003e`dash`\n\n*Type:* boolean or Object  \n*Default:* `false`\n\nEnable \"dashed line\" effect to the border of the area with specified Object that can have properties as the following options.  \nOr `true` to enable it with all default options.\n\n```js\nnew LeaderLine(startElement,\n  LeaderLine.areaAnchor(endElement,\n    {x: 14, y: 20, width: 42, height: 60, radius: 8, dash: true}));\n```\n\n##### `len`, `gap`\n\n*Type:* number  \n*Default:* `len`: [`size`](#attachments-areaanchor-size) * 2 (synchronously) | `gap`: `size` (synchronously)\n\nThe size of parts of the dashed line, in pixels.  \n`len` is length of drawn lines, `gap` is gap between drawn lines.\n\n### `mouseHoverAnchor`\n\n```js\nattachment = LeaderLine.mouseHoverAnchor(options)\n```\n\nOr\n\n```js\nattachment = LeaderLine.mouseHoverAnchor(element[, showEffectName][, options])\n```\n\nAn attachment that is specified instead of an element for the [`start` or `end`](#start-end) option of the leader line, for showing and hiding the leader line by the mouse hovering.  \nThis is a convenient way to call [`show`](#show-hide) method when a mouse enters the element, and call [`hide`](#show-hide) method when a mouse leaves the element. Also, a small icon and some style are added to the element.  \nAnd also, it includes a polyfill for `mouseenter` and `mouseleave` events that are not supported by some web browsers.\n\n```js\nnew LeaderLine(LeaderLine.mouseHoverAnchor(startElement), endElement);\n```\n\nThis is an attachment to provide a convenient way to do the behavior above. If you want more style or more custom behavior, you will use [`show`/`hide`](#show-hide) methods and your CSS code instead of this attachment.\n\nThe `options` argument is an Object that can have properties as options that are described later.\n\nThe `element` and `showEffectName` arguments are shortcuts to `options.element` and `options.showEffectName`. The following two codes work same.\n\n```js\nattachment1 = LeaderLine.mouseHoverAnchor({element: element1});\nattachment2 = LeaderLine.mouseHoverAnchor({element: element2, style: {color: 'red'}});\nattachment3 = LeaderLine.mouseHoverAnchor({element: element3, showEffectName: 'draw'});\nattachment4 = LeaderLine.mouseHoverAnchor(\n  {element: element4, showEffectName: 'draw', style: {color: 'red'}});\n```\n\n```js\nattachment1 = LeaderLine.mouseHoverAnchor(element1);\nattachment2 = LeaderLine.mouseHoverAnchor(element2, {style: {color: 'red'}});\nattachment3 = LeaderLine.mouseHoverAnchor(element3, 'draw');\nattachment4 = LeaderLine.mouseHoverAnchor(element4, 'draw', {style: {color: 'red'}});\n```\n\nThis attachment can be shared between multiple leader lines. See [`pointAnchor`](#pointanchor) attachment for the sharing and the life cycle.\n\n#### \u003ca name=\"attachments-mousehoveranchor-element\"\u003e\u003c/a\u003e`element`\n\n*Type:* HTML element\n\nAn element that is a trigger for showing and hiding the leader line.\n\n#### `showEffectName`\n\n*Type:* string  \n*Default:* Value that was specified last time, or `fade` at first time\n\nA value that is passed to [`show`/`hide`](#show-hide) methods as its `showEffectName` argument.\n\n```js\nnew LeaderLine(LeaderLine.mouseHoverAnchor(startElement, 'draw'), endElement);\n```\n\n#### `animOptions`\n\n*Type:* Object  \n*Default:* See [`showEffectName`](#methods-show-hide-showeffectname) of [`show`/`hide`](#show-hide) methods\n\nA value that is passed to [`show`/`hide`](#show-hide) methods as its `animOptions` argument.\n\n#### `style`\n\n*Type:* Object  \n*Default:* `undefined`\n\nAn Object that has additional style properties for the element.  \nYou can specify `null` as a property to disable adding the style property. Note that it doesn't disable the style property. For example, if `{backgroundColor: null}` is specified, the attachment doesn't change current `backgroundColor` style property of the element.\n\n#### `hoverStyle`\n\n*Type:* Object  \n*Default:* `undefined`\n\nThis works same to [`style`](#style) option except that these style properties are added when a mouse enters the element.\n\n#### `onSwitch`\n\n*Type:* function  \n*Default:* `undefined`\n\nA function that is called after [`show`/`hide`](#show-hide) method, with an `event` argument.\n\n### `captionLabel`\n\n```js\nattachment = LeaderLine.captionLabel(options)\n```\n\nOr\n\n```js\nattachment = LeaderLine.captionLabel(text[, options])\n```\n\nAn attachment that is specified instead of a string for the [`startLabel`, `middleLabel` or `endLabel`](#startlabel-middlelabel-endlabel) option of the leader line, for showing a custom label on the leader line.\n\n```js\nnew LeaderLine(startElement, endElement, {\n  startLabel: LeaderLine.captionLabel('START'),\n  middleLabel: LeaderLine.captionLabel('MIDDLE'),\n  endLabel: LeaderLine.captionLabel('END')\n});\n```\n\nThe `options` argument is an Object that can have properties as options that are described later.\n\nThe `text` argument is shortcut to `options.text`. The following two codes work same.\n\n```js\nattachment1 = LeaderLine.captionLabel({text: 'LABEL-1'});\nattachment2 = LeaderLine.captionLabel({text: 'LABEL-2', color: 'red'});\n```\n\n```js\nattachment1 = LeaderLine.captionLabel('LABEL-1');\nattachment2 = LeaderLine.captionLabel('LABEL-2', {color: 'red'});\n```\n\nThis attachment can *not* be shared between multiple leader lines.  \nWhen the attachment that was already attached is attached to another leader line, then, the former leader line is detached automatically. That is, the attachment moves from the leader line to another leader line.\n\n```js\n// A new attachment instance is attached to `line1`.\nline1.endLabel = LeaderLine.captionLabel('LABEL-1');\n\n// The attachment is attached to `line2`, then, `line1` is detached.\nline2.endLabel = line1.endLabel;\n```\n\nAlso, it can move between labels of the same leader line.\n\n```js\n// The attachment is moved from `endLabel` to `startLabel`.\nline1.startLabel = line1.endLabel;\n```\n\nWhen the leader line is detached from the attachment and any leader line is not attached, the attachment is removed from the web page automatically, and it can't be used anymore.\n\n#### `text`\n\n*Type:* string  \n\nA string that is shown as a label.\n\n#### `offset`\n\n*Type:* Array  \n*Default:* Calculated suitable position\n\nBy default, a `captionLabel` attachment that is attached as `startLabel` is positioned near the socket (i.e. connecting point) that is decided by [`startSocket`](#startsocket-endsocket) option of the leader line. In like manner, attached one as `endLabel` is positioned near the socket that is decided by `endSocket` option. Those are calculated with the size of the leader line, the font size of the label, etc.\n\nIf an Array that is `[x, y]` in pixels is specified for `offset` option, the attachment is positioned at the specified coordinates relative to the decided socket.\n\n```js\nnew LeaderLine(startElement, endElement, {\n  startLabel: LeaderLine.captionLabel('START', {color: 'blue', offset: [-20, 0]})\n});\n```\n\n#### \u003ca name=\"attachments-captionlabel-lineoffset\"\u003e\u003c/a\u003e`lineOffset`\n\n*Type:* number  \n*Default:* `0`\n\nBy default, a `captionLabel` attachment that is attached as `middleLabel` is positioned at the middle point of the path of the leader line.  \nIf a length in pixels is specified for `lineOffset` option, the attachment is positioned at the offset point from the middle point of the path. The length is distance along the path, a negative value makes it become close to the element as [`start`](#start-end) option.\n\n#### `color`\n\n*Type:* string  \n*Default:* [`color`](#options-color) of current attached leader line (synchronously)\n\nA color (see [Color Value](#color-value)) of the text.  \nBy default, a value of [`color`](#options-color) option of the current attached leader line is set synchronously (i.e. it is changed when `color` of the leader line was changed).\n\n#### \u003ca name=\"attachments-captionlabel-outlinecolor\"\u003e\u003c/a\u003e`outlineColor`\n\n*Type:* string  \n*Default:* `'#fff'`\n\nA color (see [Color Value](#color-value)) of an outline of the text.  \nThe outline makes the text avoid seeming to blend with a background.  \nIf `''` is specified, the outline is not drawn. It is better than specifying `'rgba(0, 0, 0, 0)'`.\n\n#### \u003ca name=\"attachments-captionlabel-other-style-properties\"\u003e\u003c/a\u003eOther Style Properties\n\nYou can specify the following CSS properties also:\n\n- `fontFamily`\n- `fontStyle`\n- `fontVariant`\n- `fontWeight`\n- `fontStretch`\n- `fontSize`\n- `fontSizeAdjust`\n- `kerning`\n- `letterSpacing`\n- `wordSpacing`\n- `textDecoration`\n\nNote that some properties might not be supported by some web browsers, LeaderLine doesn't care for those.\n\n### `pathLabel`\n\n```js\nattachment = LeaderLine.pathLabel(options)\n```\n\nOr\n\n```js\nattachment = LeaderLine.pathLabel(text[, options])\n```\n\nAn attachment that is specified instead of a string for the [`startLabel`, `middleLabel` or `endLabel`](#startlabel-middlelabel-endlabel) option of the leader line, for showing a label along the path of the leader line.\n\n```js\nnew LeaderLine(startElement, endElement, {\n  startLabel: LeaderLine.pathLabel('START'),\n  middleLabel: LeaderLine.pathLabel('MIDDLE'),\n  endLabel: LeaderLine.pathLabel('END')\n});\n```\n\nThe `options` argument is an Object that can have properties as options that are described later.\n\nThe `text` argument is shortcut to `options.text`. The following two codes work same.\n\n```js\nattachment1 = LeaderLine.pathLabel({text: 'LABEL-1'});\nattachment2 = LeaderLine.pathLabel({text: 'LABEL-2', color: 'red'});\n```\n\n```js\nattachment1 = LeaderLine.pathLabel('LABEL-1');\nattachment2 = LeaderLine.pathLabel('LABEL-2', {color: 'red'});\n```\n\nThis attachment can *not* be shared between multiple leader lines. See [`captionLabel`](#captionlabel) attachment for the sharing and the life cycle.\n\nNote that the characters are put along the path of the leader line from the [`start`](#start-end) element toward the [`end`](#start-end) element even if the path curves sharply or it is drawn toward the left. If you have to avoid those cases for important text, use [`captionLabel`](#captionlabel) instead.\n\n#### `text`\n\n*Type:* string  \n\nA string that is shown as a label.\n\n#### \u003ca name=\"attachments-pathlabel-lineoffset\"\u003e\u003c/a\u003e`lineOffset`\n\n*Type:* number  \n*Default:* `0`\n\nBy default, a `pathLabel` attachment that is attached as `startLabel` is positioned near the element as [`start`](#start-end) option. In like manner, attached one as `endLabel` is positioned near the element as `end` option. And attached one as `middleLabel` is positioned at the middle point of the path of the leader line.  \nIf a length in pixels is specified for `lineOffset` option, the attachment is positioned at the offset point from the position above. The length is distance along the path, a negative value makes it become close to the element as `start` option.\n\n#### `color`\n\n*Type:* string  \n*Default:* [`color`](#options-color) of current attached leader line (synchronously)\n\nA color (see [Color Value](#color-value)) of the text.  \nBy default, a value of [`color`](#options-color) option of the current attached leader line is set synchronously (i.e. it is changed when `color` of the leader line was changed).\n\n#### \u003ca name=\"attachments-pathlabel-outlinecolor\"\u003e\u003c/a\u003e`outlineColor`\n\n*Type:* string  \n*Default:* `'#fff'`\n\nA color (see [Color Value](#color-value)) of an outline of the text.  \nThe outline makes the text avoid seeming to blend with a background.  \nIf `''` is specified, the outline is not drawn. It is better than specifying `'rgba(0, 0, 0, 0)'`.\n\n#### Other Style Properties\n\nSee the [option of `captionLabel`](#attachments-captionlabel-other-style-properties).\n\n## Animation Options\n\n### `duration`\n\n*Type:* number\n\nA number determining how long (milliseconds) the animation will run.\n\n```js\nnew LeaderLine(\n  LeaderLine.mouseHoverAnchor(startElement, 'draw', {\n    animOptions: {\n      duration: 3000\n    }\n  }),\n  endElement\n);\n```\n\n### `timing`\n\n*Type:* Array or string\n\nAn Array that is `[x1, y1, x2, y2]` as a \"timing function\" that indicates how to change the speed. It works same as that of [CSS animation](https://developer.mozilla.org/en/docs/Web/CSS/timing-function).\n\n```js\nnew LeaderLine(\n  LeaderLine.mouseHoverAnchor(startElement, 'draw', {\n    animOptions: {\n      duration: 3000,\n      timing: [0.5, 0, 1, 0.42]\n    }\n  }),\n  endElement\n);\n```\n\nYou can specify one of the following keywords also. These values mean [keywords for common timing functions](https://developer.mozilla.org/en/docs/Web/CSS/timing-function#Keywords_for_common_timing-functions).\n\n- `ease`\n- `linear`\n- `ease-in`\n- `ease-out`\n- `ease-in-out`\n\n## Color Value\n\nCSS color notations are accepted. A value might contain an alpha channel that specifies the transparency.  \nFor example, `hsl(200, 70%, 58%)`, `rgba(73, 172, 223, 0.5)`, `#49acdf`, `skyblue`, etc. Some web browsers support `hwb()`, `device-cmyk()` and `gray()` also.\n\n---\n\nThanks for images: [Brain \u0026 Storm](http://brainandstorm.com/), [Michael Gaida](https://pixabay.com/users/MichaelGaida-652234/), [CGvector](http://www.cgvector.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fleader-line","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanseki%2Fleader-line","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fleader-line/lists"}