Merging with master

client/bower.json

@@ -14,7 +14,6 @@
   ],
   "dependencies": {
     "bootstrap": "~3.2.0",
-    "closurelibrary": "*",
     "fabric": "~1.4.8",
     "handlebars": "~1.3.0",
     "underscore": "~1.6.0",

client/index.html

@@ -161,18 +161,15 @@
             </div>
         </div>
 
-        <!-- <script src="bower_components/underscore/underscore.js"></script> -->
+        <script src="bower_components/underscore/underscore.js"></script>
-        <!-- <script src="bower_components/handlebars/handlebars.min.js"></script> -->
+        <script src="bower_components/handlebars/handlebars.min.js"></script>
-        <!-- <script src="bower_components/closurelibrary/closure/goog/base.js"></script> -->
+        <script src="bower_components/jquery/dist/jquery.min.js"></script>
-        <!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
+        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
-        <!-- <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> -->
+        <script src="bower_components/fabric/dist/fabric.min.js"></script>
-        <!-- <script src="bower_components/fabric/dist/fabric.min.js"></script> -->
+        <script src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
-        <!-- <script src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script> -->
+        <script src="bower_components/tinycolor/tinycolor.js"></script>
-        <!-- <script src="bower_components/tinycolor/tinycolor.js"></script> -->
 
-        <!-- <script src="js/application.js"></script> -->
+        <script src="js/application.js"></script>
-        <!-- <script src="js/grapher.js"></script> -->
+        <script src="js/grapher.js"></script>
-
-        <script src="dist/all.min.js"></script>
     </body>
 </html>

client/js/application.js

@@ -49,7 +49,7 @@
             ctx.hintSteps    = query.hintSteps;
             ctx.maxResults   = query.maxResults;
 
-            ctx.grapher = new Grapher('grapher', ctx.searchRange, 150, true, true);
+            ctx.grapher = new grapher.Grapher('grapher', ctx.searchRange, 150, true, true);
             ctx.grapher.setColumns(results.columns);
             ctx.grapher.setValueChangedListener(onAdjust);
 

client/js/grapher.js

@@ -1,9 +1,78 @@
 'use strict';
 
-goog.require('goog.math');
+
-goog.require('goog.math.Coordinate');
+(function(grapher) {
-goog.require('goog.math.Range');
+    //
-goog.require('goog.math.Rect');
+    //  Coord
+    //
+
+    function Coord(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+
+    //
+    //  Rect
+    //
+
+    function Rect(left, top, width, height) {
+        this.left   = left;
+        this.top    = top;
+        this.width  = width;
+        this.height = height;
+        this.right  = left + width;
+        this.bottom = top + height;
+
+        this.contains = function(coord) {
+            var contained =
+                coord.x >= this.left &&
+                coord.x < this.right &&
+                coord.y >= this.top &&
+                coord.y < this.bottom;
+
+            return contained;
+        };
+
+        this.intersection = function(rect) {
+            var left   = Math.max(this.left, rect.left);
+            var top    = Math.max(this.top, rect.top);
+            var right  = Math.min(this.right, rect.right);
+            var bottom = Math.min(this.bottom, rect.bottom);
+
+            return new Rect(left, top, right - left, bottom - top);
+        };
+    }
+
+
+    //
+    //  Range
+    //
+
+    function Range(start, end) {
+        this.start = start;
+        this.end   = end;
+
+        this.containsPoint = function(value) {
+            return value >= this.start && value <= this.end;
+        };
+
+        this.getLength = function() {
+            return this.end - this.start;
+        };
+
+        this.clamp = function(value) {
+            if (value < this.start) {
+                return this.start;
+            }
+
+            if (value > this.end) {
+                return this.end;
+            }
+
+            return value;
+        }
+    }
 
 
     //
@@ -85,7 +154,7 @@ function Column(canvas, name, params, scale, range, bounds) {
                 fill:   this.getHandleColor()
             });
 
-        if (final && goog.math.Range.containsPoint(this.range, 0.0)) {
+            if (final && this.range.containsPoint(0.0)) {
                 var y = this.getPosFromValue(0.0);
                 var p = [this.bounds.left, y, this.bounds.left + this.tickLength, y];
                 this.updateLine('baseline', p, {
@@ -174,7 +243,7 @@ function Column(canvas, name, params, scale, range, bounds) {
         }
 
         this.setClampedValue = function(value, final) {
-        this.value = goog.math.clamp(value, this.range.start, this.range.end);
+            this.value = this.range.clamp(value);
             this.updateShapes(final);
 
             if (this.onValueChanged && final) {
@@ -189,7 +258,7 @@ function Column(canvas, name, params, scale, range, bounds) {
         }
 
         this.getLabelBounds = function(bounds) {
-        return new goog.math.Rect(
+            return new Rect(
                 bounds.left,
                 bounds.top + bounds.height,
                 bounds.width,
@@ -198,7 +267,7 @@ function Column(canvas, name, params, scale, range, bounds) {
         }
 
         this.getColumnBounds = function(bounds) {
-        return new goog.math.Rect(
+            return new Rect(
                 bounds.left + this.tickLength,
                 bounds.top,
                 bounds.width - this.tickLength,
@@ -207,7 +276,7 @@ function Column(canvas, name, params, scale, range, bounds) {
         }
 
         this.getHintBounds = function(bounds) {
-        return new goog.math.Rect(
+            return new Rect(
                 bounds.left + bounds.width - this.hintSize,
                 bounds.top,
                 this.hintSize,
@@ -218,7 +287,7 @@ function Column(canvas, name, params, scale, range, bounds) {
         this.getFillBounds = function(bounds) {
             var y1 = this.getPosFromValue(0.0);
             var y2 = this.getPosFromValue(this.value);
-        return new goog.math.Rect(
+            return new Rect(
                 bounds.left,
                 Math.min(y1, y2),
                 bounds.width - this.hintSize,
@@ -227,7 +296,7 @@ function Column(canvas, name, params, scale, range, bounds) {
         }
 
         this.getHandleBounds = function(bounds, fillBounds) {
-        var handleBounds = new goog.math.Rect(
+            var handleBounds = new Rect(
                 fillBounds.left,
                 this.getPosFromValue(this.value) - this.handleSize / 2,
                 fillBounds.width,
@@ -303,11 +372,8 @@ function Column(canvas, name, params, scale, range, bounds) {
 
         this.getPosFromValue = function(value) {
             var percent = 1.0 - (value - this.range.start) / this.range.getLength();
-        return goog.math.clamp(
+            var range   = new Range(this.columnBounds.top, this.columnBounds.top + this.columnBounds.height);
-            this.columnBounds.top + this.columnBounds.height * percent,
+            return range.clamp(this.columnBounds.top + this.columnBounds.height * percent);
-            this.columnBounds.top,
-            this.columnBounds.top + this.columnBounds.height
-        );
         }
 
         this.isHovering = function(position) {
@@ -395,7 +461,7 @@ function Column(canvas, name, params, scale, range, bounds) {
     //  Grapher
     //
 
-function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
+    grapher.Grapher = function(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
         this.setColumns = function(columns) {
             this.clearColumns();
 
@@ -484,7 +550,7 @@ function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
         this.getLocalScale = function(hints) {
             var counts = _.pluck(hints, 'count');
             var min = this.useRelativeScale ? _.min(counts) : 0;
-        return new goog.math.Range(min, _.max(counts));
+            return new Range(min, _.max(counts));
         }
 
         this.getGlobalScale = function(hintData) {
@@ -522,7 +588,7 @@ function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
         }
 
         this.getCanvasBounds = function() {
-        return new goog.math.Rect(0, 0, this.canvas.width - 1, this.canvas.height - 1);
+            return new Rect(0, 0, this.canvas.width - 1, this.canvas.height - 1);
         }
 
         this.getGraphBounds = function(bounds) {
@@ -531,7 +597,7 @@ function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
 
         this.getColumnBounds = function(bounds, index, count) {
             var width = this.columnWidth + this.padding * 2;
-        return new goog.math.Rect(
+            return new Rect(
                 bounds.left + width * index + this.padding,
                 bounds.top,
                 this.columnWidth,
@@ -541,10 +607,7 @@ function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
 
         this.getMousePos = function(e) {
             var rect = e.target.getBoundingClientRect();
-        return new goog.math.Coordinate(
+            return new Coord(e.clientX - rect.left, e.clientY - rect.top);
-            e.clientX - rect.left,
-            e.clientY - rect.top
-        );
         }
 
         this.mouseDown = function(e) {
@@ -586,7 +649,7 @@ function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
         this.useRelativeScale = useRelativeScale;
         this.columnWidth      = columnWidth;
         this.canvas           = new fabric.StaticCanvas(canvas);
-    this.range            = new goog.math.Range(range.min, range.max);
+        this.range            = new Range(range.min, range.max);
         this.padding          = 10;
         this.indexMap         = {};
         this.columns          = [];
@@ -599,3 +662,4 @@ function Grapher(canvas, range, columnWidth, useLocalScale, useRelativeScale) {
         c.addEventListener('dblclick', this.mouseDoubleClick, false);
         c.grapher = this;
     }
+}(window.grapher = window.grapher || {}));