Commit be3007ed authored by Philippe Bardou's avatar Philippe Bardou
Browse files

Graph view take node type into account...

parent 8f805fb0
......@@ -13536,6 +13536,7 @@ var cytoscape;
context.fill();
}
}
// Patch (reset and info node)
if(node._private.data.id == 'reset'){
var tmpLineWidth = context.lineWidth;
......@@ -13550,7 +13551,7 @@ var cytoscape;
context.closePath();
context.lineWidth = tmpLineWidth;
}
if(node._private.data.id == 'info'){
else if(node._private.data.id == 'info'){
var tmpLineWidth = context.lineWidth;
var tmpFont = context.font;
context.beginPath();
......@@ -13563,6 +13564,34 @@ var cytoscape;
context.lineWidth = tmpLineWidth;
context.font = tmpFont;
}
else if(node._private.data.type == 'input') {
var tmpLineWidth = context.lineWidth;
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = 'white';
context.moveTo(-10, 0);
context.lineTo( 10, 0);
context.moveTo( 10, 0);
context.lineTo( 7,-3);
context.moveTo( 10, 0);
context.lineTo( 7, 3);
context.lineCap = 'round';
context.shadowOffsetX = 2;
context.shadowOffsetY = 3;
context.shadowBlur = 8;
context.shadowColor = "black";
context.stroke();
context.closePath();
context.lineWidth = tmpLineWidth;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
/* var img = new Image();
//img.src = 'http://simpleicon.com/wp-content/uploads/gear-8.png';
//img.onload = function(){
//context.drawImage(img,pos.x,pos.y,50,50);
}*/
}
// Border width, draw border
if (style['border-width'].pxValue > 0) {
......@@ -14178,9 +14207,10 @@ var cytoscape;
+ coreStyle['active-bg-color'].value[2] + ","
+ coreStyle['active-bg-opacity'].value + ")";
 
context.beginPath();
context.arc(pos.x, pos.y, coreStyle['active-bg-size'].pxValue / zoom, 0, 2 * Math.PI);
context.fill();
//Patch : mask the circle when mouse drag
//context.beginPath();
//context.arc(pos.x, pos.y, coreStyle['active-bg-size'].pxValue / zoom, 0, 2 * Math.PI);
//context.fill();
}
if( !drawAllLayers ){
......
......@@ -168,7 +168,8 @@
$.tmpl($this.options.graphTemplate, {workflow: workflow}).appendTo($this.$element);
// prepare the data
var nodes = new Array(),
var components = {},
nodes = new Array(),
edges = new Array();
for (var i in data.components) {
var err = 0,
......@@ -177,22 +178,42 @@
fai = workflow.components[i].failed,
com = workflow.components[i].completed;
if((wai+run+fai+com)==0) { err = 100; }
nodes.push({ data: {
id: data.components[i].name,
components[data.components[i].name] = {
name: data.components[i].name,
err: err,
wai: wai,
run: run,
fai: fai,
com: com
}});
com: com
}
}
for (var i in data.nodes) {
if(data.nodes[i].type == "input") {
nodes.push({ data: {
id: data.nodes[i].name,
name: data.nodes[i].name,
type: data.nodes[i].type }
});
}
else if(data.nodes[i].type == "component") {
nodes.push({ data: {
id: data.nodes[i].name,
name: data.nodes[i].name,
type: data.nodes[i].type,
err: components[data.nodes[i].name].err,
wai: components[data.nodes[i].name].wai,
run: components[data.nodes[i].name].run,
fai: components[data.nodes[i].name].fai,
com: components[data.nodes[i].name].com }
});
}
}
for (var i in data.edges) {
if (data.edges[i][0] != null && data.edges[i][1] != null) {
edges.push({ data: { source: data.edges[i][0], target: data.edges[i][1] } });
}
}
// handle if there is some errors
$this.$element.find("#wfstatus_error_panel").hide();
if( data.errors != null ) {
......@@ -203,7 +224,7 @@
$('#cytoscape_panel').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.selector('node[type = "component"]')
.css({
'width': '80px',
'height': '80px',
......@@ -227,14 +248,26 @@
'border-width' : '0.05em',
'font-size': '10px'
})
.selector('node[type = "input"]')
.css({
'width': '62px',
'height': '62px',
'content': 'data(id)',
'text-valign': 'bottom',
'color': 'black',
'font-family': '"Trebuchet MS",Verdana,"Lucida Grande", Tahoma, Helvetica, sans-serif',
'font-size': '10px',
'border-opacity' : 0.8,
'border-width' : '0.03em',
})
.selector('edge')
.css({
'width': 1,
'opacity': 0.5
}),
elements: {
nodes: nodes,
edges: edges
elements: {
nodes: nodes,
edges: edges
},
layout: {
name: 'breadthfirst',
......@@ -257,12 +290,17 @@
cy.elements().unselectify();
cy.on('mouseover', 'node', function(e){
var node = e.cyTarget;
node.animate({css: {'border-opacity': '0.5','background-opacity':'0.2'} }, {duration: 100});
if(node._private.data.type == 'input') {
node.animate({css: {'border-opacity': '0.5','background-opacity':'0.5'} }, {duration: 100});
}
else {
node.animate({css: {'border-opacity': '0.5','background-opacity':'0.2'} }, {duration: 100});
}
});
cy.on('mouseout', 'node', function(e){
var node = e.cyTarget;
if(node._private.data.weight == 75) {
node.animate({css: {'border-opacity': '0.6','background-opacity':'0.9'} }, {duration: 100});
if(node._private.data.type == 'button') {
node.animate({css: {'border-opacity': '0.6','background-opacity':'0.7'} }, {duration: 100});
}
else {
node.animate({css: {'border-opacity': '0.6','background-opacity':'0.9'} }, {duration: 100});
......@@ -271,7 +309,7 @@
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.remove("node[weight > 50]");
cy.remove("node[type = 'button']");
if(node.id() == 'reset') {
$this.reset(node._private.data.cname);
......@@ -279,20 +317,20 @@
else if(node.id() == 'info') {
//$this.info(node._private.data.cname);
}
else {
else if(node._private.data.type == 'component'){
cy.elements().animate({css: {'border-width':0.7} }, {duration: 1});
cy.elements().unlock();
if(node.css('border-width') != '0.8px') {
node.animate({css: {'border-width':0.8} }, {duration: 1});
cy.add(
{ group: "nodes",
data: { id: "reset", name: "", cname: node.id(), weight: 75 },
data: { id: "reset", name: "", cname: node.id(), type: "button" },
css: {
'width': '0px',
'height': '0px',
'border-width': '0px',
'background-color': 'black',
'background-opacity' : '0.9',
'background-opacity' : '0.7',
'content': 'data(name)',
'color': '#a94451',
'shape': 'roundrectangle'
......@@ -302,13 +340,13 @@
).animate({css: {'width': 20, 'height': 15}}, {duration: 150});
cy.add(
{ group: "nodes",
data: { id: "info", name: "", cname: node.id(), weight: 75 },
data: { id: "info", name: "", cname: node.id(), type: "button" },
css: {
'width': '0px',
'height': '0px',
'border-width': '0px',
'background-color': 'black',
'background-opacity' : '0.9',
'background-opacity' : '0.7',
'content': 'data(name)',
'color': '#31708f',
'shape': 'roundrectangle'
......@@ -316,7 +354,7 @@
position: { x: (node.position().x +11), y: (node.position().y -53) }
}
).animate({css: {'width': 20, 'height': 15}}, {duration: 150});
cy.$("node[weight > 50]").lock();
cy.$("node[type = 'button']").lock();
node.lock();
}
}
......@@ -326,6 +364,7 @@
//cy.elements().removeClass('faded');
}
});
cy.boxSelectionEnabled(false);
cy.panzoom({});
}
});
......@@ -442,7 +481,7 @@
'</dd>',
'{{/each}}',
'</dl>'].join('\n'),
graphTemplate: ['<div id="cytoscape_panel" style="background-image:url(img/grid.png);*/',
graphTemplate: ['<div id="cytoscape_panel" style="background-image:url(img/grid.png);',
'background-color:#f9f9f9;margin-top:20px;border:1px solid lightgrey;border-radius:5px;',
'width:870px;height:393px">',
'</div>'].join('\n'),
......
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