@@ -20,25 +20,25 @@ | |||
</head> | |||
<body> | |||
<img id="ball" src="img/ball.png" style=display:none;> | |||
<img id="tip" src="img/tip.png" style=display:none;> | |||
<img id=ball src="img/ball.png" style=display:none;> | |||
<img id=tip src="img/tip.png" style=display:none;> | |||
<div id=node_info class=hidden> nothing </div> | |||
<div id=server_info class=hidden> </div> | |||
<div id=pallette> | |||
<h3>Node (5,2)</h3> | |||
<div id=node_data class=hidden> | |||
<h3 id=node_name></h3> | |||
<ul> | |||
<li>VOP: Hadamard</li> | |||
<li>x: 0 | y: 5 | z: 10</li> | |||
<li id=node_vop></li> | |||
<li><a href="#">Measure in X</a></li> | |||
<li><a href="#">Measure in Y</a></li> | |||
<li><a href="#">Measure in Z</a></li> | |||
<li><a href="#">Act Hadamard</a></li> | |||
<li> | |||
<a href="#">IA</a> | |||
<a href="#">IB</a> | |||
</li> | |||
<li><a href="#">Delete</a></li> | |||
<li><a href="#">Act Phase</a></li> | |||
<!--<li>--> | |||
<!--<a href="#">IA</a>--> | |||
<!--<a href="#">IB</a>--> | |||
<!--</li>--> | |||
<li><a href="#" onclick="editor.deleteNode()">Delete</a></li> | |||
</ul> | |||
</div> | |||
@@ -27,7 +27,7 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-fam | |||
} | |||
#pallette { | |||
#node_data { | |||
background-color: black; | |||
color:white; | |||
padding: 10px; | |||
@@ -13,6 +13,13 @@ abj.add_nodes = function(nodes) { | |||
nodes.forEach(add_node); | |||
}; | |||
abj.del_node = function(node) { | |||
for (var i in abj.adj[node]) { | |||
abj.del_edge(node, i); | |||
} | |||
delete abj.node[node]; | |||
}; | |||
abj.add_edge = function(a, b) { | |||
abj.adj[a][b] = {}; | |||
abj.adj[b][a] = {}; | |||
@@ -34,10 +41,10 @@ abj.has_edge = function(a, b) { | |||
}; | |||
abj.toggle_edge = function(a, b) { | |||
if (has_edge(a, b)) { | |||
del_edge(a, b); | |||
if (abj.has_edge(a, b)) { | |||
abj.del_edge(a, b); | |||
} else { | |||
add_edge(a, b); | |||
abj.add_edge(a, b); | |||
} | |||
}; | |||
@@ -76,7 +83,7 @@ abj.act_local_rotation = function(node, operation) { | |||
}; | |||
abj.act_hadamard = function(node) { | |||
act_local_rotation(node, 10); | |||
abj.act_local_rotation(node, 10); | |||
}; | |||
abj.is_sole_member = function(node, group) { | |||
@@ -84,21 +91,21 @@ abj.is_sole_member = function(node, group) { | |||
}; | |||
abj.act_cz = function(a, b) { | |||
if (is_sole_member(abj.adj[a], b)) { | |||
if (abj.is_sole_member(abj.adj[a], b)) { | |||
remove_vop(a, b); | |||
} | |||
if (is_sole_member(abj.adj[b], a)) { | |||
if (abj.is_sole_member(abj.adj[b], a)) { | |||
remove_vop(b, a); | |||
} | |||
if (is_sole_member(abj.adj[a], b)) { | |||
if (abj.is_sole_member(abj.adj[a], b)) { | |||
remove_vop(a, b); | |||
} | |||
var edge = has_edge(a, b); | |||
var edge = abj.has_edge(a, b); | |||
var new_state = tables.cz_table[edge ? 1 : 0][abj.node[a].vop][abj.node[b].vop]; | |||
abj.node[a].vop = new_state[1]; | |||
abj.node[b].vop = new_state[2]; | |||
if (new_state[0] != edge) { | |||
toggle_edge(a, b); | |||
abj.toggle_edge(a, b); | |||
} | |||
}; | |||
@@ -2,6 +2,7 @@ var editor = {}; | |||
var pi2 = Math.PI / 2; | |||
editor.selection = undefined; | |||
editor.mouseOver = undefined; | |||
editor.orientations = [ | |||
new THREE.Euler(pi2, 0, 0), | |||
@@ -12,11 +13,10 @@ editor.orientations = [ | |||
editor.onFreeMove = function() { | |||
var found = editor.findNodeOnRay(mouse.ray); | |||
if (editor.selection !== found) { | |||
editor.selection = found; | |||
if (editor.mouseOver !== found) { | |||
editor.mouseOver = found; | |||
if (found) { | |||
gui.nodeMessage("Node " + found + " (VOP:" + abj.node[found].vop + ")" + | |||
"<br/>" + "Click to edit neighbourhood"); | |||
gui.nodeMessage("Node " + found + " (VOP:" + abj.node[found].vop + ")"); | |||
} else { | |||
gui.hideNodeMessage(); | |||
} | |||
@@ -29,6 +29,9 @@ editor.focus = function(node) { | |||
gui.hideNodeMessage(); | |||
editor.selection = node; | |||
gui.serverMessage("Selected node " + node + "."); | |||
node_name.innerHTML = "Node " + node; | |||
node_data.className = "visible"; | |||
node_vop.innerHTML = "VOP: " + abj.node[node].vop; | |||
}; | |||
editor.addQubitAtPoint = function(point) { | |||
@@ -44,11 +47,12 @@ editor.addQubitAtPoint = function(point) { | |||
if (delta.length()<0.1){ return; } | |||
} | |||
abj.add_node(abj.order(), { position: point }); | |||
editor.grid.position.copy(point); | |||
gui.controls.target.copy(point); | |||
// TODO: This SUCKS | |||
var new_node = Math.random()*100000|0; | |||
abj.add_node(new_node, { position: point, vop:0 }); | |||
editor.focus(new_node); | |||
graph.update(); | |||
gui.serverMessage("Created node."); | |||
gui.serverMessage("Created node " + new_node +"."); | |||
}; | |||
editor.onClick = function() { | |||
@@ -63,16 +67,44 @@ editor.onClick = function() { | |||
} | |||
}; | |||
editor.onShiftClick = function() { | |||
var found = editor.findNodeOnRay(mouse.ray); | |||
if (found === undefined){ return; } | |||
if (editor.selection === undefined){ return; } | |||
if (found === editor.selection){ return; } | |||
abj.act_cz(found, editor.selection); | |||
editor.focus(found); | |||
gui.serverMessage("Acted CZ between " + found + " & " + editor.selection + "."); | |||
graph.update(); | |||
}; | |||
editor.onCtrlClick = function() { | |||
var found = editor.findNodeOnRay(mouse.ray); | |||
if (found === undefined){ return; } | |||
if (editor.selection === undefined){ return; } | |||
editor.focus(found); | |||
abj.act_hadamard(found); | |||
gui.serverMessage("Acted H on node " + found + "."); | |||
graph.update(); | |||
}; | |||
editor.prepare = function() { | |||
mouse.onFreeMove = editor.onFreeMove; | |||
mouse.onClick = editor.onClick; | |||
mouse.onShiftClick = editor.onShiftClick; | |||
mouse.onCtrlClick = editor.onCtrlClick; | |||
document.addEventListener("keydown", editor.onKey, false); | |||
editor.makeGrid(); | |||
}; | |||
editor.onKey = function(evt) { | |||
if (evt.keyCode !== 32) {return;} | |||
editor.setOrientation((editor.orientation + 1) % 3); | |||
if (evt.keyCode === 32) { | |||
editor.setOrientation((editor.orientation + 1) % 3); | |||
} | |||
if (evt.keyCode === 46 || evt.keyCode === 68) { | |||
editor.deleteNode(); | |||
} | |||
}; | |||
editor.setOrientation = function(orientation) { | |||
@@ -104,3 +136,12 @@ editor.findNodeOnRay = function(ray) { | |||
} | |||
return undefined; | |||
}; | |||
editor.deleteNode = function() { | |||
if (editor.selection === undefined){ return; } | |||
abj.del_node(editor.selection); | |||
graph.update(); | |||
gui.serverMessage("Deleted node " + editor.selection + "."); | |||
editor.selection = undefined; | |||
node_data.className = "hidden"; | |||
}; |
@@ -1,5 +1,5 @@ | |||
var graph = {}; | |||
graph.colors = ["lightblue", "green", "yellow", "red", "pink", "orange", "purple"]; | |||
graph.colors = ["red", "green", "yellow", "green", "pink", "orange", "purple"]; | |||
graph.prepare = function() { | |||
materials.prepare(); | |||
@@ -15,6 +15,6 @@ window.onload = function() { | |||
gui.prepare(); | |||
mouse.prepare(); | |||
editor.prepare(); | |||
bootstrap(); | |||
//bootstrap(); | |||
gui.loop(); | |||
}; |
@@ -20,6 +20,6 @@ websocket.connect = function(update) { | |||
}; | |||
ws.onclose = function(evt) { | |||
gui.serverMessage("Connection to server lost. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.", true); | |||
gui.serverMessage("No connection to server. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.", true); | |||
}; | |||
}; |