ela 1.1.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: c15b734be84e2dddf4635beb7aa6abe1f47fc239
-  data.tar.gz: 78645f77c6010b814633efbada7d16ac0aaee886
+SHA256:
+  metadata.gz: 17010b55c4244377534fb008bb8b00701b2ec1f3a03b8c08e57ca9ffb8321860
+  data.tar.gz: 9ea5fbd11fb13b0ed539ffb903a8f4d543a3a2e7ab92054dcb2afd2d31f9a22f
 SHA512:
-  metadata.gz: f1a654e0bd2929e6dc48708fcbee1287201eb21eadb2210b03cd5a9f8aa85321594015437b6b9eac162765b4b7226d0717c22161e6710506bab151978680ae28
-  data.tar.gz: 4dab676b14d1335be385368ef38eebb06e1947928faa7c951b6ac182f16a1ebc4e9d3605ebc171ee824d6e6cc96356531dda15c58a96cb78dc1291b1fbe371cc
+  metadata.gz: 226cd20184cdde3a1f651d205995e4de2c0527357a789ff3a49aa6d268da1eea5431a16298e422d6be5fa75220c10af07577929d7675f361f8b8146e8f9c5b5b
+  data.tar.gz: 0b6e09af8f8b0cd19557e2030c139cbbd84ff84d14c53996c3ae88f8decb33e38fc71728608a7673f5d905b8c6c87814e954533536eacd57ac546d7a0c5a2fa1

data/Gemfile.lock

@@ -1,7 +1,8 @@
 PATH
   remote: .
   specs:
-    ela (1.0.4)
+    ela (1.1.0)
+      andand (~> 1.3, >= 1.3.3)
       bundler (~> 1.13)
       coffee-script (~> 2.4, >= 2.4.1)
       guard (~> 2.10)
@@ -23,6 +24,7 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
+    andand (1.3.3)
     coderay (1.1.2)
     coffee-script (2.4.1)
       coffee-script-source

data/app/css/screen.styl

@@ -1,5 +1,5 @@
 // ELA specific
-$range-handler-width = 59px
+$axis-handler-size = 59px
 
 // Remember that this color should be set in CurveGraph aswell
 // to resemble the fillColor of the range indicator triangles:
@@ -112,9 +112,22 @@ li.share-form
     &.failure:before
       content "\f00d"
 
-article.graph
+article.viewport
   display flex
-  flex-direction column
+
+  .view
+    flex 1
+    display flex
+    flex-direction column
+    border-right 1px solid #bbb
+    overflow hidden
+
+    &:last-child
+      border-right: none
+
+    .horizontal-wrapper
+      display flex
+      flex 1
 
   div.legend
     z-layer 'section', 'legend'
@@ -180,8 +193,6 @@ article.graph
 
     &.legend-simple
       border-bottom 1px solid #ccc
-      absolute 0
-      width 100%
 
       .curve
         display inline-block
@@ -217,15 +228,15 @@ article.graph
       padding 10px
       background-color rgba(255, 255, 255, 0.8)
 
-  div.range-handler
+  div.axis-handler
     text-align center
     cursor pointer
     background $legend-background
     padding 14px 5px
 
-    &.orientation-y
-      absolute 0 none 0 0
-      width $range-handler-width
+    &.axis-handler-left
+      width $axis-handler-size
+      position relative
 
       span.hint
         absolute 50% none none 50%
@@ -234,7 +245,7 @@ article.graph
 
 // vertical range slider and large, non-transparent legend with values
 #international-standard-atmosphere article.graph div.graph
-  margin-left $range-handler-width
+  margin-left $axis-handler-size
 
 // Some space for the delete button
 #composites
@@ -349,7 +360,7 @@ aside.curves
 
 img.logo
   absolute none 0 0 none
-  height $range-handler-width
+  height $axis-handler-size
   z-layer 'section', 'graph'
 
   @media $media-lt-phone

data/app/js/lib/views/1_viewport_view.coffee

@@ -0,0 +1,4 @@
+ELA.Views ?= {}
+
+class ELA.Views.ViewportView extends Backbone.Poised.View
+  className: 'view active'

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

