'
)
$("input#label", info).keyup (function(){ el.value = this.value; drawAll() })
$("input#label", info).change(function(){ el.value = this.value; updateState() })
+ $("a.splitbtn", info).click(function(){ graph.splitEdge(el); updateState() })
$("a.contractbtn", info).click(function(){ graph.contractEdge(el); updateState() })
$("a.removebtn", info).click(function(){ removeElement(el, graph, cx) })
}
@@ -1176,20 +1232,37 @@ function displayInfo(panel, el, cx){
var title = (adj.length > 0 ? ucf(adj.join(" ")) + " g" : "G") + "raph" + (autoname ? " " + autoname : "")
var info = $(
// Graph info
- '
' +
+ '
' +
'
' + title + '
' +
- '
Vertices: ' + graph.vertices.length + '
' +
- '
Edges: ' + graph.edges.length + '
' +
- '
Deg. seq.: ' + (seq ? seq : ' ') + '
' +
- '
Sp. trees: ' + graph.spanningTreeCount() + '
' +
+ '
' +
+ '
Vertices: ' + graph.vertices.length + '
' +
+ '
Edges: ' + graph.edges.length + '
' +
+ '
' +
+ '
Deg. seq.: ' + (seq ? seq : ' ') + '
' +
+ '
Sp. trees: ' + graph.spanningTreeCount() + '
' +
+ '
' +
'
'
)
- //$("a.sizebtn", info).click(function(){})
- $("a.tikzbtn", info).click(function(){ alert(graphs[gi].toTikZ()) }) // Need modal
}
panel.empty().append(info)
}
+function displayGraphList(panel){
+ var list = ""
+ for(var i in graphs){
+ list += '
Graph ' + (parseInt(i)+1) + ''
+ }
+ list = $(list)
+ $("a", list).click(function(evt){
+ var id = this.parentNode.id.split("-")
+ if(id.length > 1 && id[0] == "graph" && is_numeric(id[1])){
+ gi = id[1]
+ updateState()
+ }
+ })
+ $("ul.elements", panel).empty().append(list)
+}
+
function displayElements(panel){
var list = "", graph = graphs[gi], a
// Vertices
@@ -1266,6 +1339,13 @@ function clearModal(){
}
}
+function setCanvasSize(){
+ context.canvas.width = $(window).width() - 310
+ context.canvas.height = $(window).height() - 190
+ w = context.canvas.width
+ h = context.canvas.height
+}
+
// Our example -------------------------------------------------------------------------------------------------------------
// Lucy in the sky with the diamond
@@ -1290,53 +1370,70 @@ var dedges = [ // [ [1, 2], [2, 4], [1, 3], [3, 4], [2, 3] ]
// Initialising the document ------------------------------------------------------------------------------------------------
$(document).ready(function(){
-
+
// Variables (I really need to move these out of global scope...)
ce = $("canvas")
canvas = ce.get(0)
- cx = canvas.getContext("2d")
+ context = canvas.getContext("2d")
var scale = 1
-
+
// Canvas settings
- cx.scale(scale, scale)
- cx.font = "sans-serif"
- cx.textAlign = "center"
- cx.textBaseline = "middle"
-
+ context.scale(scale, scale)
+ context.font = "sans-serif"
+ context.textAlign = "center"
+ context.textBaseline = "middle"
+
// Elements
ui.properties = $("#info")
ui.graphs = $("#graphs")
ui.elements = $("#elements")
ui.styles = $("#styles")
-
+
// Example
var diamond = new Graph(dvertices, dedges)
-
+
// Mouse
ce.mousedown (function(){ dragging = true })
$("body").mouseup(function(){ dragging = false })
ce.mousemove(canvasMove)
ce.click(canvasClick)
$(document).keydown(canvasKey)
-
+
// Touch
- document.body.addEventListener("touchstart", touchStart, false)
- document.body.addEventListener("gesturechanged", noevt, false)
- document.body.addEventListener("touchend", touchEnd, false)
- document.body.addEventListener("touchmove", touchMove, false)
-
+ if(touch){
+ document.body.addEventListener("touchstart", touchStart, false)
+ document.body.addEventListener("gesturechanged", noevt, false)
+ document.body.addEventListener("touchend", touchEnd, false)
+ document.body.addEventListener("touchmove", touchMove, false)
+ }
+
// Buttons
$("#btnselect" ).click(function(){ clearUimode() })
- $("#btnaddvertex").click(function(){ canvasStartAddVertex(cx) })
- $("#btnaddedge" ).click(function(){ canvasStartAddEdge(cx) })
+ $("#btnaddvertex").click(function(){ canvasStartAddVertex(context) })
+ $("#btnaddedge" ).click(function(){ canvasStartAddEdge(context) })
$("#btninfo" ).click(function(){ ui.properties.toggle() })
- $("#btnload" ).click(function(){ var j = prompt("Paste here a graph saved as a string by this app:"); if(j != null && j.length > 0){ clearCanvas(cx, true); graphs = []; graphFromJSON(j); drawAll(cx) } })
+ $("#btnload" ).click(function(){ var j = prompt("Paste here a graph saved as a string by this app:"); if(j != null && j.length > 0){ clearCanvas(context, true); graphs = []; graphFromJSON(j); drawAll(context) } })
$("#btnsave" ).click(function(){ prompt("Store the following string somewhere and paste it back here when you want to load this graph again.", JSON.stringify(graphs[gi].toJSON())) })
- $("#btnclear" ).click(function(){ clearCanvas(cx) })
-
+ $("#btnexport" ).click(function(){ alert(graphs[gi].toTikZ()) }) // Need modal
+ $("#btnclear" ).click(function(){ clearCanvas(context) })
+ $("#graphs a.add").click(function(){ addGraph() })
+
+ // Resize
+ $(window).resize(updateState)
+
// Let's go!
updateState()
})
+// Expose certain things to the world
+
+return {
+ Graph: Graph,
+ Vertex: Vertex,
+ Edge: Edge
+}
+
+})(jQuery)
+
// JSON runtime, if you do not already have it
if(!("JSON" in window)){eval(function(p,a,c,k,e,d){e=function(c){return(c
35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('3(!o.p){p={}}(5(){5 f(n){7 n<10?\'0\'+n:n}3(6 1b.z.q!==\'5\'){1b.z.q=5(h){7 o.1C()+\'-\'+f(o.1T()+1)+\'-\'+f(o.1O())+\'T\'+f(o.1D())+\':\'+f(o.1M())+\':\'+f(o.1Q())+\'Z\'};X.z.q=1K.z.q=1I.z.q=5(h){7 o.1V()}}y L=/[\\1W\\13\\1o-\\1l\\1m\\1i\\1n\\1s-\\1p\\1j-\\15\\17-\\14\\18\\1f-\\19]/g,M=/[\\\\\\"\\1B-\\1z\\1w-\\1y\\13\\1o-\\1l\\1m\\1i\\1n\\1s-\\1p\\1j-\\15\\17-\\14\\18\\1f-\\19]/g,8,H,1e={\'\\b\':\'\\\\b\',\'\\t\':\'\\\\t\',\'\\n\':\'\\\\n\',\'\\f\':\'\\\\f\',\'\\r\':\'\\\\r\',\'"\':\'\\\\"\',\'\\\\\':\'\\\\\\\\\'},l;5 N(m){M.1h=0;7 M.11(m)?\'"\'+m.C(M,5(a){y c=1e[a];7 6 c===\'m\'?c:\'\\\\u\'+(\'1k\'+a.1r(0).12(16)).1g(-4)})+\'"\':\'"\'+m+\'"\'}5 E(h,w){y i,k,v,e,K=8,9,2=w[h];3(2&&6 2===\'x\'&&6 2.q===\'5\'){2=2.q(h)}3(6 l===\'5\'){2=l.P(w,h,2)}1u(6 2){J\'m\':7 N(2);J\'S\':7 1v(2)?X(2):\'D\';J\'1x\':J\'D\':7 X(2);J\'x\':3(!2){7\'D\'}8+=H;9=[];3(Q.z.12.1S(2)===\'[x 1R]\'){e=2.e;G(i=0;iGraph Theory JS/HTML5
-
-
-
+
+
+
+
-