Commit 1a0993be authored by Raphael Müller's avatar Raphael Müller
Browse files

added shapes for left arrow and rect

Closes #2 and #6
parent bf676ff3
......@@ -7,7 +7,7 @@ var app = new Vue({
end: 1718084,
//tooltip: "name: {name}</br>description: {description}</br>start: {start}</br>end: {end}"
tooltip: ["name:Gene Name","type:Gene Type","description","start:Start","end:End","strand:Strand"],
colorMap: {"xRNA":"#CC0000"}
colorMap: {"xRNA":"#CC0000", "PFAM":"#8e44ad"}
},
feature_data: [
{ name: "Gene 1.5",
......@@ -123,6 +123,16 @@ var app = new Vue({
}
],
feature_data2: [
{ name: "PIWI",
description: "dsRNA guided hydrolysis of ssRNA",
start: 1706879,
end: 1707525,
strand: "+",
zIndex: "12",
type: "PFAM",
shape: "rect",
color_border: 'red'
},
{ name: "Gene 21",
description: "GMP synthase",
start: 1706479,
......
......@@ -2,10 +2,10 @@ Vue.component("feature",{
template:
`
<svg :height="svgHeight" :width="svgWidth" :x="svgX" :y="svgY">
<polygon :points="arrow_coordinates" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
<polygon :points="points" :style=featureStyle @click="clickEvent" @mouseover="hoverEvent" @mouseout="$emit('unhover')"/>
</svg>
`,
props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId'],
props: ['svgWidth', 'svgHeight', 'svgX', 'svgY', 'color', 'borderColor', 'featureId', 'shape','inverse'],
computed: {
featureStyle () {
return {
......@@ -14,6 +14,23 @@ Vue.component("feature",{
'strokeWidth': 1
}
},
points(){
switch(this.shape){
case "arrow":
if(this.inverse){
return this.arrow_coordinates_inverse
}
else{
return this.arrow_coordinates
}
break;
case "rect":
return this.rect_coordinates
break;
default:
return this.arrow_coordinates
}
},
arrow_coordinates () {
let points = [
'0, ' + this.svgHeight * 0.25,
......@@ -26,6 +43,27 @@ Vue.component("feature",{
]
return points.join(' ')
},
arrow_coordinates_inverse () {
let points = [
this.svgWidth + ', ' + this.svgHeight * 0.25,
this.svgWidth + ', ' + this.svgHeight * 0.75,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.75,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.95,
0 + ', ' + this.svgHeight * 0.5,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.05,
this.svgWidth * 0.3 + ', ' + this.svgHeight * 0.25
]
return points.join(' ')
},
rect_coordinates(){
let points = [
this.svgWidth + ', ' + this.svgHeight * 0.25,
'0, ' + this.svgHeight * 0.25,
'0, ' + this.svgHeight * 0.75,
this.svgWidth + ', ' + this.svgHeight * 0.75,
]
return points.join(' ')
}
},
methods: {
clickEvent (evt) {
......
......@@ -15,7 +15,7 @@ Vue.component("genome-viewer",{
<!-- -->
<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)" :color="defaultLaneColor">
</lane>
<feature v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="one_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined">
<feature v-for="(feature, index) in sortedFeatures" :key="feature.name" :feature-id="feature.name" :svg-width="genomeToPixel(feature.end)-genomeToPixel(feature.start)" :svg-height="one_height" :svg-x="genomeToPixel(feature.start)" :svg-y="to_h(lane(feature))+ one_height/2" :color="getColor(feature)" :border-color="(feature.color_border)?feature.color_border : defaultBorderColor" @click="featureClick" @hover="updateFeature" @unhover="currentFeature = undefined" :shape="feature.shape? feature.shape : 'arrow'" :inverse="lane(feature)>0">
</feature>
<!-- -->
</svg>
......@@ -135,6 +135,9 @@ Vue.component("genome-viewer",{
window.removeEventListener('resize', this.handleResize)
},
methods:{
shape(feat){
return "arrow"
},
handleResize(){
var svg_el = this.$refs.genomeVuer.getBoundingClientRect()
this.y = svg_el.y
......
Supports Markdown
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