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>
<div v-on:wheel="zoomMain">
<SPZ class="thumbnail"
:zoomEnabled="false"
:panEnabled="false"
:controlIconsEnabled="false"
:dblClickZoomEnabled="false"
:preventMouseEventsDefault="true"
v-on:svgpanzoom="thumbnailSPZcreated"
>
<slot class="thumbnail" />
</SPZ>
<Scope :bus="bus" :mainSPZ="mainSPZ" :thumbnailSPZ="thumbnailSPZ" />
</div>
<div v-on:wheel="zoomMain">
<SPZ class="thumbnail"
:zoomEnabled="false"
:panEnabled="false"
:controlIconsEnabled="false"
:dblClickZoomEnabled="false"
:preventMouseEventsDefault="true"
v-on:svgpanzoom="thumbnailSPZcreated"
>
<slot class="thumbnail" />
</SPZ>
<Scope :bus="bus" :mainSPZ="mainSPZ" :thumbnailSPZ="thumbnailSPZ" />
</div>
</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>
import Scope from './Scope.vue';
export default {
props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ],
beforeCreate: function () {
this.$options.components.SPZ = require('./SvgPanZoom.vue').default
components: { Scope },
props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ],
data: () => ({ thumbnailSPZ: null }),
beforeCreate: function () {
this.$options.components.SPZ = require('./SvgPanZoom.vue').default
},
methods: {
zoomMain(evt) {
this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ]();
},
methods: {
zoomMain(evt) {
this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ]();
},
thumbnailSPZcreated(spz) {
this.thumbnailSPZ = spz;
this.bus.$emit( 'thumbnailCreated', spz );
},
thumbnailSPZcreated(spz) {
this.thumbnailSPZ = spz;
this.bus.$emit( 'thumbnailCreated', spz );
},
mounted() {
if( this.onThumbnailShown ) {
this.onThumbnailShown();
}
},
components: { Scope },
data: () => ({ thumbnailSPZ: null })
},
mounted() {
if( this.onThumbnailShown ) {
this.onThumbnailShown();
}
}
};
</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>