odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[ADD] Diagragm using Raphel javascript Library. 

bzr revid: vda@tinyerp.com-20110407111818-3j2l1ciknar2r2qd
This commit is contained in:
vda (OpenERP) 2011-04-07 16:48:18 +05:30
parent d81618ca19
commit 2a86b85cad
16 changed files with 2375 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
addons/base/static/src/base.html
View File

@ -23,6 +23,12 @@
<script type="text/javascript" src="/base/static/src/js/list.js"></script>
<script type="text/javascript" src="/base/static/src/js/search.js"></script>
<script type="text/javascript" src="/base/static/src/js/views.js"></script>
<script type="text/javascript" src="/base_diagram/static/src/js/diagram.js"></script>
<script type="text/javascript" src="/base_diagram/static/lib/js/raphael-min.js"></script>
<script type="text/javascript" src="/base_diagram/static/lib/js/dracula_graffle.js"></script>
<script type="text/javascript" src="/base_diagram/static/lib/js/dracula_graph.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/base/static/lib/jquery.ui/css/smoothness/jquery-ui-1.8.9.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/base/static/lib/jquery.ui.notify/css/ui.notify.css" />

1
addons/base/static/src/js/base.js
View File

@ -122,6 +122,7 @@ openerp.base = function(instance) {
openerp.base.search(instance);
openerp.base.list(instance);
openerp.base.form(instance);
openerp.base.diagram(instance);
};
// vim:et fdc=0 fdl=0 foldnestmax=3 fdm=syntax:

4
addons/base/static/src/xml/base.xml
View File

@ -167,6 +167,10 @@
</div>
<table id="todo_use_unique_id" class="jqGrid"></table>
</t>
<t t-name="DiagramView">
<h2 class="oe_view_title"><t t-esc="fields_view.arch.attrs.string"/></h2>
<div id="dia-canvas"></div>
</t>
<t t-name="FormView">
<h2 class="oe_view_title"><t t-esc="view.fields_view.arch.attrs.string"/></h2>
<div class="oe_form_header">

1
addons/base_diagram/__init__.py Normal file
View File

@ -0,0 +1 @@
import controllers

6
addons/base_diagram/__openerp__.py Normal file
View File

@ -0,0 +1,6 @@
{
"name" : "OpenERP Web base Diagram",
"version" : "2.0",
"depends" : [],
'active': True,
}

1
addons/base_diagram/controllers/__init__.py Normal file
View File

@ -0,0 +1 @@
import main

125
addons/base_diagram/controllers/main.py Normal file
View File

@ -0,0 +1,125 @@
from base.controllers.main import View
import openerpweb
class DiagramView(View):
_cp_path = "/base_diagram/diagram"
@openerpweb.jsonrequest
def load(self, req, model, view_id):
fields_view = self.fields_view_get(req.session, model, view_id, 'diagram')
return {'fields_view': fields_view}
@openerpweb.jsonrequest
def get_diagram_info(self, req, **kw):
id = kw['id']
model = kw['model']
node = kw['node']
connector = kw['connector']
src_node = kw['src_node']
des_node = kw['des_node']
visible_node_fields = kw.get('visible_node_fields',[])
invisible_node_fields = kw.get('invisible_node_fields',[])
node_fields_string = kw.get('node_fields_string',[])
connector_fields = kw.get('connector_fields',[])
connector_fields_string = kw.get('connector_fields_string',[])
bgcolors = {}
shapes = {}
bgcolor = kw.get('bgcolor','')
shape = kw.get('shape','')
if bgcolor:
for color_spec in bgcolor.split(';'):
if color_spec:
colour, color_state = color_spec.split(':')
bgcolors[colour] = color_state
if shape:
for shape_spec in shape.split(';'):
if shape_spec:
shape_colour, shape_color_state = shape_spec.split(':')
shapes[shape_colour] = shape_color_state
ir_view = req.session.model('ir.ui.view')
graphs = ir_view.graph_get(id, model, node, connector, src_node, des_node, False,
(140, 180), req.session.context)
nodes = graphs['nodes']
transitions = graphs['transitions']
isolate_nodes = {}
for node in graphs['blank_nodes']:
isolate_nodes[node['id']] = node
else:
y = map(lambda t: t['y'],filter(lambda x: x['y'] if x['x']==20 else None, nodes.values()))
y_max = (y and max(y)) or 120
connectors = {}
list_tr = []
for tr in transitions:
list_tr.append(tr)
connectors.setdefault(tr, {
'id': tr,
's_id': transitions[tr][0],
'd_id': transitions[tr][1]
})
connector_tr = req.session.model(connector)
connector_ids = connector_tr.search([('id', 'in', list_tr)], 0, 0, 0, req.session.context)
data_connectors =connector_tr.read(connector_ids, connector_fields, req.session.context)
for tr in data_connectors:
t = connectors.get(str(tr['id']))
t.update({
'source': tr[src_node][1],
'destination': tr[des_node][1],
'options': {}
})
for i, fld in enumerate(connector_fields):
t['options'][connector_fields_string[i]] = tr[fld]
fields = req.session.model('ir.model.fields')
field_ids = fields.search([('model', '=', model), ('relation', '=', node)], 0, 0, 0, req.session.context)
field_data = fields.read(field_ids, ['relation_field'], req.session.context)
node_act = req.session.model(node)
search_acts = node_act.search([(field_data[0]['relation_field'], '=', id)], 0, 0, 0, req.session.context)
data_acts = node_act.read(search_acts, invisible_node_fields + visible_node_fields, req.session.context)
for act in data_acts:
n = nodes.get(str(act['id']))
if not n:
n = isolate_nodes.get(act['id'], {})
y_max += 140
n.update({'x': 20, 'y': y_max})
nodes[act['id']] = n
n.update(
id=act['id'],
color='white',
shape='ellipse',
options={}
)
for color, expr in bgcolors.items():
if eval(expr, act):
n['color'] = color
for shape, expr in shapes.items():
if eval(expr, act):
n['shape'] = shape
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']
return dict(nodes=nodes, conn=connectors, in_transition_field=in_transition_field, out_transition_field=out_transition_field)

29
addons/base_diagram/static/lib/js/Curry-1.0.1.js Normal file
View File

@ -0,0 +1,29 @@
/**
* Curry - Function currying
* Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Licensed under BSD (http://www.opensource.org/licenses/bsd-license.php)
* Date: 10/4/2008
*
* @author Ariel Flesler
* @version 1.0.1
*/
function curry( fn ){
return function(){
var args = curry.args(arguments),
master = arguments.callee,
self = this;
return args.length >= fn.length ? fn.apply(self,args) : function(){
return master.apply( self, args.concat(curry.args(arguments)) );
};
};
};
curry.args = function( args ){
return Array.prototype.slice.call(args);
};
Function.prototype.curry = function(){
return curry(this);
};

599
addons/base_diagram/static/lib/js/dracula_algorithms.js Normal file
View File

