Zoombo

Element pinch zoom and pan behaviour handler - supporting touch, mouse and
trackpad events.

``sh
yarn add --dev zoombo
`

Contents:

- Basic usage:
- Options (w/ defaults)
- React Component
- Render-props version
- HOC version
- Zoombo state
- Actions
- API

Basic usage:

`js
import Zoombo from 'zoombo';
const figureElm = document.querySelector('.figure');

const myZoombo = Zoombo({
refElm: figureElm,
opts: {
maxZoom: 10, // other options
},
onStart: (state) => {
figureElm.classList.add('figure--is-dragging');
},
onChange: (state) => {
figureElm.style.transform = state.cssTransform;
// See chapter on zoombo state properties below...
},
onEnd: (state) => {
figureElm.classList.remove('figure--is-dragging');
},
});

myZoombo.start(); // bind DOM events
`

The returned instance object has a few useful methods...

`js
// Perform actions
myZoombo.actions.panTo(0.25, 0.6);
myZoombo.actions.zoomIn();
// etc...

// Inspect the current zoombo state...
const currentState = myZoombo.getState();

// Modify the options
myZoombo.updateOpts({ minZoom: 1 });

// Enable/Disable
myZoombo.stop(); // unbind DOM events

console.log(myZoombo.isActive()); // false

myZoombo.start(); // resume (re-bind events)

console.log(myZoombo.isActive()); // true

myZoombo.actions.reset();
`

Options (w/ defaults)

`js
const options = {
initialZoom: 1,
initialX: 0.5,
initialY: 0.5,
maxZoom: 4,
minZoom: 1,
marginX: 0,
marginY: 0,
zoomStep: 2,
panStep: 0.5,
dragThreshold: 7, // px
pinchThreshold: 30, // px
oneFingerPan: false,
};
`

The values panStep, initialX and initialY are numbers from 0 to 1
representing proportion of the provided reference element's
offsetWidth/offsetHeight values.

While marginX and marginY are any positive number representing proportion
of the provided reference element's offsetWidth/offsetHeight before
zooming.

React Component

The optional React helper comes in two flavours:

$3

`jsx
import React from 'react';
import Zoombo from 'zoombo/react'; // esm version
// import Zoombo from 'zoombo/cjs/react'; // CommonJS version

const logState = (zoomboState) => {
console.log('zoombo', zoomboState);
};

const MyFigureComponent = (props) => (
maxZoom={4}
initialZoom={2}
onStart={logState}
onChange={logState}
onEnd={logState}
disabled={false}
>
{(zoomboRef, zoombo / , zoomboActions /) => (
className={
'figure' + (zoombo.isDragging ? ' figure--is-dragging' : '')
}
ref={zoomboRef}
style={{ transform: zoombo.cssTransform }}
>