added responsibility to windows resizing

42d0c18f · Raphael Müller · b5849247 · 42d0c18f · 42d0c18f
Commit 42d0c18f authored Oct 24, 2018 by Raphael Müller
--- a/genome-vuer/src/index.html
+++ b/genome-vuer/src/index.html
@@ -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>

--- a/genome-vuer/src/js/genome_viewer.js
+++ b/genome-vuer/src/js/genome_viewer.js
 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