@ -0,0 +1,599 @@
/*
* Various algorithms and data structures, licensed under the MIT-license.
* (c) 2010 by Johann Philipp Strathausen <strathausen@gmail.com>
* http://strathausen.eu
*
*/
/*
Bellman-Ford
Path-finding algorithm, finds the shortest paths from one node to all nodes.
Complexity
O( |E| · |V| ), where E = edges and V = vertices (nodes)
Constraints
Can run on graphs with negative edge weights as long as they do not have
any negative weight cycles.
*/
function bellman_ford(g, source) {
/* STEP 1: initialisation */
for(var n in g.nodes)
g.nodes[n].distance = Infinity;
/* predecessors are implicitly null */
source.distance = 0;
step("Initially, all distances are infinite and all predecessors are null.");
/* STEP 2: relax each edge (this is at the heart of Bellman-Ford) */
/* repeat this for the number of nodes minus one */
for(var i = 1; i < g.nodes.length; i++)
/* for each edge */
for(var e in g.edges) {
var edge = g.edges[e];
if(edge.source.distance + edge.weight < edge.target.distance) {
step("Relax edge between " + edge.source.id + " and " + edge.target.id + ".");
edge.target.distance = edge.source.distance + edge.weight;
edge.target.predecessor = edge.source;
}
//Added by Jake Stothard (Needs to be tested)
if(!edge.style.directed) {
if(edge.target.distance + edge.weight < edge.source.distance) {
g.snapShot("Relax edge between "+edge.target.id+" and "+edge.source.id+".");
edge.source.distance = edge.target.distance + edge.weight;
edge.source.predecessor = edge.target;
}
}
}
step("Ready.");
/* STEP 3: TODO Check for negative cycles */
/* For now we assume here that the graph does not contain any negative
weights cycles. (this is left as an excercise to the reader[tm]) */
}
/*
Path-finding algorithm Dijkstra
- worst-case running time is O((|E| + |V|) · log |V| ) thus better than
Bellman-Ford for sparse graphs (with less edges), but cannot handle
negative edge weights
*/
function dijkstra(g, source) {
/* initially, all distances are infinite and all predecessors are null */
for(var n in g.nodes)
g.nodes[n].distance = Infinity;
/* predecessors are implicitly null */
g.snapShot("Initially, all distances are infinite and all predecessors are null.");
source.distance = 0;
/* set of unoptimized nodes, sorted by their distance (but a Fibonacci heap
would be better) */
var q = new BinaryMinHeap(g.nodes, "distance");
/* pointer to the node in focus */
var node;
/* get the node with the smallest distance
as long as we have unoptimized nodes. q.min() can have O(log n). */
while(q.min() != undefined) {
/* remove the latest */
node = q.extractMin();
node.optimized = true;
/* no nodes accessible from this one, should not happen */
if(node.distance == Infinity)
throw "Orphaned node!";
/* for each neighbour of node */
for(e in node.edges) {
var other = (node == node.edges[e].target) ? node.edges[e].source : node.edges[e].target;
if(other.optimized)
continue;
/* look for an alternative route */
var alt = node.distance + node.edges[e].weight;
/* update distance and route if a better one has been found */
if (alt < other.distance) {
/* update distance of neighbour */
other.distance = alt;
/* update priority queue */
q.heapify();
/* update path */
other.predecessor = node;
g.snapShot("Enhancing node.")
}
}
}
}
/* All-Pairs-Shortest-Paths */
/* Runs at worst in O(|V|³) and at best in Omega(|V|³) :-)
complexity Sigma(|V|²) */
/* This implementation is not yet ready for general use, but works with the
Dracula graph library. */
function floyd_warshall(g, source) {
/* Step 1: initialising empty path matrix (second dimension is implicit) */
var path = [];
var next = [];
var n = g.nodes.length;
/* construct path matrix, initialize with Infinity */
for(j in g.nodes) {
path[j] = [];
next[j] = [];
for(i in g.nodes)
path[j][i] = j == i ? 0 : Infinity;
}
/* initialize path with edge weights */
for(e in g.edges)
path[g.edges[e].source.id][g.edges[e].target.id] = g.edges[e].weight;
/* Note: Usually, the initialisation is done by getting the edge weights
from a node matrix representation of the graph, not by iterating through
a list of edges as done here. */
/* Step 2: find best distances (the heart of Floyd-Warshall) */
for(k in g.nodes){
for(i in g.nodes) {
for(j in g.nodes)
if(path[i][j] > path[i][k] + path[k][j]) {
path[i][j] = path[i][k] + path[k][j];
/* Step 2.b: remember the path */
next[i][j] = k;
}
}
}
/* Step 3: Path reconstruction, get shortest path */
function getPath(i, j) {
if(path[i][j] == Infinity)
throw "There is no path.";
var intermediate = next[i][j];
if(intermediate == undefined)
return null;
else
return getPath(i, intermediate)
.concat([intermediate])
.concat(getPath(intermediate, j));
}
/* TODO use the knowledge, e.g. mark path in graph */
}
/*
Ford-Fulkerson
Max-Flow-Min-Cut Algorithm finding the maximum flow through a directed
graph from source to sink.
Complexity
O(E * max(f)), max(f) being the maximum flow
Description
As long as there is an open path through the residual graph, send the
minimum of the residual capacities on the path.
Constraints
The algorithm works only if all weights are integers. Otherwise it is
possible that the Ford–Fulkerson algorithm will not converge to the maximum
value.
Input
g - Graph object
s - Source ID
t - Target (sink) ID
Output
Maximum flow from Source s to Target t
*/
/*
Edmonds-Karp
Max-Flow-Min-Cut Algorithm finding the maximum flow through a directed
graph from source to sink. An implementation of the Ford-Fulkerson
algorithm.
Complexity
O(|V|*|E|²)
Input
g - Graph object (with node and edge lists, capacity is a property of edge)
s - source ID
t - sink ID
*/
function edmonds_karp(g, s, t) {
}
/*
A simple binary min-heap serving as a priority queue
- takes an array as the input, with elements having a key property
- elements will look like this:
{
key: "... key property ...",
value: "... element content ..."
}
- provides insert(), min(), extractMin() and heapify()
- example usage (e.g. via the Firebug or Chromium console):
var x = {foo: 20, hui: "bla"};
var a = new BinaryMinHeap([x,{foo:3},{foo:10},{foo:20},{foo:30},{foo:6},{foo:1},{foo:3}],"foo");
console.log(a.extractMin());
console.log(a.extractMin());
x.foo = 0; // update key
a.heapify(); // call this always after having a key updated
console.log(a.extractMin());
console.log(a.extractMin());
- can also be used on a simple array, like [9,7,8,5]
*/
function BinaryMinHeap(array, key) {
/* Binary tree stored in an array, no need for a complicated data structure */
var tree = [];
var key = key || 'key';
/* Calculate the index of the parent or a child */
var parent = function(index) { return Math.floor((index - 1)/2); };
var right = function(index) { return 2 * index + 2; };
var left = function(index) { return 2 * index + 1; };
/* Helper function to swap elements with their parent
as long as the parent is bigger */
function bubble_up(i) {
var p = parent(i);
while((p >= 0) && (tree[i][key] < tree[p][key])) {
/* swap with parent */
tree[i] = tree.splice(p, 1, tree[i])[0];
/* go up one level */
i = p;
p = parent(i);
}
}
/* Helper function to swap elements with the smaller of their children
as long as there is one */
function bubble_down(i) {
var l = left(i);
var r = right(i);
/* as long as there are smaller children */
while(tree[l] && (tree[i][key] > tree[l][key]) || tree[r] && (tree[i][key] > tree[r][key])) {
/* find smaller child */
var child = tree[l] ? tree[r] ? tree[l][key] > tree[r][key] ? r : l : l : l;
/* swap with smaller child with current element */
tree[i] = tree.splice(child, 1, tree[i])[0];
/* go up one level */
i = child;
l = left(i);
r = right(i);
}
}
/* Insert a new element with respect to the heap property
1. Insert the element at the end
2. Bubble it up until it is smaller than its parent */
this.insert = function(element) {
/* make sure there's a key property */
(element[key] == undefined) && (element = {key:element});
/* insert element at the end */
tree.push(element);
/* bubble up the element */
bubble_up(tree.length - 1);
}
/* Only show us the minimum */
this.min = function() {
return tree.length == 1 ? undefined : tree[0];
}
/* Return and remove the minimum
1. Take the root as the minimum that we are looking for
2. Move the last element to the root (thereby deleting the root)
3. Compare the new root with both of its children, swap it with the
smaller child and then check again from there (bubble down)
*/
this.extractMin = function() {
var result = this.min();
/* move the last element to the root or empty the tree completely */
/* bubble down the new root if necessary */
(tree.length == 1) && (tree = []) || (tree[0] = tree.pop()) && bubble_down(0);
return result;
}
/* currently unused, TODO implement */
this.changeKey = function(index, key) {
throw "function not implemented";
}
this.heapify = function() {
for(var start = Math.floor((tree.length - 2) / 2); start >= 0; start--) {
bubble_down(start);
}
}
/* insert the input elements one by one only when we don't have a key property (TODO can be done more elegant) */
for(i in (array || []))
this.insert(array[i]);
}
/*
Quick Sort:
1. Select some random value from the array, the median.
2. Divide the array in three smaller arrays according to the elements
being less, equal or greater than the median.
3. Recursively sort the array containg the elements less than the
median and the one containing elements greater than the median.
4. Concatenate the three arrays (less, equal and greater).
5. One or no element is always sorted.
TODO: This could be implemented more efficiently by using only one array object and several pointers.
*/
function quickSort(arr) {
/* recursion anchor: one element is always sorted */
if(arr.length <= 1) return arr;
/* randomly selecting some value */
var median = arr[Math.floor(Math.random() * arr.length)];
var arr1 = [], arr2 = [], arr3 = [];
for(var i in arr) {
arr[i] < median && arr1.push(arr[i]);
arr[i] == median && arr2.push(arr[i]);
arr[i] > median && arr3.push(arr[i]);
}
/* recursive sorting and assembling final result */
return quickSort(arr1).concat(arr2).concat(quickSort(arr3));
}
/*
Selection Sort:
1. Select the minimum and remove it from the array
2. Sort the rest recursively
3. Return the minimum plus the sorted rest
4. An array with only one element is already sorted
*/
function selectionSort(arr) {
/* recursion anchor: one element is always sorted */
if(arr.length == 1) return arr;
var minimum = Infinity;
var index;
for(var i in arr) {
if(arr[i] < minimum) {
minimum = arr[i];
index = i; /* remember the minimum index for later removal */
}
}
/* remove the minimum */
arr.splice(index, 1);
/* assemble result and sort recursively (could be easily done iteratively as well)*/
return [minimum].concat(selectionSort(arr));
}
/*
Merge Sort:
1. Cut the array in half
2. Sort each of them recursively
3. Merge the two sorted arrays
4. An array with only one element is considered sorted
*/
function mergeSort(arr) {
/* merges two sorted arrays into one sorted array */
function merge(a, b) {
/* result set */
var c = [];
/* as long as there are elements in the arrays to be merged */
while(a.length > 0 || b.length > 0){
/* are there elements to be merged, if yes, compare them and merge */
var n = a.length > 0 && b.length > 0 ? a[0] < b[0] ? a.shift() : b.shift() : b.length > 0 ? b.shift() : a.length > 0 ? a.shift() : null;
/* always push the smaller one onto the result set */
n != null && c.push(n);
}
return c;
}
/* this mergeSort implementation cuts the array in half, wich should be fine with randomized arrays, but introduces the risk of a worst-case scenario */
median = Math.floor(arr.length / 2);
var part1 = arr.slice(0, median); /* for some reason it doesn't work if inserted directly in the return statement (tried so with firefox) */
var part2 = arr.slice(median - arr.length);
return arr.length <= 1 ? arr : merge(
mergeSort(part1), /* first half */
mergeSort(part2) /* second half */
);
}
/* Balanced Red-Black-Tree */
function RedBlackTree(arr) {
}
function BTree(arr) {
}
function NaryTree(n, arr) {
}
/**
* Knuth-Morris-Pratt string matching algorithm - finds a pattern in a text.
* FIXME: Doesn't work correctly yet.
*/
function kmp(p, t) {
/**
* PREFIX, OVERLAP or FALIURE function for KMP. Computes how many iterations
* the algorithm can skip after a mismatch.
*
* @input p - pattern (string)
* @result array of skippable iterations
*/
function prefix(p) {
/* pi contains the computed skip marks */
var pi = [0], k = 0;
for(q = 1; q < p.length; q++) {
while(k > 0 && (p.charAt(k) != p.charAt(q)))
k = pi[k-1];
(p.charAt(k) == p.charAt(q)) && k++;
pi[q] = k;
}
return pi;
}
/* The actual KMP algorithm starts here. */
var pi = prefix(p), q = 0, result = [];
for(var i = 0; i < t.length; i++) {
/* jump forward as long as the character doesn't match */
while((q > 0) && (p.charAt(q) != t.charAt(i)))
q = pi[q];
(p.charAt(q) == t.charAt(i)) && q++;
(q == p.length) && result.push(i - p.length) && (q = pi[q]);
}
return result;
}
/* step for algorithm visualisation */
function step(comment, funct) {
//wait for input
//display comment (before or after waiting)
// next.wait();
/* execute callback function */
funct();
}
/**
* Curry - Function currying
* Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Licensed under BSD (http://www.opensource.org/licenses/bsd-license.php)
* Date: 10/4/2008
*
* @author Ariel Flesler
* @version 1.0.1
*/
function curry( fn ){
return function(){
var args = curry.args(arguments),
master = arguments.callee,
self = this;
return args.length >= fn.length ? fn.apply(self,args) : function(){
return master.apply( self, args.concat(curry.args(arguments)) );
};
};
};
curry.args = function( args ){
return Array.prototype.slice.call(args);
};
Function.prototype.curry = function(){
return curry(this);
};
/**
* Topological Sort
*
* Sort a directed graph based on incoming edges
*
* Coded by Jake Stothard
*/
function topological_sort(g) {
//Mark nodes as "deleted" instead of actually deleting them
//That way we don't have to copy g
for(i in g.nodes)
g.nodes[i].deleted = false;
var ret = topological_sort_helper(g);
//Cleanup: Remove the deleted property
for(i in g.nodes)
delete g.nodes[i].deleted
return ret;
}
function topological_sort_helper(g) {
//Find node with no incoming edges
var node;
for(i in g.nodes) {
if(g.nodes[i].deleted)
continue; //Bad style, meh
var incoming = false;
for(j in g.nodes[i].edges) {
if(g.nodes[i].edges[j].target == g.nodes[i]
&& g.nodes[i].edges[j].source.deleted == false) {
incoming = true;
break;
}
}
if(!incoming) {
node = g.nodes[i];
break;
}
}
// Either unsortable or done. Either way, GTFO
if(node == undefined)
return [];
//"Delete" node from g
node.deleted = true;
var tail = topological_sort_helper(g);
tail.unshift(node);
return tail;
}

