Web Dev Solutions

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 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

<!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

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

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

Install the development server packages.

$ docker run --rm -w /app -v $PWD:/app -u $(id -u):$(id -u) node npm install

Start the server.

$ docker run --rm --init -it -w /app -v $PWD:/app -p 8080:8080 node npm run start

Visit localhost:8080 to view.

Debian

Install the development server packages.
```
$ npm install
```
Start the server.
```
$ npm run start
```
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