# vue-svg-pan-zoom : Vue component for SVG-Pan-Zoom

This module is a very simple [Vue][] component providing the
goodness of [SVG-Pan-Zoom][] for SVG elements.

/!\ WARNING: the module is young, basic, and likely to have
bugs. Use at your own risk, send patches for my eternal gratitude.

## Basic Use

In a Single File Component:

    <template>
        <SvgPanZoom 
            style="width: 500px; height: 500px; border:1px solid black;"
            :zoomEnabled="true"
            :controlIconsEnabled="true"
            :fit="false"
            :center="true"
        >
            <svg>
                <circle x="10" y="10" r="5" />
            </svg>
        </SvgPanZoom>`
    </template>

    <script>
        import SvgPanZoom from 'vue-svg-pan-zoom';

        export default {
            components: {  SvgPanZoom },
        };
    </script>

### Notes

* currently the `SvgPanZoom` component only works with a `svg` child -- `embed` won't work.

* `SvgPanZoom` accepts as attributes all `svg-pan-zoom` options:

| attribute | default | 
| --------- | -------- |
|zoomEnabled |     true |
|controlIconsEnabled |   false |
|fit |         true |
|panEnabled |  true |
|dblClickZoomEnabled |  true | 
|mouseWheelZoomEnabled |  true | 
|preventMouseEventsDefault |true | 
|contain |             false | 
|center |         true | 
|viewportSelector |             .svg-pan-zoom_viewport |
|zoomScaleSensitivity |  0.2 |
|minZoom |             0.5 |
|maxZoom |              10 |
|refreshRate |       auto | 
|beforeZoom |           |
|onZoom |               |
|beforePan |            |
|onPan |                |
|onUpdatedCTM |         |
|customEventsHandler |  |
|eventsListenerElement | |

## Use with thumbnails

In a Single File Component:

    <template>
        <SvgPanZoom
            style="width: 300px; height: 500px; border:1px solid black; "
        >
            <svg> ... </svg>
            <SvgPanZoomThumbnail>
                <svg> ... </svg>
            </SvgPanZoomThumbnail>
        </SvgPanZoom>
    </template>


    <script>
        import { SvgPanZoom, SvgPanZoomThumbnail } from 'vue-svg-pan-zoom';

        export default {
            components: {  SvgPanZoom, SvgPanZoomThumbnail },
        };

    </script>

### Notes

* Just like the `SvgPanZoom`component, `SvgPanZoomThumbnail` only accepts 
a `svg` child -- `embed` won't work.

### Storybook demos

To run [Storybook][] stories duplicating the demos of
the main `SVG-Pan-Zoom` project, do

    $ yarn install --dev
    $ yarn storybook