106
addons/base_diagram/static/lib/js/dracula_graffle.js Normal file
View File

@ -0,0 +1,106 @@
/**
* Originally grabbed from the official RaphaelJS Documentation
* http://raphaeljs.com/graffle.html
* Adopted (arrows) and commented by Philipp Strathausen http://blog.ameisenbar.de
* Licenced under the MIT licence.
*/
/**
* Usage:
* connect two shapes
* parameters:
* source shape [or connection for redrawing],
* target shape,
* style with { fg : linecolor, bg : background color, directed: boolean }
* returns:
* connection { draw = function() }
*/
Raphael.fn.connection = function (obj1, obj2, style) {
var selfRef = this;
/* create and return new connection */
var edge = {/*
from : obj1,
to : obj2,
style : style,*/
draw : function() {
/* get bounding boxes of target and source */
var bb1 = obj1.getBBox();
var bb2 = obj2.getBBox();
var off1 = 0;
var off2 = 0;
/* coordinates for potential connection coordinates from/to the objects */
var p = [
{x: bb1.x + bb1.width / 2, y: bb1.y - off1}, /* NORTH 1 */
{x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + off1}, /* SOUTH 1 */
{x: bb1.x - off1, y: bb1.y + bb1.height / 2}, /* WEST 1 */
{x: bb1.x + bb1.width + off1, y: bb1.y + bb1.height / 2}, /* EAST 1 */
{x: bb2.x + bb2.width / 2, y: bb2.y - off2}, /* NORTH 2 */
{x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + off2}, /* SOUTH 2 */
{x: bb2.x - off2, y: bb2.y + bb2.height / 2}, /* WEST 2 */
{x: bb2.x + bb2.width + off2, y: bb2.y + bb2.height / 2} /* EAST 2 */
];
/* distances between objects and according coordinates connection */
var d = {}, dis = [];
/*
* find out the best connection coordinates by trying all possible ways
*/
/* loop the first object's connection coordinates */
for (var i = 0; i < 4; i++) {
/* loop the seond object's connection coordinates */
for (var j = 4; j < 8; j++) {
var dx = Math.abs(p[i].x - p[j].x),
dy = Math.abs(p[i].y - p[j].y);
if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
dis.push(dx + dy);
d[dis[dis.length - 1].toFixed(3)] = [i, j];
}
}
}
var res = dis.length == 0 ? [0, 4] : d[Math.min.apply(Math, dis).toFixed(3)];
/* bezier path */
var x1 = p[res[0]].x,
y1 = p[res[0]].y,
x4 = p[res[1]].x,
y4 = p[res[1]].y,
dx = Math.max(Math.abs(x1 - x4) / 2, 10),
dy = Math.max(Math.abs(y1 - y4) / 2, 10),
x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
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(",");
/* arrow */
if(style && style.directed) {
/* magnitude, length of the last path vector */
var mag = Math.sqrt((y4 - y3) * (y4 - y3) + (x4 - x3) * (x4 - x3));
/* vector normalisation to specified length */
var norm = function(x,l){return (-x*(l||5)/mag);};
/* calculate array coordinates (two lines orthogonal to the path vector) */
var arr = [
{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;
}
/* 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());
/* setting label */
style && style.label
&& (edge.label && edge.label.attr({x:(x1+x4)/2, y:(y1+y4)/2})
|| (edge.label = selfRef.text((x1+x4)/2, (y1+y4)/2, style.label).attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
// && selfRef.text(x4, y4, style.label).attr({stroke: style && style.stroke || "#fff", "font-weight":"bold", "font-size":"20px"})
// style && style.callback && style.callback(edge);
}
}
edge.draw();
return edge;
};
//Raphael.prototype.set.prototype.dodo=function(){console.log("works");};

524
addons/base_diagram/static/lib/js/dracula_graph.coffee Normal file
View File

@ -0,0 +1,524 @@
###
* Dracula Graph Layout and Drawing Framework 0.0.3alpha
* (c) 2010 Philipp Strathausen <strathausen@gmail.com>, http://strathausen.eu
*
* Contributions by:
* Branched by Jake Stothard <stothardj@gmail.com>.
*
* based on the Graph JavaScript framework, version 0.0.1
* (c) 2006 Aslak Hellesoy <aslak.hellesoy@gmail.com>
* (c) 2006 Dave Hoover <dave.hoover@gmail.com>
*
* Ported from Graph::Layouter::Spring in
* http://search.cpan.org/~pasky/Graph-Layderer-0.02/
* The algorithm is based on a spring-style layouter of a Java-based social
* network tracker PieSpy written by Paul Mutton E<lt>paul@jibble.orgE<gt>.
*
* This code is freely distributable under the terms of an MIT-style license.
* For details, see the Graph web site: http://dev.buildpatternd.com/trac
*
* Links:
*
* Graph Dracula JavaScript Framework:
* http://graphdracula.net
*
* Demo of the original applet:
* http://redsquirrel.com/dave/work/webdep/
*
* Mirrored original source code at snipplr:
* http://snipplr.com/view/1950/graph-javascript-framework-version-001/
*
* Original usage example:
* http://ajaxian.com/archives/new-javascriptcanvas-graph-library
*
###
###
Edge Factory
###
AbstractEdge = ->
AbstractEdge.prototype =
hide: ->
@connection.fg.hide()
@connection.bg && @bg.connection.hide()
EdgeFactory = ->
@template = new AbstractEdge()
@template.style = new Object()
@template.style.directed = false
@template.weight = 1
EdgeFactory.prototype =
build: (source, target) ->
e = jQuery.extend true, {}, @template
e.source = source
e.target = target
e
###
Graph
###
Graph = ->
@nodes = {}
@edges = []
@snapshots = [] # previous graph states TODO to be implemented
@edgeFactory = new EdgeFactory()
Graph.prototype =
###
add a node
@id the node's ID (string or number)
@content (optional, dictionary) can contain any information that is
being interpreted by the layout algorithm or the graph
representation
###
addNode: (id, content) ->
# testing if node is already existing in the graph
if @nodes[id] == undefined
@nodes[id] = new Graph.Node id, content
@nodes[id]
addEdge: (source, target, style) ->
s = @addNode source
t = @addNode target
var edge = @edgeFactory.build s, t
jQuery.extend edge.style, style
s.edges.push edge
@edges.push edge
# NOTE: Even directed edges are added to both nodes.
t.edges.push edge
# TODO to be implemented
# Preserve a copy of the graph state (nodes, positions, ...)
# @comment a comment describing the state
snapShot: (comment) ->
###/* FIXME
var graph = new Graph()
graph.nodes = jQuery.extend(true, {}, @nodes)
graph.edges = jQuery.extend(true, {}, @edges)
@snapshots.push({comment: comment, graph: graph})
*/
###
removeNode: (id) ->
delete @nodes[id]
for i = 0; i < @edges.length; i++
if @edges[i].source.id == id || @edges[i].target.id == id
@edges.splice(i, 1)
i--
/*
* Node
*/
Graph.Node = (id, node) ->
node = node || {}
node.id = id
node.edges = []
node.hide = ->
@hidden = true
@shape && @shape.hide() # FIXME this is representation specific code and should be elsewhere */
for(i in @edges)
(@edges[i].source.id == id || @edges[i].target == id) && @edges[i].hide && @edges[i].hide()
node.show = ->
@hidden = false
@shape && @shape.show()
for(i in @edges)
(@edges[i].source.id == id || @edges[i].target == id) && @edges[i].show && @edges[i].show()
node
Graph.Node.prototype = { }
###
Renderer base class
###
Graph.Renderer = { }
###
Renderer implementation using RaphaelJS
###
Graph.Renderer.Raphael = (element, graph, width, height) ->
@width = width || 400
@height = height || 400
var selfRef = this
@r = Raphael element, @width, @height
@radius = 40 # max dimension of a node
@graph = graph
@mouse_in = false
# TODO default node rendering
if(!@graph.render) {
@graph.render = ->
return
}
}
/*
* Dragging
*/
@isDrag = false
@dragger = (e) ->
@dx = e.clientX
@dy = e.clientY
selfRef.isDrag = this
@set && @set.animate "fill-opacity": .1, 200 && @set.toFront()
e.preventDefault && e.preventDefault()
document.onmousemove = (e) {
e = e || window.event
if (selfRef.isDrag) {
var bBox = selfRef.isDrag.set.getBBox()
// TODO round the coordinates here (eg. for proper image representation)
var newX = e.clientX - selfRef.isDrag.dx + (bBox.x + bBox.width / 2)
var newY = e.clientY - selfRef.isDrag.dy + (bBox.y + bBox.height / 2)
/* prevent shapes from being dragged out of the canvas */
var clientX = e.clientX - (newX < 20 ? newX - 20 : newX > selfRef.width - 20 ? newX - selfRef.width + 20 : 0)
var clientY = e.clientY - (newY < 20 ? newY - 20 : newY > selfRef.height - 20 ? newY - selfRef.height + 20 : 0)
selfRef.isDrag.set.translate(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy))
// console.log(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy))
for (var i in selfRef.graph.edges) {
selfRef.graph.edges[i].connection && selfRef.graph.edges[i].connection.draw()
}
//selfRef.r.safari()
selfRef.isDrag.dx = clientX
selfRef.isDrag.dy = clientY
}
}
document.onmouseup = ->
selfRef.isDrag && selfRef.isDrag.set.animate({"fill-opacity": .6}, 500)
selfRef.isDrag = false
}
@draw()
}
Graph.Renderer.Raphael.prototype = {
translate: (point) {
return [
(point[0] - @graph.layoutMinX) * @factorX + @radius,
(point[1] - @graph.layoutMinY) * @factorY + @radius
]
},
rotate: (point, length, angle) {
var dx = length * Math.cos(angle)
var dy = length * Math.sin(angle)
return [point[0]+dx, point[1]+dy]
},
draw: ->
@factorX = (@width - 2 * @radius) / (@graph.layoutMaxX - @graph.layoutMinX)
@factorY = (@height - 2 * @radius) / (@graph.layoutMaxY - @graph.layoutMinY)
for (i in @graph.nodes) {
@drawNode(@graph.nodes[i])
}
for (var i = 0; i < @graph.edges.length; i++) {
@drawEdge(@graph.edges[i])
}
},
drawNode: (node) {
var point = @translate([node.layoutPosX, node.layoutPosY])
node.point = point
/* if node has already been drawn, move the nodes */
if(node.shape) {
var oBBox = node.shape.getBBox()
var opoint = { x: oBBox.x + oBBox.width / 2, y: oBBox.y + oBBox.height / 2}
node.shape.translate(Math.round(point[0] - opoint.x), Math.round(point[1] - opoint.y))
@r.safari()
return node
}/* else, draw new nodes */
var shape
/* if a node renderer is provided by the user, then use it
or the default render instead */
if(!node.render) {
node.render = (r, node) {
/* the default node drawing */
var color = Raphael.getColor()
var ellipse = r.ellipse(0, 0, 30, 20).attr({fill: color, stroke: color, "stroke-width": 2})
/* set DOM node ID */
ellipse.node.id = node.label || node.id
shape = r.set().
push(ellipse).
push(r.text(0, 30, node.label || node.id))
return shape
}
}
/* or check for an ajax representation of the nodes */
if(node.shapes) {
// TODO ajax representation evaluation
}
shape = node.render(@r, node).hide()
shape.attr({"fill-opacity": .6})
/* re-reference to the node an element belongs to, needed for dragging all elements of a node */
shape.items.forEach((item){ item.set = shape; item.node.style.cursor = "move"; })
shape.mousedown(@dragger)
var box = shape.getBBox()
shape.translate(Math.round(point[0]-(box.x+box.width/2)),Math.round(point[1]-(box.y+box.height/2)))
//console.log(box,point)
node.hidden || shape.show()
node.shape = shape
},
drawEdge: (edge) {
/* if this edge already exists the other way around and is undirected */
if(edge.backedge)
return
if(edge.source.hidden || edge.target.hidden) {
edge.connection && edge.connection.fg.hide() | edge.connection.bg && edge.connection.bg.hide()
return
}
/* if edge already has been drawn, only refresh the edge */
if(!edge.connection) {
edge.style && edge.style.callback && edge.style.callback(edge); // TODO move this somewhere else
edge.connection = @r.connection(edge.source.shape, edge.target.shape, edge.style)
return
}
//FIXME showing doesn't work well
edge.connection.fg.show()
edge.connection.bg && edge.connection.bg.show()
edge.connection.draw()
}
}
Graph.Layout = {}
Graph.Layout.Spring = (graph) {
@graph = graph
@iterations = 500
@maxRepulsiveForceDistance = 6
@k = 2
@c = 0.01
@maxVertexMovement = 0.5
@layout()
}
Graph.Layout.Spring.prototype = {
layout: ->
@layoutPrepare()
for (var i = 0; i < @iterations; i++) {
@layoutIteration()
}
@layoutCalcBounds()
},
layoutPrepare: ->
for (i in @graph.nodes) {
var node = @graph.nodes[i]
node.layoutPosX = 0
node.layoutPosY = 0
node.layoutForceX = 0
node.layoutForceY = 0
}
},
layoutCalcBounds: ->
var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity
for (i in @graph.nodes) {
var x = @graph.nodes[i].layoutPosX
var y = @graph.nodes[i].layoutPosY
if(x > maxx) maxx = x
if(x < minx) minx = x
if(y > maxy) maxy = y
if(y < miny) miny = y
}
@graph.layoutMinX = minx
@graph.layoutMaxX = maxx
@graph.layoutMinY = miny
@graph.layoutMaxY = maxy
},
layoutIteration: ->
// Forces on nodes due to node-node repulsions
var prev = new Array()
for(var c in @graph.nodes) {
var node1 = @graph.nodes[c]
for (var d in prev) {
var node2 = @graph.nodes[prev[d]]
@layoutRepulsive(node1, node2)
}
prev.push(c)
}
// Forces on nodes due to edge attractions
for (var i = 0; i < @graph.edges.length; i++) {
var edge = @graph.edges[i]
@layoutAttractive(edge);
}
// Move by the given force
for (i in @graph.nodes) {
var node = @graph.nodes[i]
var xmove = @c * node.layoutForceX
var ymove = @c * node.layoutForceY
var max = @maxVertexMovement
if(xmove > max) xmove = max
if(xmove < -max) xmove = -max
if(ymove > max) ymove = max
if(ymove < -max) ymove = -max
node.layoutPosX += xmove
node.layoutPosY += ymove
node.layoutForceX = 0
node.layoutForceY = 0
}
},
layoutRepulsive: (node1, node2) {
var dx = node2.layoutPosX - node1.layoutPosX
var dy = node2.layoutPosY - node1.layoutPosY
var d2 = dx * dx + dy * dy
if(d2 < 0.01) {
dx = 0.1 * Math.random() + 0.1
dy = 0.1 * Math.random() + 0.1
var d2 = dx * dx + dy * dy
}
var d = Math.sqrt(d2)
if(d < @maxRepulsiveForceDistance) {
var repulsiveForce = @k * @k / d
node2.layoutForceX += repulsiveForce * dx / d
node2.layoutForceY += repulsiveForce * dy / d
node1.layoutForceX -= repulsiveForce * dx / d
node1.layoutForceY -= repulsiveForce * dy / d
}
},
layoutAttractive: (edge) {
var node1 = edge.source
var node2 = edge.target
var dx = node2.layoutPosX - node1.layoutPosX
var dy = node2.layoutPosY - node1.layoutPosY
var d2 = dx * dx + dy * dy
if(d2 < 0.01) {
dx = 0.1 * Math.random() + 0.1
dy = 0.1 * Math.random() + 0.1
var d2 = dx * dx + dy * dy
}
var d = Math.sqrt(d2)
if(d > @maxRepulsiveForceDistance) {
d = @maxRepulsiveForceDistance
d2 = d * d
}
var attractiveForce = (d2 - @k * @k) / @k
if(edge.attraction == undefined) edge.attraction = 1
attractiveForce *= Math.log(edge.attraction) * 0.5 + 1
node2.layoutForceX -= attractiveForce * dx / d
node2.layoutForceY -= attractiveForce * dy / d
node1.layoutForceX += attractiveForce * dx / d
node1.layoutForceY += attractiveForce * dy / d
}
}
Graph.Layout.Ordered = (graph, order) {
@graph = graph
@order = order
@layout()
}
Graph.Layout.Ordered.prototype = {
layout: ->
@layoutPrepare()
@layoutCalcBounds()
},
layoutPrepare: (order) {
for (i in @graph.nodes) {
var node = @graph.nodes[i]
node.layoutPosX = 0
node.layoutPosY = 0
}
var counter = 0
for (i in @order) {
var node = @order[i]
node.layoutPosX = counter
node.layoutPosY = Math.random()
counter++
}
},
layoutCalcBounds: ->
var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity
for (i in @graph.nodes) {
var x = @graph.nodes[i].layoutPosX
var y = @graph.nodes[i].layoutPosY
if(x > maxx) maxx = x
if(x < minx) minx = x
if(y > maxy) maxy = y
if(y < miny) miny = y
}
@graph.layoutMinX = minx
@graph.layoutMaxX = maxx
@graph.layoutMinY = miny
@graph.layoutMaxY = maxy
}
}
/*
* usefull JavaScript extensions,
*/
log(a) {console.log&&console.log(a);}
/*
* Raphael Tooltip Plugin
* - attaches an element as a tooltip to another element
*
* Usage example, adding a rectangle as a tooltip to a circle:
*
* paper.circle(100,100,10).tooltip(paper.rect(0,0,20,30))
*
* If you want to use more shapes, you'll have to put them into a set.
*
*/
Raphael.el.tooltip = (tp) {
@tp = tp
@tp.o = {x: 0, y: 0}
@tp.hide()
@hover(
(event){
@mousemove((event){
@tp.translate(event.clientX -
@tp.o.x,event.clientY - @tp.o.y)
@tp.o = {x: event.clientX, y: event.clientY}
})
@tp.show().toFront()
},
(event){
@tp.hide()
@unmousemove()
})
return this
}
/* For IE */
if (!Array.prototype.forEach)
{
Array.prototype.forEach = (fun /*, thisp*/)
{
var len = @length
if (typeof fun != "")
throw new TypeError()
var thisp = arguments[1]
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this)
}
}
}

