[IMP] diagram view
bzr revid: xmo@openerp.com-20111026135645-vyq2pq7x5l5tiv5l
This commit is contained in:
@@ -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;
|
||||
|
||||
+8
-7
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user