diff options
Diffstat (limited to 'javascripts/lib/graffle.js')
| -rw-r--r-- | javascripts/lib/graffle.js | 158 |
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++; + } + +}; |