# Pan-Zoom
Pan/zoom library for SVG elements. Hold and drag to pan. Use the mouse wheel to
zoom. See `src/app.js` for a usage example.
## Usage
### Requirements
All the content to be panned/zoomed must be in one root element.
`image.svg`
``` xml
```
`index.html`
``` html
```
### Standard
`index.js`
``` js
import { pan, zoom } from 'pan-zoom';
const optionalZoomFactor = 0.1,
object = document.querySelector('object');
window.addEventListener('load', function () {
const svg = object.contentDocument.querySelector('svg'),
targetEl = svg.querySelector('#main');
svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor), { passive: false });
svg.addEventListener('pointerdown', pan(targetEl), { passive: false });
});
```
### With restore
The same as standard except the pan/zoom returns to what it was after a page
refresh.
`index.js`
``` js
import { withRestore as panzoom } from 'pan-zoom';
const object = document.querySelector('object');
window.addEventListener('load', function () {
const svg = object.contentDocument.querySelector('svg');
panzoom.start(svg, '#main');
});
```
## Start the demo
### Docker
1. Install the development server packages.
$ docker run --rm -w /app -v $PWD:/app -u $(id -u):$(id -u) node npm install
2. Start the server.
$ docker run --rm --init -it -w /app -v $PWD:/app -p 8080:8080 node npm run start
3. Visit `localhost:8080` to view.
### Debian
1. Install the development server packages.
$ npm install
2. Start the server.
$ npm run start
3. Visit `localhost:8080` to view.
## Tests
Requires Chrome/ChromeDriver or Chromium/ChromiumDriver.
### Docker
$ docker run --rm --init -it -w /app -v $PWD:/app node bash -c "apt-get \
update && apt-get install -y chromium-driver chromium && npm run test"
### Debian
$ apt-get update && apt-get install chromium-driver chromium
$ npm run test