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

        height: @state.viewBoxDimensions.height

  panVertical:(direction)->
    maximumY = (@state.frameDimensions.height - @state.viewBoxDimensions.height) + 20
    minimumY = -20
    changedY = @state.viewBoxDimensions.y + direction
    @setState
      viewBoxDimensions:
        x: @state.viewBoxDimensions.x 
        y: Math.max(minimumY, Math.min(changedY, maximumY))
        width: @state.viewBoxDimensions.width
        height: @state.viewBoxDimensions.height

        e.preventDefault()
        @panHorizontal(-20)
      # up
      when 38
        e.preventDefault()
        @panVertical(-20)
      # right
      when 39
        e.preventDefault()
        @panHorizontal(20)
      # down
      when 40
        e.preventDefault()
        @panVertical(20)
      # zoom out - Chrome(187), Firefox(61)
      when 187, 61
        e.preventDefault()
        @setState zooming: true
        @zoom(.9)
      # zoom in - Chrome(189), Firefox(173)
      when 189, 173
        e.preventDefault()
        @setState zooming: true
        @zoom(1.1)
      # zooming by wheel
      when 1
        e.preventDefault()
        @setState zooming: true
        if e.deltaY > 0 then @zoom(.9) else @zoom(1.1)

  panHorizontal:(direction) ->
    maximumX = (@state.frameDimensions.width - @state.viewBoxDimensions.width) + (@state.frameDimensions.width * 0.6)
    minumumX = -(@state.frameDimensions.width * 0.6)
    changedX = @state.viewBoxDimensions.x + direction
    @setState
      viewBoxDimensions:
