Merge branch 'svgpanzoom-event'

Changes

@@ -0,0 +1,9 @@
+Release history for vue-svg-pan-zoom
+
+v0.1.0 2018-03-24
+
+- component can now access the underlying svgpanzoom js object. (GH#1)
+
+
+
+

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:

src/SvgPanZoom.vue

@@ -38,16 +38,19 @@ 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 );
     },
 };
 

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>

src/index.vue

@@ -49,18 +49,15 @@ export const SvgPanZoom = {
         let options = {};
 
         Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
-        console.log(options);
 
         if( this.has_thumbnail ) {
-            console.log( this.$slots.default[0].elm.id );
+            let svgpanzoom = thumbnailViewer({
-            console.log( this.$slots.thumbnail );
-            thumbnailViewer({
                 mainViewId: this.$slots.default[0].elm.id,
                 thumbViewId: 'thumbView',
             });
         }
         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 );
     },

src/stories.js

@@ -7,12 +7,12 @@ import RawTiger from './RawTiger.vue';
 import LayerStory      from './layers.stories.vue';
 import ThumbnailStory  from './thumbnail.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', 
+.add('single inline SVG', () => SingleStory)
-    () => SingleStory
+.add('event', () => Event )
-)
 .add( 'layers', () => LayerStory )
 .add( 'thumbnail -- needs to be first story loaded to work', () => ThumbnailStory )
 ;

src/thumbnailViewer.js

@@ -191,5 +191,7 @@ export default function(options){
         }
 
     }, false);
+
+    return main;
 };