Skip to content

GitLab

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

Merge branch 'grid' into 'development' 

added responsibility to windows resizing

See merge request !5
parents d0dcda19 42d0c18f
Hide whitespace changes
Inline Side-by-side
genome-vuer/src/index.html
View file @ a18257fe
......@@ -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>
......
genome-vuer/src/js/genome_viewer.js
View file @ a18257fe
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