Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
pbarth
Genome-viewer
Commits
9cc22857
Commit
9cc22857
authored
Oct 15, 2018
by
Raphael Müller
Browse files
merged features into grid
parents
97c5225a
cdf283f1
Changes
2
Hide whitespace changes
Inline
Side-by-side
genome-vuer/src/js/feature.js
View file @
9cc22857
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
"
}
}
,
}
})
genome-vuer/src/js/genome_viewer.js
View file @
9cc22857
...
...
@@ -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
],
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment