From dbfe9c6fe7ec2317641b9e9878dbdd09c9a254ec Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 5 Mar 2025 17:51:50 -0800
Subject: Update README
---
README.md | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 file changed, 72 insertions(+), 3 deletions(-)
(limited to 'README.md')
diff --git a/README.md b/README.md
index bf42e08..364a339 100644
--- a/README.md
+++ b/README.md
@@ -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
+
+
+```
+
+`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
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.
--
cgit v1.2.3