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

[MERGE] new, shinier and better-working diagram view 

bzr revid: xmo@openerp.com-20120305103353-w8r6fk9cv8wjklts
This commit is contained in:
Xavier Morel 2012-03-05 11:33:53 +01:00
parent 6468fc876a df25517f09
commit fc887bfb2f
17 changed files with 7217 additions and 1967 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
.bzrignore
View File

@ -1,23 +1,12 @@
*.pyc
.*.swp
.bzrignore
openerp/addons/*
openerp/filestore*
.Python
include
lib
bin/activate
bin/activate_this.py
bin/easy_install
bin/easy_install-2.6
bin/pip
bin/python
bin/python2.6
*.pyc
*.pyo
.*
*.egg-info
*.orig
*.vim
build/
bin/yolk
bin/pil*.py
.project
.pydevproject
.settings
RE:^bin/
RE:^dist/
RE:^include/
RE:^share/
RE:^man/
RE:^lib/

4
addons/web/static/src/js/view_form.js
View File

@ -2839,6 +2839,10 @@ openerp.web.form.SelectCreatePopup = openerp.web.OldWidget.extend(/** @lends ope
this.new_object();
}
},
stop: function () {
this.$element.dialog('close');
this._super();
},
setup_search_view: function(search_defaults) {
var self = this;
if (this.searchview) {

10
addons/web_diagram/__openerp__.py
View File

@ -5,11 +5,11 @@
"version" : "2.0",
"depends" : ["web"],
"js": [
'static/lib/js/raphael-min.js',
'static/lib/js/dracula_graffle.js',
'static/lib/js/dracula_graph.js',
'static/lib/js/dracula_algorithms.js',
'static/src/js/diagram.js'
'static/lib/js/raphael.js',
'static/lib/js/jquery.mousewheel.js',
'static/src/js/vec2.js',
'static/src/js/graph.js',
'static/src/js/diagram.js',
],
'css' : [
"static/src/css/base_diagram.css",

4
addons/web_diagram/controllers/main.py
View File

@ -115,8 +115,8 @@ class DiagramView(View):
for i, fld in enumerate(visible_node_fields):
n['options'][node_fields_string[i]] = act[fld]
id_model = req.session.model(model).read([id],['name'], req.session.context)[0]['name']
_id, name = req.session.model(model).name_get([id], req.session.context)[0]
return dict(nodes=nodes,
conn=connectors,
id_model=id_model,
name=name,
parent_field=graphs['node_parent_field'])

599
addons/web_diagram/static/lib/js/dracula_algorithms.js
View File

@ -1,599 +0,0 @@
/*
* 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;
}

107
addons/web_diagram/static/lib/js/dracula_graffle.js
View File

@ -1,107 +0,0 @@
/**
* 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)];
/* 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.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: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})
|| (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/web_diagram/static/lib/js/dracula_graph.coffee
View File

@ -1,524 +0,0 @@
###
* 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)
}
}
}

527
addons/web_diagram/static/lib/js/dracula_graph.js
View File

@ -1,527 +0,0 @@
/*
* 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);
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) {
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;
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);
}
};
}

84
addons/web_diagram/static/lib/js/jquery.mousewheel.js Normal file
View File

@ -0,0 +1,84 @@
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);

8
addons/web_diagram/static/lib/js/raphael-min.js vendored
View File

File diff suppressed because one or more lines are too long

5501
addons/web_diagram/static/lib/js/raphael.js Normal file
View File

File diff suppressed because it is too large Load Diff

68
addons/web_diagram/static/src/css/base_diagram.css
View File

@ -1,35 +1,53 @@
.openerp .oe_diagram_header h3.oe_diagram_title {
font-weight: normal;
color: #252424;
margin: 0 0 0 2px;
}
.openerp .oe_diagram_pager {
text-align: right;
float:right;
/*text-align: right;*/
white-space: nowrap;
}
.openerp .oe_diagram_buttons {
float: left;
}
/*.openerp .dhx_canvas_text {
padding:30px 0 0 10px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
.openerp .clear{
clear:both;
}
/* We use a resizable diagram-container. The problem with a
* resizable diagram is that the diagram catches the mouse events
* and the diagram is then impossible to resize. That's why the
* diagram has a height of 98.5%, so that the bottom part of the
* diagram can be used for resize
*/
.openerp .diagram-container{
margin:0;
padding:0;
width:100%;
height:500px;
resize:vertical;
background-color:#FFF;
border:1px solid #DCDCDC;
overflow:hidden;
}
.openerp .oe_diagram_diagram{
margin:0;
padding:0;
background-color:#FFF;
width:100%;
height:98.5%;
}
.openerp .dhx_canvas_text.dhx_axis_item_y, .openerp .dhx_canvas_text.dhx_axis_title_x {
padding: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
/* prevent accidental selection of the text in the svg nodes */
.openerp .oe_diagram_diagram *{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
};
.openerp .dhx_canvas_text.dhx_axis_title_y {
padding: 0;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
} */

BIN
addons/web_diagram/static/src/img/grid.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

354
addons/web_diagram/static/src/js/diagram.js
View File

@ -55,7 +55,7 @@ openerp.web.DiagramView = openerp.web.View.extend({
this.do_update_pager();
// 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_node.oe_diagram_button_new').click(function(){self.add_node();});
if(this.id) {
self.get_diagram_info();
@ -111,175 +111,233 @@ 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
});
},
// Set-up the drawing elements of the diagram
draw_diagram: function(result) {
this.selected_node = null;
var diagram = new Graph();
this.active_model = result['id_model'];
var res_nodes = result['nodes'];
var res_connectors = result['conn'];
this.parent_field = result.parent_field;
//Custom logic
var self = this;
var renderer = function(r, n) {
var shape = (n.node.shape === 'rectangle') ? 'rect' : 'ellipse';
var res_nodes = result['nodes'];
var res_edges = result['conn'];
this.parent_field = result.parent_field;
this.$element.find('h3.oe_diagram_title').text(result.name);
var node = r[shape](n.node.x, n.node.y).attr({
"fill": n.node.color
});
var id_to_node = {};
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"});
}
var style = {
edge_color: "#A0A0A0",
edge_label_color: "#555",
edge_label_font_size: 10,
edge_width: 2,
edge_spacing: 100,
edge_loop_radius: 100,
return nodes;
node_label_color: "#333",
node_label_font_size: 12,
node_outline_color: "#333",
node_outline_width: 1,
node_selected_color: "#0097BE",
node_selected_width: 2,
node_size_x: 110,
node_size_y: 80,
connector_active_color: "#FFF",
connector_radius: 4,
close_button_radius: 8,
close_button_color: "#333",
close_button_x_color: "#FFF",
gray: "#DCDCDC",
white: "#FFF",
viewport_margin: 50
};
_.each(res_nodes, function(res_node) {
diagram.addNode(res_node['name'],{node: res_node,render: renderer});
// remove previous diagram
var canvas = self.$element.find('div.oe_diagram_diagram')
.empty().get(0);
var r = new Raphael(canvas, '100%','100%');
var graph = new CuteGraph(r,style,canvas.parentNode);
var confirm_dialog = $('#dialog').dialog({
autoOpen: false,
title: _t("Are you sure?") });
_.each(res_nodes, function(node) {
var n = new CuteNode(
graph,
node.x + 50, //FIXME the +50 should be in the layout algorithm
node.y + 50,
CuteGraph.wordwrap(node.name, 14),
node.shape === 'rectangle' ? 'rect' : 'circle',
node.color === 'white' ? style.white : style.gray);
n.id = node.id;
id_to_node[node.id] = n;
});
// Id for Path(Edges)
var edge_ids = [];
_.each(res_connectors, function(connector, index) {
edge_ids.push(index);
diagram.addEdge(connector['source'], connector['destination'], {directed : true, label: connector['signal']});
_.each(res_edges, function(edge) {
var e = new CuteEdge(
graph,
CuteGraph.wordwrap(edge.signal, 32),
id_to_node[edge.s_id],
id_to_node[edge.d_id] || id_to_node[edge.s_id] ); //WORKAROUND
e.id = edge.id;
});
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());
_.each(diagram.edges, function(edge, index) {
if(edge.connection) {
edge.connection.fg.attr({cursor: "pointer"}).dblclick(function() {
self.add_edit_node(edge_ids[index], self.connector);
});
CuteNode.double_click_callback = function(cutenode){
self.edit_node(cutenode.id);
};
var i = 0;
CuteNode.destruction_callback = function(cutenode){
if(!confirm(_t("Deleting this node cannot be undone.\nIt will also delete all connected transitions.\n\nAre you sure ?"))){
return $.Deferred().reject().promise();
}
});
return new openerp.web.DataSet(self,self.node).unlink([cutenode.id]);
};
CuteEdge.double_click_callback = function(cuteedge){
self.edit_connector(cuteedge.id);
};
CuteEdge.creation_callback = function(node_start, node_end){
return {label:_t("")};
};
CuteEdge.new_edge_callback = function(cuteedge){
self.add_connector(cuteedge.get_start().id,
cuteedge.get_end().id,
cuteedge);
};
CuteEdge.destruction_callback = function(cuteedge){
if(!confirm(_t("Deleting this transition cannot be undone.\n\nAre you sure ?"))){
return $.Deferred().reject().promise();
}
return new openerp.web.DataSet(self,self.connector).unlink([cuteedge.id]);
};
},
add_edit_node: function(id, model, defaults) {
defaults = defaults || {};
// Creates a popup to edit the content of the node with id node_id
edit_node: function(node_id){
var self = this;
var title = _t('Activity');
var pop = new openerp.web.form.FormOpenPopup(self);
if(!model)
model = self.node;
if(id)
id = parseInt(id, 10);
var pop,
title = model == self.node ? _t('Activity') : _t('Transition');
if(!id) {
pop = new openerp.web.form.SelectCreatePopup(this);
pop.select_element(
model,
{
title: _t("Create:") + title,
initial_view: 'form',
disable_multiple_selection: true
},
this.dataset.domain,
this.context || this.dataset.context
);
pop.on_select_elements.add_last(function(element_ids) {
self.dataset.read_index(_.keys(self.fields_view.fields)).pipe(self.on_diagram_loaded);
});
} else {
pop = new openerp.web.form.FormOpenPopup(this);
pop.show_element(
model,
id,
this.context || this.dataset.context,
pop.show_element(
self.node,
node_id,
self.context || self.dataset.context,
{
title: _t("Open: ") + title
}
);
pop.on_write.add(function() {
self.dataset.read_index(_.keys(self.fields_view.fields)).pipe(self.on_diagram_loaded);
pop.on_write.add(function() {
self.dataset.read_index(_.keys(self.fields_view.fields)).pipe(self.on_diagram_loaded);
});
}
var form_fields = [self.parent_field];
var form_controller = pop.view_form;
form_controller.on_record_loaded.add_first(function() {
_.each(form_fields, function(fld) {
if (!(fld in form_controller.fields)) { return; }
var field = form_controller.fields[fld];
field.$input.prop('disabled', true);
field.$drop_down.unbind();
field.$menu_btn.unbind();
});
});
},
// Creates a popup to add a node to the diagram
add_node: function(){
var self = this;
var title = _t('Activity');
var pop = new openerp.web.form.SelectCreatePopup(self);
pop.select_element(
self.node,
{
title: _t("Create:") + title,
initial_view: 'form',
disable_multiple_selection: true
},
self.dataset.domain,
self.context || self.dataset.context
);
pop.on_select_elements.add_last(function(element_ids) {
self.dataset.read_index(_.keys(self.fields_view.fields)).pipe(self.on_diagram_loaded);
});
var form_controller = pop.view_form;
var form_fields = [this.parent_field];
form_controller.on_record_loaded.add_last(function() {
_.each(form_fields, function(fld) {
if (!(fld in form_controller.fields)) { return; }
var field = form_controller.fields[fld];
field.set_value(self.id);
field.dirty = true;
});
});
},
// Creates a popup to edit the connector of id connector_id
edit_connector: function(connector_id){
var self = this;
var title = _t('Transition');
var pop = new openerp.web.form.FormOpenPopup(self);
pop.show_element(
self.connector,
parseInt(connector_id,10), //FIXME Isn't connector_id supposed to be an int ?
self.context || self.dataset.context,
{
title: _t("Open: ") + title
}
);
pop.on_write.add(function() {
self.dataset.read_index(_.keys(self.fields_view.fields)).pipe(self.on_diagram_loaded);
});
},
// Creates a popup to add a connector from node_source_id to node_dest_id.
// dummy_cuteedge if not null, will be removed form the graph after the popup is closed.
add_connector: function(node_source_id, node_dest_id, dummy_cuteedge){
var self = this;
var title = _t('Transition');
var pop = new openerp.web.form.SelectCreatePopup(self);
pop.select_element(
self.connector,
{
title: _t("Create:") + title,
initial_view: 'form',
disable_multiple_selection: true
},
this.dataset.domain,
this.context || this.dataset.context
);
pop.on_select_elements.add_last(function(element_ids) {
self.dataset.read_index(_.keys(self.fields_view.fields)).pipe(self.on_diagram_loaded);
});
// We want to destroy the dummy edge after a creation cancel. This destroys it even if we save the changes.
// This is not a problem since the diagram is completely redrawn on saved changes.
pop.$element.bind("dialogbeforeclose",function(){
if(dummy_cuteedge){
dummy_cuteedge.remove();
}
});
var form_controller = pop.view_form;
var form_fields;
if (model === self.node) {
form_fields = [this.parent_field];
if (!id) {
form_controller.on_record_loaded.add_last(function() {
_.each(form_fields, function(fld) {
if (!(fld in form_controller.fields)) { return; }
var field = form_controller.fields[fld];
field.set_value([self.id,self.active_model]);
field.dirty = true;
});
});
} else {
form_controller.on_record_loaded.add_first(function() {
_.each(form_fields, function(fld) {
if (!(fld in form_controller.fields)) { return; }
var field = form_controller.fields[fld];
field.$input.prop('disabled', true);
field.$drop_down.unbind();
field.$menu_btn.unbind();
});
});
}
} else {
form_fields = [
this.connectors.attrs.source,
this.connectors.attrs.destination];
}
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;
});
});
}
form_controller.on_record_loaded.add_last(function () {
form_controller.fields[self.connectors.attrs.source].set_value(node_source_id);
form_controller.fields[self.connectors.attrs.source].dirty = true;
form_controller.fields[self.connectors.attrs.destination].set_value(node_dest_id);
form_controller.fields[self.connectors.attrs.destination].dirty = true;
});
},
on_pager_action: function(action) {
@ -297,8 +355,10 @@ openerp.web.DiagramView = openerp.web.View.extend({
this.dataset.index = this.dataset.ids.length - 1;
break;
}
this.dataset.read_index(_.keys(this.fields_view.fields)).pipe(this.on_diagram_loaded);
var loaded = this.dataset.read_index(_.keys(this.fields_view.fields))
.pipe(this.on_diagram_loaded);
this.do_update_pager();
return loaded;
},
do_update_pager: function(hide_index) {
@ -313,7 +373,7 @@ openerp.web.DiagramView = openerp.web.View.extend({
do_show: function() {
this.do_push_state({});
return this._super();
return $.when(this._super(), this.on_pager_action('reload'));
}
});
};

996
addons/web_diagram/static/src/js/graph.js Normal file
View File

@ -0,0 +1,996 @@
(function(window){
// this serves as the end of an edge when creating a link
function EdgeEnd(pos_x,pos_y){
this.x = pos_x;
this.y = pos_y;
this.get_pos = function(){
return new Vec2(this.x,this.y);
}
}
// A close button,
// if entity_type == "node":
// GraphNode.destruction_callback(entity) is called where entity is a node.
// If it returns true the node and all connected edges are destroyed.
// if entity_type == "edge":
// GraphEdge.destruction_callback(entity) is called where entity is an edge
// If it returns true the edge is destroyed
// pos_x,pos_y is the relative position of the close button to the entity position (entity.get_pos())
function CloseButton(graph, entity, entity_type, pos_x,pos_y){
var self = this;
var visible = false;
var close_button_radius = graph.style.close_button_radius || 8;
var close_circle = graph.r.circle( entity.get_pos().x + pos_x,
entity.get_pos().y + pos_y,
close_button_radius );
//the outer gray circle
close_circle.attr({ 'opacity': 0,
'fill': graph.style.close_button_color || "black",
'cursor': 'pointer',
'stroke': 'none' });
close_circle.transform(graph.get_transform());
graph.set_scrolling(close_circle);
//the 'x' inside the circle
var close_label = graph.r.text( entity.get_pos().x + pos_x, entity.get_pos().y + pos_y,"x");
close_label.attr({ 'fill': graph.style.close_button_x_color || "white",
'font-size': close_button_radius,
'cursor': 'pointer' });
close_label.transform(graph.get_transform());
graph.set_scrolling(close_label);
// the dummy_circle is used to catch events, and avoid hover in/out madness
// between the 'x' and the button
var dummy_circle = graph.r.circle( entity.get_pos().x + pos_x,
entity.get_pos().y + pos_y,
close_button_radius );
dummy_circle.attr({'opacity':1, 'fill': 'transparent', 'stroke':'none', 'cursor':'pointer'});
dummy_circle.transform(graph.get_transform());
graph.set_scrolling(dummy_circle);
this.get_pos = function(){
return entity.get_pos().add_xy(pos_x,pos_y);
};
this.update_pos = function(){
var pos = self.get_pos();
close_circle.attr({'cx':pos.x, 'cy':pos.y});
dummy_circle.attr({'cx':pos.x, 'cy':pos.y});
close_label.attr({'x':pos.x, 'y':pos.y});
};
function hover_in(){
if(!visible){ return; }
close_circle.animate({'r': close_button_radius * 1.5}, 300, 'elastic');
dummy_circle.animate({'r': close_button_radius * 1.5}, 300, 'elastic');
}
function hover_out(){
if(!visible){ return; }
close_circle.animate({'r': close_button_radius},400,'linear');
dummy_circle.animate({'r': close_button_radius},400,'linear');
}
dummy_circle.hover(hover_in,hover_out);
function click_action(){
if(!visible){ return; }
close_circle.attr({'r': close_button_radius * 2 });
dummy_circle.attr({'r': close_button_radius * 2 });
close_circle.animate({'r': close_button_radius }, 400, 'linear');
dummy_circle.animate({'r': close_button_radius }, 400, 'linear');
if(entity_type == "node"){
$.when(GraphNode.destruction_callback(entity)).then(function () {
//console.log("remove node",entity);
entity.remove();
});
}else if(entity_type == "edge"){
$.when(GraphEdge.destruction_callback(entity)).then(function () {
//console.log("remove edge",entity);
entity.remove();
});
}
}
dummy_circle.click(click_action);
this.show = function(){
if(!visible){
close_circle.animate({'opacity':1}, 100, 'linear');
close_label.animate({'opacity':1}, 100, 'linear');
visible = true;
}
}
this.hide = function(){
if(visible){
close_circle.animate({'opacity':0}, 100, 'linear');
close_label.animate({'opacity':0}, 100, 'linear');
visible = false;
}
}
//destroy this object and remove it from the graph
this.remove = function(){
if(visible){
visible = false;
close_circle.animate({'opacity':0}, 100, 'linear');
close_label.animate({'opacity':0}, 100, 'linear',self.remove);
}else{
close_circle.remove();
close_label.remove();
dummy_circle.remove();
}
}
}
// connectors are start and end point of edge creation drags.
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.node_outline_color,
'stroke': 'none' });
conn_circle.transform(graph.get_transform());
graph.set_scrolling(conn_circle);
var self = this;
this.update_pos = function(){
conn_circle.attr({'cx':node.get_pos().x + pos_x, 'cy':node.get_pos().y + pos_y});
};
this.get_pos = function(){
return new node.get_pos().add_xy(pos_x,pos_y);
};
this.remove = function(){
conn_circle.remove();
}
function hover_in(){
if(!visible){ return;}
conn_circle.animate({'r':8},300,'elastic');
if(graph.creating_edge){
graph.target_node = node;
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':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);
var drag_down = function(){
if(!visible){ return; }
self.ox = conn_circle.attr("cx");
self.oy = conn_circle.attr("cy");
self.edge_start = new EdgeEnd(self.ox,self.oy);
self.edge_end = new EdgeEnd(self.ox, self.oy);
self.edge_tmp = new GraphEdge(graph,'',self.edge_start,self.edge_end,true);
graph.creating_edge = true;
};
var drag_move = function(dx,dy){
if(!visible){ return; }
self.edge_end.x = self.ox + dx;
self.edge_end.y = self.oy + dy;
self.edge_tmp.update();
};
var drag_up = function(){
if(!visible){ return; }
graph.creating_edge = false;
self.edge_tmp.remove();
if(graph.target_node){
var edge_prop = GraphEdge.creation_callback(node,graph.target_node);
if(edge_prop){
var new_edge = new GraphEdge(graph,edge_prop.label, node,graph.target_node);
GraphEdge.new_edge_callback(new_edge);
}
}
};
conn_circle.drag(drag_move,drag_down,drag_up);
function show(){
if(!visible){
conn_circle.animate({'opacity':1}, 100, 'linear');
visible = true;
}
}
function hide(){
if(visible){
conn_circle.animate({'opacity':0}, 100, 'linear');
visible = false;
}
}
this.show = show;
this.hide = hide;
}
//Creates a new graph on raphael document r.
//style is a dictionary containing the style definitions
//viewport (optional) is the dom element representing the viewport of the graph. It is used
//to prevent scrolling to scroll the graph outside the viewport.
function Graph(r,style,viewport){
var self = this;
var nodes = []; // list of all nodes in the graph
var edges = []; // list of all edges in the graph
var graph = {}; // graph[n1.uid][n2.uid] -> list of all edges from n1 to n2
var links = {}; // links[n.uid] -> list of all edges from or to n
var uid = 1; // all nodes and edges have an uid used to order their display when they are curved
var selected_entity = null; //the selected entity (node or edge)
self.creating_edge = false; // true if we are dragging a new edge onto a node
self.target_node = null; // this holds the target node when creating an edge and hovering a connector
self.r = r; // the raphael instance
self.style = style; // definition of the colors, spacing, fonts, ... used by the elements
var tr_x = 0, tr_y = 0; // global translation coordinate
var background = r.rect(0,0,'100%','100%').attr({'fill':'white', 'stroke':'none', 'opacity':0, 'cursor':'move'});
// return the global transform of the scene
this.get_transform = function(){
return "T"+tr_x+","+tr_y
};
// translate every element of the graph except the background.
// elements inserted in the graph after a translate_all() must manually apply transformation
// via get_transform()
var translate_all = function(dx,dy){
tr_x += dx;
tr_y += dy;
var tstr = self.get_transform();
r.forEach(function(el){
if(el != background){
el.transform(tstr);
}
});
};
//returns {minx, miny, maxx, maxy}, the translated bounds containing all nodes
var get_bounds = function(){
var minx = Number.MAX_VALUE;
var miny = Number.MAX_VALUE;
var maxx = Number.MIN_VALUE;
var maxy = Number.MIN_VALUE;
for(var i = 0; i < nodes.length; i++){
var pos = nodes[i].get_pos();
minx = Math.min(minx,pos.x);
miny = Math.min(miny,pos.y);
maxx = Math.max(maxx,pos.x);
maxy = Math.max(maxy,pos.y);
}
minx = minx - style.node_size_x / 2 + tr_x;
miny = miny - style.node_size_y / 2 + tr_y;
maxx = maxx + style.node_size_x / 2 + tr_x;
maxy = maxy + style.node_size_y / 2 + tr_y;
return { minx:minx, miny:miny, maxx:maxx, maxy:maxy };
};
// returns false if the translation dx,dy of the viewport
// hides the graph (with optional margin)
var translation_respects_viewport = function(dx,dy,margin){
if(!viewport){
return true;
}
margin = margin || 0;
var b = get_bounds();
var width = viewport.offsetWidth;
var height = viewport.offsetHeight;
if( ( dy < 0 && b.maxy + dy < margin ) ||
( dy > 0 && b.miny + dy > height - margin ) ||
( dx < 0 && b.maxx + dx < margin ) ||
( dx > 0 && b.minx + dx > width - margin ) ){
return false;
}
return true;
}
//Adds a mousewheel event callback to raph_element that scrolls the viewport
this.set_scrolling = function(raph_element){
$(raph_element.node).bind('mousewheel',function(event,delta){
var dy = delta * 20;
if( translation_respects_viewport(0,dy, style.viewport_margin) ){
translate_all(0,dy);
}
});
};
var px, py;
// Graph translation when background is dragged
var bg_drag_down = function(){
px = py = 0;
};
var bg_drag_move = function(x,y){
var dx = x - px;
var dy = y - py;
px = x;
py = y;
if( translation_respects_viewport(dx,dy, style.viewport_margin) ){
translate_all(dx,dy);
}
};
var bg_drag_up = function(){};
background.drag( bg_drag_move, bg_drag_down, bg_drag_up);
this.set_scrolling(background);
//adds a node to the graph and sets its uid.
this.add_node = function (n){
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);
e.uid = uid++;
if(!graph[n1.uid]) graph[n1.uid] = {};
if(!graph[n1.uid][n2.uid]) graph[n1.uid][n2.uid] = [];
if(!links[n1.uid]) links[n1.uid] = [];
if(!links[n2.uid]) links[n2.uid] = [];
graph[n1.uid][n2.uid].push(e);
links[n1.uid].push(e);
if(n1 != n2){
links[n2.uid].push(e);
}
};
//removes an edge from the graph
this.remove_edge = function(edge){
edges = _.without(edges,edge);
var n1 = edge.get_start();
var n2 = edge.get_end();
links[n1.uid] = _.without(links[n1.uid],edge);
links[n2.uid] = _.without(links[n2.uid],edge);
graph[n1.uid][n2.uid] = _.without(graph[n1.uid][n2.uid],edge);
if ( selected_entity == edge ){
selected_entity = null;
}
};
//removes a node and all connected edges from the graph
this.remove_node = function(node){
var linked_edges = self.get_linked_edge_list(node);
for(var i = 0; i < linked_edges.length; i++){
linked_edges[i].remove();
}
nodes = _.without(nodes,node);
if ( selected_entity == node ){
selected_entity = null;
}
}
//return the list of edges from n1 to n2
this.get_edge_list = function(n1,n2){
var list = [];
if(!graph[n1.uid]) return list;
if(!graph[n1.uid][n2.uid]) return list;
return graph[n1.uid][n2.uid];
};
//returns the list of all edge connected to n
this.get_linked_edge_list = function(n){
if(!links[n.uid]) return [];
return links[n.uid];
};
//return a curvature index so that all edges connecting n1,n2 have different curvatures
this.get_edge_curvature = function(n1,n2,e){
var el_12 = this.get_edge_list(n1,n2);
var c12 = el_12.length;
var el_21 = this.get_edge_list(n2,n1);
var c21 = el_21.length;
if(c12 + c21 == 1){ // only one edge
return 0;
}else{
var index = 0;
for(var i = 0; i < c12; i++){
if (el_12[i].uid < e.uid){
index++;
}
}
if(c21 == 0){ // all edges in the same direction
return index - (c12-1)/2.0;
}else{
return index + 0.5;
}
}
};
// 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);
var slots = []; // the 8 angles where we can put the loops
for(var angle = 0; angle < 360; angle += 45){
slots.push(Vec2.new_polar_deg(1,angle));
}
//we assign to each slot a score. The higher the score, the closer it is to other edges.
var links = this.get_linked_edge_list(n);
for(var i = 0; i < links.length; i++){
var edge = links[i];
if(!edge.is_loop || edge.is_loop()){
continue;
}
var end = edge.get_end();
if (end == n){
end = edge.get_start();
}
var dir = end.get_pos().sub(n.get_pos()).normalize();
for(var s = 0; s < slots.length; s++){
var score = slots[s].dot(dir);
if(score < 0){
score = -0.2*Math.pow(score,2);
}else{
score = Math.pow(score,2);
}
if(!slots[s].score){
slots[s].score = score;
}else{
slots[s].score += score;
}
}
}
//we want the loops with lower uid to get the slots with the lower score
slots.sort(function(a,b){ return a.score < b.score ? -1: 1; });
var index = 0;
for(var i = 0; i < links.length; i++){
var edge = links[i];
if(!edge.is_loop || !edge.is_loop()){
continue;
}
if(edge.uid < e.uid){
index++;
}
}
index %= slots.length;
return slots[index].angle_deg();
}
//selects a node or an edge and deselects everything else
this.select = function(entity){
if(selected_entity){
if(selected_entity == entity){
return;
}else{
if(selected_entity.set_not_selected){
selected_entity.set_not_selected();
}
selected_entity = null;
}
}
selected_entity = entity;
if(entity && entity.set_selected){
entity.set_selected();
}
};
}
// creates a new Graph Node on Raphael document r, centered on [pos_x,pos_y], with label 'label',
// and of type 'circle' or 'rect', and of color 'color'
function GraphNode(graph,pos_x, pos_y,label,type,color){
var self = this;
var r = graph.r;
var sy = graph.style.node_size_y;
var sx = graph.style.node_size_x;
var node_fig = null;
var selected = false;
this.connectors = [];
this.close_button = null;
this.uid = 0;
graph.add_node(this);
if(type == 'circle'){
node_fig = r.ellipse(pos_x,pos_y,sx/2,sy/2);
}else{
node_fig = r.rect(pos_x-sx/2,pos_y-sy/2,sx,sy);
}
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);
var node_label = r.text(pos_x,pos_y,label);
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);
// redraws all edges linked to this node
var update_linked_edges = function(){
var edges = graph.get_linked_edge_list(self);
for(var i = 0; i < edges.length; i++){
edges[i].update();
}
};
// sets the center position of the node
var set_pos = function(pos){
if(type == 'circle'){
node_fig.attr({'cx':pos.x,'cy':pos.y});
}else{
node_fig.attr({'x':pos.x-sx/2,'y':pos.y-sy/2});
}
node_label.attr({'x':pos.x,'y':pos.y});
for(var i = 0; i < self.connectors.length; i++){
self.connectors[i].update_pos();
}
if(self.close_button){
self.close_button.update_pos();
}
update_linked_edges();
};
// returns the figure used to draw the node
var get_fig = function(){
return node_fig;
};
// returns the center coordinates
var get_pos = function(){
if(type == 'circle'){
return new Vec2(node_fig.attr('cx'), node_fig.attr('cy'));
}else{
return new Vec2(node_fig.attr('x') + sx/2, node_fig.attr('y') + sy/2);
}
};
// return the label string
var get_label = function(){
return node_label.attr("text");
};
// sets the label string
var set_label = function(text){
node_label.attr({'text':text});
};
var get_bound = function(){
if(type == 'circle'){
return new BEllipse(get_pos().x,get_pos().y,sx/2,sy/2);
}else{
return BRect.new_centered(get_pos().x,get_pos().y,sx,sy);
}
};
// selects this node and deselects all other nodes
var set_selected = function(){
if(!selected){
selected = true;
node_fig.attr({ 'stroke': graph.style.node_selected_color,
'stroke-width': graph.style.node_selected_width });
if(!self.close_button){
self.close_button = new CloseButton(graph,self, "node" ,sx/2 , - sy/2);
self.close_button.show();
}
for(var i = 0; i < self.connectors.length; i++){
self.connectors[i].show();
}
}
};
// deselect this node
var set_not_selected = function(){
if(selected){
node_fig.animate({ 'stroke': graph.style.node_outline_color,
'stroke-width': graph.style.node_outline_width },
100,'linear');
if(self.close_button){
self.close_button.remove();
self.close_button = null;
}
selected = false;
}
for(var i = 0; i < self.connectors.length; i++){
self.connectors[i].hide();
}
};
var remove = function(){
if(self.close_button){
self.close_button.remove();
}
for(var i = 0; i < self.connectors.length; i++){
self.connectors[i].remove();
}
graph.remove_node(self);
node_fig.remove();
node_label.remove();
}
this.set_pos = set_pos;
this.get_pos = get_pos;
this.set_label = set_label;
this.get_label = get_label;
this.get_bound = get_bound;
this.get_fig = get_fig;
this.set_selected = set_selected;
this.set_not_selected = set_not_selected;
this.update_linked_edges = update_linked_edges;
this.remove = remove;
//select the node and play an animation when clicked
var click_action = function(){
if(type == 'circle'){
node_fig.attr({'rx':sx/2 + 3, 'ry':sy/2+ 3});
node_fig.animate({'rx':sx/2, 'ry':sy/2},500,'elastic');
}else{
var cx = get_pos().x;
var cy = get_pos().y;
node_fig.attr({'x':cx - (sx/2) - 3, 'y':cy - (sy/2) - 3, 'ẃidth':sx+6, 'height':sy+6});
node_fig.animate({'x':cx - sx/2, 'y':cy - sy/2, 'ẃidth':sx, 'height':sy},500,'elastic');
}
graph.select(self);
};
node_fig.click(click_action);
node_label.click(click_action);
//move the node when dragged
var drag_down = function(){
this.opos = get_pos();
};
var drag_move = function(dx,dy){
// we disable labels when moving for performance reasons,
// updating the label position is quite expensive
// we put this here because drag_down is also called on simple clicks ... and this causes unwanted flicker
var edges = graph.get_linked_edge_list(self);
for(var i = 0; i < edges.length; i++){
edges[i].label_disable();
}
if(self.close_button){
self.close_button.hide();
}
set_pos(this.opos.add_xy(dx,dy));
};
var drag_up = function(){
//we re-enable the
var edges = graph.get_linked_edge_list(self);
for(var i = 0; i < edges.length; i++){
edges[i].label_enable();
}
if(self.close_button){
self.close_button.show();
}
};
node_fig.drag(drag_move,drag_down,drag_up);
node_label.drag(drag_move,drag_down,drag_up);
//allow the user to create edges by dragging onto the node
function hover_in(){
if(graph.creating_edge){
graph.target_node = self;
}
}
function hover_out(){
graph.target_node = null;
}
node_fig.hover(hover_in,hover_out);
node_label.hover(hover_in,hover_out);
function double_click(){
GraphNode.double_click_callback(self);
}
node_fig.dblclick(double_click);
node_label.dblclick(double_click);
this.connectors.push(new Connector(graph,this,-sx/2,0));
this.connectors.push(new Connector(graph,this,sx/2,0));
this.connectors.push(new Connector(graph,this,0,-sy/2));
this.connectors.push(new Connector(graph,this,0,sy/2));
this.close_button = new CloseButton(graph,this,"node",sx/2 , - sy/2 );
}
GraphNode.double_click_callback = function(node){
console.log("double click from node:",node);
};
// this is the default node destruction callback. It is called before the node is removed from the graph
// and before the connected edges are destroyed
GraphNode.destruction_callback = function(node){ return true; };
// creates a new edge with label 'label' from start to end. start and end must implement get_pos_*,
// if tmp is true, the edge is not added to the graph, used for drag edges.
// replace tmp == false by graph == null
function GraphEdge(graph,label,start,end,tmp){
var self = this;
var r = graph.r;
var curvature = 0; // 0 = straight, != 0 curved
var s,e; // positions of the start and end point of the line between start and end
var mc; // position of the middle of the curve (bezier control point)
var mc1,mc2; // control points of the cubic bezier for the loop edges
var elfs = graph.style.edge_label_font_size || 10 ;
var label_enabled = true;
this.uid = 0; // unique id used to order the curved edges
var edge_path = ""; // svg definition of the edge vector path
var selected = false;
if(!tmp){
graph.add_edge(start,end,this);
}
//Return the position of the label
function get_label_pos(path){
var cpos = path.getTotalLength() * 0.5;
var cindex = Math.abs(Math.floor(curvature));
var mod = ((cindex % 3)) * (elfs * 3.1) - (elfs * 0.5);
var verticality = Math.abs(end.get_pos().sub(start.get_pos()).normalize().dot_xy(0,1));
verticality = Math.max(verticality-0.5,0)*2;
var lpos = path.getPointAtLength(cpos + mod * verticality);
return new Vec2(lpos.x,lpos.y - elfs *(1-verticality));
}
//used by close_button
this.get_pos = function(){
if(!edge){
return start.get_pos().lerp(end.get_pos(),0.5);
}
return get_label_pos(edge);
/*
var bbox = edge_label.getBBox(); Does not work... :(
return new Vec2(bbox.x + bbox.width, bbox.y);*/
}
//Straight line from s to e
function make_line(){
return "M" + s.x + "," + s.y + "L" + e.x + "," + e.y ;
}
//Curved line from s to e by mc
function make_curve(){
return "M" + s.x + "," + s.y + "Q" + mc.x + "," + mc.y + " " + e.x + "," + e.y;
}
//Curved line from s to e by mc1 mc2
function make_loop(){
return "M" + s.x + " " + s.y +
"C" + mc1.x + " " + mc1.y + " " + mc2.x + " " + mc2.y + " " + e.x + " " + e.y;
}
//computes new start and end line coordinates
function update_curve(){
if(start != end){
if(!tmp){
curvature = graph.get_edge_curvature(start,end,self);
}else{
curvature = 0;
}
s = start.get_pos();
e = end.get_pos();
mc = s.lerp(e,0.5); //middle of the line s->e
var se = e.sub(s);
se = se.normalize();
se = se.rotate_deg(-90);
se = se.scale(curvature * graph.style.edge_spacing);
mc = mc.add(se);
if(start.get_bound){
var col = start.get_bound().collide_segment(s,mc);
if(col.length > 0){
s = col[0];
}
}
if(end.get_bound){
var col = end.get_bound().collide_segment(mc,e);
if(col.length > 0){
e = col[0];
}
}
if(curvature != 0){
edge_path = make_curve();
}else{
edge_path = make_line();
}
}else{ // start == end
var rad = graph.style.edge_loop_radius || 100;
s = start.get_pos();
e = end.get_pos();
var r = Vec2.new_polar_deg(rad,graph.get_loop_angle(start,self));
mc = s.add(r);
var p = r.rotate_deg(90);
mc1 = mc.add(p.set_len(rad*0.5));
mc2 = mc.add(p.set_len(-rad*0.5));
if(start.get_bound){
var col = start.get_bound().collide_segment(s,mc1);
if(col.length > 0){
s = col[0];
}
var col = start.get_bound().collide_segment(e,mc2);
if(col.length > 0){
e = col[0];
}
}
edge_path = make_loop();
}
}
update_curve();
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_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);
//since we create an edge we need to recompute the edges that have the same start and end positions as this one
if(!tmp){
var edges_start = graph.get_linked_edge_list(start);
var edges_end = graph.get_linked_edge_list(end);
var edges = edges_start.length < edges_end.length ? edges_start : edges_end;
for(var i = 0; i < edges.length; i ++){
if(edges[i] != self){
edges[i].update();
}
}
}
function label_enable(){
if(!label_enabled){
label_enabled = true;
edge_label.animate({'opacity':1},100,'linear');
if(self.close_button){
self.close_button.show();
}
self.update();
}
}
function label_disable(){
if(label_enabled){
label_enabled = false;
edge_label.animate({'opacity':0},100,'linear');
if(self.close_button){
self.close_button.hide();
}
}
}
//update the positions
function update(){
update_curve();
edge.attr({'path':edge_path});
if(label_enabled){
var labelpos = get_label_pos(edge);
edge_label.attr({'x':labelpos.x, 'y':labelpos.y - 14});
}
}
// removes the edge from the scene, disconnects it from linked
// nodes, destroy its drawable elements.
function remove(){
edge.remove();
edge_label.remove();
if(!tmp){
graph.remove_edge(self);
}
if(start.update_linked_edges){
start.update_linked_edges();
}
if(start != end && end.update_linked_edges){
end.update_linked_edges();
}
if(self.close_button){
self.close_button.remove();
}
}
this.set_selected = function(){
if(!selected){
selected = true;
edge.attr({ 'stroke': graph.style.node_selected_color,
'stroke-width': graph.style.node_selected_width });
edge_label.attr({ 'fill': graph.style.node_selected_color });
if(!self.close_button){
self.close_button = new CloseButton(graph,self,"edge",0,30);
self.close_button.show();
}
}
};
this.set_not_selected = function(){
if(selected){
selected = false;
edge.animate({ 'stroke': graph.style.edge_color,
'stroke-width': graph.style.edge_width }, 100,'linear');
edge_label.animate({ 'fill': graph.style.edge_label_color}, 100, 'linear');
if(self.close_button){
self.close_button.remove();
self.close_button = null;
}
}
};
function click_action(){
graph.select(self);
}
edge.click(click_action);
edge_label.click(click_action);
function double_click_action(){
GraphEdge.double_click_callback(self);
}
edge.dblclick(double_click_action);
edge_label.dblclick(double_click_action);
this.label_enable = label_enable;
this.label_disable = label_disable;
this.update = update;
this.remove = remove;
this.is_loop = function(){ return start == end; };
this.get_start = function(){ return start; };
this.get_end = function(){ return end; };
}
GraphEdge.double_click_callback = function(edge){
console.log("double click from edge:",edge);
};
// this is the default edge creation callback. It is called before an edge is created
// It returns an object containing the properties of the edge.
// If it returns null, the edge is not created.
GraphEdge.creation_callback = function(start,end){
var edge_prop = {};
edge_prop.label = 'new edge!';
return edge_prop;
};
// This is is called after a new edge is created, with the new edge
// as parameter
GraphEdge.new_edge_callback = function(new_edge){};
// this is the default edge destruction callback. It is called before
// an edge is removed from the graph.
GraphEdge.destruction_callback = function(edge){ return true; };
// returns a new string with the same content as str, but with lines of maximum 'width' characters.
// lines are broken on words, or into words if a word is longer than 'width'
function wordwrap( str, width) {
// http://james.padolsey.com/javascript/wordwrap-for-javascript/
width = width || 32;
var cut = true;
var brk = '\n';
if (!str) { return str; }
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');
return str.match(new RegExp(regex, 'g') ).join( brk );
}
window.CuteGraph = Graph;
window.CuteNode = GraphNode;
window.CuteEdge = GraphEdge;
window.CuteGraph.wordwrap = wordwrap;
})(window);

358
addons/web_diagram/static/src/js/vec2.js Normal file
View File

@ -0,0 +1,358 @@
(function(window){
// A Javascript 2D vector library
// conventions :
// method that returns a float value do not modify the vector
// method that implement operators return a new vector with the modifications without
// modifying the calling vector or the parameters.
//
// v3 = v1.add(v2); // v3 is set to v1 + v2, v1, v2 are not modified
//
// methods that take a single vector as a parameter are usually also available with
// q '_xy' suffix. Those method takes two floats representing the x,y coordinates of
// the vector parameter and allow you to avoid to needlessly create a vector object :
//
// v2 = v1.add(new Vec2(3,4));
// v2 = v1.add_xy(3,4); //equivalent to previous line
//
// angles are in radians by default but method that takes angle as parameters
// or return angle values usually have a variant with a '_deg' suffix that works in degrees
//
// The 2D vector object
function Vec2(x,y){
this.x = x;
this.y = y;
}
window.Vec2 = Vec2;
// Multiply a number expressed in radiant by rad2deg to convert it in degrees
var rad2deg = 57.29577951308232;
// Multiply a number expressed in degrees by deg2rad to convert it to radiant
var deg2rad = 0.017453292519943295;
// The numerical precision used to compare vector equality
var epsilon = 0.0000001;
// This static method creates a new vector from polar coordinates with the angle expressed
// in degrees
Vec2.new_polar_deg = function(len,angle){
var v = new Vec2(len,0);
return v.rotate_deg(angle);
};
// This static method creates a new vector from polar coordinates with the angle expressed in
// radians
Vec2.new_polar = function(len,angle){
var v = new Vec2(len,0);
v.rotate(angle);
return v;
};
// returns the length or modulus or magnitude of the vector
Vec2.prototype.len = function(){
return Math.sqrt(this.x*this.x + this.y*this.y);
};
// returns the squared length of the vector, this method is much faster than len()
Vec2.prototype.len_sq = function(){
return this.x*this.x + this.y*this.y;
};
// return the distance between this vector and the vector v
Vec2.prototype.dist = function(v){
var dx = this.x - v.x;
var dy = this.y - v.y;
return Math.sqrt(dx*dx + dy*dy);
};
// return the distance between this vector and the vector of coordinates (x,y)
Vec2.prototype.dist_xy = function(x,y){
var dx = this.x - x;
var dy = this.y - y;
return Math.sqrt(dx*dx + dy*dy);
};
// return the squared distance between this vector and the vector and the vector v
Vec2.prototype.dist_sq = function(v){
var dx = this.x - v.x;
var dy = this.y - v.y;
return dx*dx + dy*dy;
};
// return the squared distance between this vector and the vector of coordinates (x,y)
Vec2.prototype.dist_sq_xy = function(x,y){
var dx = this.x - x;
var dy = this.y - y;
return dx*dx + dy*dy;
};
// return the dot product between this vector and the vector v
Vec2.prototype.dot = function(v){
return this.x*v.x + this.y*v.y;
};
// return the dot product between this vector and the vector of coordinate (x,y)
Vec2.prototype.dot_xy = function(x,y){
return this.x*x + this.y*y;
};
// return a new vector with the same coordinates as this
Vec2.prototype.clone = function(){
return new Vec2(this.x,this.y);
};
// return the sum of this and vector v as a new vector
Vec2.prototype.add = function(v){
return new Vec2(this.x+v.x,this.y+v.y);
};
// return the sum of this and vector (x,y) as a new vector
Vec2.prototype.add_xy = function(x,y){
return new Vec2(this.x+x,this.y+y);
};
// returns (this - v) as a new vector where v is a vector and - is the vector subtraction
Vec2.prototype.sub = function(v){
return new Vec2(this.x-v.x,this.y-v.y);
};
// returns (this - (x,y)) as a new vector where - is vector subtraction
Vec2.prototype.sub_xy = function(x,y){
return new Vec2(this.x-x,this.y-y);
};
// return (this * v) as a new vector where v is a vector and * is the by component product
Vec2.prototype.mult = function(v){
return new Vec2(this.x*v.x,this.y*v.y);
};
// return (this * (x,y)) as a new vector where * is the by component product
Vec2.prototype.mult_xy = function(x,y){
return new Vec2(this.x*x,this.y*y);
};
// return this scaled by float f as a new fector
Vec2.prototype.scale = function(f){
return new Vec2(this.x*f, this.y*f);
};
// return the negation of this vector
Vec2.prototype.neg = function(f){
return new Vec2(-this.x,-this.y);
};
// return this vector normalized as a new vector
Vec2.prototype.normalize = function(){
var len = this.len();
if(len == 0){
return new Vec2(0,1);
}else if(len != 1){
return this.scale(1.0/len);
}
return new Vec2(this.x,this.y);
};
// return a new vector with the same direction as this vector of length float l. (negative values of l will invert direction)
Vec2.prototype.set_len = function(l){
return this.normalize().scale(l);
};
// return the projection of this onto the vector v as a new vector
Vec2.prototype.project = function(v){
return v.set_len(this.dot(v));
};
// return a string representation of this vector
Vec2.prototype.toString = function(){
var str = "";
str += "[";
str += this.x;
str += ",";
str += this.y;
str += "]";
return str;
};
//return this vector counterclockwise rotated by rad radians as a new vector
Vec2.prototype.rotate = function(rad){
var c = Math.cos(rad);
var s = Math.sin(rad);
var px = this.x * c - this.y *s;
var py = this.x * s + this.y *c;
return new Vec2(px,py);
};
//return this vector counterclockwise rotated by deg degrees as a new vector
Vec2.prototype.rotate_deg = function(deg){
return this.rotate(deg * deg2rad);
};
//linearly interpolate this vector towards the vector v by float factor alpha.
// alpha == 0 : does nothing
// alpha == 1 : sets this to v
Vec2.prototype.lerp = function(v,alpha){
var inv_alpha = 1 - alpha;
return new Vec2( this.x * inv_alpha + v.x * alpha,
this.y * inv_alpha + v.y * alpha );
};
// returns the angle between this vector and the vector (1,0) in radians
Vec2.prototype.angle = function(){
return Math.atan2(this.y,this.x);
};
// returns the angle between this vector and the vector (1,0) in degrees
Vec2.prototype.angle_deg = function(){
return Math.atan2(this.y,this.x) * rad2deg;
};
// returns true if this vector is equal to the vector v, with a tolerance defined by the epsilon module constant
Vec2.prototype.equals = function(v){
if(Math.abs(this.x-v.x) > epsilon){
return false;
}else if(Math.abs(this.y-v.y) > epsilon){
return false;
}
return true;
};
// returns true if this vector is equal to the vector (x,y) with a tolerance defined by the epsilon module constant
Vec2.prototype.equals_xy = function(x,y){
if(Math.abs(this.x-x) > epsilon){
return false;
}else if(Math.abs(this.y-y) > epsilon){
return false;
}
return true;
};
})(window);
(function(window){
// A Bounding Shapes Library
// A Bounding Ellipse
// cx,cy : center of the ellipse
// rx,ry : radius of the ellipse
function BEllipse(cx,cy,rx,ry){
this.type = 'ellipse';
this.x = cx-rx; // minimum x coordinate contained in the ellipse
this.y = cy-ry; // minimum y coordinate contained in the ellipse
this.sx = 2*rx; // width of the ellipse on the x axis
this.sy = 2*ry; // width of the ellipse on the y axis
this.hx = rx; // half of the ellipse width on the x axis
this.hy = ry; // half of the ellipse width on the y axis
this.cx = cx; // x coordinate of the ellipse center
this.cy = cy; // y coordinate of the ellipse center
this.mx = cx + rx; // maximum x coordinate contained in the ellipse
this.my = cy + ry; // maximum x coordinate contained in the ellipse
}
window.BEllipse = BEllipse;
// returns an unordered list of vector defining the positions of the intersections between the ellipse's
// boundary and a line segment defined by the start and end vectors a,b
BEllipse.prototype.collide_segment = function(a,b){
// http://paulbourke.net/geometry/sphereline/
var collisions = [];
if(a.equals(b)){ //we do not compute the intersection in this case. TODO ?
return collisions;
}
// make all computations in a space where the ellipse is a circle
// centered on zero
var c = new Vec2(this.cx,this.cy);
a = a.sub(c).mult_xy(1/this.hx,1/this.hy);
b = b.sub(c).mult_xy(1/this.hx,1/this.hy);
if(a.len_sq() < 1 && b.len_sq() < 1){ //both points inside the ellipse
return collisions;
}
// compute the roots of the intersection
var ab = b.sub(a);
var A = (ab.x*ab.x + ab.y*ab.y);
var B = 2*( ab.x*a.x + ab.y*a.y);
var C = a.x*a.x + a.y*a.y - 1;
var u = B * B - 4*A*C;
if(u < 0){
return collisions;
}
u = Math.sqrt(u);
var u1 = (-B + u) / (2*A);
var u2 = (-B - u) / (2*A);
if(u1 >= 0 && u1 <= 1){
var pos = a.add(ab.scale(u1));
collisions.push(pos);
}
if(u1 != u2 && u2 >= 0 && u2 <= 1){
var pos = a.add(ab.scale(u2));
collisions.push(pos);
}
for(var i = 0; i < collisions.length; i++){
collisions[i] = collisions[i].mult_xy(this.hx,this.hy);
collisions[i] = collisions[i].add_xy(this.cx,this.cy);
}
return collisions;
};
// A bounding rectangle
// x,y the minimum coordinate contained in the rectangle
// sx,sy the size of the rectangle along the x,y axis
function BRect(x,y,sx,sy){
this.type = 'rect';
this.x = x; // minimum x coordinate contained in the rectangle
this.y = y; // minimum y coordinate contained in the rectangle
this.sx = sx; // width of the rectangle on the x axis
this.sy = sy; // width of the rectangle on the y axis
this.hx = sx/2; // half of the rectangle width on the x axis
this.hy = sy/2; // half of the rectangle width on the y axis
this.cx = x + this.hx; // x coordinate of the rectangle center
this.cy = y + this.hy; // y coordinate of the rectangle center
this.mx = x + sx; // maximum x coordinate contained in the rectangle
this.my = y + sy; // maximum x coordinate contained in the rectangle
}
window.BRect = BRect;
// Static method creating a new bounding rectangle of size (sx,sy) centered on (cx,cy)
BRect.new_centered = function(cx,cy,sx,sy){
return new BRect(cx-sx/2,cy-sy/2,sx,sy);
};
//intersect line a,b with line c,d, returns null if no intersection
function line_intersect(a,b,c,d){
// http://paulbourke.net/geometry/lineline2d/
var f = ((d.y - c.y)*(b.x - a.x) - (d.x - c.x)*(b.y - a.y));
if(f == 0){
return null;
}
f = 1 / f;
var fab = ((d.x - c.x)*(a.y - c.y) - (d.y - c.y)*(a.x - c.x)) * f ;
if(fab < 0 || fab > 1){
return null;
}
var fcd = ((b.x - a.x)*(a.y - c.y) - (b.y - a.y)*(a.x - c.x)) * f ;
if(fcd < 0 || fcd > 1){
return null;
}
return new Vec2(a.x + fab * (b.x-a.x), a.y + fab * (b.y - a.y) );
}
// returns an unordered list of vector defining the positions of the intersections between the ellipse's
// boundary and a line segment defined by the start and end vectors a,b
BRect.prototype.collide_segment = function(a,b){
var collisions = [];
var corners = [ new Vec2(this.x,this.y), new Vec2(this.x,this.my),
new Vec2(this.mx,this.my), new Vec2(this.mx,this.y) ];
var pos = line_intersect(a,b,corners[0],corners[1]);
if(pos) collisions.push(pos);
pos = line_intersect(a,b,corners[1],corners[2]);
if(pos) collisions.push(pos);
pos = line_intersect(a,b,corners[2],corners[3]);
if(pos) collisions.push(pos);
pos = line_intersect(a,b,corners[3],corners[0]);
if(pos) collisions.push(pos);
return collisions;
};
// returns true if the rectangle contains the position defined by the vector 'vec'
BRect.prototype.contains_vec = function(vec){
return ( vec.x >= this.x && vec.x <= this.mx &&
vec.y >= this.y && vec.y <= this.my );
};
// returns true if the rectangle contains the position (x,y)
BRect.prototype.contains_xy = function(x,y){
return ( x >= this.x && x <= this.mx &&
y >= this.y && y <= this.my );
};
// returns true if the ellipse contains the position defined by the vector 'vec'
BEllipse.prototype.contains_vec = function(v){
v = v.mult_xy(this.hx,this.hy);
return v.len_sq() <= 1;
};
// returns true if the ellipse contains the position (x,y)
BEllipse.prototype.contains_xy = function(x,y){
return this.contains(new Vec2(x,y));
};
})(window);

7
addons/web_diagram/static/src/xml/base_diagram.xml
View File

@ -1,6 +1,7 @@
<template>
<t t-name="DiagramView">
<div class="oe_diagram_header" t-att-id="element_id + '_header'">
<h3 class="oe_diagram_title"/>
<div class="oe_diagram_buttons">
<button type="button" id="new_node" class="oe_button oe_diagram_button_new">New Node</button>
</div>
@ -9,7 +10,11 @@
<span class="oe_pager_index">0</span> / <span class="oe_pager_count">0</span>
</t>
</div>
<div class="clear"></div>
</div>
<div class="diagram-container">
<div class="oe_diagram_diagram"/>
</div>
<div id="dia-canvas" class="diagram" style="overflow: auto;"></div>
</t>
</template>