@@ -0,0 +1,62 @@
+ELA.Views ?= {}
+class ELA.Views.AxisHandler extends Backbone.Poised.View
+  className: 'axis-handler'
+
+  events:
+    'pan': 'updateValue'
+    'tap': 'updateValue'
+
+  hammerjs:
+    recognizers: [
+      [Hammer.Rotate, { enable: false }],
+      [Hammer.Pinch, { enable: false }, ['rotate']],
+      [Hammer.Swipe, { enable: false }],
+      [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 1 }, ['swipe']],
+      [Hammer.Tap, { threshold: 5 }],
+      [Hammer.Press, { enable: false }]
+    ]
+
+  initialize: (options) ->
+    @displayParams = options.displayParams
+    @position = options.position or 'bottom'
+    @orientation = switch @position
+      when 'bottom' then 'x'
+      when 'left' then 'y'
+    @attribute = options.attribute
+    @precision = @model.get("#{@attribute}Precision")
+    @precision ?= options.precision
+    @precision ?= 2
+
+    @listenTo @model, "change:#{@attribute}", @renderText
+
+  updateValue: (e) =>
+    origin = @displayParams.get("#{@orientation}Origin")
+    range = @displayParams.get("#{@orientation}Range")
+    graphOffset = @parentView.subviews.graph.$el.offset()
+    if @orientation is 'x'
+      width = @displayParams.get('width')
+      point = (range / width) *
+        (e.gesture.pointers[0].clientX - graphOffset.left - origin)
+    else # @orientation is 'y'
+      height = @displayParams.get('height')
+      y = e.gesture.pointers[0].clientY - graphOffset.top
+      y = Math.min(Math.max(y, 0), height)
+      point = (range / height) * (origin - y)
+
+    pow = Math.pow(10, @precision)
+    point = Math.round(point * pow) / pow
+    @model.set(@attribute, point)
+
+  renderText: =>
+    @$el.find('span').text(t(
+      "#{@model.name}.axisHandler.#{@attribute}.label"
+      "#{@model.name}.axisHandler.label"
+      'axisHandler.label'
+      value: @model.get(@attribute).toFixed(@precision)
+    ))
+
+  render: =>
+    @$el.html('<span class="hint"></span>')
+    @$el.addClass("axis-handler-#{@position}")
+    @renderText()
+    this

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

@@ -9,28 +9,10 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
   # Typically in a subclass we override the list of asides. This may
   # be a list of classes inheriting from ELA.Views.BaseAside or an
   # object with `name` and `klass` attributes.
-  asideViews: []
+  asides: []
 
-  legendView: null
-
-  graphView: null
-  graphOverlayView: null
-  graphDefaults: {}
-
-  rangeHandlerView: null
-
-  # TODO: Rename valueAtRange name pattern to something like selectValue
-  # TODO: use correct attribute in every app instead of generic valueAtRange
-  valueAtRange: null
-  valueAtRangeAxis: 'x'
-  valueAtRangeAttribute: 'valueAtRange'
-  valueAtRangePrecision: null
-
-  legendValueAtRange: null
-  legendValueAtRangeAxis: null
-  legendValueAtRangeAttribute: null
-
-  useHeadup: false
+  # Typically in a subclass we override the list of views.
+  views: []
 
   events:
     'tap header .overview.icon': 'backToOverview'
@@ -55,16 +37,13 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
   initialize: ->
     @listenTo @model, 'change:currentAside', @toggleAside
     @listenTo @model, 'change:showHelp', @renderHelp
-    if @useHeadup
-      @on 'controlLiveChangeStart', @liveChangeStart
-      @on 'controlLiveChangeEnd', @liveChangeEnd
+    @on 'controlLiveChangeStart', @liveChangeStart
+    @on 'controlLiveChangeEnd', @liveChangeEnd
 
-    for asideView in @asideViews
-      asideView.link ?= 'icon'
+    for aside in @asides
+      aside.link ?= 'icon'
 
