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

merged features into grid

parents 97c5225a cdf283f1
Vue.component("feature",{
template:
`
<svg></svg>
<svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
<polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" />
</svg>
`,
props: {
todoprop1: {
validator (value) {
return true
props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],
computed: {
featureStyle () {
return {
'fill': this.color,
'stroke': this.borderColor,
'stroke-width': 1
}
},
todoprop2: {
validator (value) {
return true
}
}
},
methods: {
my_method(){
console.log(this.todo)
console.log(this.Todo)
arrow_coordinates () {
let points = [
'0, ' + this.svgHeight * 0.25,
'0, ' + this.svgHeight * 0.75,
this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.75,
this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.95,
this.svgWidth + ', ' + this.svgHeight * 0.5,
this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.05,
this.svgWidth * 0.7 + ', ' + this.svgHeight * 0.25
]
return points.join(' ')
},
},
computed: {
Todo(){
return this.todo.charAt(0).toUpperCase() + this.todo.substr(1);
},
methods: {
clickEvent (evt) {
this.$emit('click', this.featureId)
}
},
data: function(){
return {
todo: "todo"
}
},
}
})
......@@ -9,15 +9,11 @@ Vue.component("genome-viewer",{
</div>
-->
<svg id="genome-vuer" ref="genomeVuer" :height="height" :width="width">
<!-- new stuff -->
<!-- TODO: axis -->
<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)">
</lane>
<!-- TODO: features -->
<feature v-for="feature in featureData" :key="feature.name">
<feature v-for="(feature, index) in featureData" :key="feature.name" :feature-id="feature.name" :svg-width="(1+index)*20" :svg-height="(1+index)*10" :svg-x="10+(index%2 * 400)" :svg-y="index*100+10" color="grey" border-color="red" @click="featureClick">
</feature>
</svg>
</div>`,
......@@ -94,7 +90,10 @@ Vue.component("genome-viewer",{
//param is a value between 0 and 100, where 100 is the full length of the svg
return (this.width*param)/100
},
},
featureClick (featureId) {
console.log(featureId)
}
},
data: function(){
return {
lanes: [-1, 1],
......
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