zoom story

src/stories.js

@@ -8,6 +8,7 @@ import LayerStory      from './layers.stories.vue';
 import ThumbnailStory  from './thumbnail.stories.vue';
 import SingleStory     from './single.stories.vue';
 import Event           from './event.stories.vue';
+import ZoomStory       from './zoom.stories.vue';
 
 const stories = storiesOf('SvgPanZoom', module)
 .addDecorator( withKnobs )
@@ -15,4 +16,5 @@ const stories = storiesOf('SvgPanZoom', module)
 .add('event', () => Event )
 .add( 'layers', () => LayerStory )
 .add( 'thumbnail', () => ThumbnailStory )
+.add( 'zoom', () => ZoomStory )
 ;

src/zoom.stories.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <div>Zoom factor: {{zoomFactor}}</div>
+        <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
+            :zoomEnabled="true"
+            :controlIconsEnabled="true"
+            :fit="false"
+            :center="true"
+            @svgpanzoom="registerSvgPanZoom"
+            :onZoom="zooming"
+        >
+            <RawTiger />
+        </SvgPanZoom>
+    </div>
+</template>
+
+<script>
+
+import RawTiger from './RawTiger.vue';
+import SvgPanZoom from './index';
+
+export default {
+    components: {  SvgPanZoom, RawTiger },
+    data: () => ({ zoomFactor: 1 }),
+    methods: {
+        zooming(zoomFactor) {
+            this.zoomFactor = zoomFactor[0];
+        }
+    },
+};
+
+</script>