ccm/pan-zoom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-03-05 17:51:50 -08:00
parent 79964ead91
commit dbfe9c6fe7
2 changed files with 73 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
README.md
View File

@ -3,14 +3,83 @@
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.
## View demo
## 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
$ 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
$ docker run --rm --init -it -w /app -v $PWD:/app -p 8080:8080 node node dev-server.js
3. Visit `localhost:8080` to view.

2
public/assets/images/image.svg
View File

@ -1,4 +1,4 @@
<?xml version="1.0" standalone="yes"?>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style>
circle, rect {

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB