{"id":16690327,"url":"https://github.com/ElyaConrad/zoompinch","last_synced_at":"2025-10-31T02:31:04.710Z","repository":{"id":232189790,"uuid":"783701531","full_name":"ElyaConrad/zoompinch","owner":"ElyaConrad","description":"Apply a pinch-and-zoom experience that’s feels native, communicates the transform reactively and lets you project any layer on top of the transformed canvas.","archived":false,"fork":false,"pushed_at":"2025-04-24T16:02:13.000Z","size":51835,"stargazers_count":125,"open_issues_count":9,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T19:48:05.392Z","etag":null,"topics":["pan-gesture","pinch-technology","pinch-to-zoom","pinch-zoom","rotate","rotate-image","rotated-object","typescript","vue","vuejs","vuejs3","zoom","zoom-images"],"latest_commit_sha":null,"homepage":"https://zoompinch.pages.dev","language":"TypeScript","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/ElyaConrad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-08T12:06:31.000Z","updated_at":"2025-08-07T06:27:34.000Z","dependencies_parsed_at":"2025-04-13T05:36:41.054Z","dependency_job_id":null,"html_url":"https://github.com/ElyaConrad/zoompinch","commit_stats":null,"previous_names":["mauriceconrad/zoompinch","elyaconrad/zoompinch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ElyaConrad/zoompinch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2Fzoompinch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2Fzoompinch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2Fzoompinch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2Fzoompinch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElyaConrad","download_url":"https://codeload.github.com/ElyaConrad/zoompinch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElyaConrad%2Fzoompinch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281896744,"owners_count":26580174,"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","status":"online","status_checked_at":"2025-10-30T02:00:06.501Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["pan-gesture","pinch-technology","pinch-to-zoom","pinch-zoom","rotate","rotate-image","rotated-object","typescript","vue","vuejs","vuejs3","zoom","zoom-images"],"created_at":"2024-10-12T15:51:08.920Z","updated_at":"2025-10-31T02:31:03.763Z","avatar_url":"https://github.com/ElyaConrad.png","language":"TypeScript","readme":"## Zoompinch\n\nApply a pinch-and-zoom experience that’s feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas.\n\n**Play around with the [demo here](https://zoompinch.pages.dev)**\n\n![Mobile demo](https://zoompinch.pages.dev/zoompinch_demo.gif)\n\n### Mathematical correct pinch on touch\n\nUnlike other libraries, _Zoompinch_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes pinching on touch devices feel native-like.\n\n### Touch, Wheelm, Mouse and Trackpad Gestures!\n\nAdside of touch, mouse and wheel events, **gesture events** (Safari Desktop) are supported as well! Try it out on the [demo](https://zoompinch.pages.dev)\n\n### Currently supported platforms:\n\n- [x] Vue 3\n- [ ] Web components (work in progress)\n- [ ] React\n\n### Install\n\n```bash\n$ npm install zoompinch\n```\n\n### Example usage\n\n```vue\n\u003czoompinch\n  ref=\"zoompinchRef\"\n  v-model:transform=\"transform\"\n  :width=\"1536\"\n  :height=\"2048\"\n  :offset=\"{ top: 10, right: 10, bottom: 10, left: 10 }\"\n  :min-scale=\"0.1\"\n  :max-scale=\"10\"\n  :rotation=\"true\"\n  :bounds=\"false\"\n  mouse\n  touch\n  wheel\n  gesture\n\u003e\n  \u003ctemplate #canvas\u003e\n    \u003cimg src=\"https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public\" style=\"width: 1536px; height: 2048px;\" /\u003e\n  \u003c/template\u003e\n  \u003ctemplate #matrix=\"{ composePoint }\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" @click=\"handleClickOnLayer\"\u003e\n      \u003c!-- This circle will stick to the center of the canvas --\u003e\n      \u003ccircle :cx=\"composePoint(0.5, 0.5)[0]\" :cx=\"composePoint(0.5, 0.5)[1]\" r=\"5\" style=\"fill: #f00;\" /\u003e\n    \u003c/svg\u003e\n  \u003c/template\u003e\n\u003c/zoompinch\u003e\n```\n\n```typescript\nimport { Zoompinch } from 'zoompinch';\nimport 'zoompich/style.css';\n\n// Just the ref instance in which the component instance will live\nconst zoompinchRef = ref\u003cInstanceType\u003ctypeof ProjectionLayer\u003e\u003e();\n\n// A reactive transform object\nconst transform = ref({\n  x: 0,\n  y: 0,\n  scale: 1,\n  rotate: 1,\n});\n\nfunction handleClickOnLayer(event: MouseEvent) {\n  const [x, y] = zoompinchRef.value?.normalizeMatrixCoordinates(event.clientX, event.clientY);\n\n  console.log('clicked at', x, y);\n}\n```\n\n#### Properties\n\n- `width` and `height`: Just inner dimensions of the element in the canvas.In fact they have to fit the aspect ratio of the actual element (otherwise you will have offsets)\n- `offset`: A padding that affects the \"real view box\" that will be used for calculations. This is important because of course the initial scale of `1` such as the initial translate of `0, 0` will be affected by this offset. Fitting your canvas into `{ scale: 1, x: 0, y: 0, rotate: 0 }` will be always the center of the view box without the offset.\n- `transform`: A reactive property (that can be used via `v-model`) that holds and accepts the relative transform from the center\n- `minScale` and `maxScale`: Minimum and maximum scale\n- `bounds`: Boolean value wether the canvas whould fit into the bounds of the view layer. If there is an offset, it will stick to the center. Default is `false`\n- `rotation`: Boolean value wether rotation is enabled. Default is `true`\n- `mouse`: Boolean value, wether mouse events will be connected\n- `touch`: Boolean value, wether touch events will be connected\n- `wheel`: Boolean value wether wheel events will be connected\n- `gesture`: Boolean value, wether gesture events will be connected\n\n## Helper functions\n\nBecause different use cases need different ways of modifying a transform, there exist a lot of helper functions\n\nThe most easiest way to interact with the transformations is to use the reactive transform object.\n\n```typescript\nconsole.log(transform.value);\n/*\n{\n  x: 0,\n  y: 0,\n  scale: 1,\n  rotate: 0 \n}\n*/\n\ntransform.value = { x: 42, y: -42, scale: 1.5, rotate: 45 };\n```\n\n### applyTransform\n\nThe `applyTransform` function accepts a given scale, a given relative position within the canvas, a relative position within the layer view and scales + positions the canvas.\n\nMake the canvas be centered at scale 1\n\n```typescript\napplyTransform(1, [0.5, 0.5], [0.5, 0.5]);\n```\n\nMake the center of the canvas be at top-bottom of the layer\n\n```typescript\napplyTransform(1, [0.5, 0.5], [1, 1]);\n```\n\n### rotateCanvas\n\nThe `rotateCanvas` function accepts a relative x and y anchor within the canvas and a given rotation in radians. The canvas will be rotated around the relative anchor.\n\nRotate canvas around its center\n\n```typescript\nrotateCanvas(0.5, 0.5, Math.PI / 4);\n```\n\n### normalizeMatrixCoordinates\n\nThe `normalizeMatrixCoordinates` method convert given clientX and clientY coordinates to relative inner-canvas coordinates\n\n```typescript\nnormalizeMatrixCoordinates(event.clientX, event.clientY);\n```\n\n### composePoint\n\nThe `composePoint` returns absolute coordinates within the layer (from 0,0) for given relative inner-canvas coordinates.\n\nExample usage:\n\n```vue\n\u003c!-- ... --\u003e\n\u003ctemplate #matrix=\"{ composePoint }\"\u003e\n  \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"\u003e\n    \u003c!-- This circle would stick to the center of the canvas --\u003e\n    \u003ccircle :cx=\"composePoint(0.5, 0.5)[0]\" :cy=\"composePoint(0.5, 0.5)[1]\" /\u003e\n  \u003c/svg\u003e\n\u003c/template\u003e\n\u003c!-- ... --\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElyaConrad%2Fzoompinch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElyaConrad%2Fzoompinch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElyaConrad%2Fzoompinch/lists"}