86 lines
1.9 KiB
Markdown
86 lines
1.9 KiB
Markdown
# 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
|
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<svg viewBox="..." version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="main">
|
|
<!-- SVG elements to be panned/zoomed... -->
|
|
</g>
|
|
</svg>
|
|
```
|
|
|
|
`index.html`
|
|
|
|
``` html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
</head>
|
|
<body>
|
|
<object type="image/svg+xml" data="image.svg"></object>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</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
|
|
|
|
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 node dev-server.js
|
|
|
|
3. Visit `localhost:8080` to view.
|