Merge branch 'svgpanzoom-event'

This commit is contained in:
Yanick Champoux 2018-03-24 17:59:22 -04:00
commit 802dccdd4c
7 changed files with 99 additions and 13 deletions

9
Changes Normal file
View File

@ -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)

View File

@ -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:

View File

@ -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 );
},
};

34
src/event.stories.vue Normal file
View File

@ -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>

View File

@ -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 );
console.log( this.$slots.thumbnail );
thumbnailViewer({
let svgpanzoom = 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 );
},

View File

@ -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 )
;

View File

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