{"_rev":"7-298a9d5e6d6e092576646bd592e8739f","time":{"created":"2022-05-07T10:16:08.765Z","0.0.1":"2022-05-07T08:24:33.578Z","modified":"2022-05-07T10:16:09.105Z","0.0.2":"2022-05-07T08:54:26.968Z","0.0.3":"2022-05-07T09:17:21.724Z","0.0.4":"2022-05-07T09:39:00.900Z","0.0.5":"2022-05-07T09:44:35.269Z","0.1.0":"2022-05-07T10:16:08.969Z"},"_id":"@dream07312/vue3-pinch-scroll-zoom","name":"@dream07312/vue3-pinch-scroll-zoom","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dream07312/vue3-pinch-scroll-zoom","version":"0.1.0","private":false,"description":"Vue3 component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices","author":{"name":"Rodion Shlomo Solomonyk"},"homepage":"https://github.com/voratham/vue-pinch-scroll-zoom/tree/main_vue3","license":"MIT","repository":{"type":"git","url":"git://github.com/coddicat/vue-pinch-scroll-zoom.git"},"scripts":{"serve":"vue-cli-service serve dev/serve.ts","prebuild":"rimraf ./dist","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife","postbuild":"rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"},"main":"dist/vue3-pinch-scroll-zoom.ssr.js","browser":"dist/vue3-pinch-scroll-zoom.esm.js","module":"dist/vue3-pinch-scroll-zoom.esm.js","unpkg":"dist/vue3-pinch-scroll-zoom.min.js","types":"dist/types/src/entry.esm.d.ts","peerDependencies":{"vue":"^3.0.5"},"engines":{"node":">=12"},"devDependencies":{"@types/lodash":"^4.14.168","lodash":"^4.17.21","@babel/core":"^7.14.6","@babel/preset-env":"^7.14.7","@babel/preset-typescript":"^7.14.5","@rollup/plugin-alias":"^3.1.2","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^14.0.0","@rollup/plugin-node-resolve":"^9.0.0","@rollup/plugin-replace":"^2.4.2","@vue/cli-plugin-babel":"^4.5.13","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"^4.5.13","@vue/compiler-sfc":"^3.0.11","@zerollup/ts-transform-paths":"^1.7.18","cross-env":"^7.0.3","minimist":"^1.2.5","postcss":"^8.2.10","rimraf":"^3.0.2","rollup":"^2.52.8","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-vue":"^6.0.0","rollup-plugin-typescript2":"^0.30.0","ttypescript":"^1.5.12","typescript":"^4.0.3","vue":"^3.0.5"},"gitHead":"82470aa0b2ce078ec311421e9c7091d3ec149a9d","bugs":{"url":"https://github.com/coddicat/vue-pinch-scroll-zoom/issues"},"_id":"@dream07312/vue3-pinch-scroll-zoom@0.1.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-rKfFc+e5tp2ATnZWPZTw0b3Api+6qtygLYIO/R7XMcu/VNFD3n8MhLXZqpEaAtQBwMxuaBQtHNmRp8gzXnNBKQ==","shasum":"cd5da4885c57108e5be4b49e611de98a27ea67a0","tarball":"https://registry.npmjs.org/@dream07312/vue3-pinch-scroll-zoom/-/vue3-pinch-scroll-zoom-0.1.0.tgz","fileCount":3,"unpackedSize":17692,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+c/zoe+GLKapXwefyflbQRL/o3BzWrEGvACY9fF+uvAiAlGj3nVpbcVo/2WZWVskp3MYHgmtciNPOc4Vozgma4NQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidkboACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj2A/+KXWc8VLLEwnioEZQtBLAIvA2jrSHnu+THLDEPamty2fKsYDQ\r\ntdRBgWVo2zy4FnvSdKp95td97iuMi690cmgJ0B92xFKqDDVpyXcIi7yi9++k\r\nJZXTkjpccjmCDfhnNQyqToFnYIKDdnczg9mO2wfV7KmOmKBVn3ZtIJwcpfSt\r\nuWWi3Yn76UE3uOft7q/EqveSJycZz2Vu04t/IcnOZhtwgxYTWyWJ6E70eWMU\r\nNFm3BigBH8squf+rxaOv3KOJNGlJ4AgmhbJYyxwr0GahswIjFDsoCtI2IJiR\r\nd7dJa0WbJqJFeHAVETnQ9KQCLWe14S1FD89zD0zAHJhUTMIMGJpiLmrDzitM\r\nQAvlecxSWQ1H187V+vn3y9HELr79vdbD6aE11wjk1nS+wkwfdKmLEjvmx7Mt\r\nBpT0/nNvpv6Tk1CCfRjoulTinSeAeRtfKqOKY6oTRol9zZZ5QhXtWjzus+PD\r\n5xBdWii3MBH3LTEFJL/iDYYzYf20Tuk6Dt8Dl5XtRoqXqEg+CkjNpEnRZD3L\r\np8THpeMudtrxzIbktAD1kX1nDykgfkookv2BwOKBXHPtjO3IZfqnCzVb6TXs\r\nWMaDKiE4LvlOH46tlltRAE1LVdhSL93QzVr2Agoj9CPgMu1EYDc+TtUVV4yD\r\nN8xONjfzx9q0RlxzAfvh4hfQwwffWIXYQpE=\r\n=JWxd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dream07312","email":"dream07312@gmail.com"},"directories":{},"maintainers":[{"name":"dream07312","email":"dream07312@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-pinch-scroll-zoom_0.1.0_1651918568837_0.31915713740284013"},"_hasShrinkwrap":false}},"maintainers":[{"name":"dream07312","email":"dream07312@gmail.com"}],"description":"Vue3 component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices","homepage":"https://github.com/voratham/vue-pinch-scroll-zoom/tree/main_vue3","repository":{"type":"git","url":"git://github.com/coddicat/vue-pinch-scroll-zoom.git"},"author":{"name":"Rodion Shlomo Solomonyk"},"bugs":{"url":"https://github.com/coddicat/vue-pinch-scroll-zoom/issues"},"license":"MIT","readme":"# vue-pinch-scroll-zoom\nVue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices\n\n#### original_repo: https://github.com/coddicat/vue-pinch-scroll-zoom/tree/main_vue3\n\n#### example:\nhttps://vue-pinch-scroll-zoom.coddicat.com/\n\n<img src=\"https://github.com/coddicat/vue-pinch-scroll-zoom/blob/main/example/example.gif\" width=\"250\"/>\n\n## Installation\n```\nnpm i @dream07312/vue3-pinch-scroll-zoom\n```\n\n## Usage\ntemplate:\n```html\n<PinchScrollZoom\n  ref=\"zoomer\"\n  :width=\"300\"\n  :height=\"400\"\n  :scale=\"scale\"\n  @scaling=\"scalingHandler\"\n  style=\"border: 1px solid black\"\n>\n  <img src=\"https://picsum.photos/600/1000\" width=\"300\" height=\"400\" />\n</PinchScrollZoom>\n```\n\ntype script:\n```ts\nimport { Component, Vue } from \"vue-property-decorator\";\nimport PinchScrollZoom, { PinchScrollZoomEmitData, PinchScrollZoomRef } from \"@dream07312/vue3-pinch-scroll-zoom\";\n\n@Component({\n  name: \"PinchScrollZoomExample\",\n  components: {\n    PinchScrollZoom\n  }\n})\nexport default class PinchScrollZoomExample extends Vue {\n  private scale = 2;\n  public scalingHandler(e: PinchScrollZoomEmitData): void {\n    console.log(e);\n  },\n  public reset() {\n    (this.$refs.zoomer as PinchScrollZoomRef).setData({\n      scale: 1,\n      originX: 0,\n      originY: 0,\n      translateX: 0,\n      translateY: 0        \n    });\n  }\n}\n```\n\n## Props\nthe following properties don't support the \".async\" modifier\n\n|name|required|description|default|\n|----|--------|-----------|-------|\n|width|yes|visible area width||\n|height|yes|visible area height||\n|contentWidth|no|should be defined when content width larger than container width||\n|contentHeight|no|should be defined when content height larger than container height||\n|minScale|no|minimum allowable scaling|0.3|\n|maxScale|no|maximum allowable scaling|5|\n|within|no|limit scrolling of content to its borders|true|\n|wheelVelocity|no|zoom velocity when mouse wheel|0.001|\n|scale|no|scale of the content|1|\n|origin-x|no|transform-origin-x|width/2|\n|origin-y|no|transform-origin-y|height/2|\n|translate-x|no|transform: translateX|0|\n|translate-y|no|transform: translateY|0|\n|throttleDelay|no|rendering delay (milliseconds)|25|\n|draggable|no|draggable of/off|true|\n|enableScaling|no| for enable listener scaling event| true\n|enableStartDrag|no| for enable listener startDrag event| true\n|enableStopDrag|no| for enable listener stopDrag event| true\n|enableDragging|no| for enable listener dragging event| true\n\n## Events\nthe following events are emitted with the argument:\n```ts\nexport interface PinchScrollZoomEmitData {\n  x: number;\n  y: number;\n  scale: number;\n  originX: number;\n  originY: number;\n  translateX: number;\n  translateY: number;  \n}\n```\n- startDrag\n- stopDrag\n- dragging\n- scaling\n\n## Methods\n```ts\n.SetData(data: PinchScrollZoomSetData);\n\nexport interface PinchScrollZoomSetData {\n    scale: number;\n    originX: number;\n    originY: number;\n    translateX: number;\n    translateY: number;\n}\n\n```","readmeFilename":"README.md"}