525
addons/base_diagram/static/lib/js/dracula_graph.js Normal file
View File

@ -0,0 +1,525 @@
/*
* Dracula Graph Layout and Drawing Framework 0.0.3alpha
* (c) 2010 Philipp Strathausen <strathausen@gmail.com>, http://strathausen.eu
* Contributions by Jake Stothard <stothardj@gmail.com>.
*
* based on the Graph JavaScript framework, version 0.0.1
* (c) 2006 Aslak Hellesoy <aslak.hellesoy@gmail.com>
* (c) 2006 Dave Hoover <dave.hoover@gmail.com>
*
* Ported from Graph::Layouter::Spring in
* http://search.cpan.org/~pasky/Graph-Layderer-0.02/
* The algorithm is based on a spring-style layouter of a Java-based social
* network tracker PieSpy written by Paul Mutton <paul@jibble.org>.
*
* This code is freely distributable under the MIT license. Commercial use is
* hereby granted without any cost or restriction.
*
* Links:
*
* Graph Dracula JavaScript Framework:
* http://graphdracula.net
*
/*--------------------------------------------------------------------------*/
/*
* Edge Factory
*/
var AbstractEdge = function() {
}
AbstractEdge.prototype = {
hide: function() {
this.connection.fg.hide();
this.connection.bg && this.bg.connection.hide();
}
};
var EdgeFactory = function() {
this.template = new AbstractEdge();
this.template.style = new Object();
this.template.style.directed = false;
this.template.weight = 1;
};
EdgeFactory.prototype = {
build: function(source, target) {
var e = jQuery.extend(true, {}, this.template);
e.source = source;
e.target = target;
return e;
}
};
/*
* Graph
*/
var Graph = function() {
this.nodes = {};
this.edges = [];
this.snapshots = []; // previous graph states TODO to be implemented
this.edgeFactory = new EdgeFactory();
};
Graph.prototype = {
/*
* add a node
* @id the node's ID (string or number)
* @content (optional, dictionary) can contain any information that is
* being interpreted by the layout algorithm or the graph
* representation
*/
addNode: function(id, content) {
/* testing if node is already existing in the graph */
if(this.nodes[id] == undefined) {
this.nodes[id] = new Graph.Node(id, content);
}
return this.nodes[id];
},
addEdge: function(source, target, style) {
var s = this.addNode(source);
var t = this.addNode(target);
var edge = this.edgeFactory.build(s, t);
jQuery.extend(edge.style,style);
s.edges.push(edge);
this.edges.push(edge);
// NOTE: Even directed edges are added to both nodes.
t.edges.push(edge);
},
/* TODO to be implemented
* Preserve a copy of the graph state (nodes, positions, ...)
* @comment a comment describing the state
*/
snapShot: function(comment) {
/* FIXME
var graph = new Graph();
graph.nodes = jQuery.extend(true, {}, this.nodes);
graph.edges = jQuery.extend(true, {}, this.edges);
this.snapshots.push({comment: comment, graph: graph});
*/
},
removeNode: function(id) {
delete this.nodes[id];
for(var i = 0; i < this.edges.length; i++) {
if (this.edges[i].source.id == id || this.edges[i].target.id == id) {
this.edges.splice(i, 1);
i--;
}
}
}
};
/*
* Node
*/
Graph.Node = function(id, node){
node = node || {};
node.id = id;
node.edges = [];
node.hide = function() {
this.hidden = true;
this.shape && this.shape.hide(); /* FIXME this is representation specific code and should be elsewhere */
for(i in this.edges)
(this.edges[i].source.id == id || this.edges[i].target == id) && this.edges[i].hide && this.edges[i].hide();
};
node.show = function() {
this.hidden = false;
this.shape && this.shape.show();
for(i in this.edges)
(this.edges[i].source.id == id || this.edges[i].target == id) && this.edges[i].show && this.edges[i].show();
};
return node;
};
Graph.Node.prototype = {
};
/*
* Renderer base class
*/
Graph.Renderer = {};
/*
* Renderer implementation using RaphaelJS
*/
Graph.Renderer.Raphael = function(element, graph, width, height) {
this.width = width || 800;
this.height = height || 800;
var selfRef = this;
this.r = Raphael(element, this.width, this.height);
this.radius = 40; /* max dimension of a node */
this.graph = graph;
this.mouse_in = false;
/* TODO default node rendering function */
if(!this.graph.render) {
this.graph.render = function() {
return;
}
}
/*
* Dragging
*/
this.isDrag = false;
this.dragger = function (e) {
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();
};
var d = document.getElementById(element);
d.onmousemove = function (e) {
e = e || window.event;
if (selfRef.isDrag) {
var bBox = selfRef.isDrag.set.getBBox();
// TODO round the coordinates here (eg. for proper image representation)
var newX = e.clientX - selfRef.isDrag.dx + (bBox.x + bBox.width / 2);
var newY = e.clientY - selfRef.isDrag.dy + (bBox.y + bBox.height / 2);
/* prevent shapes from being dragged out of the canvas */
var clientX = e.clientX - (newX < 20 ? newX - 20 : newX > selfRef.width - 20 ? newX - selfRef.width + 20 : 0);
var clientY = e.clientY - (newY < 20 ? newY - 20 : newY > selfRef.height - 20 ? newY - selfRef.height + 20 : 0);
selfRef.isDrag.set.translate(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
// console.log(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
for (var i in selfRef.graph.edges) {
selfRef.graph.edges[i].connection && selfRef.graph.edges[i].connection.draw();
}
//selfRef.r.safari();
selfRef.isDrag.dx = clientX;
selfRef.isDrag.dy = clientY;
}
};
d.onmouseup = function () {
selfRef.isDrag && selfRef.isDrag.set.animate({"fill-opacity": .6}, 500);
selfRef.isDrag = false;
};
this.draw();
};
Graph.Renderer.Raphael.prototype = {
translate: function(point) {
return [
(point[0] - this.graph.layoutMinX) * this.factorX + this.radius,
(point[1] - this.graph.layoutMinY) * this.factorY + this.radius
];
},
rotate: function(point, length, angle) {
var dx = length * Math.cos(angle);
var dy = length * Math.sin(angle);
return [point[0]+dx, point[1]+dy];
},
draw: function() {
this.factorX = (this.width - 2 * this.radius) / (this.graph.layoutMaxX - this.graph.layoutMinX);
this.factorY = (this.height - 2 * this.radius) / (this.graph.layoutMaxY - this.graph.layoutMinY);
for (i in this.graph.nodes) {
this.drawNode(this.graph.nodes[i]);
}
for (var i = 0; i < this.graph.edges.length; i++) {
this.drawEdge(this.graph.edges[i]);
}
},
drawNode: function(node) {
var point = this.translate([node.layoutPosX, node.layoutPosY]);
node.point = point;
/* if node has already been drawn, move the nodes */
if(node.shape) {
var oBBox = node.shape.getBBox();
var opoint = { x: oBBox.x + oBBox.width / 2, y: oBBox.y + oBBox.height / 2};
node.shape.translate(Math.round(point[0] - opoint.x), Math.round(point[1] - opoint.y));
this.r.safari();
return node;
}/* else, draw new nodes */
var shape;
/* if a node renderer function is provided by the user, then use it
or the default render function instead */
if(!node.render) {
node.render = function(r, node) {
/* the default node drawing */
var color = Raphael.getColor();
var ellipse = r.ellipse(0, 0, 30, 20).attr({fill: color, stroke: color, "stroke-width": 2});
/* set DOM node ID */
ellipse.node.id = node.label || node.id;
shape = r.set().
push(ellipse).
push(r.text(0, 30, node.label || node.id));
return shape;
}
}
/* or check for an ajax representation of the nodes */
if(node.shapes) {
// TODO ajax representation evaluation
}
shape = node.render(this.r, node).hide();
shape.attr({"fill-opacity": .6});
/* re-reference to the node an element belongs to, needed for dragging all elements of a node */
shape.items.forEach(function(item){ item.set = shape; item.node.style.cursor = "move"; });
shape.mousedown(this.dragger);
var box = shape.getBBox();
shape.translate(Math.round(point[0]-(box.x+box.width/2)),Math.round(point[1]-(box.y+box.height/2)))
//console.log(box,point);
node.hidden || shape.show();
node.shape = shape;
},
drawEdge: function(edge) {
/* if this edge already exists the other way around and is undirected */
if(edge.backedge)
return;
if(edge.source.hidden || edge.target.hidden) {
edge.connection && edge.connection.fg.hide() | edge.connection.bg && edge.connection.bg.hide();
return;
}
/* if edge already has been drawn, only refresh the edge */
if(!edge.connection) {
edge.style && edge.style.callback && edge.style.callback(edge); // TODO move this somewhere else
edge.connection = this.r.connection(edge.source.shape, edge.target.shape, edge.style);
return;
}
//FIXME showing doesn't work well
edge.connection.fg.show();
edge.connection.bg && edge.connection.bg.show();
edge.connection.draw();
}
};
Graph.Layout = {};
Graph.Layout.Spring = function(graph) {
this.graph = graph;
this.iterations = 500;
this.maxRepulsiveForceDistance = 6;
this.k = 2;
this.c = 0.01;
this.maxVertexMovement = 0.5;
this.layout();
};
Graph.Layout.Spring.prototype = {
layout: function() {
this.layoutPrepare();
for (var i = 0; i < this.iterations; i++) {
this.layoutIteration();
}
this.layoutCalcBounds();
},
layoutPrepare: function() {
for (i in this.graph.nodes) {
var node = this.graph.nodes[i];
node.layoutPosX = 0;
node.layoutPosY = 0;
node.layoutForceX = 0;
node.layoutForceY = 0;
}
},
layoutCalcBounds: function() {
var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
for (i in this.graph.nodes) {
var x = this.graph.nodes[i].layoutPosX;
var y = this.graph.nodes[i].layoutPosY;
if(x > maxx) maxx = x;
if(x < minx) minx = x;
if(y > maxy) maxy = y;
if(y < miny) miny = y;
}
this.graph.layoutMinX = minx;
this.graph.layoutMaxX = maxx;
this.graph.layoutMinY = miny;
this.graph.layoutMaxY = maxy;
},
layoutIteration: function() {
// Forces on nodes due to node-node repulsions
var prev = new Array();
for(var c in this.graph.nodes) {
var node1 = this.graph.nodes[c];
for (var d in prev) {
var node2 = this.graph.nodes[prev[d]];
this.layoutRepulsive(node1, node2);
}
prev.push(c);
}
// Forces on nodes due to edge attractions
for (var i = 0; i < this.graph.edges.length; i++) {
var edge = this.graph.edges[i];
this.layoutAttractive(edge);
}
// Move by the given force
for (i in this.graph.nodes) {
var node = this.graph.nodes[i];
var xmove = this.c * node.layoutForceX;
var ymove = this.c * node.layoutForceY;
var max = this.maxVertexMovement;
if(xmove > max) xmove = max;
if(xmove < -max) xmove = -max;
if(ymove > max) ymove = max;
if(ymove < -max) ymove = -max;
node.layoutPosX += xmove;
node.layoutPosY += ymove;
node.layoutForceX = 0;
node.layoutForceY = 0;
}
},
layoutRepulsive: function(node1, node2) {
var dx = node2.layoutPosX - node1.layoutPosX;
var dy = node2.layoutPosY - node1.layoutPosY;
var d2 = dx * dx + dy * dy;
if(d2 < 0.01) {
dx = 0.1 * Math.random() + 0.1;
dy = 0.1 * Math.random() + 0.1;
var d2 = dx * dx + dy * dy;
}
var d = Math.sqrt(d2);
if(d < this.maxRepulsiveForceDistance) {
var repulsiveForce = this.k * this.k / d;
node2.layoutForceX += repulsiveForce * dx / d;
node2.layoutForceY += repulsiveForce * dy / d;
node1.layoutForceX -= repulsiveForce * dx / d;
node1.layoutForceY -= repulsiveForce * dy / d;
}
},
layoutAttractive: function(edge) {
var node1 = edge.source;
var node2 = edge.target;
var dx = node2.layoutPosX - node1.layoutPosX;
var dy = node2.layoutPosY - node1.layoutPosY;
var d2 = dx * dx + dy * dy;
if(d2 < 0.01) {
dx = 0.1 * Math.random() + 0.1;
dy = 0.1 * Math.random() + 0.1;
var d2 = dx * dx + dy * dy;
}
var d = Math.sqrt(d2);
if(d > this.maxRepulsiveForceDistance) {
d = this.maxRepulsiveForceDistance;
d2 = d * d;
}
var attractiveForce = (d2 - this.k * this.k) / this.k;
if(edge.attraction == undefined) edge.attraction = 1;
attractiveForce *= Math.log(edge.attraction) * 0.5 + 1;
node2.layoutForceX -= attractiveForce * dx / d;
node2.layoutForceY -= attractiveForce * dy / d;
node1.layoutForceX += attractiveForce * dx / d;
node1.layoutForceY += attractiveForce * dy / d;
}
};
Graph.Layout.Ordered = function(graph, order) {
this.graph = graph;
this.order = order;
this.layout();
};
Graph.Layout.Ordered.prototype = {
layout: function() {
this.layoutPrepare();
this.layoutCalcBounds();
},
layoutPrepare: function(order) {
for (i in this.graph.nodes) {
var node = this.graph.nodes[i];
node.layoutPosX = 0;
node.layoutPosY = 0;
}
var counter = 0;
for (i in this.order) {
var node = this.order[i];
node.layoutPosX = counter;
node.layoutPosY = Math.random();
counter++;
}
},
layoutCalcBounds: function() {
var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
for (i in this.graph.nodes) {
var x = this.graph.nodes[i].layoutPosX;
var y = this.graph.nodes[i].layoutPosY;
if(x > maxx) maxx = x;
if(x < minx) minx = x;
if(y > maxy) maxy = y;
if(y < miny) miny = y;
}
this.graph.layoutMinX = minx;
this.graph.layoutMaxX = maxx;
this.graph.layoutMinY = miny;
this.graph.layoutMaxY = maxy;
}
};
/*
* usefull JavaScript extensions,
*/
function log(a) {console.log&&console.log(a);}
/*
* Raphael Tooltip Plugin
* - attaches an element as a tooltip to another element
*
* Usage example, adding a rectangle as a tooltip to a circle:
*
* paper.circle(100,100,10).tooltip(paper.rect(0,0,20,30));
*
* If you want to use more shapes, you'll have to put them into a set.
*
*/
Raphael.el.tooltip = function (tp) {
this.tp = tp;
this.tp.o = {x: 0, y: 0};
this.tp.hide();
this.hover(
function(event){
this.mousemove(function(event){
this.tp.translate(event.clientX -
this.tp.o.x,event.clientY - this.tp.o.y);
this.tp.o = {x: event.clientX, y: event.clientY};
});
this.tp.show().toFront();
},
function(event){
this.tp.hide();
this.unmousemove();
});
return this;
};
/* For IE */
if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
fun.call(thisp, this[i], i, this);
}
};
}

