From e60a22334689b4f9711917ddd1e4abfa80108ebf Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.dyndns.org>
Date: Fri, 16 Mar 2018 12:24:59 -0400
Subject: [PATCH] pass the svgpanzoom object around

---
 README.md              | 45 ++++++++++++++++++++++++++++++++++++++++--
 src/SvgPanZoom.vue     |  9 +++++++--
 src/event.stories.vue  | 34 +++++++++++++++++++++++++++++++
 src/index.vue          |  5 +++--
 src/stories.js         |  8 ++++----
 src/thumbnailViewer.js |  2 ++
 6 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 src/event.stories.vue

diff --git a/README.md b/README.md
index 9078613..98fdbee 100644
--- a/README.md
+++ b/README.md
@@ -35,9 +35,11 @@ In a Single File Component:
 
 ### Notes
 
-* currently the `SvgPanZoom` component only works with a `svg` child -- `embed` won't work.
+Currently the `SvgPanZoom` component only works with a `svg` child -- `embed` won't work.
 
-* `SvgPanZoom` accepts as attributes all `svg-pan-zoom` options:
+### Props
+
+`SvgPanZoom` accepts as props all `svg-pan-zoom` options:
 
     | attribute                 | default                |
     | ---------                 | --------               |
@@ -63,6 +65,45 @@ In a Single File Component:
     | customEventsHandler       |                        |
     | eventsListenerElement     |                        |
 
+### svgpanzoom object
+
+To access the created `svgpanzoom` javascript object, you can 
+listen to the `svgpanzoom` event on the `SvgPanZoom` component.
+
+```js
+<template>
+    <div>
+        <input type="button" value="center me" @click="center" />
+        <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
+            :fit="false"
+            @svgpanzoom="registerSvgPanZoom"
+        >
+            <RawTiger />
+        </SvgPanZoom>
+    </div>
+</template>
+
+<script>
+import RawTiger from './RawTiger.vue';
+import SvgPanZoom from 'vue-svg-pan-zoom';
+
+export default {
+    components: {  SvgPanZoom, RawTiger },
+    data: () => ({ svgpanzoom: null }),
+    methods: {
+        registerSvgPanZoom(svgpanzoom) {
+            this.svgpanzoom = svgpanzoom;
+        },
+        center() {
+            if( !this.svgpanzoom ) return;
+
+            this.svgpanzoom.center();
+        }
+    },
+}
+</script>
+```
+
 ## Use with thumbnails
 
 In a Single File Component:
diff --git a/src/SvgPanZoom.vue b/src/SvgPanZoom.vue
index 6cd9eb0..1b1ce92 100644
--- a/src/SvgPanZoom.vue
+++ b/src/SvgPanZoom.vue
@@ -38,16 +38,21 @@ export default {
 
         Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
 
+        let svgpanzoom;
         if( this.has_thumbnail ) {
             this.$slots.thumbnail[0].elm.id  = 'thumbView';
-            thumbnailViewer({
+            svgpanzoom = thumbnailViewer({
                 mainViewId: this.$slots.default[0].elm.id,
                 thumbViewId: 'thumbView',
             });
         }
         else {
-            svg_pan_zoom( this.$slots.default[0].elm , options );
+            svgpanzoom = svg_pan_zoom( this.$slots.default[0].elm , options );
         }
+
+        this.$emit( 'svgpanzoom', svgpanzoom );
+
+        console.log(svgpanzoom);
     },
 };
 
diff --git a/src/event.stories.vue b/src/event.stories.vue
new file mode 100644
index 0000000..6001766
--- /dev/null
+++ b/src/event.stories.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <input type="button" value="center me" @click="center" />
+        <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
+            :zoomEnabled="true"
+            :controlIconsEnabled="true"
+            :fit="false"
+            :center="true"
+            @svgpanzoom="registerSvgPanZoom"
+        >
+            <RawTiger />
+        </SvgPanZoom>
+    </div>
+</template>
+
+<script>
+import RawTiger from './RawTiger.vue';
+import SvgPanZoom from './index';
+
+export default {
+    components: {  SvgPanZoom, RawTiger },
+    data: () => ({ svgpanzoom: null }),
+    methods: {
+        registerSvgPanZoom(svgpanzoom) {
+            this.svgpanzoom = svgpanzoom;
+        },
+        center() {
+            if( !this.svgpanzoom ) return;
+
+            this.svgpanzoom.center();
+        }
+    },
+}
+</script>
diff --git a/src/index.vue b/src/index.vue
index b20c80c..a759dd7 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -54,13 +54,14 @@ export const SvgPanZoom = {
         if( this.has_thumbnail ) {
             console.log( this.$slots.default[0].elm.id );
             console.log( this.$slots.thumbnail );
-            thumbnailViewer({
+            let svgpanzoom = thumbnailViewer({
                 mainViewId: this.$slots.default[0].elm.id,
                 thumbViewId: 'thumbView',
             });
+            console.log(svgpanzoom);
         }
         else {
-            svg_pan_zoom( this.$slots.default[0].elm , options );
+            let svgpanzoom = svg_pan_zoom( this.$slots.default[0].elm , options );
         }
 //        svg_pan_zoom( '#mainView', options );
     },
diff --git a/src/stories.js b/src/stories.js
index 36f2407..10a317d 100644
--- a/src/stories.js
+++ b/src/stories.js
@@ -6,13 +6,13 @@ import RawTiger from './RawTiger.vue';
 
 import LayerStory      from './layers.stories.vue';
 import ThumbnailStory  from './thumbnail.stories.vue';
-import SingleStory      from './single.stories.vue';
+import SingleStory     from './single.stories.vue';
+import Event           from './event.stories.vue';
 
 const stories = storiesOf('SvgPanZoom', module)
 .addDecorator( withKnobs )
-.add('single inline SVG', 
-    () => SingleStory
-)
+.add('single inline SVG', () => SingleStory)
+.add('event', () => Event )
 .add( 'layers', () => LayerStory )
 .add( 'thumbnail -- needs to be first story loaded to work', () => ThumbnailStory )
 ;
diff --git a/src/thumbnailViewer.js b/src/thumbnailViewer.js
index 74da633..44f0ae2 100644
--- a/src/thumbnailViewer.js
+++ b/src/thumbnailViewer.js
@@ -191,5 +191,7 @@ export default function(options){
         }
 
     }, false);
+
+    return main;
 };