function Connector(graph,node,pos_x,pos_y){
var visible = false;
var conn_circle = graph.r.circle(node.get_pos().x + pos_x, node.get_pos().y + pos_y,4);
- conn_circle.attr({'opacity':0, 'fill':graph.style.outline,'stroke':'none'});
+ conn_circle.attr({ 'opacity': 0,
+ 'fill': graph.style.node_outline_color,
+ 'stroke': 'none' });
conn_circle.transform(graph.get_transform());
graph.set_scrolling(conn_circle);
conn_circle.animate({'r':8},300,'elastic');
if(graph.creating_edge){
graph.target_node = node;
- conn_circle.animate({'fill':graph.style.white,'stroke':graph.style.outline,'stroke-width':2},100,'linear');
+ conn_circle.animate({ 'fill': graph.style.connector_active_color,
+ 'stroke': graph.style.node_outline_color,
+ 'stroke-width': graph.style.node_selected_width,
+ },100,'linear');
}
}
function hover_out(){
if(!visible){ return;}
- conn_circle.animate({'r':4, 'fill':graph.style.outline, 'stroke':'none'},400,'linear');
+ conn_circle.animate({ 'r':graph.style.connector_radius,
+ 'fill':graph.style.node_outline_color,
+ 'stroke':'none'},400,'linear');
graph.target_node = null;
}
conn_circle.hover(hover_in,hover_out);
nodes.push(n);
n.uid = uid++;
};
+
//return the list of all nodes in the graph
this.get_node_list = function(){
return nodes;
};
+
//adds an edge to the graph and sets its uid
this.add_edge = function (n1,n2,e){
edges.push(e);
links[n2.uid].push(e);
}
};
+
//removes an edge from the graph
this.remove_edge = function(edge){
edges = _.without(edges,edge);
}
}
};
+
// Returns the angle in degrees of the edge loop. We do not support more than 8 loops on one node
this.get_loop_angle = function(n,e){
var loop_list = this.get_edge_list(n,n);
}else{
node_fig = r.rect(pos_x-sx/2,pos_y-sy/2,sx,sy);
}
- node_fig.attr({'fill':color, 'stroke':graph.style.outline,'stroke-width':1,'cursor':'pointer'});
+ node_fig.attr({ 'fill': color,
+ 'stroke': graph.style.node_outline_color,
+ 'stroke-width': graph.style.node_outline_width,
+ 'cursor':'pointer' });
node_fig.transform(graph.get_transform());
graph.set_scrolling(node_fig);
$(node_fig.node).addClass('foobar');
var node_label = r.text(pos_x,pos_y,label);
- node_label.attr({'fill':graph.style.text,'cursor':'pointer'});
+ node_label.attr({ 'fill': graph.style.node_label_color,
+ 'font-size': graph.style.node_label_font_size,
+ 'cursor': 'pointer' });
node_label.transform(graph.get_transform());
graph.set_scrolling(node_label);
- $(node_label.node).css('text-shadow',"1px 2px 3px rgba(0,0,0,0.3)");
// redraws all edges linked to this node
var update_linked_edges = function(){
// selects this node and deselects all other nodes
var set_selected = function(){
if(!selected){
- node_fig.attr({'stroke':graph.style.selected, 'stroke-width':2});
+ node_fig.attr({ 'stroke': graph.style.node_selected_color,
+ 'stroke-width': graph.style.node_selected_width });
selected = true;
var nodes = graph.get_node_list();
for(var i = 0; i < nodes.length; i++){
// deselect this node
var set_not_selected = function(){
if(selected){
- node_fig.animate({'stroke':graph.style.outline,'stroke-width':1},100,'linear');
+ node_fig.animate({ 'stroke': graph.style.node_outline_color,
+ 'stroke-width': graph.style.node_outline_width },
+ 100,'linear');
selected = false;
}
for(var i = 0; i < self.connectors.length; i++){
}
update_curve();
- var edge = r.path(edge_path).attr({'stroke':graph.style.edge, 'stroke-width':2, 'arrow-end':'block-wide-long', 'cursor':'pointer'}).insertBefore(graph.get_node_list()[0].get_fig());
+ var edge = r.path(edge_path).attr({ 'stroke': graph.style.edge_color,
+ 'stroke-width': graph.style.edge_width,
+ 'arrow-end': 'block-wide-long',
+ 'cursor':'pointer' }).insertBefore(graph.get_node_list()[0].get_fig());
var labelpos = get_label_pos(edge);
- var edge_label = r.text(labelpos.x, labelpos.y - elfs, label).attr({'fill':graph.style.edge_label, 'cursor':'pointer', 'font-size':elfs});
+ var edge_label = r.text(labelpos.x, labelpos.y - elfs, label).attr({
+ 'fill': graph.style.edge_label_color,
+ 'cursor': 'pointer',
+ 'font-size': elfs });
edge.transform(graph.get_transform());
graph.set_scrolling(edge);
edge_label.transform(graph.get_transform());
graph.set_scrolling(edge_label);
- $(edge_label.node).css('text-shadow',"1px 2px 3px rgba(0,0,0,0.3)");
//since we create an edge we need to recompute the edges that have the same start and end positions as this one
})(window);
-/*
-window.onload = function(){
- //Example
- var style = { "background" :'url("grid.png")',
- "edge" :"#A0A0A0",
- "edge_label" :"#555",
- "text" :"#333",
- "outline" :"#000",
- "selected" :"#0097BE",
- "gray" :"#DCDCDC",
- "white" :"#FFF",
- "node_size_x" : 110,
- "node_size_y" : 80,
- "edge_spacing" : 100,
- "edge_label_font_size" : 10
- "edge_loop_radius": 50 };
-
- var r = new Raphael(document.getElementById("canvas_container"),'100%','100%');
-
- var g = new CuteGraph(r,style);
-
- var n1 = new CuteNode(g,100,250,'Hello World','circle',colors.white);
- var n2 = new CuteNode(g,400,250,'Hello Planet','rect',colors.white);
- var n3 = new CuteNode(g,250,400,'Lonely Node','rect',colors.gray);
- var e1 = new CuteEdge(g,'test',n1,n2);
-}*/
-
projects / odoo / odoo.git / blobdiff