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

This module is a very simple [Vue](https://vuejs.org/) component providing the
goodness of [SVG-Pan-Zoom](https://github.com/ariutta/svg-pan-zoom) for SVG elements.

/!\ WARNING: the module is young, basic, probably will have its
API change with no notice, 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.

### Props

`SvgPanZoom` accepts as props 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     |                        |

### svgpanzoom object

To access the created `svgpanzoom` javascript object, you can 
listen to the `svgpanzoom` event on the `SvgPanZoom` component.

```js
<template>
    <div>
        <input type="button" value="center me" @click="center" />
        <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
            :fit="false"
            @svgpanzoom="registerSvgPanZoom"
        >
            <RawTiger />
        </SvgPanZoom>
    </div>
</template>

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

export default {
    components: {  SvgPanZoom, RawTiger },
    data: () => ({ svgpanzoom: null }),
    methods: {
        registerSvgPanZoom(svgpanzoom) {
            this.svgpanzoom = svgpanzoom;
        },
        center() {
            if( !this.svgpanzoom ) return;

            this.svgpanzoom.center();
        }
    },
}
</script>
```

## Use with thumbnails

In a Single File Component:

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


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

        export default {
            components: {  SvgPanZoom },
        };

    </script>

    <style>
        @import 'vue-svg-pan-zoom/dist/vue-svg-pan-zoom.css';
    </style>

Note that for the css import to work, you'll have to have 
[postcss-import](https://github.com/postcss/postcss-import)
installed as a dep.

Also, just like the main `SvgPanZoom`component, the `thumbnail` slot needs to 
be assigned to a `svg` node -- `embed` won't work.

### Storybook demos

To run [Storybook](https://github.com/storybooks/storybook) stories duplicating the demos of
the main `SVG-Pan-Zoom` project, do

    $ yarn install --dev
    $ yarn storybook