diff --git a/static/scripts/editor.js b/static/scripts/editor.js index 52f4584..d08185c 100644 --- a/static/scripts/editor.js +++ b/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); diff --git a/static/scripts/graph.js b/static/scripts/graph.js index 586eea2..cb55171 100644 --- a/static/scripts/graph.js +++ b/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"; diff --git a/static/scripts/materials.js b/static/scripts/materials.js index 90f55f6..5c0bca6 100644 --- a/static/scripts/materials.js +++ b/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); }; diff --git a/templates/doc.md b/templates/doc.md index 10b1336..87263f0 100644 --- a/templates/doc.md +++ b/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 Shift-click another node to act a CZ gate - Press Space to rotate the grid +- Use the Up and Down arrow keys to move the grid normal to its plane. Arbitrary 3D structures can be constructed by rotating the grid. diff --git a/templates/index.html b/templates/index.html index 26a190f..30b52e1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -47,7 +47,7 @@