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

merged axis into grid

parents b218927e 35939e21
Pipeline #1818 failed with stages
in 1 minute
Vue.component("axis",{
template:
/***********************************
* TODO:
* add logic to print human readable tick sizes, i.e.
* 10 kb instead of 10,000 bp
*/
Vue.component( "axis", {
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 :width="width" :height="height" :viewBox="xOffset +' '+ vOffset +' '+ width + xOffset +' '+ vOffset + height">
<line x1="0" :y1="2*vOffset" :x2="width" :y2="2*vOffset" style="stroke:rgb(0,0,0);stroke-width:1" />
<line x1="0" :y1="2*vOffset" x2="0" :y2="vOffset" />
<line :x1="width" :y1="2*vOffset" :x2="width" :y2="vOffset" />
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="2*vOffset" :x2="tick.panelPos" :y2="vOffset" />
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" y="0" fill="black">{{ tick.genomePos }}</text>
</svg>
`,
props: {
width: {},
height: {},
x: {},
y: {},
start: Number,
stop: Number,
genomeSize: Number,
width: Number,
height: Number,
xOffset: Number,
vOffset: Number
},
methods: {
my_method(){
console.log(this.todo)
console.log(this.Todo)
},
genomeToPixel( pos ) {
return pos/Math.abs(this.stop-this.start) * this.width
}
},
computed: {
Todo(){
return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
},
mounted(){
const genomeSectionSize = (this.start > this.stop) ? (this.genomeSize-this.start + this.end) : Math.abs(this.stop-this.start) // genome section in bp
const tickSize = Math.pow( 10, Math.round( Math.log10( genomeSectionSize / this.noTicks ) ) ) // axis tick size in log 10 bp
const firstTickPos = Math.pow( 10, Math.ceil( Math.log10( this.start ) ) )
//let ticks = []
let genomePos = firstTickPos
let panelPos = this.genomeToPixel( genomePos )
while( panelPos <= this.width ) {
if( this.start > this.stop && genomePos > this.genomeSize ) {
genomePos = tickSize
}
let tick = {
genomePos: genomePos,
panelPos: panelPos
}
this.ticks.push( tick )
genomePos += tickSize
panelPos = this.genomeToPixel( genomePos )
}
},
data: function(){
return {
todo: "todo"
noTicks: 10,
ticks: []
}
},
})
}
} )
......@@ -11,7 +11,7 @@ Vue.component("genome-viewer",{
<svg id="genome-vuer" ref="genomeVuer" :height="height" :width="width">
<!-- new stuff -->
<!-- TODO: axis -->
<axis :x="to_w(0)" :y="to_h()" :height="one_height" :width="to_w(100)">
<axis :xOffset="to_w(0)" :vOffset="to_h()" :height="one_height" :width="to_w(100)" :start="100" :stop="1000" :genomeSize="10000">
</axis>
<!-- TODO: lanes -->
<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)">
......
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