merged origin/lanes into grid

genome-vuer/src/js/lane.js

 Vue.component("lane",{
   template: 
     `
-    <svg :x="x" :y="y" :width="width" :height="height">
-    <line :x1="0" :y1="height/2" :x2="width" :y2="height/2" style="stroke:rgb(255,0,0);stroke-width:2" />
+    <svg :height="height" :x="x" :y="y">
+      <line :x1="x+10" :y1="height/2" :x2="width" :y2="height/2" stroke="#39FF14" stroke-width="2" stroke-dasharray="20, 5" />
     </svg>
     `,
   props: {
-    width: {},
-    height: {},
-    x: {},
-    y: {},
+    x: {
+      validator (value) {
+        return true
+      }
+    },
+    y: {
+      validator (value) {
+          return true
+      }
+    },
+    height: {
+      validator (value) {
+           return true
+      }
+    },
+    width: {
+      validator (value) {
+           return true
+      }
+    },
   },
   methods: {
     my_method(){
@@ -18,9 +34,18 @@ Vue.component("lane",{
     },
   },
   computed: {
-    Todo(){
-      return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
-    },
+//      y() {
+//        return y;
+//      },
+//      x() {
+//        return lib.map(0, this.o.xMin, this.o.xMax, 0, this.svg.w);
+//      },
+//      tickXs() {
+//        const ticks = lib.range(this.o.xMin, this.o.xMax, 10)
+//        return ticks.map(tick =>
+//          lib.map(tick, this.o.xMin, this.o.xMax, 0, this.svg.w)
+//        );
+//    },
   },
   data: function(){
     return {