| @@ -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); | |||
| }; | |||
| }; | |||