{"id":16125778,"url":"https://github.com/dy/pan-zoom","last_synced_at":"2025-08-12T22:42:44.685Z","repository":{"id":12301514,"uuid":"71502538","full_name":"dy/pan-zoom","owner":"dy","description":"Pan / zoom for any element","archived":false,"fork":false,"pushed_at":"2022-03-27T22:13:03.000Z","size":275,"stargazers_count":91,"open_issues_count":12,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-07T04:43:42.656Z","etag":null,"topics":["grid","plot","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-20T20:38:48.000Z","updated_at":"2025-03-06T08:45:30.000Z","dependencies_parsed_at":"2022-08-07T06:16:53.822Z","dependency_job_id":null,"html_url":"https://github.com/dy/pan-zoom","commit_stats":null,"previous_names":["dfcreative/pan-zoom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpan-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpan-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpan-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fpan-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/pan-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252816519,"owners_count":21808702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","plot","webgl"],"created_at":"2024-10-09T21:31:55.309Z","updated_at":"2025-05-07T04:44:23.373Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pan-zoom ![tiny](https://img.shields.io/badge/gzipped-4.8kb-brightgreen.svg) [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)\r\n\r\nPanning and zooming events for any target. May come handy for webgl, canvas, svg, images or pure html manipulations. Handles mobile pinch-zoom, drag and scroll interactions, provides inertial movement.\r\n\r\nSee [demo](https://dy.github.io/plot-grid).\r\n\r\n[![npm install pan-zoom](https://nodei.co/npm/pan-zoom.png?mini=true)](https://npmjs.org/package/pan-zoom/)\r\n\r\n```js\r\nconst panzoom = require('pan-zoom');\r\n\r\nlet unpanzoom = panzoom(document.body, e =\u003e {\r\n  // e contains all the params related to the interaction\r\n\r\n  // pan deltas\r\n  e.dx;\r\n  e.dy;\r\n\r\n  // zoom delta\r\n  e.dz;\r\n\r\n  // coordinates of the center\r\n  e.x;\r\n  e.y;\r\n\r\n  // type of interaction: mouse, touch, keyboard\r\n  e.type;\r\n\r\n  // target element event is applied to\r\n  e.target;\r\n\r\n  // original element event started from\r\n  e.srcElement;\r\n\r\n  // initial coordinates of interaction\r\n  e.x0;\r\n  e.y0;\r\n});\r\n\r\n// call to remove panzoom handler from the target\r\nunpanzoom()\r\n```\r\n\r\nSee [`test.js`](https://github.com/dy/pan-zoom/blob/master/test.js) for basic use-case.\r\n\r\n## Alternatives\r\n\r\n* [@soulfresh/pan-zoom](https://github.com/soulfresh/pan-zoom#readme) − compatible fork with elaborate API and fixes.\r\n\r\n## Credits\r\n\r\nThis package puts together high-quality tiny components, so acknowledgment to their authors:\r\n\r\n* [impetus](http://npmjs.org/package/impetus) by **[Chris Bateman @chrisbateman](https://github.com/chrisbateman)** handles inertial drag.\r\n* [mouse-wheel](https://github.com/mikolalysenko/mouse-wheel) by **[Mikola Lysenko @mikolalysenko](https://github.com/mikolalysenko/mouse-wheel)** covers cross-browser wheel event.\u003c/del\u003e\r\n* [touch-pinch](https://www.npmjs.com/package/touch-pinch) by **[Matt DesLauriers @mattdesl](https://github.com/mattdesl)** handles mobile pinch gestures.\r\n* [touch-position](https://www.npmjs.com/package/touch-position) by **[Matt DesLauriers @mattdesl](https://github.com/mattdesl)** tracks mouse and touch coordinates.\r\n\r\n## License\r\n\r\n© 2017 Dmitry Yv. MIT License\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fpan-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Fpan-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fpan-zoom/lists"}