ela 1.1.0

data/app/js/lib/views/base_subapp_container.coffee

@@ -0,0 +1,44 @@
+ELA.Views ?= {}
+class ELA.Views.BaseSubappContainer extends Backbone.Poised.View
+  id: -> @model.name.toDash()
+  tagName: 'section'
+  className: 'subapp-container'
+  subappViews: []
+
+  events:
+    'tap header h2': 'switchSubapp'
+
+  initialize: ->
+    super
+    @listenTo @model, 'change:path', @toggleActivation
+
+  remove: =>
+    @$el.afterTransitionForRemovingClass 'active', => super
+
+  setActive: (active) =>
+    @$el.toggleClass('active', active)
+
+  activate: =>
+    @$el.toggleClass('active', true)
+
+  deactivate: =>
+    @$el.toggleClass('active', false)
+
+  toggleActivation: =>
+    subapp = @model.get('path')[0]
+    for name, app of @model.subapps
+      @subviews[name].setActive(name is subapp)
+
+  render: =>
+    @$el.empty()
+
+    for name, app of @model.subapps
+      SubappView = app.view.toFunction()
+      @subviews[name] = view = new SubappView
+        model: @model.subappInstances[name]
+        localePrefix: "#{@localePrefix}.#{name}"
+      @$el.append(view.render().el)
+
+    @toggleActivation()
+
+    this

data/app/js/lib/views/canvas.coffee

@@ -0,0 +1,73 @@
+ELA.Views ?= {}
+class ELA.Views.Canvas extends Backbone.Poised.View
+  tagName: 'canvas'
+
+  class @Params extends Backbone.Model
+    serialize: -> {}
+    deserialize: ->
+
+  # True if an animation frame request is currently pending
+  animationFrameRequested: false
+
+  constructor: ->
+    super
+    fontWeight = if window.devicePixelRatio > 1 then 300 else 400
+    @defaultFont = "#{fontWeight} 12px Roboto"
+
+  initialize: (options = {}) ->
+    # Make sure we got the parameters model for holding view specific information
+    @defaults = _.defaults(options.defaults, @defaults) if options.defaults?
+    if options.params?
+      @params = options.params
+      @params.set(@defaults)
+    else
+      @params = new @constructor.Params(@defaults)
+
+    @setCanvasResolution()
+
+    $(window).resize(@readCanvasResolution)
+    @listenTo(@params, 'change:width change:height', @setCanvasResolution)
+
+  remove: ->
+    super
+    $(window).off('resize', @readCanvasResolution)
+
+  readCanvasResolution: =>
+    $parent = @$el.parent()
+    # Do not take scale into account here, otherwise
+    # non-active subapps will get initialized with wrong size
+    # because they have a css scale of 0.75
+    @params.set
+      width: $parent[0].clientWidth
+      height: $parent[0].clientHeight
+
+  setCanvasResolution: ->
+    width = @params.get('width')
+    height = @params.get('height')
+
+    context = @el.getContext('2d')
+
+    # Ratio between software dpi and device ppi.
+    devicePixelRatio = window.devicePixelRatio || 1
+
+    # On desktop computers the browser scales automatically.
+    # This is deactivated on mobile devices due to memory.
+    backingStoreRatio = context.webkitBackingStorePixelRatio ||
+      context.mozBackingStorePixelRatio ||
+      context.msBackingStorePixelRatio ||
+      context.oBackingStorePixelRatio ||
+      context.backingStorePixelRatio || 1
+
+    context.pixelRatio = @pixelRatio = devicePixelRatio/backingStoreRatio
+
+    @$el.css  width: width, height: height
+    @$el.attr width: width * @pixelRatio, height: height * @pixelRatio
+
+    context.scale(@pixelRatio, @pixelRatio)
+
+  requestRepaint: =>
+    unless @animationFrameRequested
+      @animationFrameRequested = true
+      requestAnimationFrame =>
+        @animationFrameRequested = false
+        @render()

