           'user-select': 'none'
         })
       ).on("mousemove", () ->
-        s = self.linesContainer.select('.selection')
+        s = self.svg.select('.selection')
         if s.empty() then return
         p = d3.mouse(this)
         margin: self.margin

            # use or condition for top and bottom
            if (y >= d.y && y <= d.y + d.height) || (y + 10 >= d.y && y + 10 <= d.y + d.height)
              d3.select(this).classed('key--selected', true)
              #self.timeline.selectionManager.select(this, true)
              selection.push(this)

        self.timeline.selectionManager.select(selection)

      ).on("mouseup", () ->
        self.linesContainer.selectAll('.selection').remove()
        # Enable again the default browser text selection.
        $('body').css({
          'user-select': 'all'
        })
      )
define (require) ->
  class Selection
    constructor: (@timeline, @svg, @margin) ->
      @init()

    onMouseUp: (e) =>
      @svg.selectAll('.selection').remove()
      # Enable again the default browser text selection.
      $('body').css({
        'user-select': 'all'
      })

    init: () ->
      self = this
      @svg.on("mousedown", () ->
        p = d3.mouse(this)
        self.svg.append('rect')
          .attr({
            rx: 6,
            ry: 6,
