{"_id":"@arist0tl3/react-resizable-rotatable-draggable","_rev":"2-88bb3d7be7be88aa0fce3b741bc80da6","name":"@arist0tl3/react-resizable-rotatable-draggable","dist-tags":{"latest":"0.3.0-dev.1"},"versions":{"0.3.0-dev.0":{"name":"@arist0tl3/react-resizable-rotatable-draggable","version":"0.3.0-dev.0","description":"A rectangle react component which can be resized and rotated","author":{"name":"MockingBot"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/mockingbot/react-resizable-rotatable-draggable.git"},"keywords":["react","rectangle","resize","rotate"],"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=6"},"scripts":{"build":"rollup -c","build-dev":"rollup -c -w","build-example":"cd example && npm install && npm run build","publish-dev":"npm publish --tag dev","start":"npm run build-dev","deploy":"npm run build && npm run build-example && gh-pages -d example/dist","prepack":"npm run build"},"peerDependencies":{"prop-types":"^15","react":"^16","styled-components":"^4"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.1","babel-plugin-styled-components":"^1.10.0","cross-env":"^5.2.0","eslint":"^5.12.0","eslint-config-standard":"^12.0.0","eslint-config-standard-react":"^7.0.2","eslint-plugin-import":"^2.14.0","eslint-plugin-node":"^8.0.1","eslint-plugin-promise":"^4.0.1","eslint-plugin-react":"^7.12.4","eslint-plugin-standard":"^4.0.0","gh-pages":"^2.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","rollup":"^1.1.0","rollup-plugin-babel":"^4.3.0","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^4.0.0","styled-components":"^4.1.3"},"gitHead":"35e795bbd3db5a88dd8c4181074c3cf9f18a588d","bugs":{"url":"https://github.com/mockingbot/react-resizable-rotatable-draggable/issues"},"homepage":"https://github.com/mockingbot/react-resizable-rotatable-draggable#readme","_id":"@arist0tl3/react-resizable-rotatable-draggable@0.3.0-dev.0","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-Kf5qRfEmWHCxrjPy5Ppkm4txTEOYoyAmALw+45plP6dd1En1jlcuu4OVN/lruFYFdLJXZhx+PxTv01iiSOeNjg==","shasum":"ecc383ed977f97486aa56a18148da0d427170b73","tarball":"https://registry.npmjs.org/@arist0tl3/react-resizable-rotatable-draggable/-/react-resizable-rotatable-draggable-0.3.0-dev.0.tgz","fileCount":7,"unpackedSize":136565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0YT5CRA9TVsSAnZWagAAPA0QAIS6e++MiUXdE/c5o+vl\nvDUlRL/QV86TLI8B0/MKEKGvoTDvQHaqWJlmOTyczvB7LgdojFEFSX26i2Wp\noGRr4gnEP8KSVeuKk229TAvvgHu8A1L4dg6t+oOVeh7BcdxgfqMnmEFqB+71\nW2RLf5Vk7P1+kGnU/MUsqGU0GHQegL3oq9luVvLc8SObhoQMVjFzx79wfayA\ndNzBIXm0yv5HYrFveZyyu9A72x0QJThKPh8JUl+zun+DukTsFQcw+GyLIlZg\n7FWbQXiNPFwH32AbYkTi5jWNqr9/mNhSwgAKhFFqzx8j5c5UDD0TUNO9hQvg\ne80/bL4B8pkMk1B54wMnt1KXNC4MIG/NuGy5Ts5ZKNgRI6qgGU8nKZfNJo9+\n8rwkn3gh5Bn51zCHrK5Kfp/03/8lG++QtF7H7Q3FbWJN5Ydh4H4oJ274astn\nGTgvxlVPa75QzxoBwmPgCQXQEbTcG2fF+nqXMVkaa5G8Ev/9UPnGO/CutiZf\nebT3BcMQqPheTPKcNljw9AFomyZ7WgWSeDRcwF9dZjVFEW2BVGlQKuGdWwlv\nggekzi/eedTu98/IczBx0itHBVt5M/3Q6py4iDQOfSsqIoyG8avD8spXh02E\n/58e1DTAk+LN/Glby5OfFW9tap8GIvSXRRZiSEyuKLREi6t47m6OwHNXPZx5\nHpPs\r\n=/FqX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuXOl7HUAwKWgznbzeL3x3on8G4LcHlZHab2FLzudVuAiBntQ/tNAdRt01kcCOSZyhNiIhRjHuJkSxh43jNTZAOTw=="}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-resizable-rotatable-draggable_0.3.0-dev.0_1590789369229_0.13135666801982304"},"_hasShrinkwrap":false},"0.3.0-dev.1":{"name":"@arist0tl3/react-resizable-rotatable-draggable","version":"0.3.0-dev.1","description":"A rectangle react component which can be resized and rotated","author":{"name":"MockingBot"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/mockingbot/react-resizable-rotatable-draggable.git"},"keywords":["react","rectangle","resize","rotate"],"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=6"},"scripts":{"build":"rollup -c","build-dev":"rollup -c -w","build-example":"cd example && npm install && npm run build","publish-dev":"npm publish --tag dev","start":"npm run build-dev","deploy":"npm run build && npm run build-example && gh-pages -d example/dist","prepack":"npm run build"},"peerDependencies":{"prop-types":"^15","react":"^16","styled-components":"^4"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.1","babel-plugin-styled-components":"^1.10.0","cross-env":"^5.2.0","eslint":"^5.12.0","eslint-config-standard":"^12.0.0","eslint-config-standard-react":"^7.0.2","eslint-plugin-import":"^2.14.0","eslint-plugin-node":"^8.0.1","eslint-plugin-promise":"^4.0.1","eslint-plugin-react":"^7.12.4","eslint-plugin-standard":"^4.0.0","gh-pages":"^2.0.1","prop-types":"^15.6.2","react":"^16.7.0","react-dom":"^16.7.0","rollup":"^1.1.0","rollup-plugin-babel":"^4.3.0","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^4.0.0","styled-components":"^4.1.3"},"gitHead":"6aa2a71e6160bc3d32e92e7f06abb1f21de55160","bugs":{"url":"https://github.com/mockingbot/react-resizable-rotatable-draggable/issues"},"homepage":"https://github.com/mockingbot/react-resizable-rotatable-draggable#readme","_id":"@arist0tl3/react-resizable-rotatable-draggable@0.3.0-dev.1","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-RfI+1x0Poa41CorOYFSrZkx4qVIyfo8Ayim7oKUSTaabSWQJOtwlrUl/aGbvGSX4j7azgeUYaBrvJSU84FswBA==","shasum":"3b99b3ff5b73357e4cbe143a23ad9621b2bd0be4","tarball":"https://registry.npmjs.org/@arist0tl3/react-resizable-rotatable-draggable/-/react-resizable-rotatable-draggable-0.3.0-dev.1.tgz","fileCount":7,"unpackedSize":138063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Y6eCRA9TVsSAnZWagAApEAP/jDyhCf+rTNuylg9sw1i\nNWfocLFx6cDW7roCjsm/IFHPeO2HEGS2zzzctkylsalSs056nNRN7+ErTfp/\njhF9WXyKq+SdmeYNQ3bUw5qnUexSNAFvm67QiMlroYwb4QCDf0ZIqGG/mKDD\nRrKXUsKulFwRizSRfJQKRZRaMHctEIbbXan2K2iQ/NoU8jStzIJm2Mbf/Uo+\nVmQrdYZlpgnV8DtngTt4O1sd6q7lKGx7m6O3HjFpTLSS2CM60Rkj02dAlSm/\nPXVzTSwdF1cMHLKgGDNqlUpYZwI08Yb6DX8pZLSlE3fBMZHI2jRl9/9wzX5N\nkjjG7yvgphkF+wqC+jeNBhV8VmkmdTpcZg4VA6WS+/d2HAW/Ol0cmVzR9MDw\nm09ImqnqqMOelzQqyKP3gT7QBJuPYnuFhRnvh4XCVOq7Tnu/lMK1nVYVCJBN\nDehPj5VVCwKZ59MySSoN7Wi/OQgLHFHW8CUxtnq/ysipowBUdQHCVLRjYucg\nNLVIJhM+qtMJ8wU0ZAGLLO9eIvZsBWd4fYibHWwEZ+XMgJlb1EA8HWNp+j1c\nnuEIIDEqBA8iGTi0Fq6u9rCdxURaUKxi8INeEzE7P/tXCiHotP/0rjx/yJGy\nm5RrwJXllfp5sHWtjUlrcUNCR8tqdHbT6jstO2H7F2CP1XY2BFQZ+CzZ8aCv\n0KbG\r\n=xsWD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCrDdbNnFJ+FEf0xKCULHLO6fAVefIzYOdSP7DDxoLpwIhAN1h3L9WgjpRmD2ZcPlc/LHbVY3VdkEmTEJR0QHgwp0l"}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-resizable-rotatable-draggable_0.3.0-dev.1_1590791837568_0.18967426743920335"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-29T21:56:09.173Z","0.3.0-dev.0":"2020-05-29T21:56:09.495Z","modified":"2022-04-04T15:27:55.195Z","0.3.0-dev.1":"2020-05-29T22:37:17.696Z"},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"description":"A rectangle react component which can be resized and rotated","homepage":"https://github.com/mockingbot/react-resizable-rotatable-draggable#readme","keywords":["react","rectangle","resize","rotate"],"repository":{"type":"git","url":"git+https://github.com/mockingbot/react-resizable-rotatable-draggable.git"},"author":{"name":"MockingBot"},"bugs":{"url":"https://github.com/mockingbot/react-resizable-rotatable-draggable/issues"},"license":"MIT","readme":"# React-resizable-rotatable-draggable-rectangle\n\n[![NPM](https://img.shields.io/npm/v/react-resizable-rotatable-draggable.svg)](https://www.npmjs.com/package/react-resizable-rotatable-draggable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nA react widget that can be resized and rotated via a handler.\n\n### Installation\n\n```bash\nnpm install --save react-resizable-rotatable-draggable`\n```\n\nThen you will need to install peer dependency\n\n```bash\nnpm install --save styled-components\n```\n\n### Usage\n\n```jsx\nimport React, { Component } from 'react'\nimport ResizableRect from 'react-resizable-rotatable-draggable'\n\nclass App extends Component {\n constructor() {\n super()\n this.state = {\n width: 100,\n height: 100,\n top: 100,\n left: 100,\n rotateAngle: 0\n }\n }\n\n handleResize = (style, isShiftKey, type) => {\n // type is a string and it shows which resize-handler you clicked\n // e.g. if you clicked top-right handler, then type is 'tr'\n let { top, left, width, height } = style\n top = Math.round(top)\n left = Math.round(left)\n width = Math.round(width)\n height = Math.round(height)\n this.setState({\n top,\n left,\n width,\n height\n })\n }\n\n handleRotate = (rotateAngle) => {\n this.setState({\n rotateAngle\n })\n }\n\n handleDrag = (deltaX, deltaY) => {\n this.setState({\n left: this.state.left + deltaX,\n top: this.state.top + deltaY\n })\n }\n\n render() {\n const {width, top, left, height, rotateAngle} = this.state\n return (\n
\n \n
\n )\n }\n}\n\nexport default App\n```\n\n### Props\n\n| Props | Type | Default | Example |\n|:-----------:|:-----------------------:|:-------:|:-------------------------------------:|\n|left | number.isRequired | | 10 |\n|top | number.isRequired | | 10 |\n|width | number.isRequired | | 100 |\n|height | number.isRequired | | 100 |\n|rotateAngle | number | 0 | 0 |\n|rotatable | bool | true | true |\n|zoomable | string | '' | 'n, w, s, e, nw, ne, se, sw' |\n|minWidth | number | 10 | 0 |\n|minHeight | number | 10 | 0 |\n|aspectRatio | number (width / height) | | 1(which makes the rectangle a square) |\n|onRotateStart| func | | |\n|onRotate | func | | (rotateAngle) |\n|onRotateEnd | func | | |\n|onResizeStart| func | | |\n|onResize | func | | (style, isShiftKey, type) |\n|onResizeEnd | func | | |\n|onDragStart | func | | |\n|onDrag | func | | (deltaX, deltaY) |\n|onDragEnd | func | | |\n\n## License\n\nMIT © [MockingBot](https://github.com/mockingbot)\n","readmeFilename":"README.md"}