Merge branch 'svgpanzoom-event'
This commit is contained in:
commit
802dccdd4c
9
Changes
Normal file
9
Changes
Normal 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)
|
||||
|
||||
|
||||
|
||||
|
45
README.md
45
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:
|
||||
|
@ -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
34
src/event.stories.vue
Normal 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>
|
@ -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 );
|
||||
},
|
||||
|
@ -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 )
|
||||
;
|
||||
|
@ -191,5 +191,7 @@ export default function(options){
|
||||
}
|
||||
|
||||
}, false);
|
||||
|
||||
return main;
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user