     zoomingTimeoutId: null
 
   componentDidMount: ->
-    addEventListener "keydown", @frameKeyPan
-    addEventListener "mousewheel", @frameKeyPan
+    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: ->
-    removeEventListener "keydown", @frameKeyPan
-    removeEventListener "mousewheel", @frameKeyPan
+    if @props.project? && 'pan and zoom' in @props.project?.experimental_tools
+      removeEventListener "keydown", @frameKeyPan
+      removeEventListener "mousewheel", @frameKeyPan
 
   render: () ->
     subject = @props.subject

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

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

          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
