fixed scoped style interpretation

This commit is contained in:
Alessio Carrafa 2019-09-26 17:50:31 +02:00
parent 96d4def6cf
commit 7165a1feff

View File

@ -4,9 +4,30 @@
</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,10 +53,10 @@ 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;
} }
@ -56,9 +77,9 @@ 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: {
@ -67,35 +88,11 @@ export default {
}, },
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>