-    if @graphView?
-      GraphParams = @graphView.toFunction()['Params']
-      @model.displayParams = new GraphParams if GraphParams?
+    @model.displayParams ?= {}
 
   viewSubappOptions: =>
     @$('.subapps.select').toggleClass('view')
@@ -117,16 +96,16 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
 
   iconAsideNames: ->
     @_iconAsideNames ?= do =>
-      _.compact(_.map(@asideViews, (asideView) ->
-        asideView.name if asideView.link is 'icon'
+      _.compact(_.map(@asides, (aside) ->
+        aside.name if aside.link is 'icon'
       ))
 
   contextAsides: ->
     @_contextAsideNames ?= do =>
-      _.compact(_.map(@asideViews, (asideView) =>
-        if asideView.link is 'contextMenu'
-          name: asideView.name
-          label: @loadLocale("contextMenu.#{asideView.name}")
+      _.compact(_.map(@asides, (aside) =>
+        if aside.link is 'contextMenu'
+          name: aside.name
+          label: @loadLocale("contextMenu.#{aside.name}")
       ))
 
   backToOverview: =>
@@ -181,11 +160,6 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
       hasHelpText: @model.hasHelpText
       iconAsideNames: @iconAsideNames()
       contextAsides: @contextAsides()
-      legendView: @legendView?
-      graphOverlayView: @graphOverlayView?
-      graphView: @graphView?
-      rangeHandlerView: @rangeHandlerView?
-      useHeadup: @useHeadup
       relatedApps: @relatedApps()
       currentPath: @model.path
     @$shareLink = @$('li.share-link')
@@ -194,7 +168,7 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
     @$shareCopyButton = @$shareForm.find('button')
 
     @$app = @$('section.app')
-    for aside in @asideViews
+    for aside in @asides
       AsideView = aside.view.toFunction()
       view = @subviews[aside.name] = new AsideView
         model: @model
@@ -203,70 +177,19 @@ class ELA.Views.BaseApp extends Backbone.Poised.View
         localePrefix: @localePrefix
       @$app.append(view.render().el)
 
-    if @legendView? and not @subviews.legend
-      @$legend = @$('article .legend')
-      LegendView = @legendView.toFunction()
-      @subviews.legend = view = new LegendView
-        model: @model
-        parentView: this
-        el: @$legend
-        useValueAtRange: @legendValueAtRange or @valueAtRange or @rangeHandlerView?
-        valueAtRangeAxis: @legendValueAtRangeAxis or @valueAtRangeAxis
-        valueAtRangeAttribute: @legendValueAtRangeAttribute or @valueAtRangeAttribute
-        localePrefix: @localePrefix
-      view.render()
-
-    if @graphOverlayView? and not @subviews.graphOverlayView
-      @$graphOverlay = @$('article .graph-overlay')
-      GraphOverlayView = @graphOverlayView.toFunction()
-      @subviews.graphOverlayView = view = new GraphOverlayView
-        model: @model
-        parentView: this
-        el: @$graphOverlay
-        localPrefix: @localePrefix
-      view.render()
-
-    if @rangeHandlerView? and not @subviews.rangeHandler?
-      @$rangeHandler = @$('article .range-handler')
-      RangeHandlerView = @rangeHandlerView.toFunction()
-      @subviews.rangeHandler = view = new RangeHandlerView
-        model: @model
-        parentView: this
-        el: @$rangeHandler
-        axis: @valueAtRangeAxis
-        attribute: @valueAtRangeAttribute
-        precision: @valueAtRangePrecision
-        localePrefix: @localePrefix
-      view.render()
-
-    if @useHeadup and not @subviews.headup?
+    unless @subviews.headup?
       @$headup = @$('aside.headup')
       @subviews.headup = new ELA.Views.Headup
         el: @$headup
         localePrefix: @localePrefix
 
-    delay =>
-      if @graphView? and not @subviews.graph
-        @$graph = @$('article .graph')
-        GraphView = @graphView.toFunction()
-        @subviews.graph = view = new GraphView
-          model: @model
-          parentView: this
-          params: @model.displayParams
-          defaults: _.defaults
-            # Taken from ELA.Views.Canvas::readCanvasResolution
-            width: @$graph[0].clientWidth
-            height: @$graph[0].clientHeight
-            valueAtRangeAxis: @valueAtRangeAxis
-            valueAtRangeAttribute: @valueAtRangeAttribute
-          , @graphDefaults
-          localePrefix: @localePrefix
-        @$graph.html(view.render().el)
-
-        # If the legend uses the value at range feature, it's height
-        # may change with updated calculators
-        if @subviews.legend?.useValueAtRange
-          @listenTo(@model, 'change:calculators', view.readCanvasResolution)
+    unless @subviews.viewport
+      view = @subviews.viewport = new ELA.Views.Viewport
+        model: @model
+        parentView: this
+        views: @views
+        localePrefix: @localePrefix
+      @$('.viewport').replaceWith(view.render().el)
 
     @renderHelp()
     @toggleAside(@model, @model.get('currentAside'))

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

@@ -21,11 +21,18 @@ class ELA.Views.Canvas extends Backbone.Poised.View
       @params = options.params
       @params.set(@defaults)
     else
+      @model.displayParams ?= {}
       @params = new @constructor.Params(@defaults)
+      @model.displayParams[options.name] = @params
 
     @setCanvasResolution()
 
-    $(window).resize(@readCanvasResolution)
+    $(window).on('resize', @readCanvasResolution)
+
+    # If the legend uses the value at range feature, it's height
+    # may change with updated calculators
+    @listenTo(@model, 'change:calculators', @readCanvasResolution)
+
     @listenTo(@params, 'change:width change:height', @setCanvasResolution)
 
   remove: ->

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

@@ -0,0 +1,102 @@
+ELA.Views ?= {}
+
+class ELA.Views.GraphView extends ELA.Views.ViewportView
+  initialize: (options = {}) ->
+    unless options.name?
+      throw 'ELA.Views.GraphView: option `name` is required'
+
+    if options.graph?.view
+      @GraphView = options.graph.view.toFunction()
+    else
+      @GraphView = ELA.Views.InterpolatedGraph
+    @displayParams = @model.displayParams[options.name] = new @GraphView.Params
+
+    unless options.legend is false
+      if _.isObject(options.legend) and options.legend.view?
+        @LegendView = options.legend.view.toFunction()
+      else
+        @LegendView = ELA.Views.Legend
+
+    if options.graphOverlay?.view?
+      @GraphOverlayView = options.graphOverlay.view.toFunction()
+
+    for axis, props of options.graph?.axes
+      if props.handler
+        attribute: props.attribute
+        position: switch axis
+          when 'x' then @bottomAxisHandler = attribute: props.attribute
+          when 'y' then @leftAxisHandler = attribute: props.attribute
+
+    @curves = options.graph?.curves?.slice()
+
+    @subviews = {}
+
+  render: =>
+    @$el.empty()
+
+    if @LegendView?
+      view = @subviews.legend ?= new @LegendView
+        model: @model
+        parentView: this
+        localePrefix: @localePrefix
+        curves: @curves
+      @$el.append(view.render().el)
+
+    if @GraphOverlayView?
+      view = @subviews.graphOverlay ?= new @GraphOverlayView
+        model: @model
+        parentView: this
+        localePrefix: @localePrefix
+      @$el.append(view.render().el)
+
+    $horizontalWrapper = $('<div>', class: 'horizontal-wrapper')
+
+    if @leftAxisHandler?
+      view = @subviews.leftAxisHandler ?= new ELA.Views.AxisHandler
+        model: @model
+        displayParams: @displayParams
+        attribute: @leftAxisHandler.attribute
+        position: 'left'
+        parentView: this
+        localePrefix: @localePrefix
+      $horizontalWrapper.append(view.render().el)
+
+    $horizontalWrapper.append($('<div>', class: 'graph'))
+    @$el.append($horizontalWrapper)
+
+    if @bottomAxisHandler?
+      view = @subviews.bottomAxisHandler ?= new ELA.Views.AxisHandler
+        model: @model
+        displayParams: @displayParams
+        attribute: @bottomAxisHandler.attribute
+        position: 'bottom'
+        parentView: this
+        localePrefix: @localePrefix
+      @$el.append(view.render().el)
+
+    delay =>
+      $graph = @$('.graph')
+      guides = []
+      if @bottomAxisHandler?
+        guides.push
+          orientation: 'vertical'
+          attribute: @bottomAxisHandler.attribute
+      if @leftAxisHandler?
+        guides.push
+          orientation: 'horizontal'
+          attribute: @leftAxisHandler.attribute
+      view = @subviews.graph ?= new @GraphView
+        model: @model
+        parentView: this
+        params: @displayParams
+        defaults: _.defaults
+          # Taken from ELA.Views.Canvas::readCanvasResolution
+          width: $graph[0].clientWidth
+          height: $graph[0].clientHeight
+          guides: guides
+          curves: @curves
+        , @graphDefaults
+        localePrefix: @localePrefix
+      $graph.html(view.render().el)
+
+    this

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

@@ -14,8 +14,9 @@ class ELA.Views.InterpolatedGraph extends ELA.Views.BaseGraph
       @bindCalculatorEvents()
       @requestRepaint()
 
-    if attr = @params.get('valueAtRangeAttribute')
-      @model.on "change:#{attr}", @requestRepaint
+    for guide in @params.get('guides')
+      @listenTo(@model, "change:#{guide.attribute}", @requestRepaint)
+
     @model.on 'change:axisLabelingForCurve', @requestRepaint
 
   bindCalculatorEvents: ->
@@ -23,14 +24,15 @@ class ELA.Views.InterpolatedGraph extends ELA.Views.BaseGraph
     @stopListening(@model.previous('calculators'))
 
     for calc in @model.get('calculators')
-      for curve in @model.curves.history
+      filteredCurves = @_filteredCurves()
+      for curve in filteredCurves
         @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]
+      oldestCurve = filteredCurves[0]
       if oldestCurve?
         @listenTo calc, "change:#{oldestCurve.get('function')}", @calculateRanges
 
@@ -124,9 +126,18 @@ class ELA.Views.InterpolatedGraph extends ELA.Views.BaseGraph
     else
       @drawSpline(points, tension, closed, xPos, yPos)
 
+  _filteredCurves: ->
+    curves = @model.curves.history
+    if graphCurves = @params.get('curves')
+      _.filter curves, (curve) ->
+        graphCurves.indexOf(curve.get('function')) >= 0
+    else
+      curves
+
   _sortedCurves: ->
-    _.sortBy @model.curves.history, (c) ->
-      c.attributes.zIndex
+    _.sortBy @_filteredCurves(), (curve) ->
+      curve.get('zIndex')
+
 
   beforeRenderCurves: (resultCurves) ->
   afterRenderCurves: (resultCurves) ->
@@ -135,7 +146,6 @@ class ELA.Views.InterpolatedGraph extends ELA.Views.BaseGraph
     resultCurves = []
     for calc, i in @model.get('calculators')
       for curve, j in @_sortedCurves()
-
         func = curve.get('function')
         resultCurves.push
           curve: curve
@@ -219,63 +229,66 @@ class ELA.Views.InterpolatedGraph extends ELA.Views.BaseGraph
       @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)
+  renderGuide: (guide) ->
+    valueAtPoint = @model.get(guide.attribute)
 
-        # 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()
+    @context.beginPath()
+    @context.setLineDash []
+    @context.strokeStyle = '#999999'
+    @context.lineWidth = 2
+
+    # Border below legend
+    @context.moveTo(@width, 0)
+    @context.lineTo(0, 0)
+
+    if guide.orientation is 'vertical'
+      # 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 guide.orientation is 'vertical'
+      @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()
+    for guide in @params.get('guides')
+      @renderGuide(guide)
     this

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

@@ -1,5 +1,7 @@
 ELA.Views ?= {}
 class ELA.Views.Legend extends Backbone.Poised.View
+  className: 'legend'
+
   valueCurveColumnTemplate: _.template '
 <div class="values col<%= activeClass %>"
      data-index="<%= curveIndex %>"
@@ -29,6 +31,7 @@ class ELA.Views.Legend extends Backbone.Poised.View
     @useValueAtRange = options.useValueAtRange
     @valueAtRangeAxis = options.valueAtRangeAxis or 'x'
     @valueAtRangeAttribute = options.valueAtRangeAttribute or 'valueAtRange'
+    @_curves = options.curves
 
     @model.on "change:#{@valueAtRangeAttribute}", @render
 
@@ -115,6 +118,14 @@ class ELA.Views.Legend extends Backbone.Poised.View
   calculatorFunction: (curve) ->
     "#{curve.get('function')}_value"
 
+  curves: =>
+    curves = @model.curves.whereInHistory()
+    if @_curves
+      _.filter curves, (curve) =>
+        @_curves.indexOf(curve.get('function')) >= 0
+    else
+      curves
+
   render: =>
     if @useValueAtRange
       @range = @model.get(@valueAtRangeAttribute)
@@ -125,7 +136,7 @@ class ELA.Views.Legend extends Backbone.Poised.View
 
         @renderValueHeaderColumn()
 
-        _.each @model.curves.whereInHistory(), @renderValueCurveColumn
+        _.each(@curves(), @renderValueCurveColumn)
 
         # Replace keeping horizontal scroll position
         scrollLeft = @$el.find('.scroll-x').scrollLeft()
@@ -134,5 +145,5 @@ class ELA.Views.Legend extends Backbone.Poised.View
       this
     else
       @$el.empty().addClass('legend-simple')
-      _.each @model.curves.whereInHistory(), @renderSimpleCurveColumn
+      _.each(@curves(), @renderSimpleCurveColumn)
       this

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

@@ -0,0 +1,26 @@
+ELA.Views ?= {}
+
+class ELA.Views.Viewport extends Backbone.Poised.View
+  tagName: 'article'
+  className: 'viewport'
+
+  initialize: (options = {}) ->
+    @views = for view in options.views
+      view.options = _.omit(view, 'view')
+      view.options.name = view.name or Math.random().toString(36).slice(-8)
+      view.View = view.view?.toFunction() or ELA.Views.GraphView
+      view
+
+    @subviews = {}
+
+  render: ->
+    @$el.empty()
+    for view in @views
+      options = _.extend
+        model: @model
+        parentView: this
+        localePrefix: @localePrefix
+      , view.options
+      view = @subviews[view.options.name] ?= new view.View(options)
+      @$el.append(view.render().el)
+    this

data/app/views/general/app.jst.hamlc

@@ -26,17 +26,7 @@
               %button.button.poised.copy
           - if @hasHelpText
             %li.help= t('contextMenu.help')
-  %article.graph.active
-    - if @legendView
-      .legend
-    - if @graphOverlayView
-      .graph-overlay-wrapper
-        .graph-overlay
-    - if @graphView
-      .graph
-    - if @rangeHandlerView
-      .range-handler
+  .viewport
   %a{ href: ELA.settings.upstream.url, target: '_blank' }
     %img.logo{ src: 'images/logo.png' }
-  - if @useHeadup
-    %aside.right.headup
+  %aside.right.headup

data/ela.gemspec

@@ -46,5 +46,5 @@ Gem::Specification.new do |spec|
   spec.add_dependency "jasmine", "~> 2.9", ">= 2.9.0"
   spec.add_dependency "rake", "~> 10.5", ">= 10.5.0"
   spec.add_dependency "uglifier", "~> 4.1", ">= 4.1.5"
-  spec.add_dependency "andand"
+  spec.add_dependency "andand", "~> 1.3", ">= 1.3.3"
 end

data/lib/ela/version.rb

@@ -1,3 +1,3 @@
 module ELA
-  VERSION = '1.1.0'
+  VERSION = '2.0.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ela
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 2.0.0
 platform: ruby
 authors:
 - Franz Kißig
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-02-05 00:00:00.000000000 Z
+date: 2018-02-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -342,16 +342,22 @@ dependencies:
   name: andand
   requirement: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 1.3.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 1.3.3
 description: 
 email:
 - fkissig@velalu.qa
@@ -422,7 +428,9 @@ files:
 - app/js/lib/models/base_subapp_container.coffee
 - app/js/lib/models/curve.coffee
 - app/js/lib/router.coffee
+- app/js/lib/views/1_viewport_view.coffee
 - app/js/lib/views/app.coffee
+- app/js/lib/views/axis_handler.coffee
 - app/js/lib/views/base_app.coffee
 - app/js/lib/views/base_aside.coffee
 - app/js/lib/views/base_graph.coffee
@@ -431,16 +439,17 @@ files:
 - app/js/lib/views/curve_graph.coffee
 - app/js/lib/views/curves_aside.coffee
 - app/js/lib/views/curves_list_item.coffee
+- app/js/lib/views/graph_view.coffee
 - app/js/lib/views/grouped_parameters_aside.coffee
 - app/js/lib/views/headup.coffee
 - app/js/lib/views/help.coffee
 - app/js/lib/views/interpolated_graph.coffee
 - app/js/lib/views/legend.coffee
-- app/js/lib/views/legend_handler.coffee
 - app/js/lib/views/overview.coffee
 - app/js/lib/views/overview_tile.coffee
 - app/js/lib/views/parameters_aside.coffee
 - app/js/lib/views/three_graph.coffee
+- app/js/lib/views/viewport.coffee
 - app/js/vendor/Markdown.Converter.js
 - app/js/vendor/Markdown.Extra.js
 - app/js/vendor/Markdown.Toc.coffee
@@ -674,7 +683,6 @@ files:
 - dist/app_js/lib/views/help.js
 - dist/app_js/lib/views/interpolated_graph.js
 - dist/app_js/lib/views/legend.js
-- dist/app_js/lib/views/legend_handler.js
 - dist/app_js/lib/views/overview.js
 - dist/app_js/lib/views/overview_tile.js
 - dist/app_js/lib/views/parameters_aside.js
@@ -4358,7 +4366,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.12
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: HTML5 E-Learning Framework

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

@@ -1,51 +0,0 @@
-ELA.Views ?= {}
-class ELA.Views.LegendHandler extends Backbone.Poised.View
-  events:
-    'pan': 'updateRange'
-    'tap': 'updateRange'
-
-  hammerjs:
-    recognizers: [
-      [Hammer.Rotate, { enable: false }],
-      [Hammer.Pinch, { enable: false }, ['rotate']],
-      [Hammer.Swipe, { enable: false }],
-      [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 1 }, ['swipe']],
-      [Hammer.Tap, { threshold: 5 }],
-      [Hammer.Press, { enable: false }]
-    ]
-
-  initialize: (options) ->
-    super
-    @axis = options.axis or 'x'
-    @attribute = options.attribute or @axis
-    @precision = @model.get('valueAtRangePrecision') # TODO: Make this obsolete
-    @precision ?= options.precision
-    @precision ?= 2
-
-    @listenTo @model, "change:#{@attribute}", @renderText
-
-  updateRange: (e) =>
-    origin = @model.displayParams.get("#{@axis}Origin")
-    range = @model.displayParams.get("#{@axis}Range")
-    if @axis is 'x'
-      width = @model.displayParams.get('width')
-      point = (range / width) * (e.gesture.pointers[0].clientX - origin)
-    else
-      height = @model.displayParams.get('height')
-      y = e.gesture.pointers[0].clientY - @$el.offset().top
-      y = Math.min(Math.max(y, 0), height)
-      point = (range / height) * (origin - y)
-
-    pow = Math.pow(10, @precision)
-    point = Math.round(point * pow) / pow
-    @model.set(@attribute, point)
-
-  renderText: =>
-    @$el.find('span').text(t(@model.name + '.legendHandler.label', 'legendHandler.label', value: @model.get(@attribute).toFixed(@precision)))
-
-  render: =>
-    @$el.html('<span class="hint"></span>')
-    @$el.toggleClass('orientation-x', @axis is 'x')
-    @$el.toggleClass('orientation-y', @axis is 'y')
-    @renderText()
-    this