Add PaneAxisElement

src/pane-axis-element.coffee

@@ -0,0 +1,44 @@
+{CompositeDisposable} = require 'event-kit'
+{callAttachHooks} = require './space-pen-extensions'
+
+class PaneAxisElement extends HTMLElement
+  createdCallback: ->
+    @subscriptions = new CompositeDisposable
+
+  detachedCallback: ->
+    @subscriptions.dispose()
+
+  setModel: (@model) ->
+    @subscriptions.add @model.onDidAddChild(@childAdded.bind(this))
+    @subscriptions.add @model.onDidRemoveChild(@childRemoved.bind(this))
+    @subscriptions.add @model.onDidReplaceChild(@childReplaced.bind(this))
+
+    @childAdded({child, index}) for child, index in @model.getChildren()
+
+    switch @model.getOrientation()
+      when 'horizontal'
+        @classList.add('pane-row')
+      when 'vertical'
+        @classList.add('pane-column')
+
+  childAdded: ({child, index}) ->
+    view = @model.getView(child)
+    @insertBefore(view, @children[index])
+    callAttachHooks(view) # for backward compatibility with SpacePen views
+
+  childRemoved: ({child}) ->
+    view = @model.getView(child)
+    view.remove()
+
+  childReplaced:  ({index, oldChild, newChild}) ->
+    focusedElement = document.activeElement if @hasFocus()
+    @childRemoved({child: oldChild, index})
+    @childAdded({child: newChild, index})
+    focusedElement?.focus() if document.activeElement is document.body
+
+  hasFocus: ->
+    this is document.activeElement or @contains(document.activeElement)
+
+module.exports = PaneAxisElement = document.registerElement 'atom-pane-axis',
+  prototype: PaneAxisElement.prototype
+  extends: 'div'

src/pane-axis-view.coffee

@@ -1,37 +0,0 @@
-{CompositeDisposable} = require 'event-kit'
-{View} = require './space-pen-extensions'
-PaneView = null
-
-module.exports =
-class PaneAxisView extends View
-  initialize: (@model) ->
-    @subscriptions = new CompositeDisposable
-
-    @onChildAdded({child, index}) for child, index in @model.getChildren()
-
-    @subscriptions.add @model.onDidAddChild(@onChildAdded)
-    @subscriptions.add @model.onDidRemoveChild(@onChildRemoved)
-    @subscriptions.add @model.onDidReplaceChild(@onChildReplaced)
-
-  afterAttach: ->
-    @container = @closest('.panes').view()
-
-  onChildReplaced:  ({index, oldChild, newChild}) =>
-    focusedElement = document.activeElement if @hasFocus()
-    @onChildRemoved({child: oldChild, index})
-    @onChildAdded({child: newChild, index})
-    focusedElement?.focus() if document.activeElement is document.body
-
-  onChildAdded: ({child, index}) =>
-    view = @model.getView(child).__spacePenView
-    @insertAt(index, view)
-
-  onChildRemoved: ({child}) =>
-    view = @model.getView(child).__spacePenView
-    view.detach()
-    PaneView ?= require './pane-view'
-    if view instanceof PaneView and view.model.isDestroyed()
-      @container?.trigger 'pane:removed', [view]
-
-  beforeRemove: ->
-    @subscriptions.dispose()

src/pane-axis.coffee

@@ -3,9 +3,6 @@
 {flatten} = require 'underscore-plus'
 Serializable = require 'serializable'
 
-PaneRowView = null
-PaneColumnView = null
-
 module.exports =
 class PaneAxis extends Model
   atom.deserializers.add(this)
@@ -40,11 +37,7 @@ class PaneAxis extends Model
 
   setContainer: (@container) -> @container
 
-  getViewClass: ->
-    if @orientation is 'vertical'
-      PaneColumnView ?= require './pane-column-view'
-    else
-      PaneRowView ?= require './pane-row-view'
+  getOrientation: -> @orientation
 
   getView: (object) ->
     @container.getView(object)

src/pane-column-view.coffee

@@ -1,12 +0,0 @@
-{$} = require './space-pen-extensions'
-_ = require 'underscore-plus'
-PaneAxisView = require './pane-axis-view'
-
-module.exports =
-class PaneColumnView extends PaneAxisView
-
-  @content: ->
-    @div class: 'pane-column'
-
-  className: ->
-    "PaneColumn"

src/pane-container-view.coffee

