Perform vim-style editor pane splitting

Using percentage dimensions to absolutely position the panes on screen where they need to be located. Flexbox would have been nice, but unfortunately I could not work around what seem to be bugs (or at least major inconveniences) in its current implementation.

src/atom/editor.coffee

@@ -418,30 +418,26 @@ class Editor extends View
     @renderer.logLines()
 
   splitLeft: ->
-    @split('horizontal', 'before')
+    @split('row', 'before')
 
   splitRight: ->
-    @split('horizontal', 'after')
+    @split('row', 'after')
 
   splitUp: ->
-    @split('vertical', 'before')
+    @split('column', 'before')
 
   splitDown: ->
-    @split('vertical', 'after')
+    @split('column', 'after')
 
-  split: (axis, side) ->
-    unless @parent().hasClass(axis)
+  split: (axis, insertMethod) ->
+    unless @parent().hasClass axis
       container = $$ -> @div class: axis
       container.insertBefore(this).append(this.detach())
 
     editor = new Editor({@buffer})
     editor.setCursorScreenPosition(@getCursorScreenPosition())
-    @addClass 'split'
-    editor.addClass('split')
-    if side is 'before'
-      @before(editor)
-    else
-      @after(editor)
+    this[insertMethod](editor)
+    @parents('#root-view').view().adjustSplitPanes()
 
   remove: (selector, keepData) ->
     @unsubscribeFromBuffer() unless keepData

src/atom/root-view.coffee

@@ -36,6 +36,57 @@ class RootView extends View
   addPane: (view) ->
     @append(view)
 
+  adjustSplitPanes: (element = @children(':first'))->
+    if element.hasClass('row')
+      totalUnits = @horizontalGridUnits(element)
+      console.log totalUnits
+      unitsSoFar = 0
+      for child in element.children()
+        child = $(child)
+        childUnits = @horizontalGridUnits(child)
+        child.css
+          width: "#{childUnits / totalUnits * 100}%"
+          height: '100%'
+          top: 0
+          left: "#{unitsSoFar / totalUnits * 100}%"
+        @adjustSplitPanes(child)
+        unitsSoFar += childUnits
+
+    else if element.hasClass('column')
+      totalUnits = @verticalGridUnits(element)
+      console.log "total vertical", totalUnits
+      unitsSoFar = 0
+      for child in element.children()
+        child = $(child)
+        childUnits = @verticalGridUnits(child)
+        child.css
+          width: '100%'
+          height: "#{childUnits / totalUnits * 100}%"
+          top: "#{unitsSoFar / totalUnits * 100}%"
+          left: 0
+        @adjustSplitPanes(child)
+        unitsSoFar += childUnits
+
+  horizontalGridUnits: (element) ->
+    if element.is('.row, .column')
+      childUnits = (@horizontalGridUnits($(child)) for child in element.children())
+      if element.hasClass('row')
+        _.sum(childUnits)
+      else # it's a column
+        Math.max(childUnits...)
+    else
+      1
+
+  verticalGridUnits: (element) ->
+    if element.is('.row, .column')
+      childUnits = (@verticalGridUnits($(child)) for child in element.children())
+      if element.hasClass('column')
+        _.sum(childUnits)
+      else # it's a row
+        Math.max(childUnits...)
+    else
+      1
+
   toggleFileFinder: ->
     return unless @project
 

src/stdlib/underscore-extensions.coffee

@@ -4,3 +4,7 @@ _.mixin
   remove: (array, element) ->
     array.splice(array.indexOf(element), 1)
 
+  sum: (array) ->
+    sum = 0
+    sum += elt for elt in array
+    sum