[IMP] diagram view

bzr revid: xmo@openerp.com-20111026135645-vyq2pq7x5l5tiv5l
This commit is contained in:
Xavier Morel
2011-10-26 15:56:45 +02:00
7 changed files with 77 additions and 77 deletions
+1 -9
View File
@@ -93,7 +93,6 @@ class DiagramView(View):
n.update(
id=act['id'],
color='white',
shape='ellipse',
options={}
)
for color, expr in bgcolors.items():
@@ -107,12 +106,5 @@ class DiagramView(View):
for i, fld in enumerate(visible_node_fields):
n['options'][node_fields_string[i]] = act[fld]
#to relate m2o field of transition to corresponding o2m in activity
in_transition_field_id = fields.search([('relation', '=', connector), ('relation_field', '=', des_node), ('model', '=', node)], 0, 0, 0, req.session.context)
in_transition_field = fields.read(in_transition_field_id[0], ['name'], req.session.context)['name']
out_transition_field_id = fields.search([('relation', '=', connector), ('relation_field', '=', src_node), ('model', '=', node)], 0, 0, 0, req.session.context)
out_transition_field = fields.read(out_transition_field_id[0], ['name'], req.session.context)['name']
id_model = req.session.model(model).read([id],['name'], req.session.context)[0]['name']
return dict(nodes=nodes, conn=connectors, id_model = id_model)
return dict(nodes=nodes, conn=connectors, id_model=id_model)
@@ -71,7 +71,7 @@ Raphael.fn.connection = function (obj1, obj2, style) {
x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
/* assemble path and arrow */
var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)];
/* arrow */
if(style && style.directed) {
/* magnitude, length of the last path vector */
@@ -83,15 +83,16 @@ Raphael.fn.connection = function (obj1, obj2, style) {
{x:(norm(x4-x3)+norm(y4-y3)+x4).toFixed(3), y:(norm(y4-y3)+norm(x4-x3)+y4).toFixed(3)},
{x:(norm(x4-x3)-norm(y4-y3)+x4).toFixed(3), y:(norm(y4-y3)-norm(x4-x3)+y4).toFixed(3)}
];
path = path + ",M"+arr[0].x+","+arr[0].y+",L"+x4+","+y4+",L"+arr[1].x+","+arr[1].y;
path.push("M", arr[0].x, arr[0].y, "L", x4, y4, "L", arr[1].x, arr[1].y, "L", arr[0].x, arr[0].y);
}
var svgpath = path.join(' ');
/* function to be used for moving existent path(s), e.g. animate() or attr() */
var move = "attr";
/* applying path(s) */
edge.fg && edge.fg[move]({path:path})
|| (edge.fg = selfRef.path(path).attr({stroke: style && style.stroke || "#000", fill: "none"}).toBack());
edge.bg && edge.bg[move]({path:path})
|| style && style.fill && (edge.bg = style.fill.split && selfRef.path(path).attr({stroke: style.fill.split("|")[0], fill: "none", "stroke-width": style.fill.split("|")[1] || 3}).toBack());
edge.fg && edge.fg[move]({path:svgpath})
|| (edge.fg = selfRef.path(svgpath).attr({stroke: style && style.stroke || "#000", fill: "none"}).toBack());
edge.bg && edge.bg[move]({path:svgpath})
|| style && style.fill && (edge.bg = style.fill.split && selfRef.path(svgpath).attr({stroke: style.fill.split("|")[0], fill: "none", "stroke-width": style.fill.split("|")[1] || 3}).toBack());
/* setting label */
style && style.label
&& (edge.label && edge.label.attr({x:(x1+x4)/2, y:(y1+y4)/2})
@@ -160,13 +160,11 @@ Graph.Renderer.Raphael = function(element, graph, width, height) {
*/
this.isDrag = false;
this.dragger = function (e) {
if(e.detail < 2) {
this.dx = e.clientX;
this.dy = e.clientY;
selfRef.isDrag = this;
this.set && this.set.animate({"fill-opacity": .1}, 200) && this.set.toFront();
e.preventDefault && e.preventDefault();
}
this.dx = e.clientX;
this.dy = e.clientY;
selfRef.isDrag = this;
this.set && this.set.animate({"fill-opacity": .1}, 200);
e.preventDefault && e.preventDefault();
};
var d = document.getElementById(element);
@@ -378,6 +376,8 @@ Graph.Layout.Spring.prototype = {
},
layoutRepulsive: function(node1, node2) {
if (typeof node1 == 'undefined' || typeof node2 == 'undefined')
return;
var dx = node2.layoutPosX - node1.layoutPosX;
var dy = node2.layoutPosY - node1.layoutPosY;
var d2 = dx * dx + dy * dy;
File diff suppressed because one or more lines are too long
@@ -1,13 +1,3 @@
.openerp .diagram {
border: 1px solid #999;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.openerp .show_grid {
background: url("/web_diagram/static/src/img/grid.jpg") repeat;
}
.openerp .oe_diagram_pager {
text-align: right;
white-space: nowrap;
+53 -35
View File
@@ -54,11 +54,6 @@ openerp.web.DiagramView = openerp.web.View.extend({
// New Node,Edge
this.$element.find('#new_node.oe_diagram_button_new').click(function(){self.add_edit_node(null, self.node);});
this.$element.find('#new_edge.oe_diagram_button_new').click(function(){self.add_edit_node(null, self.connector);});
this.$element.find('#toggle_grid').click(function() {
self.$element.find('.diagram').toggleClass('show_grid');
});
if(this.id) {
self.get_diagram_info();
@@ -113,8 +108,25 @@ openerp.web.DiagramView = openerp.web.View.extend({
this.get_diagram_info();
}
},
select_node: function (node, element) {
if (!this.selected_node) {
this.selected_node = node;
element.attr('stroke', 'red');
return;
}
// Re-click selected node, deselect it
if (node.id === this.selected_node.id) {
this.selected_node = null;
element.attr('stroke', 'black');
return;
}
this.add_edit_node(null, this.connector, {
act_from: this.selected_node.id,
act_to: node.id
});
},
draw_diagram: function(result) {
this.selected_node = null;
var diagram = new Graph();
this.active_model = result['id_model'];
@@ -125,34 +137,33 @@ openerp.web.DiagramView = openerp.web.View.extend({
//Custom logic
var self = this;
var renderer = function(r, n) {
var node;
var set;
var shape = n.node.shape;
if(shape == 'rectangle')
shape = 'rect';
node = r[shape](n.node.x, n.node.y).attr({
"fill": n.node.color
}).dblclick(function() {
self.add_edit_node(n.node.id, self.node);
});
set = r.set()
.push(node)
.push(
r.text(n.node.x, n.node.y, (n.label || n.id))
.attr({"cursor":"pointer"})
.dblclick(function() {
self.add_edit_node(n.node.id, self.node);
})
);
node.attr({cursor: "pointer"});
var shape = (n.node.shape === 'rectangle') ? 'rect' : 'ellipse';
if(shape == "ellipse")
node.attr({rx: "40", ry: "20"});
else if(shape == 'rect') {
var node = r[shape](n.node.x, n.node.y).attr({
"fill": n.node.color
});
var nodes = r.set(node, r.text(n.node.x, n.node.y, (n.label || n.id)))
.attr("cursor", "pointer")
.dblclick(function() {
self.add_edit_node(n.node.id, self.node);
})
.mousedown(function () { node.moved = false; })
.mousemove(function () { node.moved = true; })
.click(function () {
// Ignore click from move event
if (node.moved) { return; }
self.select_node(n.node, node);
});
if (shape === 'rect') {
node.attr({width: "60", height: "44"});
node.next.attr({"text-anchor": "middle", x: n.node.x + 20, y: n.node.y + 20});
} else {
node.attr({rx: "40", ry: "20"});
}
return set;
return nodes;
};
_.each(res_nodes, function(res_node) {
@@ -167,10 +178,7 @@ openerp.web.DiagramView = openerp.web.View.extend({
diagram.addEdge(connector['source'], connector['destination'], {directed : true, label: connector['signal']});
});
if ($('div#dia-canvas').children().length > 0) {
$('div#dia-canvas').children().remove();
}
self.$element.find('.diagram').empty();
var layouter = new Graph.Layout.Ordered(diagram);
var render_diagram = new Graph.Renderer.Raphael('dia-canvas', diagram, $('div#dia-canvas').width(), $('div#dia-canvas').height());
@@ -184,7 +192,8 @@ openerp.web.DiagramView = openerp.web.View.extend({
});
},
add_edit_node: function(id, model) {
add_edit_node: function(id, model, defaults) {
defaults = defaults || {};
var self = this;
if(!model)
@@ -253,6 +262,15 @@ openerp.web.DiagramView = openerp.web.View.extend({
});
});
}
if (!_.isEmpty(defaults)) {
form_controller.on_record_loaded.add_last(function () {
_(form_fields).each(function (field) {
if (!defaults[field]) { return; }
form_controller.fields[field].set_value(defaults[field]);
form_controller.fields[field].dirty = true;
});
});
}
},
on_pager_action: function(action) {
@@ -3,8 +3,6 @@
<div class="oe_diagram_header" t-att-id="element_id + '_header'">
<div class="oe_diagram_buttons">
<button type="button" id="new_node" class="oe_diagram_button_new">New Node</button>
<button type="button" id="new_edge" class="oe_diagram_button_new">New Edge</button>
<label>Show Grid:</label><input type="checkbox" id="toggle_grid" checked="checked"/>
</div>
<div class="oe_diagram_pager">
<button type="button" data-pager-action="first">First</button>
@@ -16,6 +14,6 @@
<button type="button" data-pager-action="last">Last</button>
</div>
</div>
<div id="dia-canvas" class="diagram show_grid" style="overflow: auto;"></div>
<div id="dia-canvas" class="diagram" style="overflow: auto;"></div>
</t>
</template>