           x: newNaturalX,
           y: newNaturalY
   
+  keyDownZoomButton: (change, e) ->
+    # only zoom if a user presses enter on the zoom button.
+    if e.which == 13
+      @setState zooming: true, =>
+        @zoom(change)
+
   stopZoom: (e) ->
     e.stopPropagation()
     @setState zooming: false

        width: @state.viewBoxDimensions.width
        height: @state.viewBoxDimensions.height

  frameKeyPan: (e)->
    return unless @state.panEnabled
    keypress = e.which
    switch keypress

    zoomingTimeoutId: null

  componentDidMount: ->
    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
      # these events enable a user to navigate an image using arrows, +, and - keys, 
      # while the user is in pan and zoom mode.
      addEventListener "keydown", @frameKeyPan
      addEventListener "mousewheel", @frameKeyPan

  componentWillUnmount: ->
    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
      removeEventListener "keydown", @frameKeyPan
      removeEventListener "mousewheel", @frameKeyPan

  render: () ->
    subject = @props.subject
