 define (require) ->
   class Selection
-    constructor: (@timeline, @linesContainer, @margin) ->
+    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
-      @linesContainer.on("mousedown", () ->
+      @svg.on("mousedown", () ->
         p = d3.mouse(this)
-        self.linesContainer.append('rect')
+        self.svg.append('rect')
           .attr({
             rx: 6,
             ry: 6,

            # 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'
        })
      )
          'user-select': 'none'
        })
      ).on("mousemove", () ->
        s = self.svg.select('.selection')
        if s.empty() then return
        p = d3.mouse(this)
        margin: self.margin
