1.0.0 • Published 1 year ago
@rbuljan/zoompan v1.0.0
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/zoompanHTML:
<!-- 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