103 lines
2.5 KiB
Markdown
103 lines
2.5 KiB
Markdown
# 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
|
|
|