add a README

zoom
Yanick Champoux 2018-01-15 18:32:25 -05:00
parent 2a63b777f7
commit 4d4157aa72
1 changed files with 102 additions and 0 deletions

102
README.mkd Normal file
View File

@ -0,0 +1,102 @@
# 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