70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import Scope from './Scope.vue';
|
|
|
|
export default {
|
|
props: [ 'onThumbnailShown', 'mainSPZ', 'bus' ],
|
|
beforeCreate: function () {
|
|
this.$options.components.SPZ = require('./SvgPanZoom.vue').default
|
|
},
|
|
methods: {
|
|
zoomMain(evt) {
|
|
this.mainSPZ[ event.deltaY < 0 ? 'zoomIn' : 'zoomOut' ]();
|
|
},
|
|
thumbnailSPZcreated(spz) {
|
|
this.thumbnailSPZ = spz;
|
|
this.bus.$emit( 'thumbnailCreated', spz );
|
|
},
|
|
},
|
|
mounted() {
|
|
if( this.onThumbnailShown ) {
|
|
this.onThumbnailShown();
|
|
}
|
|
},
|
|
components: { Scope },
|
|
data: () => ({ thumbnailSPZ: null })
|
|
};
|
|
|
|
</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>
|