data/app/js/lib/views/curve_graph.coffee

@@ -0,0 +1,163 @@
+ELA.Views ?= {}
+class ELA.Views.CurveGraph extends ELA.Views.BaseGraph
+  initialize: (options = {}) ->
+    super
+
+    @bindCalculatorEvents()
+
+    @model.curves.on 'change:selected', =>
+      @bindCalculatorEvents()
+      @requestRepaint()
+
+    @model.on 'change:calculators', =>
+      @calculateRanges()
+      @bindCalculatorEvents()
+      @requestRepaint()
+
+    @model.on 'change:valueAtRange', @requestRepaint
+    @model.on 'change:axisLabelingForCurve', @requestRepaint
+
+  bindCalculatorEvents: ->
+    # Remove current callbacks, add new ones for each curve
+    @stopListening(@model.previous('calculators'))
+
+    for calc in @model.get('calculators')
+      for curve in @model.curves.history
+        @listenTo calc, "change:#{curve.get('function')}", @requestRepaint
+
+      @listenTo calc, 'change:maxX change:maxY', @calculateRanges
+      # TODO: Add dynamic dependencies to calculator, so that we can
+      # actually only listen to maxY changes and recalculate ranges.
+      oldestCurve = @model.curves.history[0]
+      if oldestCurve?
+        @listenTo calc, "change:#{oldestCurve.get('function')}", @calculateRanges
+
+  calculateRanges: =>
+    @params.set xRange: @maxRangeX()
+
+  maxRangeX: =>
+    max = _.chain(@model.get('calculators'))
+      .map (c) -> c.maxX()
+      .max()
+      .value()
+    min = _.chain(@model.get('calculators'))
+      .map (c) -> c.minX()
+      .min()
+      .value()
+    range = 0
+    range += max if max > 0
+    range -= min if min < 0
+    (Math.abs(range) or 10000) * @params.get('xScale') * 1.1
+
+  maxRangeY: (func) =>
+    unless func?
+      func = @model.get('axisLabelingForCurve')?.get('function')
+    max = _.chain(@model.get('calculators'))
+      .map (c) -> c.maxY(func, c.minX(), c.maxX(), 30)
+      .max()
+      .value()
+    min = _.chain(@model.get('calculators'))
+      .map (c) -> c.minY(func, c.minX(), c.maxX(), 30)
+      .min()
+      .value()
+    range = 0
+    range += max if max > 0
+    range -= min if min < 0
+    Math.abs(range) * @params.get('yScale') * 1.1
+
+  xAxisValueLabel: (val, stepsize) ->
+    @axisLabel(val, stepsize)
+
+  yAxisValueLabel: (val, stepsize) ->
+    curve = @model.get('axisLabelingForCurve')
+    val = @Present(curve).unitValue(val) if curve?
+    @axisLabel(val, stepsize)
+
+  yAxisLabel: ->
+    curve = @model.get('axisLabelingForCurve')
+    @Present(curve).fullYAxisLabel()
+
+  renderCurves: ->
+    for calc, i in @model.get('calculators')
+      for curve, j in @model.curves.history
+        func = curve.get('function')
+
+        @context.strokeStyle = curve.strokeStyle()
+        @context.lineWidth = 3
+        if i == 1
+          @context.setLineDash [4,5]
+        else
+          @context.setLineDash []
+        xPos = 0
+        brokenLine = 1
+        plotted = 0
+        @context.beginPath()
+        xPos = 0
+        yRange = @maxRangeY(func)
+        yMin = -(@height - @yOrigin) * yRange / @height
+        yMax = @yOrigin * yRange / @height
+        for xPos in [-2 .. (@width + 3)]
+          x = @xMin + xPos * @xRange / @width
+          val = calc[func](x)
+          y = val
+          if y?
+            yPos = (yMax - y) * @height / yRange
+            if brokenLine > 0
+              @context.moveTo(xPos, yPos) if brokenLine == 1
+              brokenLine -= 1
+            else
+              @context.lineTo(xPos, yPos)
+              plotted += 1
+
+        @context.stroke()
+        @context.closePath()
+
+  renderRangeIndicator: ->
+    @context.setLineDash []
+    @context.beginPath()
+    @context.strokeStyle = '#999999'
+    @context.lineWidth = 2
+    @context.moveTo(0, 0)
+    @context.lineTo(@width, 0)
+    @context.stroke()
+
+    @context.beginPath()
+    @context.strokeStyle = '#999999'
+    @context.lineWidth = 2
+    @context.moveTo(0, @height)
+    @context.lineTo(@width, @height)
+    @context.stroke()
+
+    if @model.get('valueAtRange')?
+      valueAtPoint = @model.get('valueAtRange')
+
+      @context.beginPath()
+      @context.strokeStyle = '#999999'
+      @context.lineWidth = 2
+      xPos = @xOrigin + valueAtPoint * @width / @xRange
+      @context.moveTo(xPos, 0)
+      @context.lineTo(xPos, @height)
+      @context.stroke()
+      @context.closePath()
+
+      @context.beginPath()
+      @context.lineWidth = 1
+
+      # The fillStyle of the triangle should match the color of the
+      # legend background set in screen.styl:
+      @context.fillStyle = "#f2f2f2"
+
+      @context.moveTo(xPos + 8, 0)
+      @context.lineTo(xPos, 8)
+      @context.lineTo(xPos - 8, 0)
+      @context.moveTo(xPos - 8, @height)
+      @context.lineTo(xPos, @height - 8)
+      @context.lineTo(xPos + 8, @height)
+      @context.stroke()
+      @context.fill()
+      @context.closePath()
+
+  render: =>
+    super
+    @renderRangeIndicator()
+    this

