{"id":19522158,"url":"https://github.com/captaincodeman/svelte-pan-zoom","last_synced_at":"2025-07-02T13:39:37.118Z","repository":{"id":175399959,"uuid":"557908380","full_name":"CaptainCodeman/svelte-pan-zoom","owner":"CaptainCodeman","description":"Pan and Zoom for Svelte","archived":false,"fork":false,"pushed_at":"2024-10-02T15:26:33.000Z","size":1940,"stargazers_count":22,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T10:33:17.132Z","etag":null,"topics":["gesture","pan","svelte","touch","zoom"],"latest_commit_sha":null,"homepage":"https://captaincodeman.github.io/svelte-pan-zoom/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCodeman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-10-26T14:28:27.000Z","updated_at":"2025-02-16T22:45:08.000Z","dependencies_parsed_at":"2024-04-29T21:29:00.257Z","dependency_job_id":"947323da-d893-49ef-acb2-c1797cef1670","html_url":"https://github.com/CaptainCodeman/svelte-pan-zoom","commit_stats":null,"previous_names":["captaincodeman/svelte-pan-zoom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-pan-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-pan-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-pan-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-pan-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/svelte-pan-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250746199,"owners_count":21480348,"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":["gesture","pan","svelte","touch","zoom"],"created_at":"2024-11-11T00:37:26.698Z","updated_at":"2025-04-26T09:32:04.749Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-pan-zoom\n\n![minified](https://img.shields.io/bundlephobia/min/svelte-pan-zoom/0.0.11?style=for-the-badge)\n![minified + zipped](https://img.shields.io/bundlephobia/minzip/svelte-pan-zoom/0.0.11?style=for-the-badge)\n\nCanvas Pan and Zoom action for Svelte\n\n[See Demo](https://captaincodeman.github.io/svelte-pan-zoom/)\n[Multiple Instances](https://captaincodeman.github.io/svelte-pan-zoom/multi)\n\n## Usage\n\nInstall using you package manager of choice:\n\n    pnpm i svelte-pan-zoom\n\nImport action into page, create options and pass to action.\n\nOptions include:\n\n- `width` \u0026 `height` in CSS pixels of item to render (will be centered and sized to fit canvas)\n- `render` function to render to canvas (you're not limited to rendering a single image)\n- `padding` (optional, default 0)\n- `maxZoom` (optional, default 16)\n- `friction` how much momentum will be continued (optional, default to 0.97)\n\nNOTE: if you set friction to 1, any movement will never stop, so you'll have re-invented the DVD screen saver!\n\nYour render function will be passed the canvas 2d render context _and_ the animation timer plus the \"focus\" point (the point last zoomed or interacted with). It can return true if you want to reschedule another animation frame to be rendered. This is useful if what you are rendering is also itself being animated.\n\nNOTE: [`svelte-disable-preload`](https://www.npmjs.com/package/svelte-disable-preload) is applied to the canvas automatically, for smoother animations when used with SvelteKit.\n\n## Example\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { panzoom, type Options } from 'svelte-pan-zoom'\n\n  export let image: CanvasImageSource\n\n  function render(ctx: CanvasRenderingContext2D, t: number) {\n    ctx.drawImage(image, 0, 0)\n  }\n\u003c/script\u003e\n\n{#await promise then options}\n  \u003ccanvas use:panzoom={{ render, width: image.width, height: image.height }} /\u003e\n{/await}\n\n\u003cstyle\u003e\n  canvas {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    touch-action: none;\n    background-color: #ccc;\n    overscroll-behavior: none;\n    -webkit-user-select: none; /* disable selection/Copy of UIWebView */\n    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */\n  }\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-pan-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fsvelte-pan-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-pan-zoom/lists"}