Vue component for svg-pan-zoom
This module is a very simple Vue 3 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.
In a Single File Component:
``vue
:zoomEnabled="true"
:controlIconsEnabled="true"
:fit="false"
:center="true"
>
>
``
Currently the SvgPanZoom component only works with a svg child -- embed won't work.
SvgPanZoom accepts as props most svg-pan-zoom options:
| attribute | default |
| ------------------------- | ------------------------ |
| zoomEnabled | true |false
| controlIconsEnabled | |true
| fit | |true
| panEnabled | |true
| dblClickZoomEnabled | |true
| mouseWheelZoomEnabled | |true
| preventMouseEventsDefault | |false
| contain | |true
| center | |.svg-pan-zoom_viewport
| viewportSelector | |0.2
| zoomScaleSensitivity | |0.5
| minZoom | |10
| maxZoom | |auto
| refreshRate | |
| event | arguments |
| ------------------------- | ---------------------------------------------------------- |
| beforeZoom | (oldScale: number, newScale: number) |(newScale: number)
| onZoom | |(oldPan: SvgPanZoom.Point, newPan: SvgPanZoom.Point)
| beforePan | |(newPan: SvgPanZoom.Point)
| onPan | |(newCTM: SVGMatrix)
| onUpdatedCTM | |(spz: SvgPanZoom.Instance)
| created | |(spz: SvgPanZoom.Instance)
| thumbnailCreated | |
To access the created svgpanzoom javascript object, you cancreated
listen to the event on the SvgPanZoom component.
`vue
:fit="false"
@created="registerSvgPanZoom"
>
`
In a Single File Component:
`vue
...
`
Just like the main SvgPanZoom component, the thumbnail slot needs tosvg
be assigned to a node -- embed won't work.
To run Storybook stories duplicating the demos of
the main SVG-Pan-Zoom project, do
`fish``
$ yarn install --dev
$ yarn storybook