data/app/js/lib/views/curves_aside.coffee

@@ -0,0 +1,21 @@
+ELA.Views ?= {}
+class ELA.Views.CurvesAside extends ELA.Views.BaseAside
+  initialize: ->
+    unless @model.curves?
+      throw new Error('Missing curves collection in model for CurvesAside')
+
+  render: =>
+    @$el.toggleClass('scroll-y', true)
+    @subviews.curvesList = new Backbone.Poised.List
+      collection: @model.curves
+      filterAttributes: ['label']
+      itemLabel: JST['general/curves_list_item_label']
+      itemClass: ELA.Views.CurvesListItem
+      singleSelect: true
+      localePrefix: @model.localePrefix()
+      group:
+        by: 'group'
+
+    @$el.html(@subviews.curvesList.render().el)
+    @$el.append($('<div>', class: 'hint').text(t('curvesAside.hint')))
+    this

data/app/js/lib/views/curves_list_item.coffee

@@ -0,0 +1,8 @@
+ELA.Views ?= {}
+class ELA.Views.CurvesListItem extends Backbone.Poised.List.SelectableItem
+  labelParameters: ->
+    label: @Present(@model).label()
+
+  initialize: ->
+    super
+    @model.on("change:#{@selectedAttribute}", @render)

data/app/js/lib/views/grouped_parameters_aside.coffee

@@ -0,0 +1,14 @@
+ELA.Views ?= {}
+class ELA.Views.GroupedParametersAside extends ELA.Views.BaseAside
+  render: =>
+    @$el.addClass('scroll-y')
+    subview = @subviews.form = new Backbone.Poised.Form
+      model: @model
+      liveForm: true
+      parentView: this
+      group:
+        by: 'group'
+      localePrefix: @model.localePrefix()
+    @$el.html(subview.render().el)
+
+    this

data/app/js/lib/views/headup.coffee

@@ -0,0 +1,15 @@
+ELA.Views ?= {}
+class ELA.Views.Headup extends Backbone.Poised.View
+  activate: (control) =>
+    # Clone the control view to add a new DOM element showing the same values
+    @subviews.control = control.clone()
+    @$el.addClass('active')
+    @render()
+
+  deactivate: =>
+    @$el.removeClass('active')
+    @subviews.control.remove()
+
+  render: =>
+    @$el.html(@subviews.control.render().el)
+    this

data/app/js/lib/views/help.coffee

@@ -0,0 +1,86 @@
+ELA.Views ?= {}
+class ELA.Views.Help extends Backbone.View
+  id: 'help'
+  tagName: 'section'
+
+  template: JST['general/help']
+  typeset: false
+  scrollTarget: null
+
+  events:
+    'tap header .back.icon': 'goBack'
+    'tap header h2': 'scrollToToc'
+    'click a': 'scrollToAnchor'
+
+  hammerjs: true
+
+  goBack: (e) =>
+    if @model.path?
+      ELA.router.navigate("app/#{@model.path}", trigger: true)
+    else
+      ELA.router.navigate('/', trigger: true)
+
+  scrollToAnchor: (e) =>
+    href = $(e.currentTarget).attr('href')
+    if href.match /^#(.*)$/
+      $target = @$article.find(href)
+      if $target.length > 0
+        e.preventDefault()
+        @scrollTo href
+        @scrollTarget = href
+
+  remove: =>
+    @$el.afterTransitionForRemovingClass 'active', =>
+      super
+
+  scrollToToc: (e) =>
+    @scrollTo '.toc'
+    e.stopPropagation()
+
+  setActive: (val) ->
+    @$el.toggleClass('active', val)
+
+  activate: ->
+    @$el.toggleClass('active', true)
+
+  deactivate: ->
+    @$el.toggleClass('active', false)
+
+  scrollTo: (target) =>
+    @$article.scrollTo target, 600,
+      axis: 'y'
+      offset: -5
+
+  renderMath: =>
+    # MathJax may not have been loaded yet
+    typesetCallback = =>
+      @$el.find('.toast').addClass('hidden')
+      @scrollTo @scrollTarget if @scrollTarget?
+    performTypeset = =>
+      if window.MathJax.isReady
+        MathJax.Hub.Queue(["Typeset", MathJax.Hub, @$article[0], typesetCallback]);
+      else
+        setTimeout performTypeset, 100
+    performTypeset()
+
+  renderArticle: (text) =>
+    unless ELA.converter
+      ELA.converter = new Markdown.Converter()
+      Markdown.Extra.init(ELA.converter)
+    @$article.html(ELA.converter.makeHtml(text))
+    Markdown.Toc.apply(@$article)
+    @renderMath()
+
+  render: =>
+    @$el.html(@template())
+    @$article = @$el.find('article')
+    unless @loadingOrLoadedSuccessfully
+      @loadingOrLoadedSuccessfully = true
+      fileName = @model.helpTextName?() or 'about'
+      $.ajax "help/#{fileName}.md",
+        success: @renderArticle
+        error: =>
+          @loadingOrLoadedSuccessfully = false
+          @$el.find('.toast').addClass('hidden')
+          @$article.html(t('help.messages.missing_help_text'))
+    this

data/app/js/lib/views/interpolated_graph.coffee

