@rbuljan/zoompan

ZoomPan

Zoomable and pannable area with scrollbars.
Inspired by graphical editors like Photoshop.

Supports Pinch gesture for scaling

Example

See: example/index.html for a use-case.

Getting started

npm i @rbuljan/zoompan

HTML:

<!-- index.html -->
<div id="myEditor"></div>

I.e: using Vite.js

// main.js

import "@rbuljan/zoompan/zoompan.css";
import ZoomPan from "@rbuljan/zoompan";

const ZP = new ZoomPan("#myEditor", {
  width: 800,
  height: 600,
  onInit() {
    this.elCanvas.style.backgroundColor = "gold";
    this.elCanvas.textContent = "Hello ZoomPan!";
  },
  onChange() {
    console.log(this);
  },
  // other options here...
});

console.log(ZP);

Options

Name	Type	Default	Description
width	Number	800	Canvas width
height	Number	600	Canvas height
offsetX	Number	0	Canvas offset X (from center)
offsetY	Number	0	Canvas offset Y (from center)
scale	Number	1	Initial Scale (if not fitted on init)
scaleOld	Number	scale	Old Scale value (before changed)
scaleFactor	Number	0.2	Scale factor
scaleMin	Number	0.05	Scale min value
scaleMax	Number	10	Scale max value
transitionDuration	Number	250	ms transition duration
padd	Number	40	Min visible canvas padd
panStep	Number	50	Pixels pan step value
scrollbars	Boolean	true	Show scrollbars
scrollbarsWidth	Number	14	px scrollbars size
fitOnInit	Boolean	true	Fix canvas into viewport on init
canDrag	Boolean	true	If canvas can be pointer-dragged
canPinch	Boolean	true	Allow two-finger pinch

Options — Events

Name	Description
onInit()	Triggered on class instantiation
onScale()	Triggered on scale change
onPan()	Triggered on pan (pointermove)
onChange()	Triggered on: init, pan, scale
onPanStart()	Triggered on pan (pointerdown)
onPanEnd()	Triggered on pan (pointerup)

Methods

Name	Returns	Description
panTo(offsetX, offsetY)		Pan canvas to new offset (canvas center)
scaleTo(scale [, originX, originY])		Scale canvas from point origin (canvas center)
scaleUp()		Scale up. Alias for scaleDelta(1)
scaleDown()		Scale down. Alias for scaleDelta(-1)
scaleDelta(delta)		Scale by delta
resize(width, height)		Change canvas width and height
updateScrollbars()		Reposition and resize scrollbars
fit()		Fit canvas into viewport center (contain)
getArea()	{width, height}	Get fictive "scroll area" size
getCanvas()	{x, y, width, height}	Get Canvas data
getViewport()	{x, y, width, height}	Get Viewport data
getPointerOrigin(Event)	{originX, originY}	Get pointer XY relative to viewport center
getWheelDelta(Event)	number	Get wheel delta +1 or -1 on wheel-down
calcScaleDelta(delta)	number	Get the new scale value from delta

Licence

MIT