From f48e620c1a1d0f1df2a90f0480fa890237e50f49 Mon Sep 17 00:00:00 2001
From: Pete Shadbolt <pete.shadbolt@gmail.com>
Date: Wed, 18 May 2016 22:47:04 +0100
Subject: [PATCH] Popups

---
 static/index.html       |  3 ++-
 static/main.css         |  9 +++----
 static/scripts/gui.js   | 19 ++++++++++++---
 static/scripts/main.js  |  1 +
 static/scripts/mouse.js | 52 +++++++++++++++++++++++++++--------------
 5 files changed, 59 insertions(+), 25 deletions(-)
diff --git a/static/index.html b/static/index.html
index 9fd080b..95a9b3b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -14,6 +14,7 @@
   <script src="scripts/materials.js"></script>
   <script src="scripts/graph.js"></script>
   <script src="scripts/gui.js"></script>
+  <script src="scripts/editor.js"></script>
   <script src="scripts/websocket.js"></script>
   <script src="scripts/main.js"></script>
 </head>
@@ -21,7 +22,7 @@
 <body>
 <img id="ball" src="img/ball.png" style=display:none;>
 <div id=node_info class=hidden> nothing </div>
-<div id=message class=hidden> </div>
+<div id=server_info class=hidden> </div>
 
 <div id=pallette>
 <ul>
diff --git a/static/main.css b/static/main.css
index 096866d..2cfd742 100644
--- a/static/main.css
+++ b/static/main.css
@@ -14,24 +14,25 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-fam
     border-radius:3px;
 }
 
-#pallette {
+#server_info {
     background-color: black;
     color:white;
     padding: 10px;
     font-family:"courier new";
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     right: 10px;
     font-size: 9pt;
 }
 
-#message {
+
+#pallette {
     background-color: black;
     color:white;
     padding: 10px;
     font-family:"courier new";
     position: absolute;
-    bottom: 10px;
+    top: 10px;
     right: 10px;
     font-size: 9pt;
 }
diff --git a/static/scripts/gui.js b/static/scripts/gui.js
index 6784fa7..ed4640c 100644
--- a/static/scripts/gui.js
+++ b/static/scripts/gui.js
@@ -46,8 +46,22 @@ gui.makeScene = function() {
 
 // Put an HTML message to the screen
 gui.serverMessage = function(msgtext) {
-    message.innerHTML = msgtext;
-    message.className = "visible";
+    if (msgtext) {
+        server_info.innerHTML = msgtext;
+        server_info.className = "visible";
+    } else {
+        server_info.innerHTML = "";
+        server_info.className = "hidden";
+    }
+};
+
+gui.nodeMessage = function(msgtext) {
+    node_info.innerHTML = msgtext;
+    node_info.className = "visible";
+};
+
+gui.hideNodeMessage = function(){
+    node_info.className = "hidden";
 };
 
 // Set the position of the info popup
@@ -56,7 +70,6 @@ gui.setInfoPosition = function(position){
     h = node_info.offsetHeight;
     node_info.style.left = position.x -  w/2 + "px"; 
     node_info.style.top = position.y - h -10 + "px"; 
-    node_info.className = "visible";
 };
 
 // The main loop
diff --git a/static/scripts/main.js b/static/scripts/main.js
index 2ae78e8..7b7dd96 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -8,6 +8,7 @@ window.onload = function() {
     materials.prepare();
     gui.prepare();
     mouse.prepare();
+    editor.prepare();
     bootstrap();
     gui.loop();
 };
diff --git a/static/scripts/mouse.js b/static/scripts/mouse.js
index 3f66220..7b87ed2 100644
--- a/static/scripts/mouse.js
+++ b/static/scripts/mouse.js
@@ -3,46 +3,64 @@ mouse.wasClick = true;
 
 mouse.raycaster = new THREE.Raycaster();
 
-mouse.onFreeMove = function(){console.log("Free move");};
-mouse.onDrag = function(){console.log("Drag");};
-mouse.onClick = function(){console.log("Click");};
-mouse.onCtrlClick = function(){console.log("Ctrl-click");};
-mouse.onShiftClick = function(){console.log("Shift-click");};
+mouse.onFreeMove = function() {
+    console.log("Free move");
+};
+mouse.onDrag = function() {
+    console.log("Drag");
+};
+mouse.onClick = function() {
+    console.log("Click");
+};
+mouse.onCtrlClick = function() {
+    console.log("Ctrl-click");
+};
+mouse.onShiftClick = function() {
+    console.log("Shift-click");
+};
 
-mouse.prepare = function(){
+mouse.prepare = function() {
     var el = gui.renderer.domElement;
     el.addEventListener("mousedown", mouse.onDown);
     el.addEventListener("mouseup", mouse.onUp);
     el.addEventListener("mousemove", mouse.onMove);
 };
 
-mouse.onDown = function(event){
+mouse.onDown = function(event) {
     mouse.wasClick = true;
     mouse.pressed = true;
 };
 
-mouse.onUp = function(event){
-    if (!mouse.wasClick){return;}
+mouse.onUp = function(event) {
+    if (!mouse.wasClick) {
+        return;
+    }
     mouse.pressed = false;
-    if (event.ctrlKey){mouse.onCtrlClick();}
-    else if (event.shiftKey){mouse.onShiftClick();}
-    else {
+    if (event.ctrlKey) {
+        mouse.onCtrlClick();
+    } else if (event.shiftKey) {
+        mouse.onShiftClick();
+    } else {
         mouse.onClick();
     }
 };
 
 mouse.onMove = function(event) {
     mouse.wasClick = false;
-    mouse.position_absolute = {x: event.clientX, y:event.clientY};
-    mouse.position_relative = {x: (event.clientX / window.innerWidth) * 2 - 1,
-                  y: -(event.clientY / window.innerHeight) * 2 + 1};
+    mouse.position_absolute = {
+        x: event.clientX,
+        y: event.clientY
+    };
+    mouse.position_relative = {
+        x: (event.clientX / window.innerWidth) * 2 - 1,
+        y: -(event.clientY / window.innerHeight) * 2 + 1
+    };
     gui.setInfoPosition(mouse.position_absolute);
     mouse.raycaster.setFromCamera(mouse.position_relative, gui.camera);
     mouse.ray = mouse.raycaster.ray;
-    if (mouse.pressed){
+    if (mouse.pressed) {
         mouse.onDrag();
     } else {
         mouse.onFreeMove();
     }
 };
-
