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

fixed scoped style interpretation

zoom
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> <template>
<svg class="thumbViewClass" @click="updateMainViewPan" @mousemove="updateMainViewPan"> <svg class="thumbViewClass" @click="updateMainViewPan" @mousemove="updateMainViewPan">
<rect class="scope" :x="x" :y="y" :width="width" :height="height"/> <rect class="scope" :x="x" :y="y" :width="width" :height="height"/>
</svg> </svg>
</template> </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 main = this.mainSPZ;
let thumb = this.thumbnailSPZ; let thumb = this.thumbnailSPZ;
@ -32,12 +53,12 @@ function updateScope(){
this.y = scopeY + 1; this.y = scopeY + 1;
this.width = scopeWidth - 2; this.width = scopeWidth - 2;
this.height = scopeHeight - 2; this.height = scopeHeight - 2;
}; };
function updateMainViewPan(evt){ function updateMainViewPan(evt){
if(evt.which == 0 && evt.button == 0){ if(evt.which == 0 && evt.button == 0){
return false; return false;
} }
let main = this.mainSPZ; let main = this.mainSPZ;
@ -56,46 +77,22 @@ function updateMainViewPan(evt){
var mainPanX = - thumbPanX * mainZoom / thumbZoom; var mainPanX = - thumbPanX * mainZoom / thumbZoom;
var mainPanY = - thumbPanY * mainZoom / thumbZoom; var mainPanY = - thumbPanY * mainZoom / thumbZoom;
main.pan({x:mainPanX, y:mainPanY}); main.pan({x:mainPanX, y:mainPanY});
} }
export default { export default {
props: [ 'bus', 'mainSPZ', 'thumbnailSPZ' ], props: [ 'bus', 'mainSPZ', 'thumbnailSPZ' ],
data: () => ({ x: 0, y: 0, width: 0, height: 0 }), data: () => ({ x: 0, y: 0, width: 0, height: 0 }),
watch: { watch: {
mainSPZ() { updateScope.call(this) }, mainSPZ() { updateScope.call(this) },
thumbnailSPZ() { updateScope.call(this) }, thumbnailSPZ() { updateScope.call(this) },
}, },
mounted() { mounted() {
const up = updateScope.bind(this); const up = updateScope.bind(this);
[ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) [ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) );
); up();
up();
}, },
methods: { methods: {
updateMainViewPan updateMainViewPan
} }
}; };
</script> </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>