https://github.com/douganderson444/panzoom-node
Pan & Zoom on any HTML Node. Use as a Svelte Action Directive or Vanilla JS
https://github.com/douganderson444/panzoom-node
Last synced: about 2 months ago
JSON representation
Pan & Zoom on any HTML Node. Use as a Svelte Action Directive or Vanilla JS
- Host: GitHub
- URL: https://github.com/douganderson444/panzoom-node
- Owner: DougAnderson444
- Created: 2022-03-22T10:15:11.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-09T23:02:15.000Z (about 1 year ago)
- Last Synced: 2025-04-10T18:07:37.072Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://douganderson444.github.io/panzoom-node
- Size: 10.9 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML Node Zoom, available as a Svelte Directive
[Demo](https://douganderson444.github.io/panzoom-node/)
One dependency library. Use as vanilla JS or add this as a Svelte action directive to the node you want to zoom in on. Not just images... _any_ html elements.
- [x] Pinch
- [x] Pan
- [x] Zoom
- [x] Mobile
- [x] Ignore single pointer input and editable elements
- [x] Optional Pinch to Zoom over DOM tree children (`use:pzoom={{ panAnywhere: true }}`)
- [x] Optional Disable pan on select event targets via `data-no-pan` dataset
- [x] Optional Drag Handle (`use:pzoom={{ handle }}`)
- [x] Optional Minimum Scale (`
`)
## As Svelte Action Directives
Svelte action directives are neat. They attach some javascript at the html level, it's a shortcut that saves a lot of repeated code.
[https://svelte.dev/docs#template-syntax-element-directives-use-action](https://svelte.dev/docs#template-syntax-element-directives-use-action)
## Demo
Demo code is in `src/index.svelte`
Repo Demo: [https://douganderson444.github.io/panzoom-node/](https://douganderson444.github.io/panzoom-node/)
REPL is [https://svelte.dev/repl/9a9571ea3590430690d3a0c809bb7eb3](https://svelte.dev/repl/9a9571ea3590430690d3a0c809bb7eb3)
## Use
```svelte
import { pzoom } from '@douganderson444/panzoom-node';
let zoomable;
function handleScaleChg(e) {
console.log('Scale is now: ', e.detail.scale);
}
function goHome(e) {
// reset to x,y = 0,0 and scale = 1 on the zoomable element
zoomable.dispatchEvent(new CustomEvent('home'));
}
Pinch/Zoom/Pan in this Parent Element. If you want to pan on DOM children too, set panAnywhere to
true.
Scroll on me. Pan anywhere on child elements if panAnywhere is true.
Add data-no-pan if you want to click and disable panning on an element
Go Home
```
## Vanilla JavaScript / other frameworks use
You could also use this in vanilla javascript, just pass the html node you wish to apply the panzoom to into the function:
```js
import { pzoom } from '@douganderson444/panzoom-node';
const element = document.createElement('p');
const node = document.createTextNode('This is new.');
element.appendChild(node);
// apply panzom to the node
pzoom(node);
```
## Zoom Container
The zoomable HTML node will be contained within the parent element as a container. If no container is set, it will use the parent element as the default container, using the `` as the container if there's no parent element.