{"_id":"@cyfrost/zoomable-canvas","_rev":"1-c23595142324eb67af9aba21a0261bdc","name":"@cyfrost/zoomable-canvas","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@cyfrost/zoomable-canvas","version":"2.0.0","private":false,"description":"An Angular 2 component allowing panning and zooming an image in a canvas element","main":"index.js","typings":"index.d.ts","peerDependencies":{"@angular/core":"^8.2.13","zone.js":"^0.10.2","rxjs":"^6.5.3"},"devDependencies":{"@angular/compiler":"^8.2.13","@angular/compiler-cli":"^8.2.13","@angular/core":"^8.2.13","@types/node":"^12.12.6","rxjs":"^6.5.3","typescript":"^3.7.2","zone.js":"^0.10.2"},"scripts":{"build":"rm -rf lib && tsc -p src","clean":"rm -rf lib"},"repository":{"type":"git","url":"git+https://github.com/cyfrost/zoomable-canvas.git"},"author":{"name":"Neal Miller","email":"neal.miller@durwella.com"},"license":"MIT","gitHead":"1c7bb45b277c56feb450bcb082cae9a2484ca22d","bugs":{"url":"https://github.com/cyfrost/zoomable-canvas/issues"},"homepage":"https://github.com/cyfrost/zoomable-canvas#readme","_id":"@cyfrost/zoomable-canvas@2.0.0","_nodeVersion":"13.1.0","_npmVersion":"6.13.0","dist":{"integrity":"sha512-ZnrZRP5zo2zsUwP4LAD7HWx9t1q5C0456wVYBd1nUx2PJxJ2Pb3L5aBW5iE8b/3EiprzHMX9rLJIz1pQJplq0Q==","shasum":"6e86e15c8ab9988d79e4eb99ec518454d287c90f","tarball":"https://registry.npmjs.org/@cyfrost/zoomable-canvas/-/zoomable-canvas-2.0.0.tgz","fileCount":8,"unpackedSize":26445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxEmOCRA9TVsSAnZWagAAieIP/38iMgN2blBtX3+oBwMI\niER5wvd1guH0D0kttklFC+/kX1RfiyyOqwJM/tEEXSLuVb2s6A06A0zzBhd6\nXMopljni4gUq75di2TH8nkxDPCvZ6GAXCBsdGThVpa4GXvNqoJ3GWX3WaXds\nq81fxled+5GHb0abdIrBtkifDCs1F1lqoOAtgnrMSw2WuqhAbWIMbEKxhOFS\n6ep9vKB6prYqHqjIMH0yycrI9y7cUkvIiyPd9L9dLsaiBrv93WlN/bAYBp6o\ndw3l92osFUbTm4DxJG4vto6x2YFMB0zJhbO7g4rbhSTNRAnAXJ4sH/t1Zrft\n9mWrtCimP7PvOuMvemEvuoc7xtPdI4Nrudri8Ax61kagh8Dkju4Nvv+8vQdS\no2Vv9c3Z8Vh4FLReT6H+6T7MjlPTcQerQ2+dYsdBZlDgMUJ6v2oz+CpU994v\nU1Iaf+NpSDhkMnRHDFl2/g5pJ/GjinzrRcdT7X0BLqZmcwQNktVdQZKusUXs\nDjbbK4IOOB4dVroTyxKZLoZX5VHtGoZMFh+w/NYVmybbscFoL4W1K7GUcs8/\nkj6OwLQoMzFN5Yk+bOt3Iw3dxSItOA+NeL9w2jtLuHBxuN8u3bSqNJSwanTM\nSPThqiTuq2u+hSej973TIxr7xQT/53zMFRuK2+XqVc1mWe0E9AfxQKWtJoFB\nNa90\r\n=3p3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNgJ5i15IRkWaK37UfywuO030JRvuZy+CVlguUfI5GnAiATpLi8EzcFGYfZvs05cJqReviYWLltstmqVL564Bw19A=="}]},"maintainers":[{"name":"cyfrost","email":"cyrus.frost@hotmail.com"}],"_npmUser":{"name":"cyfrost","email":"cyrus.frost@hotmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/zoomable-canvas_2.0.0_1573144973809_0.665166990779736"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-07T16:42:53.567Z","2.0.0":"2019-11-07T16:42:54.004Z","modified":"2022-04-05T02:26:47.809Z"},"maintainers":[{"name":"cyfrost","email":"cyrus.frost@hotmail.com"}],"description":"An Angular 2 component allowing panning and zooming an image in a canvas element","homepage":"https://github.com/cyfrost/zoomable-canvas#readme","repository":{"type":"git","url":"git+https://github.com/cyfrost/zoomable-canvas.git"},"author":{"name":"Neal Miller","email":"neal.miller@durwella.com"},"bugs":{"url":"https://github.com/cyfrost/zoomable-canvas/issues"},"license":"MIT","readme":"# zoomable-canvas\n\n> An Angular 2 component allowing panning and zooming an image in a canvas element\n\nA `<canvas>` element hosting an `HtmlImageElement` which can be panned and zoomed using the mouse.\n\nThis component also provides two-way bindings for panning and zooming programmatically.  For an example of the component in action, see the [example page](https://durwella.github.io/zoomable-canvas/).\n\n## Install\n\n```\nnpm install --save @durwella/zoomable-canvas\n```\n\n## Usage\nImport the component in your `NgModule`:\n\n```js\nimport { ZoomableCanvasComponent } from '@durwella/zoomable-canvas';\n\n@NgModule({\n    ...\n    declarations: [\n        ...\n        ZoomableCanvasComponent\n    ],\n    ...\n})\nexport class AppModule {\n}\n```\n\nInclude the components in your app:\n\n```html\n<zoomable-canvas \n    [image]=\"image\"\n    (topChange)=\"top = $event\" (bottomChange)=\"bottom = $event\" \n    (leftChange)=\"left = $event\" (rightChange)=\"right = $event\"\n    [(centerX)]=\"centerX\" [(centerY)]=\"centerY\"\n    [(zoomLevel)]=\"zoomLevel\" [maxZoom]=\"maxZoom\" [minZoom]=\"0\"\n    (canvasWidthChange)=\"canvasWidth = $event\" (canvasHeightChange)=\"canvasHeight = $event\"\n></zoomable-canvas>\n```\n\n## Contribute\nPull requests accepted.\n\n## License\n[MIT © Durwella LLC 2017](https://raw.githubusercontent.com/Durwella/zoomable-canvas/master/LICENSE)","readmeFilename":"README.md"}