       (div
         className: drawClass
         onMouseDown: @startDrawCurve
-        onMouseMove: @drawCurve
         onMouseUp: @endDrawCurve
-        onMouseOut: @endDrawCurve
+        ref: "graphBody"
         ,
         if @state.newCustomData
           (div {className: 'graph-hint'},


  endDrawCurve: (evt) ->
    if @drawing
      @drawing = false
      #update relation with custom data
      @updateRelationCustomData(@state.currentData)

  pointToScaledCoords: (evt) ->
    rect = evt.target.getBoundingClientRect()
    coords = {x: rect.width - (rect.right-evt.clientX), y: rect.bottom - evt.clientY}
    scaledCoords = {x: Math.round(coords.x / rect.width * 100), y: Math.round(coords.y / rect.height * 100)}
    scaledCoords

  startDrawCurve: (evt) ->
    # can only draw on custom relationships
    if @state.canDraw
      document.addEventListener 'mousemove', @drawCurve
      @drawing = true
      if @state.newCustomData
        scaledCoords = @pointToScaledCoords(evt)