7
addons/base_diagram/static/lib/js/raphael-min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

266
addons/base_diagram/static/lib/js/seedrandom.js Normal file
View File

@ -0,0 +1,266 @@
// seedrandom.js
// Author: David Bau 3/11/2010
//
// Defines a method Math.seedrandom() that, when called, substitutes
// an explicitly seeded RC4-based algorithm for Math.random(). Also
// supports automatic seeding from local or network sources of entropy.
//
// Usage:
//
// <script src=http://davidbau.com/encode/seedrandom-min.js></script>
//
// Math.seedrandom('yipee'); Sets Math.random to a function that is
// initialized using the given explicit seed.
//
// Math.seedrandom(); Sets Math.random to a function that is
// seeded using the current time, dom state,
// and other accumulated local entropy.
// The generated seed string is returned.
//
// Math.seedrandom('yowza', true);
// Seeds using the given explicit seed mixed
// together with accumulated entropy.
//
// <script src="http://bit.ly/srandom-512"></script>
// Seeds using physical random bits downloaded
// from random.org.
//
// Examples:
//
// Math.seedrandom("hello"); // Use "hello" as the seed.
// document.write(Math.random()); // Always 0.5463663768140734
// document.write(Math.random()); // Always 0.43973793770592234
// var rng1 = Math.random; // Remember the current prng.
//
// var autoseed = Math.seedrandom(); // New prng with an automatic seed.
// document.write(Math.random()); // Pretty much unpredictable.
//
// Math.random = rng1; // Continue "hello" prng sequence.
// document.write(Math.random()); // Always 0.554769432473455
//
// Math.seedrandom(autoseed); // Restart at the previous seed.
// document.write(Math.random()); // Repeat the 'unpredictable' value.
//
// Notes:
//
// Each time seedrandom('arg') is called, entropy from the passed seed
// is accumulated in a pool to help generate future seeds for the
// zero-argument form of Math.seedrandom, so entropy can be injected over
// time by calling seedrandom with explicit data repeatedly.
//
// On speed - This javascript implementation of Math.random() is about
// 3-10x slower than the built-in Math.random() because it is not native
// code, but this is typically fast enough anyway. Seeding is more expensive,
// especially if you use auto-seeding. Some details (timings on Chrome 4):
//
// Our Math.random() - avg less than 0.002 milliseconds per call
// seedrandom('explicit') - avg less than 0.5 milliseconds per call
// seedrandom('explicit', true) - avg less than 2 milliseconds per call
// seedrandom() - avg about 38 milliseconds per call
//
// LICENSE (BSD):
//
// Copyright 2010 David Bau, all rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// 1. Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//
// 2. Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// 3. Neither the name of this module nor the names of its contributors may
// be used to endorse or promote products derived from this software
// without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
/**
* All code is in an anonymous closure to keep the global namespace clean.
*
* @param {number=} overflow
* @param {number=} startdenom
*/
(function (pool, math, width, chunks, significance, overflow, startdenom) {
//
// seedrandom()
// This is the seedrandom function described above.
//
math['seedrandom'] = function seedrandom(seed, use_entropy) {
var key = [];
var arc4;
// Flatten the seed string or build one from local entropy if needed.
seed = mixkey(flatten(
use_entropy ? [seed, pool] :
arguments.length ? seed :
[new Date().getTime(), pool, window], 3), key);
// Use the seed to initialize an ARC4 generator.
arc4 = new ARC4(key);
// Mix the randomness into accumulated entropy.
mixkey(arc4.S, pool);
// Override Math.random
// This function returns a random double in [0, 1) that contains
// randomness in every bit of the mantissa of the IEEE 754 value.
math['random'] = function random() { // Closure to return a random double:
var n = arc4.g(chunks); // Start with a numerator n < 2 ^ 48
var d = startdenom; // and denominator d = 2 ^ 48.
var x = 0; // and no 'extra last byte'.
while (n < significance) { // Fill up all significant digits by
n = (n + x) * width; // shifting numerator and
d *= width; // denominator and generating a
x = arc4.g(1); // new least-significant-byte.
}
while (n >= overflow) { // To avoid rounding up, before adding
n /= 2; // last byte, shift everything
d /= 2; // right using integer math until
x >>>= 1; // we have exactly the desired bits.
}
return (n + x) / d; // Form the number within [0, 1).
};
// Return the seed that was used
return seed;
};
//
// ARC4
//
// An ARC4 implementation. The constructor takes a key in the form of
// an array of at most (width) integers that should be 0 <= x < (width).
//
// The g(count) method returns a pseudorandom integer that concatenates
// the next (count) outputs from ARC4. Its return value is a number x
// that is in the range 0 <= x < (width ^ count).
//
/** @constructor */
function ARC4(key) {
var t, u, me = this, keylen = key.length;
var i = 0, j = me.i = me.j = me.m = 0;
me.S = [];
me.c = [];
// The empty key [] is treated as [0].
if (!keylen) { key = [keylen++]; }
// Set up S using the standard key scheduling algorithm.
while (i < width) { me.S[i] = i++; }
for (i = 0; i < width; i++) {
t = me.S[i];
j = lowbits(j + t + key[i % keylen]);
u = me.S[j];
me.S[i] = u;
me.S[j] = t;
}
// The "g" method returns the next (count) outputs as one number.
me.g = function getnext(count) {
var s = me.S;
var i = lowbits(me.i + 1); var t = s[i];
var j = lowbits(me.j + t); var u = s[j];
s[i] = u;
s[j] = t;
var r = s[lowbits(t + u)];
while (--count) {
i = lowbits(i + 1); t = s[i];
j = lowbits(j + t); u = s[j];
s[i] = u;
s[j] = t;
r = r * width + s[lowbits(t + u)];
}
me.i = i;
me.j = j;
return r;
};
// For robust unpredictability discard an initial batch of values.
// See http://www.rsa.com/rsalabs/node.asp?id=2009
me.g(width);
}
//
// flatten()
// Converts an object tree to nested arrays of strings.
//
/** @param {Object=} result
* @param {string=} prop */
function flatten(obj, depth, result, prop) {
result = [];
if (depth && typeof(obj) == 'object') {
for (prop in obj) {
if (prop.indexOf('S') < 5) { // Avoid FF3 bug (local/sessionStorage)
try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
}
}
}
return result.length ? result : '' + obj;
}
//
// mixkey()
// Mixes a string seed into a key that is an array of integers, and
// returns a shortened string seed that is equivalent to the result key.
//
/** @param {number=} smear
* @param {number=} j */
function mixkey(seed, key, smear, j) {
seed += ''; // Ensure the seed is a string
smear = 0;
for (j = 0; j < seed.length; j++) {
key[lowbits(j)] =
lowbits((smear ^= key[lowbits(j)] * 19) + seed.charCodeAt(j));
}
seed = '';
for (j in key) { seed += String.fromCharCode(key[j]); }
return seed;
}
//
// lowbits()
// A quick "n mod width" for width a power of 2.
//
function lowbits(n) { return n & (width - 1); }
//
// The following constants are related to IEEE 754 limits.
//
startdenom = math.pow(width, chunks);
significance = math.pow(2, significance);
overflow = significance * 2;
//
// When seedrandom.js is loaded, we immediately mix a few bits
// from the built-in RNG into the entropy pool. Because we do
// not want to intefere with determinstic PRNG state later,
// seedrandom will not call math.random on its own again after
// initialization.
//
mixkey(math.random(), pool);
// End anonymous scope, and pass initial values.
})(
[], // pool: entropy pool starts empty
Math, // math: package containing random, pow, and seedrandom
256, // width: each RC4 output is 0 <= x < 256
6, // chunks: at least six RC4 outputs for each double
52 // significance: there are 52 significant digits in a double
);

