Commit 0d941e38 authored by Oliver Schwengers's avatar Oliver Schwengers
Browse files

implement prototype

parent 47f89e3d
Vue.component("axis",{
template:
Vue.component( "axis", {
template:
`
<div class="gv-axis" @click="my_method()">
TODO: im the axis component
</div>
<svg width="{{ width }}" height="{{ height }}" viewBox="{{ xOffset }} {{ vOffset }} {{ width + xOffset }} {{ vOffset + height }}">
<style>
.small { font: {{vOffset}}px roboto; }
</style>
<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", y1="{{ vOffset }}" />
<line x1="{{ width }}", y1="{{ 2*vOffset }}", x2="{{ width }}", y1="{{ vOffset }}" />
<line v-for="tick in ticks()", x1="{{ tick.pos }}", y1="{{ 2*vOffset }}", x2="{{ tick.pos }}", y1="{{ vOffset }}" />
<text v-for="tick in ticks()", class="small" x="{{ tick.pos }}" y="0" fill="black">{{ tick.genomePos }}</text>
</svg>
`,
props: {
todoprop1: {
validator (value) {
return true
}
},
todoprop2: {
validator (value) {
return true
}
}
start: Number,
stop: Number,
size: Number,
width: Number,
heigth: Number,
xOffset: Number,
vOffset: Number
},
methods: {
my_method(){
console.log(this.todo)
console.log(this.Todo)
},
},
computed: {
Todo(){
return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
},
ticks(){
const genomeSectionSize = Math.abs(this.stop-this.start) // genome section in bp
const tickSize = genomeSectionSize / this.noTicks // axis tick size in bp
const tickWidth = this.width / this.noTicks // axis tick size in pixels
/***********************************
* TODO:
* add logic to select human readable tick sizes, i.e.
* multiples of 10 bp
*/
let ticks = []
let genomePos = this.start
let pos = 0
for( let i=0; i<this.noTicks; i++ ) { // skip the first an
let tick = {
genomePos: genomePos,
pos: pos
}
ticks.push( tick )
genomePos += tickSize
pos += tickWidth
if( this.start > this.stop && genomePos > this.size ) {
let tick = {
genomePos: 0,
pos: (this.size-this.start)/genomeSectionSize*this.with
}
ticks.push( tick )
}
}
// remove first and last tick for aesthetic reasons
ticks.shift()
ticks.pop()
return ticks
}
},
data: function(){
return {
todo: "todo"
noTicks: 10
}
},
})
}
} )
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