major

1 files changed, 158 insertions, 0 deletions

diff --git a/javascripts/lib/graffle.js b/javascripts/lib/graffle.js
new file mode 100644
index 0000000..de1456e
--- /dev/null
+++ b/javascripts/lib/graffle.js
@@ -0,0 +1,158 @@
+Raphael.fn.connection = function (obj1, obj2, line, bg) {
+    if (obj1.line && obj1.from && obj1.to) {
+        line = obj1;
+        obj1 = line.from;
+        obj2 = line.to;
+    }
+    var bb1 = obj1.getBBox(),
+        bb2 = obj2.getBBox(),
+        p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
+        {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
+        {x: bb1.x - 1, y: bb1.y + bb1.height / 2},
+        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
+        {x: bb2.x + bb2.width / 2, y: bb2.y - 1},
+        {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
+        {x: bb2.x - 1, y: bb2.y + bb2.height / 2},
+        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
+        d = {}, dis = [];
+    for (var i = 0; i < 4; i++) {
+        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]] = [i, j];
+            }
+        }
+    }
+    if (dis.length == 0) {
+        var res = [0, 4];
+    } else {
+        res = d[Math.min.apply(Math, dis)];
+    }
+    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);
+    var 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);
+    var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
+	//path = Raphael.fn.arrow();
+	
+	if (line && line.line) {
+        line.bg && line.bg.attr({path: path});
+        line.line.attr({path: path});
+    } else {
+        var color = typeof line == "string" ? line : "#000";
+        return {
+            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
+            line: this.path(path).attr({stroke: color, fill: "none"}),
+            from: obj1,
+            to: obj2
+        };
+    }
+};
+
+Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
+    var angle = Math.atan2(x1-x2,y2-y1);
+    angle = (angle / (2 * Math.PI)) * 360;
+    var arrowPath = this.path("M" + x2 + " " + y2 + " L" + (x2 - size) + " " + (y2 - size) + " L" + (x2 - size) + " " + (y2 + size) + " L" + x2 + " " + y2 ).attr("fill","black").rotate((90+angle),x2,y2);
+    return [linePath,arrowPath];
+};
+
+var el;
+window.onload = function () {
+	//document.write('<pre>')
+	for (var state in ttable) {
+		//document.write(state+' --><br />')
+		for (var i=0; i < ALPHABET.length; i++) {
+			if(ttable[state][ALPHABET[i]]) {
+				//document.write('\t'+ALPHABET[i]+': ')
+				//document.write(ttable[state][ALPHABET[i]]+'<br />');	
+			}
+		}
+	}
+	//document.write('</pre>');
+	
+	
+    var dragger = function () {
+        this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
+        this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
+        this.animate({"fill-opacity": .2}, 500);
+    },
+        move = function (dx, dy) {
+            var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
+            this.attr(att);
+            for (var i = connections.length; i--;) {
+                r.connection(connections[i]);
+            }
+            r.safari();
+        },
+        up = function () {
+            this.animate({"fill-opacity": 0}, 500);
+        },
+        r = Raphael("holder", 640, 480),
+        connections = [],
+		shapes = [];
+		var q = 10;
+		for (var state in ttable) {
+			shapes.push(
+				r.ellipse(190+q, 100, 20, 20)
+			);
+			q+=60;
+		}
+		
+		
+        /*shapes = [  r.ellipse(190, 100, 30, 20),
+                    r.rect(290, 80, 60, 40, 10),
+                    r.rect(290, 180, 60, 40, 2),
+                    r.ellipse(450, 100, 20, 20)
+                ];*/
+    for (var i = 0, ii = shapes.length; i < ii; i++) {
+        var color = Raphael.getColor();
+        shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
+        shapes[i].drag(move, dragger, up);
+    }
+    
+	var xx = new Array();
+	var oo = 0;
+	for (var state in ttable) {
+		if (ttable[state].isFinal) {
+			xx[oo] = true;
+		} else {
+			xx[oo] = false;
+		};
+		oo++;
+	}
+
+	for (var i = 0, ii = shapes.length; i < ii; i++) {
+		if (xx[i]) {
+			shapes[i].attr({"stroke-width": 4});
+		};
+	}
+    //connections.push(r.connection(shapes[0], shapes[1], "#000"));
+    //connections.push(r.connection(shapes[1], shapes[2], "#000"));
+    //connections.push(r.connection(shapes[1], shapes[3], "#000"));
+
+	var ii = jj = 0;
+	for (var state in ttable) {
+		for (var i=0; i < ALPHABET.length; i++) {
+			jj =0;
+			if(ttable[state][ALPHABET[i]]) {
+				for (var s2 in ttable) {
+					if (ttable[state][ALPHABET[i]] == s2) {
+						connections.push(r.connection(shapes[ii], shapes[jj], '#000'));	
+					};
+					jj++;
+				};
+		
+			}
+		}
+		ii++;
+	}
+
+};