Commit 42d0c18f authored by Raphael Müller's avatar Raphael Müller
Browse files

added responsibility to windows resizing

parent b5849247
......@@ -14,7 +14,7 @@
</head>
<body>
<div id="app">
<div id="app" style="height:300px">
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer>
</div>
<script src="js/axis.js"></script>
......
Vue.component("genome-viewer",{
template: `
<div>
<div style="height:100%;width:100%">
<!--<div class="container-lin-dna">
<div :id="genomeStats.id" class="lin-dna" :data-cluster-start="genomeStats.start" :data-cluster-end="genomeStats.end" style="width: 100%; height: 50px;">
<div v-for="feature in featureData" :key="feature.name" class="region-to-display" :data-region-name="feature.name" :data-region-description="feature.description" :data-region-start="feature.start" :data-region-end="feature.end" :data-region-strand="feature.strand" :data-region-type="feature.type">
......@@ -10,7 +10,7 @@ Vue.component("genome-viewer",{
-->
<svg id="genome-vuer" ref="genomeVuer" height='100%' width='100%'>
<!-- -->
<axis :x="to_w(0)" :y="to_h(0)" :xOffset="10" :vOffset="10" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
<axis :x="to_w(0)" :y="to_h(0)" :vOffset="height/15" :height="one_height" :width="width" :start="axisStart" :stop="axisStop" :genomeSize="length*100">
</axis>
<!-- -->
<lane v-for="lane in lanes" :key="lane.id" :x="to_w(0)" :y="to_h(lane)" :height="2*one_height" :width="to_w(100)">
......@@ -116,7 +116,20 @@ Vue.component("genome-viewer",{
//this.one_height = this.height/(1 + 2 * this.lanes.length)
},
created(){
window.addEventListener('resize', this.handleResize, false);
},
destroyed(){
window.removeEventListener('resize', this.handleResize)
},
methods:{
handleResize(){
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.width = svg_el.width
this.height = svg_el.height
//#this.width = window.innerWidth;
//#this.height = window.innerHeight;
},
getColor(feature){
if(feature.hasOwnProperty("color")){
return feature.color
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment