diff --git a/client/grapher.js b/client/grapher.js index 24fa5af..c4220b3 100644 --- a/client/grapher.js +++ b/client/grapher.js @@ -68,6 +68,13 @@ function Column(canvas, name, params, scale, range, bounds) { originX: 'center', originY: 'center', }); + + if (goog.math.Range.containsPoint(this.range, 0.0)) { + var position = this.getPosFromValue(0.0); + this.updateLine('baseline', [this.columnBounds.left, position, this.hintBounds.left, position], { + stroke: this.strokeColor + }); + } } this.updateRect('fillRect', { @@ -113,6 +120,18 @@ function Column(canvas, name, params, scale, range, bounds) { } } + this.updateLine = function(name, points, args) { + if (name in this) { + this[name].set(args); + } + else { + var line = new fabric.Line(points, args); + this.canvas.add(line); + this.shapes.push(line); + this[name] = line; + } + } + this.updateColor = function(color) { var fillColorRgb = goog.color.hexToRgb(goog.color.parse(color).hex); var handleColorRgb = goog.color.darken(fillColorRgb, this.handleDarken); @@ -270,6 +289,11 @@ function Column(canvas, name, params, scale, range, bounds) { return this.range.start + this.range.getLength() * percent; } + this.getPosFromValue = function(value) { + var percent = 1.0 - (value - this.range.start) / this.range.getLength(); + return this.columnBounds.top + this.columnBounds.height * percent; + } + this.isHovering = function(position) { return this.isGrabbing(position); }