@@ -0,0 +1,281 @@
+ELA.Views ?= {}
+class ELA.Views.InterpolatedGraph extends ELA.Views.BaseGraph
+  initialize: (options = {}) ->
+    super
+
+    @bindCalculatorEvents()
+
+    @model.curves.on 'change:selected', =>
+      @bindCalculatorEvents()
+      @requestRepaint()
+
+    @model.on 'change:calculators', =>
+      @calculateRanges()
+      @bindCalculatorEvents()
+      @requestRepaint()
+
+    if attr = @params.get('valueAtRangeAttribute')
+      @model.on "change:#{attr}", @requestRepaint
+    @model.on 'change:axisLabelingForCurve', @requestRepaint
+
+  bindCalculatorEvents: ->
+    # Remove current callbacks, add new ones for each curve
+    @stopListening(@model.previous('calculators'))
+
+    for calc in @model.get('calculators')
+      for curve in @model.curves.history
+        @listenTo calc, "change:#{curve.get('function')}", @requestRepaint
+
+      @listenTo calc, 'change:maxX change:xRange', @calculateRangeX
+      @listenTo calc, 'change:maxY change:yRange', @calculateRangeY
+      # TODO: Add dynamic dependencies to calculator, so that we can
+      # actually only listen to maxY changes and recalculate ranges.
+      oldestCurve = @model.curves.history[0]
+      if oldestCurve?
+        @listenTo calc, "change:#{oldestCurve.get('function')}", @calculateRanges
+
+  maxRangeX: (func, xScale = @params.get('xScale')) =>
+    func = @model.get('axisLabelingForCurve')?.get('function') unless func?
+    ranges = (calc.xRange(func) for calc in @model.get('calculators'))
+    Math.max.apply(Math, _.compact(ranges)) * xScale
+
+  maxRangeY: (func, yScale = @params.get('yScale')) =>
+    func = @model.get('axisLabelingForCurve')?.get('function') unless func?
+    ranges = (calc.yRange(func) for calc in @model.get('calculators'))
+    Math.max.apply(Math, _.compact(ranges)) * yScale
+
+  xAxisValueLabel: (val, stepsize) ->
+    @axisLabel(val, stepsize)
+
+  yAxisValueLabel: (val, stepsize) ->
+    curve = @model.get('axisLabelingForCurve')
+    if curve?
+      curvePresenter = @Present(curve)
+      val = curvePresenter.unitValue(val)
+      stepsize = curvePresenter.unitValue(stepsize)
+    @axisLabel(val - @params.get('yOffset'), stepsize)
+
+  genericAxisLabel: (axis) ->
+    axisLabel = @params.get("#{axis}AxisLabel")
+    return axisLabel.call(this) if axisLabel? and _.isFunction(axisLabel)
+    return axisLabel if axisLabel?
+
+    axisLabelLocale = @params.get("#{axis}AxisLabelLocale")
+    return @loadLocale(axisLabelLocale) if axisLabelLocale?
+
+    curve = @model.get('axisLabelingForCurve')
+    if curve?
+      return @Present(curve).fullXAxisLabel() if axis is 'x'
+      return @Present(curve).fullYAxisLabel() if axis is 'y'
+
+    @loadLocale("graph.#{axis}AxisLabel", defaultValue: '')
+
+  xAxisLabel: -> @genericAxisLabel('x')
+  yAxisLabel: -> @genericAxisLabel('y')
+
+  getControlPoints: (x0, y0, x1, y1, x2, y2, tension) ->
+    d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2))
+    d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+    fa = tension * d01 / (d01 + d12)
+    fb = tension - fa
+    p1x = x1 + fa * (x0 - x2)
+    p1y = y1 + fa * (y0 - y2)
+    p2x = x1 - fb * (x0 - x2)
+    p2y = y1 - fb * (y0 - y2)
+    [p1x, p1y, p2x, p2y]
+
+  drawSpline: (points, t, closed, xPos = ((x) -> x), yPos = ((y) -> y)) ->
+    if points.length <= 4
+      @context.moveTo(xPos(points[0]), yPos(points[1]))
+      @context.lineTo(xPos(points[2]), yPos(points[3]))
+    else
+      cp = []
+      n = points.length
+      points = _.clone(points)
+      if closed
+        points.push points[0], points[1], points[2], points[3]
+        points.unshift points[n - 1]
+        points.unshift points[n - 1]
+        for i in [0..n] by 2
+          cp = cp.concat(@getControlPoints(points[i], points[i+1], points[i+2], points[i+3], points[i+4], points[i+5], t))
+        cp = cp.concat(cp[0], cp[1])
+        for i in [0..n] by 2
+          @context.moveTo(xPos(points[i]), yPos(points[i+1]))
+          @context.bezierCurveTo(xPos(cp[2*i-2]), yPos(cp[2*i-1]), xPos(cp[2*i]), yPos(cp[2*i+1]), xPos(points[i+2]), yPos(points[i+3]))
+      else
+        for i in [0..(n-4)] by 2
+          cp = cp.concat(@getControlPoints(points[i], points[i+1], points[i+2], points[i+3], points[i+4], points[i+5], t))
+
+        @context.moveTo(xPos(points[0]), yPos(points[1]))
+        @context.quadraticCurveTo(xPos(cp[0]), yPos(cp[1]), xPos(points[2]), yPos(points[3]))
+        for i in [2..(n-3)] by 2
+          @context.moveTo(xPos(points[i]), yPos(points[i+1]))
+          @context.bezierCurveTo(xPos(cp[2*i-2]), yPos(cp[2*i-1]), xPos(cp[2*i]), yPos(cp[2*i+1]), xPos(points[i+2]), yPos(points[i+3]))
+        @context.moveTo(xPos(points[n-2]), yPos(points[n-1]))
+        @context.quadraticCurveTo(xPos(cp[2*n-10]), yPos(cp[2*n-9]), xPos(points[n-4]), yPos(points[n-3]))
+
+  drawCurve: (points, tension = 0, closed = false, xPos = ((x) -> x), yPos = ((y) -> y)) ->
+    if tension is 0
+      beginning = true
+      if points.length >= 2
+        @context.moveTo(xPos(points[0]), yPos(points[1]))
+        for i in [2...points.length] by 2
+          @context.lineTo(xPos(points[i]), yPos(points[i+1]))
+    else
+      @drawSpline(points, tension, closed, xPos, yPos)
+
+  _sortedCurves: ->
+    _.sortBy @model.curves.history, (c) ->
+      c.attributes.zIndex
+
+  beforeRenderCurves: (resultCurves) ->
+  afterRenderCurves: (resultCurves) ->
+
+  renderCurves: ->
+    resultCurves = []
+    for calc, i in @model.get('calculators')
+      for curve, j in @_sortedCurves()
+
+        func = curve.get('function')
+        resultCurves.push
+          curve: curve
+          result: calc[func](@xMin, @xMax)
+          yRange: @maxRangeY(func)
+          xRange: @maxRangeX(func)
+          calculatorIdx: i
+
+    @beforeRenderCurves(resultCurves)
+
+    for resultCurve in resultCurves
+      curve = resultCurve.curve
+      result = resultCurve.result
+      yRange = resultCurve.yRange
+      xRange = resultCurve.xRange
+      if _.isObject(result)
+        xPos = (x) => @xOrigin + x * @width / xRange
+        yPos = (y) => @yOrigin - (y + @yOffset) * @height / yRange
+
+        if curve.hasSubcurves()
+          for name, subcurve of curve.subcurves()
+            if result[name].points?
+              @renderCurve(subcurve, result[name], xPos, yPos, resultCurve.calculatorIdx)
+            else if result[name].radius?
+              @renderCircle(subcurve, result[name], xPos, yPos, resultCurve.calculatorIdx)
+        else
+          if result.points?
+            @renderCurve(curve, result, xPos, yPos, resultCurve.calculatorIdx)
+          else if result.radius?
+            @renderCircle(curve, result, xPos, yPos, resultCurve.calculatorIdx)
+
+    @afterRenderCurves(resultCurves)
+
+  renderCircle: (curve, result, xPos, yPos, calculatorIdx) ->
+    func = curve.get('function')
+    yRange = @maxRangeY(func)
+    @context.beginPath()
+    width  = Math.abs(xPos(2*result.radius) - @xOrigin)
+    height = Math.abs(yPos(2*result.radius) - @yOrigin)
+    centerX = xPos(result.center[0])
+    centerY = yPos(result.center[1])
+
+    aX = centerX - width/2
+    aY = centerY - height/2
+    hB = (width / 2) * .5522848
+    vB = (height / 2) * .5522848
+    eX = aX + width
+    eY = aY + height
+    mX = aX + width / 2
+    mY = aY + height / 2
+    @context.moveTo(aX, mY);
+    @context.bezierCurveTo(aX, mY - vB, mX - hB, aY, mX, aY);
+    @context.bezierCurveTo(mX + hB, aY, eX, mY - vB, eX, mY);
+    @context.bezierCurveTo(eX, mY + vB, mX + hB, eY, mX, eY);
+    @context.bezierCurveTo(mX - hB, eY, aX, mY + vB, aX, mY);
+
+    @context.setLineDash(curve.lineDash(calculatorIdx))
+    if curve.strokeStyle()
+      @context.lineWidth = curve.get('lineWidth')
+      @context.strokeStyle = curve.strokeStyle()
+      @context.stroke()
+    if fillStyle = curve.get('fillStyle')
+      @context.fillStyle = fillStyle
+      @context.fill()
+    @context.closePath()
+
+  renderCurve: (curve, result, xPos, yPos, calculatorIdx) ->
+    @context.beginPath()
+    @context.setLineDash(curve.lineDash(calculatorIdx))
+    if result.multiplePaths
+      for setOfPoints, i in result.points
+        @drawCurve(setOfPoints, result.tension, false, xPos, yPos)
+    else
+      @drawCurve(result.points, result.tension, false, xPos, yPos)
+    if curve.strokeStyle()
+      @context.lineWidth = curve.get('lineWidth')
+      @context.strokeStyle = curve.strokeStyle()
+      @context.stroke()
+    if fillStyle = curve.get('fillStyle')
+      @context.fillStyle = fillStyle
+      @context.fill()
+    @context.closePath()
+
+  renderRangeIndicator: ->
+    if @params.get('valueAtRangeAttribute') and (valueAtPoint = @model.get(@params.get('valueAtRangeAttribute')))?
+      @context.beginPath()
+      @context.setLineDash []
+      @context.strokeStyle = '#999999'
+      @context.lineWidth = 2
+
+      # Border below legend
+      @context.moveTo(@width, 0)
+      @context.lineTo(0, 0)
+
+      if (axis = @params.get('valueAtRangeAxis')) is 'x'
+        # Border next to range handler
+        @context.moveTo(0, @height)
+        @context.lineTo(@width, @height)
+        @context.lineTo(@width, @height-10)
+
+        # Range handler line
+        xPos = @xOrigin + valueAtPoint * @width / @xRange
+        @context.moveTo(xPos, 0)
+        @context.lineTo(xPos, @height)
+      else
+        # Border next to range handler
+        @context.lineTo(0, @height)
+
+        # Range handler line
+        yPos = - valueAtPoint * @height / @yRange + @yOrigin
+        @context.moveTo(0, yPos)
+        @context.lineTo(@width, yPos)
+      @context.stroke()
+      @context.closePath()
+
+      @context.beginPath()
+      # The fillStyle of the triangle should match the color of the
+      # background set for the legend and range handler in screen.styl:
+      @context.fillStyle = "#f2f2f2"
+      @context.lineWidth = 1
+
+      if axis is 'x'
+        @context.moveTo(xPos + 8, 0)
+        @context.lineTo(xPos, 8)
+        @context.lineTo(xPos - 8, 0)
+        @context.moveTo(xPos - 8, @height)
+        @context.lineTo(xPos, @height - 8)
+        @context.lineTo(xPos + 8, @height)
+      else
+        @context.moveTo(0, yPos - 8)
+        @context.lineTo(8, yPos)
+        @context.lineTo(0, yPos + 8)
+        @context.moveTo(@width, yPos - 8)
+        @context.lineTo(@width - 8, yPos)
+        @context.lineTo(@width, yPos + 8)
+      @context.stroke()
+      @context.fill()
+      @context.closePath()
+
+  render: =>
+    super
+    @renderRangeIndicator()
+    this