{"_id":"@commutatus/arrows-svg","name":"@commutatus/arrows-svg","dist-tags":{"latest":"1.8.1"},"versions":{"1.8.1":{"name":"@commutatus/arrows-svg","version":"1.8.1","description":"SVG arrow between two HTML elements","keywords":["arrow","arrows","svg"],"main":"dist/main.js","types":"types/index.d.ts","scripts":{"build":"webpack --mode=production","build-dev":"webpack --mode=development","start":"webpack --mode=development --watch","ts:watch":"tsc -p ./ --watch","ts:build":"tsc -p ./","test":"jest --coverage","lint":"eslint '*/**/*.{js,ts,tsx}' --fix","prepack":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/sasza2/arrows.git"},"author":{"name":"sasza"},"license":"MIT","bugs":{"url":"https://github.com/sasza2/arrows/issues"},"husky":{"hooks":{"pre-commit":"npm run lint && npm run test"}},"homepage":"https://github.com/sasza2/arrows#readme","devDependencies":{"@babel/core":"^7.9.0","@babel/plugin-transform-modules-commonjs":"^7.9.0","@babel/preset-env":"^7.9.5","@testing-library/preact":"^2.0.1","@types/jest":"^26.0.15","@types/react":"^17.0.0","@typescript-eslint/eslint-plugin":"^4.11.1","@typescript-eslint/parser":"^4.11.1","babel-eslint":"^10.1.0","babel-loader":"^8.1.0","eslint":"^6.8.0","eslint-plugin-react":"^7.22.0","eslint-plugin-react-hooks":"^4.2.0","husky":"^4.2.5","jest":"^26.4.4","ts-jest":"^26.4.4","ts-loader":"^9.5.0","typescript":"4.1.2","webpack":"^5.89.0","webpack-cli":"^5.1.4"},"dependencies":{"preact":"^10.5.7"},"_id":"@commutatus/arrows-svg@1.8.1","gitHead":"2c75ddb3eb552af0437ac32031eae0f9eb2d7dc0","_nodeVersion":"21.2.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-rfmu6BBkznMpviZIURY0h3N//0BLXEu8Ns/g+nBDap81GDrIA2cO7BQNhtF/rys5ug6E3npGCJEQ5L+YXxY6cg==","shasum":"01c2ddba381129b4dce1f1a4ec1260e1df8b0dc6","tarball":"https://registry.npmjs.org/@commutatus/arrows-svg/-/arrows-svg-1.8.1.tgz","fileCount":32,"unpackedSize":43257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlH/pnl/318ggZqXIZAlXcmvYkvyCWCdoZVMqHb9XFQwIhAPLzrZ1e4AhyfsSD/HHS/228Cu1fD3XqaERzMKSKbzhP"}]},"_npmUser":{"name":"mkv","email":"mkv@commutatus.com"},"directories":{},"maintainers":[{"name":"gurpal_singh","email":"gurpal@commutatus.com"},{"name":"mkv","email":"mkv@commutatus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/arrows-svg_1.8.1_1724427464074_0.3922945887214"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-23T15:37:43.992Z","1.8.1":"2024-08-23T15:37:44.276Z","modified":"2024-08-23T15:37:44.620Z"},"maintainers":[{"name":"gurpal_singh","email":"gurpal@commutatus.com"},{"name":"mkv","email":"mkv@commutatus.com"}],"description":"SVG arrow between two HTML elements","homepage":"https://github.com/sasza2/arrows#readme","keywords":["arrow","arrows","svg"],"repository":{"type":"git","url":"git+https://github.com/sasza2/arrows.git"},"author":{"name":"sasza"},"bugs":{"url":"https://github.com/sasza2/arrows/issues"},"license":"MIT","readme":"# arrows-svg\n\nExperimental fork\n\nLibrary for creating SVG arrow between two HTML elements. Positions of elements are observed, so when they change arrow will rerender. There's also react implementation --> <a href=\"https://www.npmjs.com/package/react-arrows\">react-arrows</a>.\n\n![Arrow](docs/arrow-1.png?raw=true \"Arrow example\")\n\n## Installation\n\n```sh\nnpm install arrows-svg\n```\n\n## How to use it\n\nhttps://codesandbox.io/s/brave-haslett-tlmz7\n\n```js\nimport arrowCreate, { DIRECTION } from 'arrows-svg'\n\nconst arrow = arrowCreate({\n  from: document.getElementById('from'),\n  to: document.getElementById('to'),\n})\n\n/*\n  - arrow.node is HTMLElement\n  - remove arrow from DOM with arrow.clear()\n*/\ndocument.body.appendChild(arrow.node);\n```\n\nArrow could be also created with `window.arrowCreate()` function.\n\n## CSS styles\n\nStyles should be added to make arrow visible. Feel free to change them.\n\n```css\n.arrow {\n  pointer-events: none;\n}\n\n.arrow__path {\n  stroke: #000;\n  fill: transparent;\n  stroke-dasharray: 4 2;\n}\n\n.arrow__head line {\n  stroke: #000;\n  stroke-width: 1px;\n}\n```\n\n### Example styles\n\n![Arrow](docs/hello-world.png?raw=true \"Arrow example\")\n\n## API\n\n```typescript\narrowCreate(props: IArrowProps): IArrow\n```\n\n```typescript\ninterface IArrowProps {\n  className?: string,\n  head?: HeadFactory,\n  from: Anchor,\n  to: Anchor,\n}\n```\n\n```typescript\ninterface IArrow {\n  node: DocumentFragment;\n  clear: () => void;\n}\n```\n\n`*` `clear()` - should be invoked to remove arrow.\n\n## Controlling arrow curve\n\n```js\nimport arrowCreate, { DIRECTION } from 'arrows-svg'\n\nconst arrow = arrowCreate({\n  className: 'arrow',\n  from: {\n    direction: DIRECTION.TOP,\n    node: document.getElementById('from'),\n    translation: [-0.5, -1],\n  },\n  to: {\n    direction: DIRECTION.RIGHT,\n    node: document.getElementById('to'),\n    translation: [0.9, 1],\n  },\n})\n```\n\n```typescript\nconst DIRECTION = {\n  TOP_LEFT: 'top-left',\n  TOP: 'top',\n  TOP_RIGHT: 'top-right',\n  RIGHT: 'right',\n  BOTTOM_LEFT: 'bottom-left',\n  BOTTOM: 'bottom',\n  BOTTOM_RIGHT: 'bottom-right',\n  LEFT: 'left',\n};\n```\n\n`direction` - position of `Anchor` in HTMLElement from/to.\n\n```typescript\ntype Anchor = {\n  node: HTMLElement | (() => HTMLElement);\n  direction: string;\n  translation: PointArray; // e.g. [1, -0.5]\n} | HTMLElement | (() => HTMLElement);\n```\n\n`translation` - is an array of two numbers `[x, y]` like `[-0.5, 1.3]` which are used by Bezier curve. `x` and `y` are offset multiplier of Bezier control point. Translation could be tested in `examples/form/index.html`\n\n`node` - if HTMLElement still doesn't exist in DOM, try to pass it as a function `() => node`.\n\n## Controlling head\n\n### Examples\n\n#### example with `diamond` head\n\n```js\nimport arrowCreate, { DIRECTION, HEAD } from 'arrows-svg'\n\nconst arrow = arrowCreate({\n  ...,\n  head: HEAD.DIAMOND, // or { func: 'diamond' }\n})\n\ndocument.body.appendChild(arrow.node);\n```\n\n___\n\n#### example with `diamond` head and specified size\n\n```js\nimport arrowCreate, { DIRECTION, HEAD } from 'arrows-svg'\n\nconst arrow = arrowCreate({\n  ...,\n  head: {\n    func: HEAD.DIAMOND,\n    size: 30, // custom options that will be passed to head function\n  }\n})\n\ndocument.body.appendChild(arrow.node);\n```\n\n___\n\n#### example with `image` head\n\n```js\nimport arrowCreate, { DIRECTION, HEAD } from 'arrows-svg'\n\nconst arrow = arrowCreate({\n  ...,\n  head: {\n    func: HEAD.IMAGE, // could be just 'image' / 'IMAGE'\n    width: 20, // px\n    height: 30, // px\n    image: 'abc.png', // url of image head\n  }\n})\n\ndocument.body.appendChild(arrow.node);\n```\n\n___\n\n### Head types\n\n![Head](docs/heads.png?raw=true \"Head types\")\n\n`*` Default head size is `10`<br />\n`*` Default head is `thin`<br />\n`*` `head` has also `distance` param, see more at https://codesandbox.io/s/damp-tdd-3fx91<br />\n`*` `head` could be also an array, see more at `examples/heads_multiple`\n\n___\n\n### Custom head\n\n```js\nimport arrowCreate, { DIRECTION, HEAD } from 'arrows-svg'\n\nconst arrow = arrowCreate({\n  ...,\n  head: {\n    func: ({ width }) => { // all passed props from head\n      const SVG_NS = 'http://www.w3.org/2000/svg';\n      const node = document.createElementNS(SVG_NS, 'g');\n\n      // ... bla bla like node.setAttributeNS(...)\n\n      return {\n        node,\n        width: width,\n        height: 25,\n      }\n\n      // OR node could be string like\n\n      return {\n        node: '<rect x=\"-10\" y=\"-10\" width=\"20\" height=\"25\" />',\n        width: size,\n        height: size,\n      }\n    },\n    width: 30,\n  }\n})\n\ndocument.body.appendChild(arrow.node);\n```\n\n`*` Return of custom head function always\nrequire a params like { `node`, `width`, `height` }\n\n## Building\n\n```sh\nnpm run build\n```\n\n## Development\n\n```sh\nnpm run start\n```\n\n## Testing\n\n```sh\nnpm run test\n```\n\n## Examples\n\nin [./examples](./examples) directory\n","readmeFilename":"README.md"}