Proof of principle

static/scripts/editor.js

@@ -1,6 +1,5 @@
 var editor = {};
 editor.nearest = undefined;
-editor.gimbalVertices = [];
 
 editor.onFreeMove = function() {
     var n = editor.nearestNode(mouse.ray);
@@ -17,55 +16,62 @@ editor.onFreeMove = function() {
 
 editor.onClick = function() {
     var n = editor.nearestNode(mouse.ray);
-    //if (n.type=="node") {
+    if (n){
         var p = abj.meta[n].position;
-        editor.gimbal.position.set(p.x, p.y, p.z);
+        editor.grid.position.set(p.x, p.y, p.z);
         gui.controls.target.set(p.x, p.y, p.z);
         gui.hideNodeMessage();
         editor.nearest = undefined;
-        gui.render();
-    //}
+        gui.serverMessage("Selected node " + n + "");
+    } else {
+        //TODO: ghastly
+        var intersection = mouse.ray.intersectPlane(editor.plane);
+        intersection.x = Math.round(intersection.x, 0);
+        intersection.y = Math.round(intersection.y, 0);
+        intersection.z = Math.round(intersection.z, 0);
+        var newNode = abj.order();
+        abj.add_node(newNode, {position:intersection});
+        editor.grid.position.set(intersection.x, intersection.y, intersection.z);
+        gui.controls.target.set(intersection.x, intersection.y, intersection.z);
+        graph.update();
+        gui.serverMessage("Created node " + newNode + " at ");
+    }
 };
 
 editor.prepare = function() {
     mouse.onFreeMove = editor.onFreeMove;
     mouse.onClick = editor.onClick;
-    editor.makeGimbal();
+    document.addEventListener("keydown", editor.onKey, false); 
+    editor.makeGrid();
 };
 
-// Gets a reference to the node nearest to the mouse cursor
-editor.nearestNode = function(ray) {
-    for (var i=0; i < editor.gimbalVertices.length; ++i) {
-        if (ray.distanceSqToPoint(editor.gimbalVertices[i]) < 0.03) {
-            //return {type: "gimbal", node: i};
-        }
+editor.onKey = function(evt){
+    if (evt.keyCode==32){
+        editor.grid.rotation.x += Math.PI/2;
+        var m = new THREE.Matrix4();
+        m.makeRotationX(Math.PI/2);
+        editor.plane.applyMatrix4(m);
+        gui.render();
+        gui.serverMessage("Rotated into the XY plane or whatever");
     }
+};
 
+editor.makeGrid = function() {
+    editor.grid = new THREE.GridHelper(10, 1);
+    editor.grid.rotation.x = Math.PI / 2;
+    editor.grid.setColors(0xbbbbbb, 0xeeeeee);
+    editor.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+    gui.scene.add(editor.grid);
+}
+
+// Gets a reference to the node nearest to the mouse cursor
+// TODO: get rid of meta{}
+editor.nearestNode = function(ray) {
     for (var j in abj.meta) {
         if (ray.distanceSqToPoint(abj.meta[j].position) < 0.03) {
-            //return {type: "node", node: i};
             return j;
         }
     }
     return undefined;
 };
 
-editor.makeGimbal = function(center) {
-    editor.gimbal = new THREE.Object3D();
-
-    var pointGeometry = new THREE.Geometry();
-    pointGeometry.vertices = [
-        new THREE.Vector3(1, 0, 0),
-        new THREE.Vector3(0, 1, 0),
-        new THREE.Vector3(0, 0, 1),
-        new THREE.Vector3(-1, 0, 0),
-        new THREE.Vector3(0, -1, 0),
-        new THREE.Vector3(0, 0, -1)
-    ];
-    editor.gimbalVertices = pointGeometry.vertices;
-    var tips = new THREE.Points(pointGeometry, materials.tip);
-
-    editor.gimbal.add(tips);
-    gui.scene.add(editor.gimbal);
-};
-

static/scripts/graph.js

@@ -43,7 +43,3 @@ graph.update = function(newState) {
     gui.render();
 };
 
-graph.add_node = function(x, y, z) {
-    meta = {position: new THREE.Vector3(x, y, z)};
-    abj.add_node(abj.order(), meta);
-};

static/scripts/gui.js

@@ -22,7 +22,6 @@ gui.prepare = function() {
 
 // Someone resized the window
 gui.onWindowResize = function(evt) {
-    console.log(gui);
     gui.camera.aspect = window.innerWidth / window.innerHeight;
     gui.camera.updateProjectionMatrix();
     gui.renderer.setSize(window.innerWidth, window.innerHeight);
@@ -39,20 +38,17 @@ gui.render = function() {
 // Make the extra bits of gui
 gui.makeScene = function() {
     gui.scene = new THREE.Scene();
-    var grid = new THREE.GridHelper(10, 1);
-    grid.rotation.x = Math.PI / 2;
-    grid.setColors(0xdddddd, 0xeeeeee);
-    gui.scene.add(grid);
 };
 
 // Put an HTML message to the screen
-gui.serverMessage = function(msgtext) {
-    if (msgtext) {
-        server_info.innerHTML = msgtext;
-        server_info.className = "visible";
-    } else {
-        server_info.innerHTML = "";
-        server_info.className = "hidden";
+// TODO: write a generic messaging class?
+gui.serverMessage = function(msgtext, persist) {
+    if (persist === undefined) {persist = false;}
+    server_info.innerHTML = msgtext;
+    server_info.className = "visible";
+    clearInterval(gui.ki);
+    if (!persist){
+        gui.ki = setInterval(function(){server_info.className="hidden";}, 3000);
     }
 };
 

static/scripts/main.js

@@ -1,6 +1,11 @@
-function bootstrap(){
-    graph.add_node(0, 0, 0);
-    graph.add_node(3, 0, 0);
+function bootstrap() {
+
+    abj.add_node(0, {
+        position: new THREE.Vector3(0, 0, 0)
+    });
+    abj.add_node(1, {
+        position: new THREE.Vector3(1, 0, 0)
+    });
     graph.update();
 }
 

static/scripts/mouse.js

@@ -8,7 +8,7 @@ mouse.onFreeMove = function() {
     console.log("Free move");
 };
 mouse.onDrag = function() {
-    console.log("Drag");
+    //console.log("Drag");
 };
 mouse.onClick = function() {
     console.log("Click");

static/scripts/websocket.js

@@ -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>.");
+        gui.serverMessage("Connection to server lost. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.", true);
     };
 };