From 4254d38cddbb3cc18d0807d7180a4f8903a9985d Mon Sep 17 00:00:00 2001
From: Ryan Huffman <ryanhuffman@gmail.com>
Date: Thu, 13 Nov 2014 17:40:21 -0800
Subject: [PATCH] Update buttons to grid tool

---
 examples/html/gridControls.html | 145 +++++++++++++-------------------
 examples/html/style.css         |  95 +++++++++++++++++++++
 examples/libraries/gridTool.js  |   9 ++
 3 files changed, 163 insertions(+), 86 deletions(-)
 create mode 100644 examples/html/style.css
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index e7bf1cdf8c..4cb935e600 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -1,5 +1,6 @@
 <html>
 <head>
+    <link rel="stylesheet" type="text/css" href="style.css">
     <script>
         function loaded() {
             var gridColor = { red: 0, green: 0, blue: 0 };
@@ -17,13 +18,14 @@
             gridOn = document.getElementById("grid-on");
             snapToGrid = document.getElementById("snap-to-grid");
             hGridVisible = document.getElementById("horiz-grid-visible");
-
+            bMoveToSelection = document.getElementById("move-to-selection");
+            bMoveToAvatar = document.getElementById("move-to-avatar");
 
             if (window.EventBridge !== undefined) {
                 EventBridge.scriptEventReceived.connect(function(data) {
                     data = JSON.parse(data);
-                    if (data.origin) {
 
+                    if (data.origin) {
                         var origin = data.origin;
                         posY.value = origin.y;
                     }
@@ -69,6 +71,19 @@
             hGridVisible.addEventListener("change", emitUpdate);
             snapToGrid.addEventListener("change", emitUpdate);
 
+            bMoveToAvatar.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "moveToAvatar",
+                }));
+            });
+            bMoveToSelection.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "moveToSelection",
+                }));
+            });
+
             var gridColorBox = document.getElementById('grid-color');
 
             for (var i = 0; i < gridColors.length; i++) {
@@ -88,105 +103,63 @@
             EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
         }
     </script>
