Commit 5fdd5a6b authored by maxchaza's avatar maxchaza

Defaut style persistance

parent 2e2c6914
...@@ -461,8 +461,9 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', { ...@@ -461,8 +461,9 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
val = parseFloat(text); val = parseFloat(text);
metExploreD3.GraphStyleEdition.setCollectionStyle(view.target, view.attrType, view.attrName, view.biologicalType, val); metExploreD3.GraphStyleEdition.setCollectionStyle(view.target, view.attrType, view.attrName, view.biologicalType, val);
styleToUse[view.access]=val; styleToUse[view.access] = val;
view.default = parseInt(val); view.default = val;
console.log(styleToUse);
}); });
}, },
scope : me scope : me
...@@ -522,6 +523,8 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', { ...@@ -522,6 +523,8 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
metExploreD3.GraphStyleEdition.setCollectionStyle(view.target, view.attrType, view.attrName, view.biologicalType, color); metExploreD3.GraphStyleEdition.setCollectionStyle(view.target, view.attrType, view.attrName, view.biologicalType, color);
styleToUse[view.access]=color; styleToUse[view.access]=color;
console.log(styleToUse);
}); });
colorButtonBypass.on({ colorButtonBypass.on({
......
...@@ -43,56 +43,58 @@ Ext.define('metExploreViz.view.form.linkStyleForm.LinkStyleForm', { ...@@ -43,56 +43,58 @@ Ext.define('metExploreViz.view.form.linkStyleForm.LinkStyleForm', {
"default": 1, "default": 1,
"min": 0, "min": 0,
"max": 1 "max": 1
}, }
// ,
// { // {
// "type": "text", // "type": "text",
// "attr": "text", // "attr": "text",
// "title": "Label" // "title": "Label"
// }, // },
{ // {
"type": "color", // "type": "color",
"biologicalType":"link", // "biologicalType":"link",
"target": ["text.link"], // "target": ["text.link"],
"attrType": "style", // "attrType": "style",
"access":"fontColor", // "access":"fontColor",
"attr": "fill", // "attr": "fill",
"title": "Label color", // "title": "Label color",
"min": "#ff0000", // "min": "#ff0000",
"max": "#00ffff", // "max": "#00ffff",
"default": "#000000" // "default": "#000000"
}, { // }, {
"type": "int", // "type": "int",
"target": ["text.link"], // "target": ["text.link"],
"attrType": "style", // "attrType": "style",
"attr": "font-size", // "attr": "font-size",
"access":"fontSize", // "access":"fontSize",
"biologicalType":"link", // "biologicalType":"link",
"title": "Label font size", // "title": "Label font size",
"min": 1, // "min": 1,
"max": 200, // "max": 200,
"default": 20 // "default": 20
}, { // }, {
"type": "int", // "type": "int",
"target": ["text.link"], // "target": ["text.link"],
"attrType": "style", // "attrType": "style",
"attr": "font-weight", // "attr": "font-weight",
"access": "fontWeight", // "access": "fontWeight",
"biologicalType":"link", // "biologicalType":"link",
"title": "Label font weight", // "title": "Label font weight",
"min": 100, // "min": 100,
"max": 1000, // "max": 1000,
"default": 500 // "default": 500
}, { // }, {
"type": "float", // "type": "float",
"target": ["text.link"], // "target": ["text.link"],
"attrType": "style", // "attrType": "style",
"access":"labelOpacity", // "access":"labelOpacity",
"attr": "opacity", // "attr": "opacity",
"title": "Label transparency", // "title": "Label transparency",
"min": 0.0, // "min": 0.0,
"biologicalType":"link", // "biologicalType":"link",
"max": 1.0, // "max": 1.0,
"default": 1.0 // "default": 1.0
}] // }
]
} }
}); });
...@@ -34,7 +34,8 @@ d3.selection.prototype.attrEditor = function(attr, val) { ...@@ -34,7 +34,8 @@ d3.selection.prototype.attrEditor = function(attr, val) {
* @param stroke * @param stroke
* @param strokewidth * @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") this.append("rect")
.attr("class", function(d) { return d.getBiologicalType(); }) .attr("class", function(d) { return d.getBiologicalType(); })
.attr("id", function(d) { return d.getId(); }) .attr("id", function(d) { return d.getId(); })
...@@ -47,7 +48,9 @@ d3.selection.prototype.addNodeForm = function(width, height, rx, ry, stroke, str ...@@ -47,7 +48,9 @@ d3.selection.prototype.addNodeForm = function(width, height, rx, ry, stroke, str
+ height/2 + height/2
+ ")") + ")")
.style("stroke", stroke) .style("stroke", stroke)
.style("stroke-width", strokewidth); .style("stroke-width", strokewidth)
.style("fill", backgroundColor)
.style("opacity", transparency);
this.append("rect").attr("class","fontSelected") this.append("rect").attr("class","fontSelected")
.attr("width", function(d) { return d.getSvgWidth(); }) .attr("width", function(d) { return d.getSvgWidth(); })
...@@ -56,7 +59,8 @@ d3.selection.prototype.addNodeForm = function(width, height, rx, ry, stroke, str ...@@ -56,7 +59,8 @@ d3.selection.prototype.addNodeForm = function(width, height, rx, ry, stroke, str
.attr("ry", ry) .attr("ry", ry)
.attr( "transform", "translate(-" + width/2 + ",-" + height/2 + ")") .attr( "transform", "translate(-" + width/2 + ",-" + height/2 + ")")
.style("fill-opacity", '0') .style("fill-opacity", '0')
.style("fill", '#000'); .style("fill", "#000")
.style("opacity", transparency);
}; };
/**************************************** /****************************************
...@@ -101,14 +105,21 @@ d3.selection.prototype.addNodeText = function(style) { ...@@ -101,14 +105,21 @@ d3.selection.prototype.addNodeText = function(style) {
// Listening font-size attribute tu update tspan dy attr similarly // Listening font-size attribute tu update tspan dy attr similarly
var observer = new MutationObserver(function(mutations) { var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function(mutation) {
if (mutation.type == "attributes" && mutation.oldValue) { if (mutation.type == "attributes") {
if(mutation.target.style["font-size"]!==mutation.oldValue.split("font-size: ")[1].split(";")[0]){ if(mutation.oldValue){
d3.select(mutation.target).selectAll("tspan") if(mutation.oldValue.split("font-size: ")[1]){
.each(function (ts, i) { if(mutation.target.style["font-size"]!==mutation.oldValue.split("font-size: ")[1].split(";")[0]){
if (i > 0){ d3.select(mutation.target).selectAll("tspan")
d3.select(this).attr('dy', mutation.target.style["font-size"]); .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) { ...@@ -116,7 +127,7 @@ d3.selection.prototype.addNodeText = function(style) {
this this
.append("svg:text") .append("svg:text")
.attr("fill", "#000000") .attr("fill", style.getFontColor())
.attr("class", function(d) { return d.getBiologicalType(); }) .attr("class", function(d) { return d.getBiologicalType(); })
.each(function(d) { .each(function(d) {
...@@ -150,11 +161,10 @@ d3.selection.prototype.addNodeText = function(style) { ...@@ -150,11 +161,10 @@ d3.selection.prototype.addNodeText = function(style) {
if (i > 0){ if (i > 0){
tspan.attr('dy', '10'); tspan.attr('dy', style.getFontSize());
} }
} }
}) })
.style("font-size",style.getFontSize())
.style("paint-order","stroke") .style("paint-order","stroke")
.style("stroke-width", 1) .style("stroke-width", 1)
.style("stroke", "white") .style("stroke", "white")
...@@ -164,11 +174,11 @@ d3.selection.prototype.addNodeText = function(style) { ...@@ -164,11 +174,11 @@ d3.selection.prototype.addNodeText = function(style) {
.style("pointer-events", 'none') .style("pointer-events", 'none')
.style("text-anchor", 'middle') .style("text-anchor", 'middle')
.style("font-family",function(node) { if (node.labelFont) if (node.labelFont.font) return node.labelFont.font; }) .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.fontSize; }) .style("font-size", style.getFontSize())
.style("font-weight",function(node) { if (node.labelFont) if (node.labelFont.fontBold) return node.labelFont.fontBold; }) .style("font-weight", style.getFontWeight())
.style("font-style",function(node) { if (node.labelFont) if (node.labelFont.fontItalic) return node.labelFont.fontItalic; }) .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("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.fontOpacity; }) .style("opacity", style.getLabelOpacity())
.style("x",function(node) { .style("x",function(node) {
if (node.labelFont) { if (node.labelFont) {
if (node.labelFont.fontX){ if (node.labelFont.fontX){
......
...@@ -331,7 +331,7 @@ metExploreD3.GraphLink = { ...@@ -331,7 +331,7 @@ metExploreD3.GraphLink = {
}) })
.style("stroke", linkStyle.getStrokeColor()) .style("stroke", linkStyle.getStrokeColor())
.style("stroke-width", linkStyle.getLineWidth()) .style("stroke-width", linkStyle.getLineWidth())
.style("opacity", 1) .style("opacity", linkStyle.getOpacity())
.style("stroke-dasharray", null); .style("stroke-dasharray", null);
......
...@@ -2048,7 +2048,9 @@ metExploreD3.GraphNetwork = { ...@@ -2048,7 +2048,9 @@ metExploreD3.GraphNetwork = {
pathwaySize*3, pathwaySize*3,
pathwaySize*3, pathwaySize*3,
networkData.getPathwayByName(pathwayName).getColor(), networkData.getPathwayByName(pathwayName).getColor(),
pathwaySize*3/5 pathwaySize*3/5,
"#FFFFFF",
0
); );
thePathwayElement thePathwayElement
......
...@@ -1060,7 +1060,9 @@ metExploreD3.GraphNode = { ...@@ -1060,7 +1060,9 @@ metExploreD3.GraphNode = {
metaboliteStyle.getRX(), metaboliteStyle.getRX(),
metaboliteStyle.getRY(), metaboliteStyle.getRY(),
metaboliteStyle.getStrokeColor(), metaboliteStyle.getStrokeColor(),
metaboliteStyle.getStrokeWidth() metaboliteStyle.getStrokeWidth(),
metaboliteStyle.getBackgroundColor(),
metaboliteStyle.getOpacity()
); );
// Duplicated metabolites // Duplicated metabolites
...@@ -1101,7 +1103,9 @@ metExploreD3.GraphNode = { ...@@ -1101,7 +1103,9 @@ metExploreD3.GraphNode = {
metaboliteStyle.getRX() / 2, metaboliteStyle.getRX() / 2,
metaboliteStyle.getRY() / 2, metaboliteStyle.getRY() / 2,
metaboliteStyle.getStrokeColor(), metaboliteStyle.getStrokeColor(),
metaboliteStyle.getStrokeWidth() / 2 metaboliteStyle.getStrokeWidth() / 2,
metaboliteStyle.getBackgroundColor(),
metaboliteStyle.getOpacity()
); );
...@@ -1117,7 +1121,9 @@ metExploreD3.GraphNode = { ...@@ -1117,7 +1121,9 @@ metExploreD3.GraphNode = {
reactionStyle.getRX(), reactionStyle.getRX(),
reactionStyle.getRY(), reactionStyle.getRY(),
reactionStyle.getStrokeColor(), reactionStyle.getStrokeColor(),
reactionStyle.getStrokeWidth() reactionStyle.getStrokeWidth(),
reactionStyle.getBackgroundColor(),
reactionStyle.getOpacity()
); );
......
...@@ -90,6 +90,11 @@ LinkStyle.prototype = { ...@@ -90,6 +90,11 @@ LinkStyle.prototype = {
return this.strokeColor; return this.strokeColor;
}, },
getOpacity:function()
{
return this.opacity;
},
setMarkerInColor:function(newData) setMarkerInColor:function(newData)
{ {
this.markerInColor = newData; this.markerInColor = newData;
......
...@@ -127,12 +127,12 @@ MetaboliteStyle.prototype = { ...@@ -127,12 +127,12 @@ MetaboliteStyle.prototype = {
getFontWeight:function() getFontWeight:function()
{ {
return this.fontSize; return this.fontWeight;
}, },
setFontWeight:function(newData) setFontWeight:function(newData)
{ {
this.fontSize = newData; this.fontWeight = newData;
}, },
...@@ -196,6 +196,15 @@ MetaboliteStyle.prototype = { ...@@ -196,6 +196,15 @@ MetaboliteStyle.prototype = {
return displayedLabel; return displayedLabel;
}, },
getOpacity:function()
{
return this.opacity;
},
setOpacity:function(newData)
{
this.opacity = newData;
},
getLabelOpacity:function() getLabelOpacity:function()
{ {
return this.labelOpacity; return this.labelOpacity;
......
...@@ -195,6 +195,15 @@ ReactionStyle.prototype = { ...@@ -195,6 +195,15 @@ ReactionStyle.prototype = {
return displayedLabel; return displayedLabel;
}, },
getOpacity:function()
{
return this.opacity;
},
setOpacity:function(newData)
{
this.opacity = newData;
},
getLabelOpacity:function() getLabelOpacity:function()
{ {
return this.labelOpacity; return this.labelOpacity;
......
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