yanick
/
vue-svg-pan-zoom
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

minor style fix

zoom
Alessio Carrafa 2019-09-26 17:51:00 +02:00
parent 7165a1feff
commit aba8972657
1 changed files with 55 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/SvgPanZoomThumbnail.vue
View File

@ -1,69 +1,66 @@
<template> <template>
<div v-on:wheel="zoomMain"> <div v-on:wheel="zoomMain">
<SPZ class="thumbnail" <SPZ class="thumbnail"
:zoomEnabled="false" :zoomEnabled="false"
:panEnabled="false" :panEnabled="false"
:controlIconsEnabled="false" :controlIconsEnabled="false"
:dblClickZoomEnabled="false" :dblClickZoomEnabled="false"
:preventMouseEventsDefault="true" :preventMouseEventsDefault="true"
v-on:svgpanzoom="thumbnailSPZcreated" v-on:svgpanzoom="thumbnailSPZcreated"
> >
<slot class="thumbnail" /> <slot class="thumbnail" />
</SPZ> </SPZ>
<Scope :bus="bus" :mainSPZ="mainSPZ" :thumbnailSPZ="thumbnailSPZ" /> <Scope :bus="bus" :mainSPZ="mainSPZ" :thumbnailSPZ="thumbnailSPZ" />
</div> </div>
</template> </template>
<style>
.thumbView {
z-index: 110;
background: white;
}
.thumbnail {
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
z-index: 120;
}
.thumbnail svg {
width: 100% !important;
height: 100% !important;
}
</style>
<script> <script>
import Scope from './Scope.vue'; import Scope from './Scope.vue';
export default { export default {
props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ], components: { Scope },
beforeCreate: function () { props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ],
this.$options.components.SPZ = require('./SvgPanZoom.vue').default data: () => ({ thumbnailSPZ: null }),
beforeCreate: function () {
this.$options.components.SPZ = require('./SvgPanZoom.vue').default
},
methods: {
zoomMain(evt) {
this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ]();
}, },
methods: { thumbnailSPZcreated(spz) {
zoomMain(evt) { this.thumbnailSPZ = spz;
this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ](); this.bus.$emit( 'thumbnailCreated', spz );
},
thumbnailSPZcreated(spz) {
this.thumbnailSPZ = spz;
this.bus.$emit( 'thumbnailCreated', spz );
},
}, },
mounted() { },
if( this.onThumbnailShown ) { mounted() {
this.onThumbnailShown(); if( this.onThumbnailShown ) {
} this.onThumbnailShown();
}, }
components: { Scope }, }
data: () => ({ thumbnailSPZ: null })
}; };
</script> </script>
<style>
.thumbView {
z-index: 110;
background: white;
}
.thumbnail {
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
z-index: 120;
}
.thumbnail svg {
width: 100% !important;
height: 100% !important;
}
</style>