{"_id":"react-mops","_rev":"3-0b9def64f8e9dc65150e459f77985171","name":"react-mops","dist-tags":{"latest":"1.0.0","prerelease":"2.0.0-beta.0"},"versions":{"0.1.1":{"name":"react-mops","version":"0.1.1","description":"Modify Orientation Position Size","keywords":["coordinates","dimesion","drag","draggable","edit","editor","move","movable","orientation","position","resize","resizable","rotate","rotatable","size","styled-components","transform"],"homepage":"https://github.com/dekk-app/react-mops#readme","bugs":{"url":"https://github.com/dekk-app/react-mops/issues"},"repository":{"type":"git","url":"git+https://github.com/dekk-app/react-mops.git"},"license":"MIT","author":{"name":"Gregor Adams","email":"greg@pixelass.com"},"main":"index.js","module":"dist/esm/index.js","types":"index.d.ts","directories":{"lib":"dist","doc":"doc","test":"test"},"scripts":{"prebuild":"ngineer clean","build":"ngineer --rollup --prod","clean":"ngineer clean","predev":"ngineer clean","dev":"ngineer --rollup --watch","test":"ngineer test","watch":"ngineer --rollup --watch","prewatch":"ngineer clean"},"dependencies":{"@types/react":"16.9.2","ts-lib":"0.0.5"},"devDependencies":{"@ngineer/cli":"1.3.1","@ngineer/configs":"1.3.1","@ngineer/testing-utils":"1.3.1","@types/react-dom":"16.9.0","react":"16.9.0","react-dom":"16.9.0","rollup-plugin-url":"2.2.2","ts-node":"8.3.0","typescript":"3.6.2"},"peerDependencies":{"react":">=16.9.0"},"publishConfig":{"access":"public"},"gitHead":"0487d73ca9a59b83c52ab70df808cc1ce1a7ee79","_id":"react-mops@0.1.1","_nodeVersion":"12.10.0","_npmVersion":"lerna/3.16.4/node@v12.10.0+x64 (darwin)","_npmUser":{"name":"pixelass","email":"greg@pixelass.com"},"dist":{"integrity":"sha512-q4LB9fiXoJPb6SJDE501BgTdd+OIXVKkdmebMjGoPqMa4TQbWJQ9Mbn4cSLtV9dx2z6rfhq7gIopYL6W8mDv9g==","shasum":"41c0df77cf08c037ed957c13afd80a4428eaa8ef","tarball":"https://registry.npmjs.org/react-mops/-/react-mops-0.1.1.tgz","fileCount":36,"unpackedSize":174233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdg9B+CRA9TVsSAnZWagAAHlQP/j746VYBk5qXUzwBflg8\nwSNOCYlbx1Bywnnxg3Va6o1JWC8qdUO/TZ9+9mom3DuJcF7X+kSkHeMB2qv+\noRgIR9KjEgsQgq+ruICVgr3jNM/RWhmXO6NxRwK2VuyCF1G8uSti7ycKRCvr\ndDoeZ3+HkftCIAnkk5KaX9c+/+y8tjZpq1YoRsfk8S7Rs0b++73fzAXAijyB\nCC5jnQZ0zPQmjC328as92xA3ReMmSPpUbXuKmNhFYBjYT066tG4XFNu07Pmz\nHpeahdNM2MG6M2WywS6b28xL5yN3K538T67t1SGxHSOTmYGzuzFARamdHit1\nWCalagK+nFuK/VD3YDc7K4NHzeA/ErEPALsdBmFSd8o4PgsVqBtuUXg6aTAL\nUHdfHCyb4DHOF+Oxkrz20gw8jFkSembvmks4KnP1/XUD8++nVB5Ddb2EM88X\nUqDHhdn4wxzBQpG51UuwBwcbMnZKvGdySMF+C5aBL2g6GZgDaDwMtIy9dXzj\nwyBL4aNIc4R7SBl3lUSldAlEiGwBv28jlD4qZU989+kaQhDHJCXW3GUHNV7p\n/F7Gb+uY6vrmZKS4SNIFq+Md5Q0MhhbHITVtJV0017SGJfRsqEcM/R4OBmIw\nR3yWCZFZt/DsrzzX3XWnoU9F9FuIsKOfwo5UIFwkXjiMDQSy7LEXwGAiyUw7\nxh3G\r\n=JKhA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1RkTJS6fG9WDEnGNMCTpP5vvLGlmq1rqXJt2+TQXuTAIhAMb3mLAtaNMKEHSnjKxgN/sZRdzL1EYE8uPUOUtZ5MrH"}]},"maintainers":[{"name":"pixelass","email":"greg@pixelass.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-mops_0.1.1_1568919677780_0.9599880128477054"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-mops","version":"1.0.0","description":"Modify Orientation Position Size","keywords":["coordinates","dimension","drag","draggable","edit","editor","move","movable","orientation","position","resize","resizable","rotate","rotatable","size","styled-components","transform"],"homepage":"https://github.com/dekk-app/react-mops#readme","bugs":{"url":"https://github.com/dekk-app/react-mops/issues"},"repository":{"type":"git","url":"git+https://github.com/dekk-app/react-mops.git"},"license":"MIT","author":{"name":"Gregor Adams","email":"greg@pixelass.com"},"main":"index.js","module":"dist/esm/index.js","types":"index.d.ts","directories":{"lib":"dist","doc":"doc","test":"test"},"scripts":{"prebuild":"yarn clean","build":"ngineer --rollup --prod","clean":"ngineer clean 'src/elements.css.d.ts'","dev":"yarn watch","test":"ngineer test","watch":"ngineer --rollup --watch","prewatch":"yarn clean"},"dependencies":{"@types/classnames":"^2.2.9","@types/react":"^16.9.4","@types/uuid":"^3.4.5","classnames":"2.2.6","immutability-helper":"^3.0.1","ts-lib":"^0.0.5","uuid":"^3.3.3"},"devDependencies":{"@ngineer/cli":"1.3.1","@ngineer/configs":"1.3.1","@ngineer/testing-utils":"1.3.1","@types/react-dom":"16.9.1","autoprefixer":"9.6.1","cssnano":"4.1.10","postcss-url":"8.0.0","react":"16.10.1","react-dom":"16.10.1","rollup-plugin-postcss":"2.0.3","rollup-plugin-url":"2.2.2","ts-node":"8.4.1","typescript":"3.6.3"},"peerDependencies":{"react":">=16.9"},"publishConfig":{"access":"public"},"gitHead":"97cdd6e1de36716fb4446a4b55c79eeda919a580","_id":"react-mops@1.0.0","_nodeVersion":"12.9.0","_npmVersion":"lerna/3.16.4/node@v12.9.0+x64 (darwin)","_npmUser":{"name":"pixelass","email":"greg@pixelass.com"},"dist":{"integrity":"sha512-fr9V90OYsBuubYM0kphowKh2DGbYzojXG6R+uM6V2D+cS5WT/aBpLUMXoDHD9ynza7+fg7UAwh1SVv2hAINANA==","shasum":"73fccabb8c4872ff9cd5a698f8b61fe46a9673e5","tarball":"https://registry.npmjs.org/react-mops/-/react-mops-1.0.0.tgz","fileCount":82,"unpackedSize":239298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlG/ICRA9TVsSAnZWagAAw0UP/3PsRgFSHDfKmKypyVcM\n/gQBZPT7/yitiApThcdm/2Orvu/e2cpXyrVqRWKJHmi77usnL0y5cUStLnQA\nLUxNQ3sX+ViwKBCuC1znyG94GdXzGR25Q9v1nDWpKgeX8dnyQopdn6Ul206R\nY7AL6QHDi6f/BBpsAE0GLATYC1t7K+M9LSwei3i90lun5VSs930CQeMpb4Fs\nCAzD/k5H81hNUhnP2srwhrh9HjD0Ih6045SpHLmHj+7wQwSTuRVMJ4InaCam\nQaOI9s+FqNgCbz0PnhabRPVCnXoZ6diGL2VTtkpn4nMiGhPBp7R59IOR7H9f\nHNcruCmWcIgcDqxznHLCz7K54FT8SV+GSZfZ2ZSqeVGqPwtcPk2s0oLIUlV5\nbCswxWOw+f3pBKbx++fTIeSd2+jJ63cJ3YUawp+wHT9Buh5V85lp8VDN0b5E\n/M0+XRsCNM2/+MNRaoeUMYqpdAwWkd3ibcvYn6r1Pm7SGOLjfeZx8hj7c7B8\nh4y0yB5ZF1a/Z8aSqsXSxtrzjlaJGZqz+BHD4vtszHDetIcxuh6XKeAoMCT5\njY0o8NrAy/YZjkPJTQk1tmP2yk8q7kcynaKEN8NGn2iNeLhrg70lltMpZ1mH\nJt/T8567qoyVdEv05LlBVy4eSAFbOMgtK0TGlj6i0Jq5QKCZaNFdxXJyEKvO\n++xV\r\n=9e8T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDLTTlgEzRZgSArCrneuWsUFOoLuLCdb5EUJ+tNz+0BSAiBw21ZY3/XH/cFG3EwyG76Te7Aak6iEgBamX4x9nnl3HA=="}]},"maintainers":[{"name":"pixelass","email":"greg@pixelass.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-mops_1.0.0_1570009032301_0.5048266520957083"},"_hasShrinkwrap":false},"2.0.0-beta.0":{"name":"react-mops","version":"2.0.0-beta.0","description":"Modify Orientation Position Size","keywords":["coordinates","dimension","drag","draggable","edit","editor","move","movable","orientation","position","resize","resizable","rotate","rotatable","size","styled-components","transform"],"homepage":"https://github.com/dekk-app/react-mops#readme","bugs":{"url":"https://github.com/dekk-app/react-mops/issues"},"repository":{"type":"git","url":"git+https://github.com/dekk-app/react-mops.git"},"license":"MIT","author":{"name":"Gregor Adams","email":"greg@pixelass.com"},"main":"index.js","module":"dist/esm/index.js","types":"index.d.ts","directories":{"lib":"dist","doc":"doc","test":"test"},"scripts":{"prebuild":"yarn clean","build":"ngineer --rollup --prod","clean":"ngineer clean 'src/elements.css.d.ts'","dev":"yarn watch","test":"ngineer test","watch":"ngineer --rollup --watch","prewatch":"yarn clean"},"dependencies":{"@types/classnames":"^2.2.9","@types/react":"^16.9.9","@types/uuid":"^3.4.5","classnames":"2.2.6","immutability-helper":"^3.0.1","ts-lib":"^0.0.5","uuid":"^3.3.3"},"devDependencies":{"@ngineer/cli":"1.3.1","@ngineer/configs":"1.3.1","@ngineer/testing-utils":"1.3.1","@types/react-dom":"16.9.2","cssnano":"4.1.10","postcss-url":"8.0.0","react":"16.10.2","react-dom":"16.10.2","rollup-plugin-babel":"4.3.3","rollup-plugin-json":"4.0.0","rollup-plugin-postcss":"2.0.3","rollup-plugin-ts":"0.2.0","rollup-plugin-url":"3.0.0","ts-node":"8.4.1","typescript":"3.6.4"},"peerDependencies":{"react":">=16.9"},"publishConfig":{"access":"public"},"gitHead":"fa8be1006fbde0020735cef68d9e2f7b5824c50c","readme":"# M.O.P.S.\n\n**M**odify **O**rientation **P**osition **S**ize\n\n## Value Proposition\n\nM.O.P.S aims to provide a component that allows various transformations\nto an Element as seen in design software like Photoshop, Sketch any many others.\n\n## Installation\n\n**NPM**\n\n```shell\nnpm install react-mops --save-dev\n```\n\n**Yarn**\n\n```shell\nyarn add react-mops\n```\n\n## Docs\n\n### Components\n\n#### Box\n\n### Hooks\n\n#### useShift `() => boolean;`\n\nlistens for the shift key.\n\n#### useAlt `() => boolean;`\n\nlistens for the alt/option key.\n\n#### useControl `() => boolean;`\n\nlistens for the control/ctrl key.\n\n#### useMeta `() => boolean;`\n\nlistens for the meta key.\n\n#### useRotation\n\nHook to modify the orientation of an element.\n\n#### usePosition\n\nHook to modify the position of an element.\n\n#### useSize\n\nHook to modify the size of an element.\n\n#### useSnap\n\nHook to enable snapping.\n\n#### useGuides\n\nHook to draw guides.\n\n#### useCursors\n\nHook to enable custom cursors. (requires css file)\n\n\n### Basic usage examples\n\n```jsx\nimport {Box} from \"react-mops\";\nimport \"react-mops/styles.css\";\n\nconst App = () => (\n    <div className=\"container\">\n        <Box isResizable>Resize me!</Box>\n        <Box isRotatable>Rotate me!</Box>\n        <Box isDraggable>Drag me!</Box>\n        <Box isResizable isRotatable isDraggable>\n            I can do it all!\n        </Box>\n    </div>\n);\n```\n\n### Homegrown\n\nM.O.P.S. provides hooks to build custom components.\n\n**rotatable.jsx**\n\n```jsx\nimport {useRotation, useShift} from \"react-mops\";\n\nconst Rotatable = ({children, initialRotation, onRotate, onRotateEnd, onRotateStart, style}) => {\n    // Use Shift to rotate in steps\n    const shiftKey = useShift();\n\n    // Hook options\n    const options = React.useMemo(\n        () => ({\n            onRotate,\n            onRotateEnd,\n            onRotateStart,\n            step: 45, // If steps are active rotation uses this value\n            steps: shiftKey // Activates steps\n        }),\n        [shiftKey]\n    );\n\n    // Rotation Hook\n    const [\n        deg, // Current rotation (degree on z-axis)\n        {\n            onMouseDown, // Triggers rotation\n            onTouchStart, // Triggers rotation\n            ref // Element considered as rotation center\n        }\n    ] = useRotation(initialRotation, options);\n\n    // Dynamic element styles\n    const style = React.useMemo(\n        () => ({\n            ...style,\n            transform: `rotate3d(0, 0, 1, ${deg}deg)`\n        }),\n        [deg]\n    );\n\n    // Box with content and a dedicated handle to rotate the element\n    // The content is used to determind the rotation center (not anchor point)\n    return (\n        <div className=\"rotatable\" style={style}>\n            <span\n                className=\"rotatable-handle\"\n                onMouseDown={onMouseDown}\n                onTouchStart={onTouchStart}\n            />\n            <div ref={ref} className=\"rotatable-content\">\n                {children}\n            </div>\n        </div>\n    );\n};\n\nRotatable.defaultProps = {\n    style: {},\n    initialRotation: 0\n};\n\nexport default Rotatable;\n```\n","readmeFilename":"README.md","_id":"react-mops@2.0.0-beta.0","_nodeVersion":"12.9.0","_npmVersion":"lerna/3.16.4/node@v12.9.0+x64 (darwin)","_npmUser":{"name":"pixelass","email":"greg@pixelass.com"},"dist":{"integrity":"sha512-jYHOEsAq7JpqEbwh221MS6oVk0Z/9l+zzB/GZCRThhYzFkgfqFqViihKX+mhU5DaJurG7qFpmqnDIDa7Mcy9lg==","shasum":"d860624b0a980d588d5fe8d4c0a53720caf48e74","tarball":"https://registry.npmjs.org/react-mops/-/react-mops-2.0.0-beta.0.tgz","fileCount":114,"unpackedSize":259836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduagICRA9TVsSAnZWagAAIUEP/1+qGghStW+gauzUe+13\nvQ4DvijY9+WdS/ht72T3GJnlhr9PlLCWO0eqBFmwaQuZURaTTdZ18z7FNqaN\nHk94T6hvaz4qadLqWYWKBF1AkC6kBMO3L+sS45h5dirVZ5yKbHZDbXNaiShw\nqpyn0VUPUaHgulzxOpJq4Cf5Q3UR2rWpB9JTMXI9NxOasXtyImMWuRLngkv8\nPeMUstoUc7WJ728EHae1Gsnh6NgCAM60XLyWGgokA8YMc9xwJHQjEfDSv3NU\nXIYViABv2MtIH19/PxCV6L3sYcFmOhnlHklAgHEsy+JkPh0CUXjBWebwrp9e\nz1jj7zkMhQtKBqR124aakXADoc4VIOvSQVVDac7T19+U8rKMH+sB45lH4dDi\nzfnAM/mjP2OGq4u2eX0nxvfLP6DwNEDKDBgJiu6nbFlELZoG2qMTvMM+zhwR\nWzFkMaNBCZkV3+6HxWvH9ogsmX1RqzpH3bipsO4T2sFEJB3I3icidcuV1n1n\n6DNiJvwSY12X0dMIRiYWIFx45lDsSGmY/L0MR2xADn4O4ZgyRRBAnAEiGRmN\nYvMlDcXRYHMshKMhpDPaLr4TfkJuRkaMrfeUZOw+QnIL3xRzoAEG+4zSXdOZ\noudw0Pk3HI7KSEfTc8q4Ry0PYy10zHUtd+S5bmAuRdqgb7woW8MmIzc5JubG\nQzQ0\r\n=yUfO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBIggqzAJL8Y8W81BjqmpBMXLBIYYmhhysiyhNdbM6lIAiEAhUvu64liJX9YJdBcK+pkupWNYxPCyw2v8FmGy5EQMEM="}]},"maintainers":[{"name":"pixelass","email":"greg@pixelass.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-mops_2.0.0-beta.0_1572448263968_0.8532084061881171"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-19T19:01:17.543Z","0.1.1":"2019-09-19T19:01:17.991Z","modified":"2022-05-14T14:57:55.856Z","1.0.0":"2019-10-02T09:37:12.428Z","2.0.0-beta.0":"2019-10-30T15:11:04.154Z"},"maintainers":[{"name":"pixelass","email":"greg@pixelass.com"}],"description":"Modify Orientation Position Size","homepage":"https://github.com/dekk-app/react-mops#readme","keywords":["coordinates","dimension","drag","draggable","edit","editor","move","movable","orientation","position","resize","resizable","rotate","rotatable","size","styled-components","transform"],"repository":{"type":"git","url":"git+https://github.com/dekk-app/react-mops.git"},"author":{"name":"Gregor Adams","email":"greg@pixelass.com"},"bugs":{"url":"https://github.com/dekk-app/react-mops/issues"},"license":"MIT","readme":"","readmeFilename":""}