vue-svg-pan-zoom/README.mkd

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, 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.

• 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>
        <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 installed as a dep.

Notes

• Just like the main SvgPanZoomcomponent, 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