175
addons/base_diagram/static/src/js/diagram.js Normal file
View File

@ -0,0 +1,175 @@
/*---------------------------------------------------------
* OpenERP base library
*---------------------------------------------------------*/
openerp.base.diagram = function (openerp) {
openerp.base.views.add('diagram', 'openerp.base.DiagramView');
openerp.base.DiagramView = openerp.base.Controller.extend({
init: function(view_manager, session, element_id, dataset, view_id){
this._super(session, element_id);
this.view_manager = view_manager;
this.dataset = dataset;
this.model = dataset.model;
this.view_id = view_id;
this.name = "";
this.domain = this.dataset._domain ? this.dataset._domain: [];
this.context = {};
this.ids = this.dataset.ids;
console.log('data set>>',this.dataset)
},
start: function() {
this.rpc("/base_diagram/diagram/load", {"model": this.model, "view_id": this.view_id}, this.on_loaded);
},
toTitleCase: function(str) {
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
},
on_loaded: function(result) {
var self = this;
if(this.ids && this.ids.length) {
this.id = this.ids[0];
}
this.fields_view = result.fields_view;
this.view_id = this.fields_view.view_id;
this.name = this.fields_view.name;
this.fields = this.fields_view.fields;
var children = this.fields_view.arch.children;
/*
* For Nodes (Fields)
*/
this.node = '';
this.bgcolor = '';
this.shape = '';
this.visible_fields_nodes = [];
this.invisible_fields_nodes = [];
this.fields_nodes_string = [];
/*
* For Arraows(Connector)
*/
this.connector = '';
this.src_node = '';
this.des_node = '';
this.connector_fields = [];
this.fields_connector_string = [];
for(ch in children) {
if(children[ch]['tag'] == 'node') {
this.node = children[ch]['attrs']['object'];
this.bgcolor = children[ch]['attrs']['bgcolor'] || '';
this.shape = children[ch]['attrs']['shape'] || '';
for(node_chld in children[ch]['children']) {
if (children[ch]['children'][node_chld]['tag'] = 'field') {
var ch_name = children[ch]['children'][node_chld]['attrs']['name'];
if (children[ch]['children'][node_chld]['attrs']['invisible']) {
if (children[ch]['children'][node_chld]['attrs']['invisible'] == 1 && children[ch]['children'][node_chld]['attrs']['invisible'] == '1') {
this.invisible_fields_nodes.push(ch_name)
}
}
else {
this.visible_fields_nodes.push(ch_name);
var ch_node_string = this.fields[ch_name]['string'] || this.toTitleCase(ch_name);
this.fields_nodes_string.push(ch_node_string)
}
}
}
} else if(children[ch]['tag'] == 'arrow') {
this.connector = children[ch]['attrs']['object'];
this.src_node = children[ch]['attrs']['source'];
this.des_node = children[ch]['attrs']['destination'];
for (arrow_chld in children[ch]['children']) {
if (children[ch]['children'][arrow_chld]['tag'] = 'field') {
var arr_ch_name = children[ch]['children'][arrow_chld]['attrs']['name'];
var ch_node_string = this.fields[arr_ch_name]['string'] || this.toTitleCase(arr_ch_name);
this.fields_connector_string.push(ch_node_string);
this.connector_fields.push(arr_ch_name);
}
}
}
}
this.$element.html(QWeb.render("DiagramView", {"fields_view": this.fields_view}));
// g.addEdge("strawberry", "cherry");
// g.addEdge("strawberry", "apple");
// g.addEdge("strawberry", "tomato");
//
// g.addEdge("tomato", "apple");
// g.addEdge("tomato", "kiwi");
//
// g.addEdge("cherry", "apple");
// g.addEdge("cherry", "kiwi");
if(this.id) {
this.rpc(
'/base_diagram/diagram/get_diagram_info',
{
'id': this.id,
'model': this.model,
'bgcolor': this.bgcolor,
'shape': this.shape,
'node': this.node,
'connector': this.connector,
'src_node': this.src_node,
'des_node': this.des_node,
'visible_node_fields': this.visible_fields_nodes,
'invisible_node_fields': this.invisible_fields_nodes,
'node_fields_string': this.fields_nodes_string,
'connector_fields': this.connector_fields,
'connector_fields_string': this.fields_connector_string
},
function(result) {
self.draw_diagram(result);
}
)
}
},
draw_diagram: function(result) {
console.log('this>>>',this)
var g = new Graph();
this.in_transition_field = result['in_transition_field'];
this.out_transition_field = result['out_transition_field'];
var res_nodes = result['nodes'];
var res_connectors = result['conn'];
// for(nd in res_nodes) {
// var res_node = res_nodes[nd];
// console.log('nodes',res_node, res_node['shape'])
// var state;
// }
for(cr in res_connectors) {
var res_connector = res_connectors[cr];
g.addEdge(res_connector['source'], res_connector['destination']);
}
var layouter = new Graph.Layout.Spring(g);
layouter.layout();
var renderer = new Graph.Renderer.Raphael('dia-canvas', g, 800, 500);
renderer.draw();
},
do_show: function () {
this.$element.show();
},
do_hide: function () {
this.$element.hide();
}
});
};
// vim:et fdc=0 fdl=0 foldnestmax=3 fdm=syntax:

12
addons/base_diagram/static/src/js/views.js
View File

@ -1,12 +0,0 @@
/*---------------------------------------------------------
* OpenERP base library
*---------------------------------------------------------*/
openerp.base_diagram = function(openerp) {
openerp.base_diagram.DiagramView = openerp.base.Controller.extend({
});
};
// vim:et fdc=0 fdl=0 foldnestmax=3 fdm=syntax: