luci-app-bmx: Redesign Makefile. Split JS libraries. Clean package
Add luci-lib-jquery-1-4 and luci-lib-dracula packages. Remove unused library Curry. Signed-off-by: Pau Escrich <p4u@dabax.net>
This commit is contained in:
Pau Escrich
parent
a3972affe7
commit
e912da6625
|
|
@ -20,7 +20,7 @@
|
|||
include $(TOPDIR)/rules.mk
|
||||
|
||||
PKG_NAME:=luci-app-bmx6
|
||||
PKG_RELEASE:=3
|
||||
PKG_RELEASE:=4
|
||||
|
||||
PKG_BUILD_DIR := $(BUILD_DIR)/$(PKG_NAME)
|
||||
PKG_LICENSE:=GPL-2.0+
|
||||
|
|
@ -32,14 +32,40 @@ define Package/luci-app-bmx6
|
|||
CATEGORY:=LuCI
|
||||
SUBMENU:=3. Applications
|
||||
TITLE:= bmx6 configuration, status and visualization module
|
||||
DEPENDS:=+luci-lib-json +luci-mod-admin-full +luci-lib-httpclient +bmx6
|
||||
DEPENDS:=+luci-lib-json +luci-mod-admin-full +luci-lib-httpclient +bmx6 +luci-lib-jquery-1-4 +luci-lib-dracula
|
||||
MAINTAINER:= Pau Escrich <p4u@dabax.net>
|
||||
endef
|
||||
|
||||
define Package/luci-lib-jquery-1-4
|
||||
SECTION:=luci
|
||||
CATEGORY:=LuCI
|
||||
TITLE:=LuCI - Lua Configuration Interface
|
||||
MAINTAINER:=Gui Iribarren <gui@altermundi.net>
|
||||
SUBMENU:=6. Libraries
|
||||
TITLE:=jQuery 1.4 javascript library
|
||||
endef
|
||||
|
||||
define Package/luci-lib-dracula
|
||||
SECTION:=luci
|
||||
CATEGORY:=LuCI
|
||||
TITLE:=LuCI - Lua Configuration Interface
|
||||
MAINTAINER:=Pau Escrich <p4u@dabax.net>
|
||||
SUBMENU:=6. Libraries
|
||||
TITLE:=dracula graph javascript library
|
||||
endef
|
||||
|
||||
define Package/luci-app-bmx6/description
|
||||
bmx6 web application (status and configuration) for LuCi web interface
|
||||
endef
|
||||
|
||||
define Package/luci-lib-jquery-1-4/description
|
||||
minified javascript jQuery 1.4 library
|
||||
endef
|
||||
|
||||
define Package/luci-lib-dracula-graph/description
|
||||
minified dracula javascript graph library
|
||||
endef
|
||||
|
||||
define Package/luci-app-bmx6/conffiles
|
||||
/etc/config/luci-bmx6
|
||||
endef
|
||||
|
|
@ -54,9 +80,20 @@ define Build/Compile
|
|||
endef
|
||||
|
||||
define Package/luci-app-bmx6/install
|
||||
$(CP) ./files/* $(1)/
|
||||
$(CP) ./bmx6/* $(1)/
|
||||
chmod 755 $(1)/www/cgi-bin/bmx6-info
|
||||
endef
|
||||
|
||||
$(eval $(call BuildPackage,luci-app-bmx6))
|
||||
define Package/luci-lib-jquery-1-4/install
|
||||
$(INSTALL_DIR) $(1)/www/luci-static/resources/jquery/
|
||||
$(CP) ./jquery/* $(1)/www/luci-static/resources/jquery/
|
||||
endef
|
||||
|
||||
define Package/luci-lib-dracula/install
|
||||
$(INSTALL_DIR) $(1)/www/luci-static/resources/dracula
|
||||
$(CP) ./dracula/* $(1)/www/luci-static/resources/dracula/
|
||||
endef
|
||||
|
||||
$(eval $(call BuildPackage,luci-app-bmx6))
|
||||
$(eval $(call BuildPackage,luci-lib-jquery-1-4))
|
||||
$(eval $(call BuildPackage,luci-lib-dracula))
|
||||
|
|
|
|||
|
|
@ -38,12 +38,12 @@ the file called "COPYING".
|
|||
|
||||
</div>
|
||||
|
||||
<div id="canvas" style="min-width:800px; min-height:800px"></div>
|
||||
<div id="canvas" style="min-width:1024px; min-height:1024px"></div>
|
||||
|
||||
<script type="text/javascript" src="<%=resource%>/bmx6/js/raphael-min.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graffle.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/bmx6/js/jquery-1.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/bmx6/js/dracula_graph.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/jquery/jquery-1.4.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/dracula/raphael-min.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/dracula/dracula_graffle.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/dracula/dracula_graph.js"></script>
|
||||
<script type="text/javascript" src="<%=resource%>/bmx6/js/bmx6-graph.js"></script>
|
||||
|
||||
<%+footer%>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 923 B After Width: | Height: | Size: 923 B |
|
|
@ -0,0 +1 @@
|
|||
Raphael.fn.connection=function(a,b,c){var d=this,e={draw:function(){for(var f=a.getBBox(),g=b.getBBox(),h=0,i=0,j=[{x:f.x+f.width/2,y:f.y-h},{x:f.x+f.width/2,y:f.y+f.height+h},{x:f.x-h,y:f.y+f.height/2},{x:f.x+f.width+h,y:f.y+f.height/2},{x:g.x+g.width/2,y:g.y-i},{x:g.x+g.width/2,y:g.y+g.height+i},{x:g.x-i,y:g.y+g.height/2},{x:g.x+g.width+i,y:g.y+g.height/2}],k={},l=[],m=0;m<4;m++)for(var n=4;n<8;n++){var o=Math.abs(j[m].x-j[n].x),p=Math.abs(j[m].y-j[n].y);(m==n-4||(3!=m&&6!=n||j[m].x<j[n].x)&&(2!=m&&7!=n||j[m].x>j[n].x)&&(0!=m&&5!=n||j[m].y>j[n].y)&&(1!=m&&4!=n||j[m].y<j[n].y))&&(l.push(o+p),k[l[l.length-1].toFixed(3)]=[m,n])}var q=0==l.length?[0,4]:k[Math.min.apply(Math,l).toFixed(3)],r=j[q[0]].x,s=j[q[0]].y,t=j[q[1]].x,u=j[q[1]].y,o=Math.max(Math.abs(r-t)/2,10),p=Math.max(Math.abs(s-u)/2,10),v=[r,r,r-o,r+o][q[0]].toFixed(3),w=[s-p,s+p,s,s][q[0]].toFixed(3),x=[0,0,0,0,t,t,t-o,t+o][q[1]].toFixed(3),y=[0,0,0,0,s+p,s-p,u,u][q[1]].toFixed(3),z=["M",r.toFixed(3),s.toFixed(3),"C",v,w,x,y,t.toFixed(3),u.toFixed(3)].join(",");if(c&&c.directed){var A=Math.sqrt((u-y)*(u-y)+(t-x)*(t-x)),B=function(a,b){return-a*(b||5)/A},C=[{x:(B(t-x)+B(u-y)+t).toFixed(3),y:(B(u-y)+B(t-x)+u).toFixed(3)},{x:(B(t-x)-B(u-y)+t).toFixed(3),y:(B(u-y)-B(t-x)+u).toFixed(3)}];z=z+",M"+C[0].x+","+C[0].y+",L"+t+","+u+",L"+C[1].x+","+C[1].y}var D="attr";e.fg&&e.fg[D]({path:z})||(e.fg=d.path(z).attr({stroke:c&&c.stroke||"#000",fill:"none"}).toBack()),e.bg&&e.bg[D]({path:z})||c&&c.fill&&(e.bg=c.fill.split&&d.path(z).attr({stroke:c.fill.split("|")[0],fill:"none","stroke-width":c.fill.split("|")[1]||3}).toBack()),c&&c.label&&(e.label&&e.label.attr({x:(r+t)/2,y:(s+u)/2})||(e.label=d.text((r+t)/2,(s+u)/2,c.label).attr({fill:"#000","font-size":c["font-size"]||"12px"}))),c&&c.label&&c["label-style"]&&e.label&&e.label.attr(c["label-style"]),c&&c.callback&&c.callback(e)}};return e.draw(),e};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* 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);
|
||||
};
|
||||
|
|
@ -1,106 +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)].join(",");
|
||||
/* arrow */
|
||||
if(style && style.directed) {
|
||||
/* magnitude, length of the last path vector */
|
||||
var mag = Math.sqrt((y4 - y3) * (y4 - y3) + (x4 - x3) * (x4 - x3));
|
||||
/* vector normalisation to specified length */
|
||||
var norm = function(x,l){return (-x*(l||5)/mag);};
|
||||
/* calculate array coordinates (two lines orthogonal to the path vector) */
|
||||
var arr = [
|
||||
{x:(norm(x4-x3)+norm(y4-y3)+x4).toFixed(3), y:(norm(y4-y3)+norm(x4-x3)+y4).toFixed(3)},
|
||||
{x:(norm(x4-x3)-norm(y4-y3)+x4).toFixed(3), y:(norm(y4-y3)-norm(x4-x3)+y4).toFixed(3)}
|
||||
];
|
||||
path = path + ",M"+arr[0].x+","+arr[0].y+",L"+x4+","+y4+",L"+arr[1].x+","+arr[1].y;
|
||||
}
|
||||
/* function to be used for moving existent path(s), e.g. animate() or attr() */
|
||||
var move = "attr";
|
||||
/* applying path(s) */
|
||||
edge.fg && edge.fg[move]({path:path})
|
||||
|| (edge.fg = selfRef.path(path).attr({stroke: style && style.stroke || "#000", fill: "none"}).toBack());
|
||||
edge.bg && edge.bg[move]({path:path})
|
||||
|| style && style.fill && (edge.bg = style.fill.split && selfRef.path(path).attr({stroke: style.fill.split("|")[0], fill: "none", "stroke-width": style.fill.split("|")[1] || 3}).toBack());
|
||||
/* setting label */
|
||||
style && style.label
|
||||
&& (edge.label && edge.label.attr({x:(x1+x4)/2, y:(y1+y4)/2})
|
||||
|| (edge.label = selfRef.text((x1+x4)/2, (y1+y4)/2, style.label).attr({fill: "#000", "font-size": style["font-size"] || "12px"})));
|
||||
style && style.label && style["label-style"] && edge.label && edge.label.attr(style["label-style"]);
|
||||
style && style.callback && style.callback(edge);
|
||||
}
|
||||
}
|
||||
edge.draw();
|
||||
return edge;
|
||||
};
|
||||
//Raphael.prototype.set.prototype.dodo=function(){console.log("works");};
|
||||
|
|
@ -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 || 400;
|
||||
this.height = height || 400;
|
||||
var selfRef = this;
|
||||
this.r = Raphael(element, this.width, this.height);
|
||||
this.radius = 40; /* max dimension of a node */
|
||||
this.graph = graph;
|
||||
this.mouse_in = false;
|
||||
|
||||
/* TODO default node rendering function */
|
||||
if(!this.graph.render) {
|
||||
this.graph.render = function() {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Dragging
|
||||
*/
|
||||
this.isDrag = false;
|
||||
this.dragger = function (e) {
|
||||
this.dx = e.clientX;
|
||||
this.dy = e.clientY;
|
||||
selfRef.isDrag = this;
|
||||
this.set && this.set.animate({"fill-opacity": .1}, 200) && this.set.toFront();
|
||||
e.preventDefault && e.preventDefault();
|
||||
};
|
||||
|
||||
var d = document.getElementById(element);
|
||||
d.onmousemove = function (e) {
|
||||
e = e || window.event;
|
||||
if (selfRef.isDrag) {
|
||||
var bBox = selfRef.isDrag.set.getBBox();
|
||||
// TODO round the coordinates here (eg. for proper image representation)
|
||||
var newX = e.clientX - selfRef.isDrag.dx + (bBox.x + bBox.width / 2);
|
||||
var newY = e.clientY - selfRef.isDrag.dy + (bBox.y + bBox.height / 2);
|
||||
/* prevent shapes from being dragged out of the canvas */
|
||||
var clientX = e.clientX - (newX < 20 ? newX - 20 : newX > selfRef.width - 20 ? newX - selfRef.width + 20 : 0);
|
||||
var clientY = e.clientY - (newY < 20 ? newY - 20 : newY > selfRef.height - 20 ? newY - selfRef.height + 20 : 0);
|
||||
selfRef.isDrag.set.translate(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
|
||||
// console.log(clientX - Math.round(selfRef.isDrag.dx), clientY - Math.round(selfRef.isDrag.dy));
|
||||
for (var i in selfRef.graph.edges) {
|
||||
selfRef.graph.edges[i].connection && selfRef.graph.edges[i].connection.draw();
|
||||
}
|
||||
//selfRef.r.safari();
|
||||
selfRef.isDrag.dx = clientX;
|
||||
selfRef.isDrag.dy = clientY;
|
||||
}
|
||||
};
|
||||
d.onmouseup = function () {
|
||||
selfRef.isDrag && selfRef.isDrag.set.animate({"fill-opacity": .6}, 500);
|
||||
selfRef.isDrag = false;
|
||||
};
|
||||
this.draw();
|
||||
};
|
||||
Graph.Renderer.Raphael.prototype = {
|
||||
translate: function(point) {
|
||||
return [
|
||||
(point[0] - this.graph.layoutMinX) * this.factorX + this.radius,
|
||||
(point[1] - this.graph.layoutMinY) * this.factorY + this.radius
|
||||
];
|
||||
},
|
||||
|
||||
rotate: function(point, length, angle) {
|
||||
var dx = length * Math.cos(angle);
|
||||
var dy = length * Math.sin(angle);
|
||||
return [point[0]+dx, point[1]+dy];
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
this.factorX = (this.width - 2 * this.radius) / (this.graph.layoutMaxX - this.graph.layoutMinX);
|
||||
this.factorY = (this.height - 2 * this.radius) / (this.graph.layoutMaxY - this.graph.layoutMinY);
|
||||
for (i in this.graph.nodes) {
|
||||
this.drawNode(this.graph.nodes[i]);
|
||||
}
|
||||
for (var i = 0; i < this.graph.edges.length; i++) {
|
||||
this.drawEdge(this.graph.edges[i]);
|
||||
}
|
||||
},
|
||||
|
||||
drawNode: function(node) {
|
||||
var point = this.translate([node.layoutPosX, node.layoutPosY]);
|
||||
node.point = point;
|
||||
|
||||
/* if node has already been drawn, move the nodes */
|
||||
if(node.shape) {
|
||||
var oBBox = node.shape.getBBox();
|
||||
var opoint = { x: oBBox.x + oBBox.width / 2, y: oBBox.y + oBBox.height / 2};
|
||||
node.shape.translate(Math.round(point[0] - opoint.x), Math.round(point[1] - opoint.y));
|
||||
this.r.safari();
|
||||
return node;
|
||||
}/* else, draw new nodes */
|
||||
|
||||
var shape;
|
||||
|
||||
/* if a node renderer function is provided by the user, then use it
|
||||
or the default render function instead */
|
||||
if(!node.render) {
|
||||
node.render = function(r, node) {
|
||||
/* the default node drawing */
|
||||
var color = Raphael.getColor();
|
||||
var ellipse = r.ellipse(0, 0, 30, 20).attr({fill: color, stroke: color, "stroke-width": 2});
|
||||
/* set DOM node ID */
|
||||
ellipse.node.id = node.label || node.id;
|
||||
shape = r.set().
|
||||
push(ellipse).
|
||||
push(r.text(0, 30, node.label || node.id));
|
||||
return shape;
|
||||
}
|
||||
}
|
||||
/* or check for an ajax representation of the nodes */
|
||||
if(node.shapes) {
|
||||
// TODO ajax representation evaluation
|
||||
}
|
||||
|
||||
shape = node.render(this.r, node).hide();
|
||||
|
||||
shape.attr({"fill-opacity": .6});
|
||||
/* re-reference to the node an element belongs to, needed for dragging all elements of a node */
|
||||
shape.items.forEach(function(item){ item.set = shape; item.node.style.cursor = "move"; });
|
||||
shape.mousedown(this.dragger);
|
||||
|
||||
var box = shape.getBBox();
|
||||
shape.translate(Math.round(point[0]-(box.x+box.width/2)),Math.round(point[1]-(box.y+box.height/2)))
|
||||
//console.log(box,point);
|
||||
node.hidden || shape.show();
|
||||
node.shape = shape;
|
||||
},
|
||||
drawEdge: function(edge) {
|
||||
/* if this edge already exists the other way around and is undirected */
|
||||
if(edge.backedge)
|
||||
return;
|
||||
if(edge.source.hidden || edge.target.hidden) {
|
||||
edge.connection && edge.connection.fg.hide() | edge.connection.bg && edge.connection.bg.hide();
|
||||
return;
|
||||
}
|
||||
/* if edge already has been drawn, only refresh the edge */
|
||||
if(!edge.connection) {
|
||||
edge.style && edge.style.callback && edge.style.callback(edge); // TODO move this somewhere else
|
||||
edge.connection = this.r.connection(edge.source.shape, edge.target.shape, edge.style);
|
||||
return;
|
||||
}
|
||||
//FIXME showing doesn't work well
|
||||
edge.connection.fg.show();
|
||||
edge.connection.bg && edge.connection.bg.show();
|
||||
edge.connection.draw();
|
||||
}
|
||||
};
|
||||
Graph.Layout = {};
|
||||
Graph.Layout.Spring = function(graph) {
|
||||
this.graph = graph;
|
||||
this.iterations = 500;
|
||||
this.maxRepulsiveForceDistance = 6;
|
||||
this.k = 2;
|
||||
this.c = 0.01;
|
||||
this.maxVertexMovement = 0.5;
|
||||
this.layout();
|
||||
};
|
||||
Graph.Layout.Spring.prototype = {
|
||||
layout: function() {
|
||||
this.layoutPrepare();
|
||||
for (var i = 0; i < this.iterations; i++) {
|
||||
this.layoutIteration();
|
||||
}
|
||||
this.layoutCalcBounds();
|
||||
},
|
||||
|
||||
layoutPrepare: function() {
|
||||
for (i in this.graph.nodes) {
|
||||
var node = this.graph.nodes[i];
|
||||
node.layoutPosX = 0;
|
||||
node.layoutPosY = 0;
|
||||
node.layoutForceX = 0;
|
||||
node.layoutForceY = 0;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
layoutCalcBounds: function() {
|
||||
var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;
|
||||
|
||||
for (i in this.graph.nodes) {
|
||||
var x = this.graph.nodes[i].layoutPosX;
|
||||
var y = this.graph.nodes[i].layoutPosY;
|
||||
|
||||
if(x > maxx) maxx = x;
|
||||
if(x < minx) minx = x;
|
||||
if(y > maxy) maxy = y;
|
||||
if(y < miny) miny = y;
|
||||
}
|
||||
|
||||
this.graph.layoutMinX = minx;
|
||||
this.graph.layoutMaxX = maxx;
|
||||
this.graph.layoutMinY = miny;
|
||||
this.graph.layoutMaxY = maxy;
|
||||
},
|
||||
|
||||
layoutIteration: function() {
|
||||
// Forces on nodes due to node-node repulsions
|
||||
|
||||
var prev = new Array();
|
||||
for(var c in this.graph.nodes) {
|
||||
var node1 = this.graph.nodes[c];
|
||||
for (var d in prev) {
|
||||
var node2 = this.graph.nodes[prev[d]];
|
||||
this.layoutRepulsive(node1, node2);
|
||||
|
||||
}
|
||||
prev.push(c);
|
||||
}
|
||||
|
||||
// Forces on nodes due to edge attractions
|
||||
for (var i = 0; i < this.graph.edges.length; i++) {
|
||||
var edge = this.graph.edges[i];
|
||||
this.layoutAttractive(edge);
|
||||
}
|
||||
|
||||
// Move by the given force
|
||||
for (i in this.graph.nodes) {
|
||||
var node = this.graph.nodes[i];
|
||||
var xmove = this.c * node.layoutForceX;
|
||||
var ymove = this.c * node.layoutForceY;
|
||||
|
||||
var max = this.maxVertexMovement;
|
||||
if(xmove > max) xmove = max;
|
||||
if(xmove < -max) xmove = -max;
|
||||
if(ymove > max) ymove = max;
|
||||
if(ymove < -max) ymove = -max;
|
||||
|
||||
node.layoutPosX += xmove;
|
||||
node.layoutPosY += ymove;
|
||||
node.layoutForceX = 0;
|
||||
node.layoutForceY = 0;
|
||||
}
|
||||
},
|
||||
|
||||
layoutRepulsive: function(node1, node2) {
|
||||
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);
|
||||
}
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue