Trying to get curves to toggle

static/scripts/editor.js

@@ -115,11 +115,26 @@ editor.prepare = function() {
 };
 
 editor.onKey = function(evt) {
+    console.log(evt.keyCode);
     if (evt.keyCode === 32) {
         editor.setOrientation((editor.orientation + 1) % 3);
+        editor.gridTimeOut = 0;
     }
-    if (evt.keyCode === 46 || evt.keyCode === 68) {
+    if (evt.keyCode === 38) {
+        editor.moveGridNormal(1);
+        editor.gridTimeOut = 0;
+    }
+    if (evt.keyCode === 40) {
+        editor.moveGridNormal(-1);
+        editor.gridTimeOut = 0;
+    }
+    if (evt.keyCode === 46) {
         editor.deleteNode();
+        editor.gridTimeOut = 0;
+    }
+    if (evt.keyCode === 67) {
+        materials.curveProperties.splineDensity = materials.curveProperties.splineDensity == 10 ? 0 : 10;
+        gui.render();
     }
 };
 
@@ -134,6 +149,17 @@ editor.setOrientation = function(orientation) {
     gui.render();
 };
 
+editor.moveGridNormal = function(delta) {
+    var orientation = editor.orientation;
+    var rotation = editor.orientations[orientation];
+    var normal = new THREE.Vector3(0, 1, 0);
+    normal.applyEuler(rotation);
+    editor.grid.position.addScaledVector(normal, delta);
+    editor.plane = new THREE.Plane();
+    editor.plane.setFromNormalAndCoplanarPoint(normal, editor.grid.position);
+    gui.render();
+};
+
 editor.makeGrid = function() {
     editor.grid = new THREE.GridHelper(10, 1);
     editor.grid.setColors(0xbbbbbb, 0xeeeeee);

static/scripts/graph.js

@@ -50,7 +50,7 @@ graph.update = function(newState) {
     if (editor.selection) {
         var node = editor.selection;
         if (Object.prototype.hasOwnProperty.call(abj.node, node)) {
-            editor.grid.position.copy(abj.node[node].position);
+            // Do nothing ... 
             gui.controls.target.copy(abj.node[node].position);
             node_name.innerHTML = "Node " + node;
             node_data.className = "visible";

static/scripts/materials.js

@@ -1,37 +1,36 @@
 var materials = {};
 
-var curveProperties = {
-    splineDensity: 10,
-    curvature: 20
-};
-
 // Is called on boot
 materials.prepare = function() {
     var ballSprite = new THREE.Texture(document.getElementById("ball"));
     ballSprite.needsUpdate = true;
     materials.edge = new THREE.LineBasicMaterial({
-        color: "gray",
+        color: "black",
         transparent: false,
-        linewidth: 3
+        linewidth: 1
     });
     materials.edge.depthTest = false;
     materials.qubit = new THREE.PointsMaterial({
-        size: 0.6,
+        size: 0.4,
         map: ballSprite,
         alphaTest: 0.5,
         transparent: true,
         vertexColors: THREE.VertexColors
     });
+    materials.curveProperties = {
+        splineDensity: 10,
+        curvature: 20
+    };
 };
 
 
 materials.makeCurve = function(a, b) {
     var length = new THREE.Vector3().subVectors(a, b).length();
-    var bend = new THREE.Vector3(length / curveProperties.curvature, length / curveProperties.curvature, 0);
+    var bend = new THREE.Vector3(length / materials.curveProperties.curvature, length / materials.curveProperties.curvature, 0);
     var mid = new THREE.Vector3().add(a).add(b).multiplyScalar(0.5).add(bend);
     var spline = new THREE.CatmullRomCurve3([a, mid, b]);
     var geometry = new THREE.Geometry();
-    var splinePoints = spline.getPoints(curveProperties.splineDensity);
+    var splinePoints = spline.getPoints(materials.curveProperties.splineDensity);
     Array.prototype.push.apply(geometry.vertices, splinePoints);
     return new THREE.Line(geometry, materials.edge);
 };

templates/doc.md

@@ -9,6 +9,7 @@ The state is initialized as a blank canvas without any qubits.
 - Click on a qubit to view its properties
 - Select a qubit, then <kbd>Shift</kbd>-click another node to act a CZ gate
 - Press <kbd>Space</kbd> to rotate the grid
+- Use the <kbd>Up</kbd> and <kbd>Down</kbd> arrow keys to move the grid normal to its plane.
 
 Arbitrary 3D structures can be constructed by rotating the grid.
 

templates/index.html

@@ -47,7 +47,7 @@
         <li><a onclick="editor.raussendorf()">Raussendorf</a></li>
         <li><a onclick="share()">Share</a></li>
         <li><a href="/{{uuid}}/download">Download</a></li>
-        <li><a href="/doc" id=help>Help</a></li>
+        <li><a href="/doc" id=help>Documentation</a></li>
     </ul>
 </div>