-    <style>
-        * {
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-
-            background: #DDD;
-            font-family: Sans-Serif;
-            font-size: 12px;
-
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
-        input {
-            line-height: 2;
-        }
-
-        .input-left {
-            display: inline-block;
-            width: 20px;
-        }
-
-        .color-box {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 1px solid black;
-            background: blue;
-            margin: 2px;
-        }
-
-        .color-box.highlight {
-            width: 18px;
-            height: 18px;
-            border: 2px solid black;
-        }
-
-        .section-header {
-            background: #AAA;
-            border-bottom: 1px solid #CCC;
-        }
-
-        .section-header label {
-            font-weight: bold;
-        }
-
-        .grid-section {
-            border-top: 1px solid #DDD;
-            padding: 4px 0px 4px 20px;
-            background: #DDD;
-        }
-    </style>
 </head>
 <body onload='loaded();'>
     <div class="section-header">
-        <input type='checkbox' id="horiz-grid-visible">
         <label>Horizontal Grid</label>
     </div>
+
     <div class="grid-section">
 
-        <label>Snap to grid</label>
-        <div>
-            <div class="input-left">
-            </div>
-            <input type='checkbox' id="snap-to-grid">
+        <div class="property-section">
+            <label>Visible</label>
+            <span>
+                <input type='checkbox' id="horiz-grid-visible">
+            </span>
         </div>
 
-        <label>Position (Y Axis)</label>
-        <div id="horizontal-position">
-            <div class="input-left">
-            </div>
-            <input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>
+        <div class="property-section">
+            <label>Snap to grid</label>
+            <span>
+                <input type='checkbox' id="snap-to-grid">
+            </span>
         </div>
 
-        <label>Minor Grid Size</label>
-        <div>
-            <div class="input-left">
-            </div>
-            <input type='number' id="minor-spacing" min="0" step="0.01", ></input>
+        <div id="horizontal-position" class="property-section">
+            <label>Position (Y Axis)</label>
+            <span>
+                <input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>
+            </span>
         </div>
 
-        <label>Major Grid Every</label>
-        <div>
-            <div class="input-left">
-            </div>
-            <input type='number' id="major-spacing" min="2" step="1", ></input>
+        <div class="property-section">
+            <label>Minor Grid Size</label>
+            <span>
+                <input type='number' id="minor-spacing" min="0" step="0.01", ></input>
+            </span>
         </div>
 
-        <label>Grid Color</label>
-        <div id="grid-colors">
-            <div class="input-left">
-            </div>
+        <div class="property-section">
+            <label>Major Grid Every</label>
+            <span>
+                <input type='number' id="major-spacing" min="2" step="1", ></input>
+            </span>
+        </div>
+
+        <div class="property-section">
+            <label>Grid Color</label>
+            <span id="grid-colors"></span>
+        </div>
+
+        <div class="property-section">
+            <span>
+                <input type="button" id="move-to-selection" value="Move to Selection">
+            </span>
+        </div>
+        <div class="property-section">
+            <span>
+                <input type="button" id="move-to-avatar" value="Move to Avatar">
+            </span>
         </div>
     </div>
 </body>
diff --git a/examples/html/style.css b/examples/html/style.css
new file mode 100644
index 0000000000..1625fd094f
--- /dev/null
+++ b/examples/html/style.css
@@ -0,0 +1,95 @@
+* {
+}
+
+body {
+    margin: 0;
+    padding: 0;
+
+    background-color: #efefef;
+    font-family: Sans-Serif;
+    font-size: 12px;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+input {
+    line-height: 2;
+}
+
+.input-left {
+    display: inline-block;
+    width: 20px;
+}
+
+.color-box {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 1px solid black;
+    margin: 2px;
+    cursor: pointer;
+}
+
+.color-box.highlight {
+    width: 18px;
+    height: 18px;
+    border: 2px solid black;
+}
+
+.section-header {
+    background: #AAA;
+    border-bottom: 1px solid #CCC;
+    background-color: #333333;
+    color: #999;
+    padding: 4px;
+}
+
+.section-header label {
+    font-weight: bold;
+}
+
+.multi-property-section {
+}
+.property-section {
+    display: block;
+    margin: 10 10;
+    height: 30px;
+}
+
+.property-section label {
+    font-weight: bold;
+    vertical-align: middle;
+}
+
+.property-section span {
+    float: right;
+}
+
+.grid-section {
+    border-top: 1px solid #DDD;
+    background-color: #efefef;
+}
+
+input[type=button] {
+    cursor: pointer;
+    background-color: #608e96;
+    border-color: #608e96;
+    border-radius: 5px;
+    padding: 5px 10px;
+    border: 0;
+    color: #fff;
+    font-weight: bold;
+    margin: 0 2px;
+    margin-top: 5px;
+    font-size: .9em;
+}
+
+input.coord {
+    width: 6em;
+    height: 2em;
+}
diff --git a/examples/libraries/gridTool.js b/examples/libraries/gridTool.js
index 34e25d6733..04547a6918 100644
--- a/examples/libraries/gridTool.js
+++ b/examples/libraries/gridTool.js
@@ -174,6 +174,15 @@ GridTool = function(opts) {
             for (var i = 0; i < listeners.length; i++) {
                 listeners[i](data);
             }
+        } else if (data.type == "action") {
+            var action = data.action;
+            if (action == "moveToAvatar") {
+                grid.setPosition(MyAvatar.position);
+            } else if (action == "moveToSelection") {
+                var newPosition = selectionManager.worldPosition;
+                newPosition = Vec3.subtract(newPosition, { x: 0, y: selectionManager.worldDimensions.y * 0.5, z: 0 });
+                grid.setPosition(newPosition);
+            }
         }
     });
 
