# Viewer

## Features

This component can work in three different modes depending on the selected tool:

- With the tool pan the user can move the image dragging it around within the viewer
- With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area
- With the tool none the user can interact with the SVG content and trigger browser events

## Additional Features

- Zoom detection performed through pinch and scroll (optional)
- Autopan when the mouse is close to the edge of the viewer (optional)
- Each callback function receives (x,y) coords mapped to the real size of the SVG
- Fully stateless
- Event info managed lazily to ensure high performance
- ES6 syntax

## Props

- `width` – required – width of the viewer displayed on screen (if you want to omit this see Autosize)
- `height` – required – height of the viewer displayed on screen (if you want to omit this see Autosize)
- `background` – background of the viewer (default color: dark grey)
- `style` - CSS style of the viewer
- `specialKeys` - array of keys used in zoom mode to switch between zoom-in and zoom-out (default binding: Win/Cmd, Ctrl)
- `detectPinch` - detect zoom operation performed trough pinch gesture or mouse scroll
- `detectAutoPan` - perform PAN if the mouse is on the border of the viewer
- `SVGBackground` - background of the SVG (default color: white)
- `value` - value of the viewer (current point of view)
- `tool` - active tool ( one of `none`, `pan`, `zoom`, `zoom-in`, `zoom-out` )
- `onChange` - handler for changes `fn(viewerEvent)`
- `onClick` - handler for click `fn(viewerEvent)`
- `onMouseUp` - handler for mouseup `fn(viewerEvent)`
- `onMouseMove` - handler for mousemove `fn(viewerEvent)`
- `onMouseDown` - handler for mousedown `fn(viewerEvent)`

## ViewerEvent attributes

Your event handlers will be passed instances of `ViewerEvent`. It has some useful attributes (See below). If your purpose demands you to have the original React event instance (`SyntheticEvent`), it is provided by `event.originalEvent`.

- `SyntheticEvent originalEvent` - The original React event
- `SVGSVGElement SVGViewer` - Reference to SVGViewer
- `object` - coordinate (x,y) of the event mapped to SVG coordinates
- `number x` - x coordinate of the event mapped to SVG coordinates
- `number y` - y coordinate of the event mapped to SVG coordinates
- `number scaleFactor` - zoom level
- `number translationX` - x delta from the viewer origin
- `number translationY` - y delta from the viewer origin

# Usage

See here a demo code

    npm install --save react-svg-pan-zoom

# Autosize

React SVG Pan Zoom requires the properties `width` and `height` to be set in order to work properly. If you need an autosized component you can use ReactDimension to get the dimensions of a wrapper element and pass them as properties to its/the child element.