\n\n## Installation\n\n```\nnpm i perfect-arrows\n```\n\n_or_\n\n```\nyarn add perfect-arrows\n```\n\n## Usage\n\nThe functions in this library provide only the information needed to draw an arrow. You'll need to draw the arrow yourself using your technology of choice. See below for an example React component with SVG.\n\n### `getArrow(x0, y0, x1, y1, options)`\n\nThe `getArrow` function accepts the position of two points and returns an array containing information for:\n\n- three points: a start, end, and control point\n- three angles: an end, start, and center\n\nYou can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.\n\n```js\nconst arrow = getArrow(0, 0, 100, 200, {\n bow: 0,\n stretch: 0.5,\n stretchMin: 0,\n stretchMax: 420,\n padStart: 0,\n padEnd: 0,\n flip: false,\n straights: true,\n})\n\nconst [sx, sy, cx, cy, ex, ey, ae, as, sc] = arrow\n```\n\n#### Arguments\n\n| Argument | Type | Description |\n| -------- | ------ | --------------------------------------------------------------------------- |\n| `x0` | number | The x position of the starting point. |\n| `y0` | number | The y position of the starting point. |\n| `x1` | number | The x position of the ending point. |\n| `y1` | number | The y position of the ending point. |\n| options | object | An (optional) object containing one or more of the options described below. |\n\n#### Options\n\n| Option | Type | Default | Description |\n| ------------ | ------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `bow` | number | 0 | A value representing the natural bow of the arrow. At `0`, all lines will be straight. |\n| `stretch` | number | .5 | The effect that the arrow's length will have, relative to its `minStretch` and `maxStretch`, on the bow of the arrow. At `0`, the stretch will have no effect. |\n| `minStretch` | number | 0 | The length of the arrow where the line should be most stretched. Shorter distances than this will have no additional effect on the bow of the arrow. |\n| `maxStretch` | number | 420 | The length of the arrow at which the stretch should have no effect. |\n| `padStart` | number | 0 | How far the arrow's starting point should be from the provided start point. |\n| `padEnd` | number | 0 | How far the arrow's ending point should be from the provided end point. |\n| `flip` | boolean | false | Whether to reflect the arrow's bow angle. |\n| `straights` | boolean | true | Whether to use straight lines at 45 degree angles. |\n\n#### Returns\n\n| Argument | Type | Description |\n| -------- | ------ | ------------------------------------------------ |\n| `x0` | number | The x position of the (padded) starting point. |\n| `y0` | number | The y position of the (padded) starting point. |\n| `x1` | number | The x position of the (padded) ending point. |\n| `y1` | number | The y position of the (padded) ending point. |\n| `ae` | number | The angle (in radians) for an ending arrowhead. |\n| `as` | number | The angle (in radians) for a starting arrowhead. |\n| `ac` | number | The angle (in radians) for a center arrowhead. |\n\n## Example: A React Arrow Component\n\n```jsx\nimport * as React from \"react\"\nimport { getArrow } from \"perfect-arrows\"\n\nexport function PerfectArrow() {\n const p1 = { x: 64, y: 64 }\n const p2 = { x: 128, y: 96 }\n\n const arrow = getArrow(p1.x, p1.y, p2.x, p2.y, {\n padEnd: 20,\n })\n\n const [sx, sy, cx, cy, ex, ey, ae, as, ec] = arrow\n\n const endAngleAsDegrees = ae * (180 / Math.PI)\n\n return (\n \n \n \n \n \n )\n}\n```\n\n---\n\n### `getBoxToBoxArrow(x0, y0, w0, h0, x1, y1, w1, h1, options)`\n\nThe `getBoxToBoxArrow` function accepts the position and dimensions of two boxes (or rectangles) and returns an array containing information for:\n\n- three points: a start, end, and control point\n- three angles: an end, start, and center\n\nYou can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.\n\n**Note:** The options and values returned by `getBoxToBoxArrow` are in the same format as the options and values for `getArrow`.\n\n```js\nconst arrow = getBoxToBoxArrow(0, 0, 96, 128, 400, 200, 128, 96, {\n bow: 0,\n stretch: 0.5,\n stretchMin: 0,\n stretchMax: 420,\n padStart: 0,\n padEnd: 0,\n flip: false,\n straights: true,\n})\n\nconst [sx, sy, cx, cy, ex, ey, ae, as, sc] = arrow\n```\n\n#### Arguments\n\n| Argument | Type | Description |\n| -------- | ------ | --------------------------------------------------------------------------- |\n| `x0` | number | The x position of the first rectangle. |\n| `y0` | number | The y position of the first rectangle. |\n| `w0` | number | The width of the first rectangle. |\n| `h0` | number | The height of the first rectangle. |\n| `x1` | number | The x position of the second rectangle. |\n| `y1` | number | The y position of the second rectangle. |\n| `w1` | number | The width of the second rectangle. |\n| `h1` | number | The height of the second rectangle. |\n| options | object | An (optional) object containing one or more of the options described below. |\n\n#### Options\n\nSee options in `getArrow` above. (Both functions use the same options object.)\n\n#### Returns\n\nSee returns in `getArrow` above. (Both functions return the same set of values.)\n\n## Example: A React Box-to-box Arrow Component\n\n```jsx\nimport * as React from \"react\"\nimport { getBoxToBoxArrow } from \"perfect-arrows\"\n\nexport function PerfectArrow() {\n const p1 = { x: 64, y: 64, w: 64, h: 64 }\n const p2 = { x: 128, y: 96, w: 64, h: 64 }\n\n const arrow = getBoxToBoxArrow(\n p1.x,\n p1.y,\n p1.w,\n p1.h,\n p2.x,\n p2.y,\n p2.w,\n p2.h,\n {\n bow: 0.2,\n stretch: 0.5,\n stretchMin: 40,\n stretchMax: 420,\n padStart: 0,\n padEnd: 20,\n flip: false,\n straights: true,\n }\n )\n\n const [sx, sy, cx, cy, ex, ey, ae, as, ec] = arrow\n\n const endAngleAsDegrees = ae * (180 / Math.PI)\n\n return (\n \n \n \n \n \n )\n}\n```\n\n## Author\n\n[@steveruizok](https://twitter.com/steveruizok)\n","readmeFilename":"README.md","gitHead":"97f6d91853f50001277b52779f103823834af748","bugs":{"url":"https://github.com/steveruizok/perfect-arrows/issues"},"_id":"perfect-arrows@0.4.0-beta","_nodeVersion":"10.13.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-aMpnn6dQ+EP4KJUxGlwTyTlDSmory83JLbaVWFFg7iZsMWkTTrB5cE6DEIwWfKnAcPO3wDpQPKoB9O1yENDiGg==","shasum":"548501432fa87f6b7d36449cf5a882bc023197c3","tarball":"https://registry.npmjs.org/perfect-arrows/-/perfect-arrows-0.4.0-beta.tgz","fileCount":25,"unpackedSize":361418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfedL8CRA9TVsSAnZWagAAs1gP/0pGFU/4v+xurIYQJ2LW\n3X3s2cSSKTcrMV0gcQxnu9Bdmy08ixs3h12KVbqRdpfJL+XipjaqFxCSzbBo\n64M9V79wV1SLqWnI3EaMznCweYPCGTOneGwn0L1tzxtWBd1+2DkrycysmSny\nrg80yiUp6mVG4tvWqlNlys1y+cJBF4l3hXjYdJbBuXxN6sN/WfCSBRiYNe+B\nfxbUpwMeAoJgmh/yzS1BzeWIDBmZtMxczEqaEZAFGHJD+bMg2VKmJS7F+Iqe\nUDfIISw9dWdPPK5WURQUKnR5vMg3/rJeGwxXotIEihFWusVZ4/Q3CG9iS1k3\nUEenriyo6zXejVSfvfbK+M/sC/q/ogZOtYeScdUBvUyGly3AOAWQD9dd/yED\nIORq4kjC2xxdA1+1aDUFMzWhSTqZlpIOSKj8LjRYU0FNoVE2wFq/YJM/+iOR\n1NXOZElpyj2iIDHVbsB4yaHnceXjZjyiaV1QgE3WnmGs63R4SURmR/zItq8l\nv3szmHmX2QdPN978z6PgL7rMPKpzqnX7bcFZZGFScQszyF1THqdEOOFtVkJS\nNMsE19VnmDp+Y/73lh+eCM0bGKGa7U7SW71riZX/mbxRPLFWYmhUFFw0iX6P\noY7ENb8mInlI23RdpL3Cw/btHaYCG4SauNVqFxHgMOEJsg/0iS50EaoCWWMW\n5vEV\r\n=vhyF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqmrEEPd/7CP0UwCH/KaLhvq6cBjELG28yz2Wl9FUfcAiB4+udZe6P/ul1/RazbBt/MLSeG2/lHYnx9L+3E8srmzg=="}]},"maintainers":[{"name":"steveruizok","email":"steveruizok@gmail.com"}],"_npmUser":{"name":"steveruizok","email":"steveruizok@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/perfect-arrows_0.4.0-beta_1601819388080_0.6765246889401"},"_hasShrinkwrap":false},"0.3.4":{"version":"0.3.4","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":false,"singleQuote":false,"trailingComma":"es5"},"name":"perfect-arrows","author":{"name":"Steve Ruiz","email":"steveruizok@gmail.com"},"description":"Draw perfect arrows between points or shapes","homepage":"https://github.com/steveruizok/perfect-arrows","repository":{"type":"git","url":"git+https://github.com/steveruizok/perfect-arrows.git"},"keywords":["arrow","2d","point","rectangle","shape","between"],"module":"dist/perfect-arrows.esm.js","devDependencies":{"husky":"^4.2.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.7"},"gitHead":"4c28960838dac0e1dc31424c96da13230d997df3","bugs":{"url":"https://github.com/steveruizok/perfect-arrows/issues"},"_id":"perfect-arrows@0.3.4","_nodeVersion":"15.8.0","_npmVersion":"7.5.0","dist":{"integrity":"sha512-osPqz7B755Y7ugRJ7oVsRw/j8iCAr3JPSWlAzuY7lloy71yNey4Yjr3PtD/Qbmclnjp4+DiUODSg9uiQmFWMXQ==","shasum":"fc0b0676339279a5150367248d7e710094f93926","tarball":"https://registry.npmjs.org/perfect-arrows/-/perfect-arrows-0.3.4.tgz","fileCount":21,"unpackedSize":269421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw1PxCRA9TVsSAnZWagAAKEsQAImsUcasiNSaySy8Flvw\nEv2IMtE6VG7+ExYd5BIyNMPj7C+RSoXW2uPvkeR3wqGGiR1aE/dl0GI1nsqe\nKZqaF5lDJdGFd/m3EacSDrhZIeZg3PYuMYlaxZ3GhB6ZnomFn+XBGxl4iTod\nK74vguj0pdE5kULGsXf31IJUazIYJ/WZdoqVy020dUxmVh8966ZeMVRezyW2\n/g9A7fdcpn515tH7el9e9/zLkPrcwAzEk1MHf1Jas1FPADj5b+Py+1nY4zvM\nRpEdWZ8rFFifVxDsxEHRpLBlE8WCbkmeFOarTeuW6+eMiCk2Kd84+Fx3fNuR\nXlkQqNMlb4rUqQPitNjCCGrh5qrEqqL6nIPhSQoPwf7FBMxpfgRQSqgigMEb\ngHgvmYxn8k1/iJW0ATALAeN3yky49F6LcdWLqcQMMEMJVD8Mo5M1cJIS0e3R\nJvLoolTSt8u/Lv+H6knn3cUCHeBCrq8bmtheyU0oIl91xhzv2f0+VqJ2visj\n51vdm/OR/NMGqeJkSvrpaMUc13R1T3QueGFMJxtZkCmxRGUMSuqLjmRcKf6K\npJ+ZEOx7mX72VsW2dgtRmAW1Dbe3wmRnTnOJ0uJHSELhVIveFpq2U2w2M9Hn\n28x+9acZRSipbB4kRTd0mPGpgbLHC2NWVUc8srnURaT/Q4G6UG+Pvxlcxytm\ngrQB\r\n=OGoB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd5n3poeOzplY5A3fmMeBYzxWlKHUysAFLRHkf87vveQIgENDQTdriVdna3nSIS8mYJoxpZ3P3NEKaJSzg3R///98="}]},"_npmUser":{"name":"steveruizok","email":"steveruizok@gmail.com"},"directories":{},"maintainers":[{"name":"steveruizok","email":"steveruizok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/perfect-arrows_0.3.4_1623413745829_0.5356717271136957"},"_hasShrinkwrap":false},"0.3.5":{"version":"0.3.5","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":false,"singleQuote":false,"trailingComma":"es5"},"name":"perfect-arrows","author":{"name":"Steve Ruiz","email":"steveruizok@gmail.com"},"description":"Draw perfect arrows between points or shapes","homepage":"https://github.com/steveruizok/perfect-arrows","repository":{"type":"git","url":"git+https://github.com/steveruizok/perfect-arrows.git"},"keywords":["arrow","2d","point","rectangle","shape","between"],"module":"dist/perfect-arrows.esm.js","devDependencies":{"husky":"^4.2.5","tsdx":"^0.13.2","tslib":"^2.0.0","typescript":"^3.9.7"},"gitHead":"6ac136b992dcd27e6dc5043d05911d0d7c51249d","bugs":{"url":"https://github.com/steveruizok/perfect-arrows/issues"},"_id":"perfect-arrows@0.3.5","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-F7mPydcmQ40TG8HLi/WcVVo0Qf4r6/r1vhvVsF7y3OhoRv5CSX/6YahY2gm4+Nn54MaiIjCVBt/g26uzYvMdBQ==","shasum":"c115066014486fb1649d3a01f80db630fb4f5491","tarball":"https://registry.npmjs.org/perfect-arrows/-/perfect-arrows-0.3.5.tgz","fileCount":21,"unpackedSize":269217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw34JCRA9TVsSAnZWagAAy4cP/3YcMnAtMxFgVuW09Gcj\nxltl/mx6GXJkIFWqQ8GsmTaCzHh1PTNiugCxvSWCSZj5JYaJ3ZAU4vG5fdwG\nLCa741U4nUCWb5gPtilFbl0MdiicO7gjGzdJyEM3m4AEAgTw0DlPsV2PyeRs\nTwoFrJHDACpLeRjEhc1JYa3ZVeSOwVHvUXQkHbLtryv1rRqWMOEdsbll/d+r\nCe2DBMJQhfVqulNGxZN7ZPKy1zgsij53EYp6f3LIyiFRxIsyTSXCkQ2ps6oH\n8CCtu/DM3Zb9fnyB4cvwwsVVM9Mm4FdKbWTRB3XRoubJpibz679Ldm0WOXed\nTzhArACZWhvT8uOVIiaJphs1vy5JHOPsNTQ9pWtb53ET2IolihKHgI91fvZb\npgj1txdUfWLtXWlbhUvoUxDPY3F4VZIgG9IhRd+p5d5TsWgvveykBEjLGBn1\n+f7YABj7qZTq3/ExzcmVy1e6ZcViaMnMT8kjM5FYVC+nYRyg+KPxB9sCxnRN\nyFcsOu9jXr6kOvgeFNzOkTFVgXnQCXiU1K3u4uP0LJViezCBdNZ+h2Wtqu9f\nv4IFmFTirZrUt/bnVK0MGcpT/4kVWX/r8iLw6u4YkCkmDEGwtXw5UshhUC7z\n1xWAhaoExv7Rpe7axX0ZQOiAhPkA0Sn2MEfKjpXdu9NXyetiARF/ht00DR2g\nVlt8\r\n=GQ8t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbTr7NWe4BkAGbXg8vKDZPAHlu0C2ct5MkmdGNYGTdwAIgadEVcXXYOd3KRnctTMewAVA58Hxst8RDERvHQrul/SI="}]},"_npmUser":{"name":"steveruizok","email":"steveruizok@gmail.com"},"directories":{},"maintainers":[{"name":"steveruizok","email":"steveruizok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/perfect-arrows_0.3.5_1623424521782_0.6900897844083651"},"_hasShrinkwrap":false},"0.3.7":{"version":"0.3.7","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":false,"singleQuote":false,"trailingComma":"es5"},"name":"perfect-arrows","author":{"name":"Steve Ruiz","email":"steveruizok@gmail.com"},"description":"Draw perfect arrows between points or shapes","homepage":"https://github.com/steveruizok/perfect-arrows","repository":{"type":"git","url":"https://github.com/steveruizok/perfect-arrows"},"keywords":["arrow","2d","point","rectangle","shape","between"],"module":"dist/perfect-arrows.esm.js","devDependencies":{"husky":"^7.0.2","tsdx":"^0.14.1","tslib":"^2.3.1","typescript":"^4.4.3"},"licenseText":"MIT License\n\nCopyright (c) 2020 Steve\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"perfect-arrows@0.3.7","dist":{"shasum":"6932e1c82d26cfe86e7933aed28d45502e5ea131","integrity":"sha512-wEN2gerTPVWl3yqoFEF8OeGbg3aRe2sxNUi9rnyYrCsL4JcI6K2tBDezRtqVrYG0BNtsWLdYiiTrYm+X//8yLQ==","tarball":"https://registry.npmjs.org/perfect-arrows/-/perfect-arrows-0.3.7.tgz","fileCount":26,"unpackedSize":269055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh22fgCRA9TVsSAnZWagAA9roP/jC9kskcTEBgi45x6PrJ\nn/ccO3nz/oDfFHwvFjDOH63+KPNfVo8JylAw2cLbE8b4YJUPPws0fvm8qQ3e\nJpVaMtW/CDtK5ET97Ogr9OR8kBOJ31TI5i27SJOnmE+QFSvE/B1ZvQrqPiJ6\nQl1IAntO83IIGJSg4uT4dZPx4MIJG9rsKLE1EO6qeo7FkSqp1dzeD6ke3GyH\nUBoKYzDE5JqsRZh6U/sqh7dSE4LNiFaF7MW+vHuPS91LptF4FjZtS+8AARDy\nqoEceiK9Uk5ogXdmGFDhR8GnYEEbLyeekv2dPWJUsCl79Ve/0W+FGfPqCPpy\nEQYBfhckouBcZLwdR2jtNB79hrqi0dOXzkBiu/tDFywXbaVXjUmlY7Kxfc78\nU+yk0kVzFM396dK3pHYsSIhz9b63p7ryZUC8xTZb7lROmH6xJ8o9PngudNlV\n9FP0nklzEvKkKS9J1tuiABuYuaGFq4d38Eko6UnTIXLEFqEzrWycyOG+Boy/\nrKS+lsHsLqzTtZuK1sv/DLRjoesRkTRxcCGg64Cs4Vb1ZthDKWXDWB0+S4Lk\nbQYBqVylZvbK2Y7zBy104TllYysyeUYMqBiXyEIiicIWOyXqQqcwmTI0wKZG\nZntydLeOFrRn9Dcu7d4Mk8X7cDNiIqAWTfCl8ju8jQNJwxwU/o6d3EEcFVc+\nyeDl\r\n=zFBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDkez5ogxpjFx7nZcVt/tNU1rGvoQc7grdCfRACX5SSAiBxBqTYE1LQ6q5halv58S2B1tnJDK9K0wR/o0k6/j4esA=="}]},"_npmUser":{"name":"steveruizok","email":"steveruizok@gmail.com"},"directories":{},"maintainers":[{"name":"steveruizok","email":"steveruizok@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/perfect-arrows_0.3.7_1632861951348_0.12961178418814878"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-17T21:07:05.147Z","0.1.0":"2020-07-17T21:07:05.262Z","modified":"2022-05-12T19:23:38.919Z","0.2.0":"2020-07-18T20:26:24.978Z","0.2.1":"2020-08-02T17:11:41.550Z","0.2.2":"2020-08-03T08:24:38.707Z","0.3.0":"2020-09-27T07:17:08.893Z","0.3.1":"2020-09-27T07:24:53.394Z","0.3.2":"2020-09-27T07:56:16.171Z","0.3.3":"2020-09-28T11:07:31.982Z","0.4.0-beta":"2020-10-04T13:49:48.206Z","0.3.4":"2021-06-11T12:15:45.959Z","0.3.5":"2021-06-11T15:15:21.943Z","0.3.7":"2021-09-28T20:45:51.499Z"},"maintainers":[{"name":"steveruizok","email":"steveruizok@gmail.com"}],"description":"Draw perfect arrows between points or shapes","homepage":"https://github.com/steveruizok/perfect-arrows","keywords":["arrow","2d","point","rectangle","shape","between"],"author":{"name":"Steve Ruiz","email":"steveruizok@gmail.com"},"license":"MIT","readme":"# Perfect Arrows\n\nA set of functions for drawing perfect arrows between points and shapes.\n\n- [`getArrow`](#getarrowx0-y0-x1-y1-options) - For point-to-point arrows.\n- [`getBoxToBoxArrow`](#getboxtoboxarrowx0-y0-w0-h0-x1-y1-w1-h1-options) - For rectangle-to-rectangle arrows.\n\n\n\n👉 [Demo](https://perfect-arrows.now.sh/)\n\n[](https://codesandbox.io/s/github/steveruizok/perfect-arrows/tree/master/example?fontsize=14&hidenavigation=1&theme=dark)\n\n
\n\n## Installation\n\n```\nnpm i perfect-arrows\n```\n\n_or_\n\n```\nyarn add perfect-arrows\n```\n\n## Usage\n\nThe functions in this library provide only the information needed to draw an arrow. You'll need to draw the arrow yourself using your technology of choice. See below for an example React component with SVG.\n\n### `getArrow(x0, y0, x1, y1, options)`\n\nThe `getArrow` function accepts the position of two points and returns an array containing information for:\n\n- three points: a start, end, and control point\n- three angles: an end, start, and center\n\nYou can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.\n\n```js\nconst arrow = getArrow(0, 0, 100, 200, {\n bow: 0,\n stretch: 0.5,\n stretchMin: 0,\n stretchMax: 420,\n padStart: 0,\n padEnd: 0,\n flip: false,\n straights: true,\n})\n\nconst [sx, sy, cx, cy, ex, ey, ae, as, sc] = arrow\n```\n\n#### Arguments\n\n| Argument | Type | Description |\n| -------- | ------ | --------------------------------------------------------------------------- |\n| `x0` | number | The x position of the starting point. |\n| `y0` | number | The y position of the starting point. |\n| `x1` | number | The x position of the ending point. |\n| `y1` | number | The y position of the ending point. |\n| options | object | An (optional) object containing one or more of the options described below. |\n\n#### Options\n\n| Option | Type | Default | Description |\n| ------------ | ------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `bow` | number | 0 | A value representing the natural bow of the arrow. At `0`, all lines will be straight. |\n| `stretch` | number | .5 | The effect that the arrow's length will have, relative to its `minStretch` and `maxStretch`, on the bow of the arrow. At `0`, the stretch will have no effect. |\n| `minStretch` | number | 0 | The length of the arrow where the line should be most stretched. Shorter distances than this will have no additional effect on the bow of the arrow. |\n| `maxStretch` | number | 420 | The length of the arrow at which the stretch should have no effect. |\n| `padStart` | number | 0 | How far the arrow's starting point should be from the provided start point. |\n| `padEnd` | number | 0 | How far the arrow's ending point should be from the provided end point. |\n| `flip` | boolean | false | Whether to reflect the arrow's bow angle. |\n| `straights` | boolean | true | Whether to use straight lines at 45 degree angles. |\n\n#### Returns\n\n| Argument | Type | Description |\n| -------- | ------ | ------------------------------------------------ |\n| `x0` | number | The x position of the (padded) starting point. |\n| `y0` | number | The y position of the (padded) starting point. |\n| `x1` | number | The x position of the (padded) ending point. |\n| `y1` | number | The y position of the (padded) ending point. |\n| `ae` | number | The angle (in radians) for an ending arrowhead. |\n| `as` | number | The angle (in radians) for a starting arrowhead. |\n| `ac` | number | The angle (in radians) for a center arrowhead. |\n\n## Example: A React Arrow Component\n\n```jsx\nimport * as React from \"react\"\nimport { getArrow } from \"perfect-arrows\"\n\nexport function PerfectArrow() {\n const p1 = { x: 64, y: 64 }\n const p2 = { x: 128, y: 96 }\n\n const arrow = getArrow(p1.x, p1.y, p2.x, p2.y, {\n padEnd: 20,\n })\n\n const [sx, sy, cx, cy, ex, ey, ae, as, ec] = arrow\n\n const endAngleAsDegrees = ae * (180 / Math.PI)\n\n return (\n \n \n \n \n \n )\n}\n```\n\n---\n\n### `getBoxToBoxArrow(x0, y0, w0, h0, x1, y1, w1, h1, options)`\n\nThe `getBoxToBoxArrow` function accepts the position and dimensions of two boxes (or rectangles) and returns an array containing information for:\n\n- three points: a start, end, and control point\n- three angles: an end, start, and center\n\nYou can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.\n\n**Note:** The options and values returned by `getBoxToBoxArrow` are in the same format as the options and values for `getArrow`.\n\n```js\nconst arrow = getBoxToBoxArrow(0, 0, 96, 128, 400, 200, 128, 96, {\n bow: 0,\n stretch: 0.5,\n stretchMin: 0,\n stretchMax: 420,\n padStart: 0,\n padEnd: 0,\n flip: false,\n straights: true,\n})\n\nconst [sx, sy, cx, cy, ex, ey, ae, as, sc] = arrow\n```\n\n#### Arguments\n\n| Argument | Type | Description |\n| -------- | ------ | --------------------------------------------------------------------------- |\n| `x0` | number | The x position of the first rectangle. |\n| `y0` | number | The y position of the first rectangle. |\n| `w0` | number | The width of the first rectangle. |\n| `h0` | number | The height of the first rectangle. |\n| `x1` | number | The x position of the second rectangle. |\n| `y1` | number | The y position of the second rectangle. |\n| `w1` | number | The width of the second rectangle. |\n| `h1` | number | The height of the second rectangle. |\n| options | object | An (optional) object containing one or more of the options described below. |\n\n#### Options\n\nSee options in `getArrow` above. (Both functions use the same options object.)\n\n#### Returns\n\nSee returns in `getArrow` above. (Both functions return the same set of values.)\n\n## Example: A React Box-to-box Arrow Component\n\n```jsx\nimport * as React from \"react\"\nimport { getBoxToBoxArrow } from \"perfect-arrows\"\n\nexport function PerfectArrow() {\n const p1 = { x: 64, y: 64, w: 64, h: 64 }\n const p2 = { x: 128, y: 96, w: 64, h: 64 }\n\n const arrow = getBoxToBoxArrow(\n p1.x,\n p1.y,\n p1.w,\n p1.h,\n p2.x,\n p2.y,\n p2.w,\n p2.h,\n {\n bow: 0.2,\n stretch: 0.5,\n stretchMin: 40,\n stretchMax: 420,\n padStart: 0,\n padEnd: 20,\n flip: false,\n straights: true,\n }\n )\n\n const [sx, sy, cx, cy, ex, ey, ae, as, ec] = arrow\n\n const endAngleAsDegrees = ae * (180 / Math.PI)\n\n return (\n \n \n \n \n \n )\n}\n```\n\n## Author\n\n[@steveruizok](https://twitter.com/steveruizok)\n","readmeFilename":"README.md","repository":{"type":"git","url":"https://github.com/steveruizok/perfect-arrows"}}