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
+
+
+
+
+
+
+
+
+
+
+```
+
## 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 @@
+
+
+
+
+
+
+
+
+
+
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;
};