Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
metexplore
MetExploreViz
Commits
5fdd5a6b
Commit
5fdd5a6b
authored
Feb 04, 2020
by
maxchaza
Browse files
Defaut style persistance
parent
2e2c6914
Changes
9
Hide whitespace changes
Inline
Side-by-side
app/view/form/aStyleForm/AStyleFormController.js
View file @
5fdd5a6b
...
...
@@ -461,8 +461,9 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
val
=
parseFloat
(
text
);
metExploreD3
.
GraphStyleEdition
.
setCollectionStyle
(
view
.
target
,
view
.
attrType
,
view
.
attrName
,
view
.
biologicalType
,
val
);
styleToUse
[
view
.
access
]
=
val
;
view
.
default
=
parseInt
(
val
);
styleToUse
[
view
.
access
]
=
val
;
view
.
default
=
val
;
console
.
log
(
styleToUse
);
});
},
scope
:
me
...
...
@@ -522,6 +523,8 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
metExploreD3
.
GraphStyleEdition
.
setCollectionStyle
(
view
.
target
,
view
.
attrType
,
view
.
attrName
,
view
.
biologicalType
,
color
);
styleToUse
[
view
.
access
]
=
color
;
console
.
log
(
styleToUse
);
});
colorButtonBypass
.
on
({
...
...
app/view/form/linkStyleForm/LinkStyleForm.js
View file @
5fdd5a6b
...
...
@@ -43,56 +43,58 @@ Ext.define('metExploreViz.view.form.linkStyleForm.LinkStyleForm', {
"
default
"
:
1
,
"
min
"
:
0
,
"
max
"
:
1
},
}
// ,
// {
// "type": "text",
// "attr": "text",
// "title": "Label"
// },
{
"
type
"
:
"
color
"
,
"
biologicalType
"
:
"
link
"
,
"
target
"
:
[
"
text.link
"
],
"
attrType
"
:
"
style
"
,
"
access
"
:
"
fontColor
"
,
"
attr
"
:
"
fill
"
,
"
title
"
:
"
Label color
"
,
"
min
"
:
"
#ff0000
"
,
"
max
"
:
"
#00ffff
"
,
"
default
"
:
"
#000000
"
},
{
"
type
"
:
"
int
"
,
"
target
"
:
[
"
text.link
"
],
"
attrType
"
:
"
style
"
,
"
attr
"
:
"
font-size
"
,
"
access
"
:
"
fontSize
"
,
"
biologicalType
"
:
"
link
"
,
"
title
"
:
"
Label font size
"
,
"
min
"
:
1
,
"
max
"
:
200
,
"
default
"
:
20
},
{
"
type
"
:
"
int
"
,
"
target
"
:
[
"
text.link
"
],
"
attrType
"
:
"
style
"
,
"
attr
"
:
"
font-weight
"
,
"
access
"
:
"
fontWeight
"
,
"
biologicalType
"
:
"
link
"
,
"
title
"
:
"
Label font weight
"
,
"
min
"
:
100
,
"
max
"
:
1000
,
"
default
"
:
500
},
{
"
type
"
:
"
float
"
,
"
target
"
:
[
"
text.link
"
],
"
attrType
"
:
"
style
"
,
"
access
"
:
"
labelOpacity
"
,
"
attr
"
:
"
opacity
"
,
"
title
"
:
"
Label transparency
"
,
"
min
"
:
0.0
,
"
biologicalType
"
:
"
link
"
,
"
max
"
:
1.0
,
"
default
"
:
1.0
}]
// {
// "type": "color",
// "biologicalType":"link",
// "target": ["text.link"],
// "attrType": "style",
// "access":"fontColor",
// "attr": "fill",
// "title": "Label color",
// "min": "#ff0000",
// "max": "#00ffff",
// "default": "#000000"
// }, {
// "type": "int",
// "target": ["text.link"],
// "attrType": "style",
// "attr": "font-size",
// "access":"fontSize",
// "biologicalType":"link",
// "title": "Label font size",
// "min": 1,
// "max": 200,
// "default": 20
// }, {
// "type": "int",
// "target": ["text.link"],
// "attrType": "style",
// "attr": "font-weight",
// "access": "fontWeight",
// "biologicalType":"link",
// "title": "Label font weight",
// "min": 100,
// "max": 1000,
// "default": 500
// }, {
// "type": "float",
// "target": ["text.link"],
// "attrType": "style",
// "access":"labelOpacity",
// "attr": "opacity",
// "title": "Label transparency",
// "min": 0.0,
// "biologicalType":"link",
// "max": 1.0,
// "default": 1.0
// }
]
}
});
resources/lib/functions/D3Extention.js
View file @
5fdd5a6b
...
...
@@ -34,7 +34,8 @@ d3.selection.prototype.attrEditor = function(attr, val) {
* @param stroke
* @param strokewidth
*/
d3
.
selection
.
prototype
.
addNodeForm
=
function
(
width
,
height
,
rx
,
ry
,
stroke
,
strokewidth
)
{
d3
.
selection
.
prototype
.
addNodeForm
=
function
(
width
,
height
,
rx
,
ry
,
stroke
,
strokewidth
,
backgroundColor
,
transparency
)
{
this
.
append
(
"
rect
"
)
.
attr
(
"
class
"
,
function
(
d
)
{
return
d
.
getBiologicalType
();
})
.
attr
(
"
id
"
,
function
(
d
)
{
return
d
.
getId
();
})
...
...
@@ -47,7 +48,9 @@ d3.selection.prototype.addNodeForm = function(width, height, rx, ry, stroke, str
+
height
/
2
+
"
)
"
)
.
style
(
"
stroke
"
,
stroke
)
.
style
(
"
stroke-width
"
,
strokewidth
);
.
style
(
"
stroke-width
"
,
strokewidth
)
.
style
(
"
fill
"
,
backgroundColor
)
.
style
(
"
opacity
"
,
transparency
);
this
.
append
(
"
rect
"
).
attr
(
"
class
"
,
"
fontSelected
"
)
.
attr
(
"
width
"
,
function
(
d
)
{
return
d
.
getSvgWidth
();
})
...
...
@@ -56,7 +59,8 @@ d3.selection.prototype.addNodeForm = function(width, height, rx, ry, stroke, str
.
attr
(
"
ry
"
,
ry
)
.
attr
(
"
transform
"
,
"
translate(-
"
+
width
/
2
+
"
,-
"
+
height
/
2
+
"
)
"
)
.
style
(
"
fill-opacity
"
,
'
0
'
)
.
style
(
"
fill
"
,
'
#000
'
);
.
style
(
"
fill
"
,
"
#000
"
)
.
style
(
"
opacity
"
,
transparency
);
};
/****************************************
...
...
@@ -101,14 +105,21 @@ d3.selection.prototype.addNodeText = function(style) {
// Listening font-size attribute tu update tspan dy attr similarly
var
observer
=
new
MutationObserver
(
function
(
mutations
)
{
mutations
.
forEach
(
function
(
mutation
)
{
if
(
mutation
.
type
==
"
attributes
"
&&
mutation
.
oldValue
)
{
if
(
mutation
.
target
.
style
[
"
font-size
"
]
!==
mutation
.
oldValue
.
split
(
"
font-size:
"
)[
1
].
split
(
"
;
"
)[
0
]){
d3
.
select
(
mutation
.
target
).
selectAll
(
"
tspan
"
)
.
each
(
function
(
ts
,
i
)
{
if
(
i
>
0
){
d3
.
select
(
this
).
attr
(
'
dy
'
,
mutation
.
target
.
style
[
"
font-size
"
]);
}
});
if
(
mutation
.
type
==
"
attributes
"
)
{
if
(
mutation
.
oldValue
){
if
(
mutation
.
oldValue
.
split
(
"
font-size:
"
)[
1
]){
if
(
mutation
.
target
.
style
[
"
font-size
"
]
!==
mutation
.
oldValue
.
split
(
"
font-size:
"
)[
1
].
split
(
"
;
"
)[
0
]){
d3
.
select
(
mutation
.
target
).
selectAll
(
"
tspan
"
)
.
each
(
function
(
ts
,
i
)
{
if
(
i
>
0
){
if
(
mutation
.
target
.
style
[
"
font-size
"
])
d3
.
select
(
this
).
attr
(
'
dy
'
,
mutation
.
target
.
style
[
"
font-size
"
]);
else
d3
.
select
(
this
).
attr
(
'
dy
'
,
style
.
getFontSize
());
}
});
}
}
}
}
});
...
...
@@ -116,7 +127,7 @@ d3.selection.prototype.addNodeText = function(style) {
this
.
append
(
"
svg:text
"
)
.
attr
(
"
fill
"
,
"
#000000
"
)
.
attr
(
"
fill
"
,
style
.
getFontColor
()
)
.
attr
(
"
class
"
,
function
(
d
)
{
return
d
.
getBiologicalType
();
})
.
each
(
function
(
d
)
{
...
...
@@ -150,11 +161,10 @@ d3.selection.prototype.addNodeText = function(style) {
if
(
i
>
0
){
tspan
.
attr
(
'
dy
'
,
'
10
'
);
tspan
.
attr
(
'
dy
'
,
style
.
getFontSize
()
);
}
}
})
.
style
(
"
font-size
"
,
style
.
getFontSize
())
.
style
(
"
paint-order
"
,
"
stroke
"
)
.
style
(
"
stroke-width
"
,
1
)
.
style
(
"
stroke
"
,
"
white
"
)
...
...
@@ -164,11 +174,11 @@ d3.selection.prototype.addNodeText = function(style) {
.
style
(
"
pointer-events
"
,
'
none
'
)
.
style
(
"
text-anchor
"
,
'
middle
'
)
.
style
(
"
font-family
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
if
(
node
.
labelFont
.
font
)
return
node
.
labelFont
.
font
;
})
.
style
(
"
font-size
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
if
(
node
.
labelFont
.
fontSize
)
return
node
.
labelFont
.
f
ontSize
;
}
)
.
style
(
"
font-weight
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
if
(
node
.
labelFont
.
fontBold
)
return
node
.
labelFont
.
fontBold
;
}
)
.
style
(
"
font-size
"
,
style
.
getF
ontSize
()
)
.
style
(
"
font-weight
"
,
style
.
getFontWeight
()
)
.
style
(
"
font-style
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
if
(
node
.
labelFont
.
fontItalic
)
return
node
.
labelFont
.
fontItalic
;
})
.
style
(
"
text-decoration-line
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
if
(
node
.
labelFont
.
fontUnderline
)
return
node
.
labelFont
.
fontUnderline
;
})
.
style
(
"
opacity
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
if
(
node
.
labelFont
.
fontOpacity
)
return
node
.
labelFont
.
font
Opacity
;
}
)
.
style
(
"
opacity
"
,
style
.
getLabel
Opacity
()
)
.
style
(
"
x
"
,
function
(
node
)
{
if
(
node
.
labelFont
)
{
if
(
node
.
labelFont
.
fontX
){
...
...
resources/lib/functions/GraphLink.js
View file @
5fdd5a6b
...
...
@@ -331,7 +331,7 @@ metExploreD3.GraphLink = {
})
.
style
(
"
stroke
"
,
linkStyle
.
getStrokeColor
())
.
style
(
"
stroke-width
"
,
linkStyle
.
getLineWidth
())
.
style
(
"
opacity
"
,
1
)
.
style
(
"
opacity
"
,
linkStyle
.
getOpacity
()
)
.
style
(
"
stroke-dasharray
"
,
null
);
...
...
resources/lib/functions/GraphNetwork.js
View file @
5fdd5a6b
...
...
@@ -2048,7 +2048,9 @@ metExploreD3.GraphNetwork = {
pathwaySize
*
3
,
pathwaySize
*
3
,
networkData
.
getPathwayByName
(
pathwayName
).
getColor
(),
pathwaySize
*
3
/
5
pathwaySize
*
3
/
5
,
"
#FFFFFF
"
,
0
);
thePathwayElement
...
...
resources/lib/functions/GraphNode.js
View file @
5fdd5a6b
...
...
@@ -1060,7 +1060,9 @@ metExploreD3.GraphNode = {
metaboliteStyle
.
getRX
(),
metaboliteStyle
.
getRY
(),
metaboliteStyle
.
getStrokeColor
(),
metaboliteStyle
.
getStrokeWidth
()
metaboliteStyle
.
getStrokeWidth
(),
metaboliteStyle
.
getBackgroundColor
(),
metaboliteStyle
.
getOpacity
()
);
// Duplicated metabolites
...
...
@@ -1101,7 +1103,9 @@ metExploreD3.GraphNode = {
metaboliteStyle
.
getRX
()
/
2
,
metaboliteStyle
.
getRY
()
/
2
,
metaboliteStyle
.
getStrokeColor
(),
metaboliteStyle
.
getStrokeWidth
()
/
2
metaboliteStyle
.
getStrokeWidth
()
/
2
,
metaboliteStyle
.
getBackgroundColor
(),
metaboliteStyle
.
getOpacity
()
);
...
...
@@ -1117,7 +1121,9 @@ metExploreD3.GraphNode = {
reactionStyle
.
getRX
(),
reactionStyle
.
getRY
(),
reactionStyle
.
getStrokeColor
(),
reactionStyle
.
getStrokeWidth
()
reactionStyle
.
getStrokeWidth
(),
reactionStyle
.
getBackgroundColor
(),
reactionStyle
.
getOpacity
()
);
...
...
resources/lib/model/LinkStyle.js
View file @
5fdd5a6b
...
...
@@ -90,6 +90,11 @@ LinkStyle.prototype = {
return
this
.
strokeColor
;
},
getOpacity
:
function
()
{
return
this
.
opacity
;
},
setMarkerInColor
:
function
(
newData
)
{
this
.
markerInColor
=
newData
;
...
...
resources/lib/model/MetaboliteStyle.js
View file @
5fdd5a6b
...
...
@@ -127,12 +127,12 @@ MetaboliteStyle.prototype = {
getFontWeight
:
function
()
{
return
this
.
font
Size
;
return
this
.
font
Weight
;
},
setFontWeight
:
function
(
newData
)
{
this
.
font
Size
=
newData
;
this
.
font
Weight
=
newData
;
},
...
...
@@ -196,6 +196,15 @@ MetaboliteStyle.prototype = {
return
displayedLabel
;
},
getOpacity
:
function
()
{
return
this
.
opacity
;
},
setOpacity
:
function
(
newData
)
{
this
.
opacity
=
newData
;
},
getLabelOpacity
:
function
()
{
return
this
.
labelOpacity
;
...
...
resources/lib/model/ReactionStyle.js
View file @
5fdd5a6b
...
...
@@ -195,6 +195,15 @@ ReactionStyle.prototype = {
return
displayedLabel
;
},
getOpacity
:
function
()
{
return
this
.
opacity
;
},
setOpacity
:
function
(
newData
)
{
this
.
opacity
=
newData
;
},
getLabelOpacity
:
function
()
{
return
this
.
labelOpacity
;
...
...
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