Commit 27a9469c authored by Patrick Blumenkamp's avatar Patrick Blumenkamp
Browse files

add first version of arrows and click event

parent 47f89e3d
Vue.component("feature",{
template:
`
<div class="gv-feature" @click="my_method()">
TODO: im the feature component
</div>
<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"
}
},
}
})
......@@ -16,8 +16,10 @@ Vue.component("genome-viewer",{
<lane v-for="lane in lanes" :key="lane.id">
</lane>
<!-- TODO: features -->
<feature v-for="feature in featureData" :key="feature.name">
</feature>
<svg height="1500px" width="1500px">
<feature v-for="(feature, index) in featureData" :key="feature.name" :feature-id="feature.name" svg-width="200" svg-height="50" :svg-x="10+(index%2 * 400)" :svg-y="index*100+10" color="grey" border-color="red" @click="featureClick">
</feature>
</svg>
</div>`,
props: {
genomeStats: {
......@@ -43,6 +45,11 @@ Vue.component("genome-viewer",{
}
}
},
methods: {
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