Viewport overlay layer is where UI stuff goes, not map grid layer

TODO.md

@@ -29,36 +29,40 @@
 
 ## Editor
 
-* FEATURE: Add ability to add a new map. To do this, double-click on "Add new
-  map" in the sidebar. A modal will appear with textboxes for the desired
-  dimensions of the map, and when the modal is submitted a new canvas is created
-  and loaded into the viewport.
+* BUG: When switching layers sidebar never gets hidden
 
-* FEATURE: Add entities layer
+* FEATURE: Add ability to click on a fill object and delete it just like you can
+  do with tiles -- or extract this into a common place
 
-* FEATURE: Add a selection tool -- so if you want to move two tiles as a group
-  (say, Link's house AND the door), you can do that.
+* INTERNAL: Use editor-map-object for all objects not just tiles
 
-* FEATURE: Add undo/redo -- this will require refactoring all the tools into a
-  more object-oriented approach
+* FEATURE: Add ability to set the background color of a map
 
-* FEATURE: Add ability to dupe an object without having to drag it again all the
-  way from the sidebar
+* FEATURE: Add ability to select multiple objects so you can move them as a
+  group
 
-* INTERNAL: For map objects, group the $elem and the object together,
-  everywhere, as one MapObject
+* FEATURE: Remember the last tool used in a layer
 
-* FEATURE: Snap the selection box to the nearest grid guide, but not by rounding
-  -- if cursor is within 5 pixels of a guide, snap it otherwise do nothing
+* INTERNAL: For map objects, group the $elem and the object together,
+  everywhere, as one MapObject, and clean up stuff just like fills
 
 * INTERNAL: Bind viewport events to viewport.$elem rather than viewport.$map
 
-* FEATURE: Remember the last tool used in a layer
+* FEATURE: Add entities layer
 
-* BUG: When switching layers sidebar never gets hidden
+* FEATURE: Add ability to add a new map. To do this, double-click on "Add new
+  map" in the sidebar. A modal will appear with textboxes for the desired
+  dimensions of the map, and when the modal is submitted a new canvas is created
+  and loaded into the viewport.
 
-* FEATURE: Add ability to select a fill object and delete it just like you can
-  do with map objects -- or extract this into a common place
+#---
 
-* FEATURE: Add ability to set the background color of a map
+* NICE-TO-HAVE: Snap the selection box to the nearest grid guide, but not by
+  rounding -- if cursor is within 5 pixels of a guide, snap it otherwise do
+  nothing
+
+* NICE-TO-HAVE: Add undo/redo -- this will require refactoring all the tools
+  into a more object-oriented approach
 
+* NICE-TO-HAVE: Add ability to dupe an object without having to drag it again
+  all the way from the sidebar

app/javascripts/editor/viewport.coffee

@@ -11,7 +11,8 @@ define 'editor.viewport', ->
 
       @$elem = $('#editor-viewport')
       @$map = $('#editor-map')
-      @_initMapOverlay()
+      @$overlay = $('#editor-viewport-overlay')
+      @_initMapGrid()
       @$mapLayers = $('#editor-map-layers')
       @_initBounds()
       @map = null
@@ -211,7 +212,7 @@ define 'editor.viewport', ->
       clearActiveSelections = =>
         activeSelections = []
         # selection.$box.remove() does not work for some reason
-        @$mapOverlay.find('.editor-selection-box').remove()
+        @$overlay.find('.editor-selection-box').remove()
 
       selectionEvents = do =>
         mouseupBound = false
@@ -266,7 +267,7 @@ define 'editor.viewport', ->
               currentSelection = {}
               currentSelection.pos = selectionStartedAt
               currentSelection.$box = $('<div class="editor-selection-box">')
-              @$mapOverlay.append(currentSelection.$box)
+              @$overlay.append(currentSelection.$box)
               dragStarted = true
 
             mouse = @_roundCoordsToGrid(
@@ -314,6 +315,8 @@ define 'editor.viewport', ->
           # event ourselves)
           setTimeout selectionEvents.add, 0
 
+      $(window)
+        # bind mouseup to window in case it occurs outside of the viewport
         .bind "mouseup.#{evtns}", (evt) =>
           @$elem.unbind "mousemove.#{evtns}"
           mouseDownAt = null
@@ -328,7 +331,6 @@ define 'editor.viewport', ->
           # event ourselves)
           setTimeout selectionEvents.add, 0
 
-      $(window)
         .bind "keyup.#{evtns}", (evt) =>
           Bounds = require('game.Bounds')
           # TODO: Make this Cmd-Backspace
@@ -394,7 +396,7 @@ define 'editor.viewport', ->
         layers['fill'].push(fill)
       localStorage.setItem('editor.map', JSON.stringify(layers))
 
-    _initMapOverlay: ->
+    _initMapGrid: ->
       # create the grid pattern that backgrounds the map
       canvas = require('game.canvas').create(GRID_SIZE, GRID_SIZE)
       ctx = canvas.getContext()
@@ -404,10 +406,10 @@ define 'editor.viewport', ->
       ctx.moveTo(0.5, 0.5)
       ctx.lineTo(0.5, GRID_SIZE)
       ctx.stroke()
-      mapOverlay = canvas
+      mapGrid = canvas
 
-      @$mapOverlay = $('#editor-map-overlay')
-        .css('background-image', "url(#{mapOverlay.element.toDataURL()})")
+      @$mapGrid = $('#editor-map-grid')
+        .css('background-image', "url(#{mapGrid.element.toDataURL()})")
         .css('background-repeat', 'repeat')
 
     _initBounds: ->

app/stylesheets/editor.scss

@@ -132,7 +132,7 @@ $sidebar-width: 300px;
   }
 }
 
-#editor-map-content, #editor-map-overlay {
+#editor-map-content, #editor-map-grid, #editor-viewport-overlay {
   @include absfill();
 }
 

app/views/editor.erb

@@ -15,8 +15,9 @@
   <div id="editor-viewport">
     <div id="editor-map" class="editor-map-unloaded">
       <div id="editor-map-layers"></div>
-      <div id="editor-map-overlay"></div>
+      <div id="editor-map-grid"></div>
     </div>
+    <div id="editor-viewport-overlay"></div>
   </div>
   <div id="editor-sidebar">
   </div>

public/stylesheets/app/editor.css

@@ -89,7 +89,7 @@ body {
   #editor-map.editor-map-unloaded {
     display: none; }
 
-#editor-map-content, #editor-map-overlay {
+#editor-map-content, #editor-map-grid, #editor-viewport-overlay {
   position: absolute;
   top: 0;
   left: 0;