@@ -1,7 +1,7 @@
 {deprecate} = require 'grim'
 Delegator = require 'delegato'
 {CompositeDisposable} = require 'event-kit'
-{$, View} = require './space-pen-extensions'
+{$, View, callAttachHooks} = require './space-pen-extensions'
 PaneView = require './pane-view'
 PaneContainer = require './pane-container'
 
@@ -27,19 +27,19 @@ class PaneContainerView extends View
     @subscriptions.add @model.onDidChangeActivePaneItem(@onActivePaneItemChanged)
 
   getRoot: ->
-    @children().first().view()
+    view = @model.getView(@model.getRoot())
+    view.__spacePenView ? view
 
   onRootChanged: (root) =>
     focusedElement = document.activeElement if @hasFocus()
 
-    oldRoot = @getRoot()
-    if oldRoot instanceof PaneView and oldRoot.model.isDestroyed()
-      @trigger 'pane:removed', [oldRoot]
-    oldRoot?.detach()
+    if oldRootView = @model.getView(@model.getRoot())
+      oldRootView.remove()
+
     if root?
       view = @model.getView(root)
-      view = view.__spacePenView if view.__spacePenView?
       @append(view)
+      callAttachHooks(view)
       focusedElement?.focus()
     else
       atom.workspaceView?.focus() if focusedElement?

src/pane-container.coffee

@@ -4,6 +4,8 @@
 Serializable = require 'serializable'
 Pane = require './pane'
 PaneElement = require './pane-element'
+PaneAxis = require './pane-axis'
+PaneAxisElement = require './pane-axis-element'
 ViewRegistry = require './view-registry'
 ItemRegistry = require './item-registry'
 PaneContainerView = null
@@ -36,6 +38,9 @@ class PaneContainer extends Model
     @viewRegistry.addViewProvider
       modelConstructor: Pane
       viewConstructor: PaneElement
+    @viewRegistry.addViewProvider
+      modelConstructor: PaneAxis
+      viewConstructor: PaneAxisElement
 
     @setRoot(params?.root ? new Pane)
     @destroyEmptyPanes() if params?.destroyEmptyPanes

src/pane-element.coffee

@@ -72,8 +72,7 @@ class PaneElement extends HTMLElement
   getActiveView: -> @model.getView(@model.getActiveItem())
 
   hasFocus: ->
-    {activeElement} = document
-    this is activeElement or @contains(activeElement)
+    this is document.activeElement or @contains(document.activeElement)
 
 atom.commands.add '.pane',
   'pane:save-items': -> @getModel().saveItems()

src/pane-row-view.coffee

@@ -1,11 +0,0 @@
-{$} = require './space-pen-extensions'
-_ = require 'underscore-plus'
-PaneAxisView = require './pane-axis-view'
-
-module.exports =
-class PaneRowView extends PaneAxisView
-  @content: ->
-    @div class: 'pane-row'
-
-  className: ->
-    "PaneRow"

src/pane-view.coffee

@@ -39,13 +39,17 @@ class PaneView extends View
     @subscriptions.add @model.onDidMoveItem(@onItemMoved)
     @subscriptions.add @model.onWillDestroyItem(@onBeforeItemDestroyed)
     @subscriptions.add @model.observeActive(@onActiveStatusChanged)
+    @subscriptions.add @model.onDidDestroy(@onPaneDestroyed)
 
   afterAttach: ->
     @container ?= @closest('.panes').view()
-    @trigger 'pane:attached', [this]
+    @trigger('pane:attached', [this])
 
-  beforeRemove: ->
+  onPaneDestroyed: =>
+    @container?.trigger 'pane:removed', [this]
     @subscriptions.dispose()
+
+  remove: ->
     @model.destroy() unless @model.isDestroyed()
 
   # Essential: Returns the {Pane} model underlying this pane view
@@ -164,3 +168,6 @@ class PaneView extends View
   splitDown: (items...) -> @model.getView(@model.splitDown({items})).__spacePenView
 
   getContainer: -> @closest('.panes').view()
+
+  focus: ->
+    @element.focus()

src/workspace-view.coffee

@@ -10,8 +10,6 @@ fs = require 'fs-plus'
 Workspace = require './workspace'
 CommandInstaller = require './command-installer'
 PaneView = require './pane-view'
-PaneColumnView = require './pane-column-view'
-PaneRowView = require './pane-row-view'
 PaneContainerView = require './pane-container-view'
 Editor = require './editor'