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

fixed scoped style interpretation

Browse Source
This commit is contained in:
Alessio Carrafa 2019-09-26 17:50:31 +02:00
parent 96d4def6cf
commit 7165a1feff
1 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/Scope.vue
View File

@ -1,12 +1,33 @@
<template>
<svg class="thumbViewClass" @click="updateMainViewPan" @mousemove="updateMainViewPan">
<rect class="scope" :x="x" :y="y" :width="width" :height="height"/>
</svg>
<svg class="thumbViewClass" @click="updateMainViewPan" @mousemove="updateMainViewPan">
<rect class="scope" :x="x" :y="y" :width="width" :height="height"/>
</svg>
</template>
<script>
<style scoped>
.scope {
fill: red;
fill-opacity: 0.1;
stroke: red;
stroke-width: 2px;
}
function updateScope(){
svg.thumbViewClass {
border: 1px solid black;
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
z-index: 120;
}
</style>
<script>
function updateScope(){
let main = this.mainSPZ;
let thumb = this.thumbnailSPZ;
@ -32,12 +53,12 @@ function updateScope(){
this.y = scopeY + 1;
this.width = scopeWidth - 2;
this.height = scopeHeight - 2;
};
};
function updateMainViewPan(evt){
function updateMainViewPan(evt){
if(evt.which == 0 && evt.button == 0){
return false;
return false;
}
let main = this.mainSPZ;
@ -56,46 +77,22 @@ function updateMainViewPan(evt){
var mainPanX = - thumbPanX * mainZoom / thumbZoom;
var mainPanY = - thumbPanY * mainZoom / thumbZoom;
main.pan({x:mainPanX, y:mainPanY});
}
}
export default {
export default {
props: [ 'bus', 'mainSPZ', 'thumbnailSPZ' ],
data: () => ({ x: 0, y: 0, width: 0, height: 0 }),
watch: {
mainSPZ() { updateScope.call(this) },
thumbnailSPZ() { updateScope.call(this) },
mainSPZ() { updateScope.call(this) },
thumbnailSPZ() { updateScope.call(this) },
},
mounted() {
const up = updateScope.bind(this);
[ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up )
);
up();
const up = updateScope.bind(this);
[ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) );
up();
},
methods: {
updateMainViewPan
updateMainViewPan
}
};
};
</script>
<style scoped>
.scope {
fill: red;
fill-opacity: 0.1;
stroke: red;
stroke-width: 2px;
}
svg.thumbViewClass {
border: 1px solid black;
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
z-index: 120;
}
</style>