blob: 364a3392bc9b35df324059075a088e13121b8a00 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
# 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.
|