Add initial image viewer

An image session will be opened by project.buildEditSession()
for known image extensions.

Closes #203

spec/app/image-view-spec.coffee

@@ -0,0 +1,29 @@
+ImageView = require 'image-view'
+ImageEditSession = require 'image-edit-session'
+
+describe "ImageView", ->
+  [view, path] = []
+
+  beforeEach ->
+    path = project.resolve('binary-file.png')
+    view = new ImageView()
+    view.attachToDom()
+
+  it "displays the image for a path", ->
+    view.setModel(new ImageEditSession(path))
+    expect(view.image.attr('src')).toBe path
+
+  it "centers the image in the editor", ->
+    imageLoaded = false
+    view.image.load =>
+      imageLoaded = true
+    view.setModel(new ImageEditSession(path))
+
+    waitsFor ->
+      imageLoaded
+
+    runs ->
+      expect(view.image.width()).toBe 10
+      expect(view.image.height()).toBe 10
+      expect(view.image.css('margin-left')).toBe "-5px"
+      expect(view.image.css('margin-top')).toBe "-5px"

src/app/image-edit-session.coffee

@@ -0,0 +1,33 @@
+fsUtils = require 'fs-utils'
+
+module.exports=
+class ImageEditSession
+  registerDeserializer(this)
+
+  @deserialize: (state) ->
+    if fsUtils.exists(state.path)
+      project.buildEditSession(state.path)
+    else
+      console.warn "Could not build edit session for path '#{state.path}' because that file no longer exists"
+
+  constructor: (@path) ->
+
+  serialize: ->
+    deserializer: 'ImageEditSession'
+    path: @path
+
+  getViewClass: ->
+    require 'image-view'
+
+  getTitle: ->
+    if path = @getPath()
+      fsUtils.base(path)
+    else
+      'untitled'
+
+  getUri: -> @path
+
+  getPath: -> @path
+
+  isEqual: (other) ->
+    other instanceof ImageEditSession and @getUri() is other.getUri()

src/app/image-view.coffee

@@ -0,0 +1,43 @@
+ScrollView = require 'scroll-view'
+
+module.exports =
+class ImageView extends ScrollView
+  @content: ->
+    @div class: 'image-view', tabindex: -1, =>
+      @img outlet: 'image'
+
+  initialize: (imageEditSession) ->
+    requireStylesheet 'image-view'
+
+    @image.load => @updateSize()
+    @setPath(imageEditSession?.getPath())
+
+  afterAttach: (onDom) ->
+    return unless onDom
+
+    if pane = @getPane()
+      @active = @is(pane.activeView)
+      @subscribe pane, 'pane:active-item-changed', (event, item) =>
+        wasActive = @active
+        @active = @is(pane.activeView)
+        @updateSize() if @active and not wasActive
+
+  updateSize: ->
+    return unless @isVisible()
+
+    @image.css
+      'margin-left': -@image.width() / 2
+      'margin-top': -@image.height() / 2
+    @image.show()
+
+  setPath: (path) ->
+    if path?
+      @image.hide().attr('src', path) if @image.attr('src') isnt path
+    else
+      @image.hide()
+
+  setModel: (imageEditSession) ->
+    @setPath(imageEditSession?.getPath())
+
+  getPane: ->
+    @parent('.item-views').parent('.pane').view()

src/app/project.coffee

@@ -4,6 +4,7 @@ $ = require 'jquery'
 Range = require 'range'
 Buffer = require 'text-buffer'
 EditSession = require 'edit-session'
+ImageEditSession = require 'image-edit-session'
 EventEmitter = require 'event-emitter'
 Directory = require 'directory'
 BufferedProcess = require 'buffered-process'
@@ -85,7 +86,10 @@ class Project
   setSoftWrap: (@softWrap) ->
 
   buildEditSession: (filePath, editSessionOptions={}) ->
-    @buildEditSessionForBuffer(@bufferForPath(filePath), editSessionOptions)
+    if fsUtils.isImageExtension(fsUtils.extension(filePath))
+      new ImageEditSession(filePath)
+    else
+      @buildEditSessionForBuffer(@bufferForPath(filePath), editSessionOptions)
 
   buildEditSessionForBuffer: (buffer, editSessionOptions) ->
     options = _.extend(@defaultEditSessionOptions(), editSessionOptions)

static/image-view.less

@@ -0,0 +1,15 @@
+.image-view {
+  height:100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  img {
+    padding: 25px;
+    border: 2px solid;
+    background-image: url(images/transparent-background.gif);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+}

themes/atom-dark-ui/image-view.less

@@ -0,0 +1,7 @@
+.image-view {
+  background-color: #1d1f21;
+
+  img {
+      border-color: #c5c8c6;
+  }
+}

themes/atom-dark-ui/package.cson

@@ -8,4 +8,5 @@
   'command-panel'
   'command-logger'
   'blurred'
+  'image-view'
 ]

themes/atom-light-ui/image-view.less

@@ -0,0 +1,7 @@
+.image-view {
+  background-color: #fff;
+}
+
+.image-view img {
+  border-color: #ccc;
+}

themes/atom-light-ui/package.cson

@@ -9,4 +9,5 @@
   'command-panel'
   'command-logger'
   'blurred'
+  'image-view'
 ]