| @@ -20,25 +20,25 @@ | |||||
| </head> | </head> | ||||
| <body> | <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=node_info class=hidden> nothing </div> | ||||
| <div id=server_info class=hidden> </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> | <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 X</a></li> | ||||
| <li><a href="#">Measure in Y</a></li> | <li><a href="#">Measure in Y</a></li> | ||||
| <li><a href="#">Measure in Z</a></li> | <li><a href="#">Measure in Z</a></li> | ||||
| <li><a href="#">Act Hadamard</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> | </ul> | ||||
| </div> | </div> | ||||
| @@ -27,7 +27,7 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-fam | |||||
| } | } | ||||
| #pallette { | |||||
| #node_data { | |||||
| background-color: black; | background-color: black; | ||||
| color:white; | color:white; | ||||
| padding: 10px; | padding: 10px; | ||||
| @@ -13,6 +13,13 @@ abj.add_nodes = function(nodes) { | |||||
| nodes.forEach(add_node); | 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.add_edge = function(a, b) { | ||||
| abj.adj[a][b] = {}; | abj.adj[a][b] = {}; | ||||
| abj.adj[b][a] = {}; | abj.adj[b][a] = {}; | ||||
| @@ -34,10 +41,10 @@ abj.has_edge = function(a, b) { | |||||
| }; | }; | ||||
| abj.toggle_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 { | } 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) { | abj.act_hadamard = function(node) { | ||||
| act_local_rotation(node, 10); | |||||
| abj.act_local_rotation(node, 10); | |||||
| }; | }; | ||||
| abj.is_sole_member = function(node, group) { | abj.is_sole_member = function(node, group) { | ||||
| @@ -84,21 +91,21 @@ abj.is_sole_member = function(node, group) { | |||||
| }; | }; | ||||
| abj.act_cz = function(a, b) { | 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); | 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); | 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); | 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]; | 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[a].vop = new_state[1]; | ||||
| abj.node[b].vop = new_state[2]; | abj.node[b].vop = new_state[2]; | ||||
| if (new_state[0] != edge) { | 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; | var pi2 = Math.PI / 2; | ||||
| editor.selection = undefined; | editor.selection = undefined; | ||||
| editor.mouseOver = undefined; | |||||
| editor.orientations = [ | editor.orientations = [ | ||||
| new THREE.Euler(pi2, 0, 0), | new THREE.Euler(pi2, 0, 0), | ||||
| @@ -12,11 +13,10 @@ editor.orientations = [ | |||||
| editor.onFreeMove = function() { | editor.onFreeMove = function() { | ||||
| var found = editor.findNodeOnRay(mouse.ray); | var found = editor.findNodeOnRay(mouse.ray); | ||||
| if (editor.selection !== found) { | |||||
| editor.selection = found; | |||||
| if (editor.mouseOver !== found) { | |||||
| editor.mouseOver = found; | |||||
| if (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 { | } else { | ||||
| gui.hideNodeMessage(); | gui.hideNodeMessage(); | ||||
| } | } | ||||
| @@ -29,6 +29,9 @@ editor.focus = function(node) { | |||||
| gui.hideNodeMessage(); | gui.hideNodeMessage(); | ||||
| editor.selection = node; | editor.selection = node; | ||||
| gui.serverMessage("Selected node " + 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) { | editor.addQubitAtPoint = function(point) { | ||||
| @@ -44,11 +47,12 @@ editor.addQubitAtPoint = function(point) { | |||||
| if (delta.length()<0.1){ return; } | 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(); | graph.update(); | ||||
| gui.serverMessage("Created node."); | |||||
| gui.serverMessage("Created node " + new_node +"."); | |||||
| }; | }; | ||||
| editor.onClick = function() { | 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() { | editor.prepare = function() { | ||||
| mouse.onFreeMove = editor.onFreeMove; | mouse.onFreeMove = editor.onFreeMove; | ||||
| mouse.onClick = editor.onClick; | mouse.onClick = editor.onClick; | ||||
| mouse.onShiftClick = editor.onShiftClick; | |||||
| mouse.onCtrlClick = editor.onCtrlClick; | |||||
| document.addEventListener("keydown", editor.onKey, false); | document.addEventListener("keydown", editor.onKey, false); | ||||
| editor.makeGrid(); | editor.makeGrid(); | ||||
| }; | }; | ||||
| editor.onKey = function(evt) { | 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) { | editor.setOrientation = function(orientation) { | ||||
| @@ -104,3 +136,12 @@ editor.findNodeOnRay = function(ray) { | |||||
| } | } | ||||
| return undefined; | 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 = {}; | var graph = {}; | ||||
| graph.colors = ["lightblue", "green", "yellow", "red", "pink", "orange", "purple"]; | |||||
| graph.colors = ["red", "green", "yellow", "green", "pink", "orange", "purple"]; | |||||
| graph.prepare = function() { | graph.prepare = function() { | ||||
| materials.prepare(); | materials.prepare(); | ||||
| @@ -15,6 +15,6 @@ window.onload = function() { | |||||
| gui.prepare(); | gui.prepare(); | ||||
| mouse.prepare(); | mouse.prepare(); | ||||
| editor.prepare(); | editor.prepare(); | ||||
| bootstrap(); | |||||
| //bootstrap(); | |||||
| gui.loop(); | gui.loop(); | ||||
| }; | }; | ||||
| @@ -20,6 +20,6 @@ websocket.connect = function(update) { | |||||
| }; | }; | ||||
| ws.onclose = function(evt) { | 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); | |||||
| }; | }; | ||||
| }; | }; | ||||