     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

              </div>
            </div>
            <div>
              <button title={"zoom out"} className={"zoom-out fa fa-minus" + if @cannotZoomOut() then " disabled" else "" } onMouseDown={ @continuousZoom.bind(this, 1.1 ) } onMouseUp={@stopZoom} />
            </div>
            <div>
              <button title={"zoom in"} className="zoom-in fa fa-plus" onMouseDown={@continuousZoom.bind(this, .9)} onMouseUp={@stopZoom} />
            </div>
            <div>
              <button title={"rest zoom levels"} className={"reset fa fa-refresh" + if @cannotZoomOut() then " disabled" else ""} onClick={ this.zoomReset } ></button>
            </div>
          </div>}
        

          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
