Fix layer switching so other layers don't interfere with this layer e…

…vent-wise
mcmire · Apr 1, 2012 · 913d71b · 913d71b
1 parent 8f7149d
commit 913d71b
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 131 deletions.
diff --git a/app/javascripts/editor/core.coffee b/app/javascripts/editor/core.coffee
@@ -10,21 +10,8 @@ define 'editor.core', ->
   LAYER_KEYS = [ONE_KEY, TWO_KEY]
 
   meta.def
-    _createMapGrid: ->
-      # create the grid pattern that backgrounds the map
-      canvas = require('game.canvas').create(16, 16)
-      ctx = canvas.getContext()
-      ctx.strokeStyle = 'rgba(0,0,0,0.15)'
-      ctx.moveTo(0.5, 0.5)
-      ctx.lineTo(16, 0.5)
-      ctx.moveTo(0.5, 0.5)
-      ctx.lineTo(0.5, 16)
-      ctx.stroke()
-      @mapGrid = canvas
 
     init: ->
-      @_createMapGrid()
-
       @viewport = require('editor.viewport').init(this)
       @$sidebar = $('#editor-sidebar')
       @$mapChooser = $('#editor-map-chooser select')
@@ -189,46 +176,45 @@ define 'editor.core', ->
 
     _selectLayer: (layer) ->
       @_deactivateCurrentLayer()
-
       @currentLayer = layer
-      $map = @viewport.$map
-
-      $(document.body)
-        .removeClassesLike(/^editor-layer-/)
-        .addClass("editor-layer-#{layer}")
+      @_activateCurrentLayer()
 
-      $layer = $map.find('.editor-layer').removeClass('editor-layer-selected')
-      $layer.find('.editor-layer-content').css('background', 'none')
-      $layer.find('.editor-layer-bg').css('background', 'none')
+    _activateCurrentLayer: ->
+      layer = @currentLayer
 
-      $layer = $map.find(".editor-layer[data-layer=#{layer}]")
+      # TODO: Move to viewport
+      $layer = @viewport.$map.find(".editor-layer[data-layer=#{layer}]")
         .addClass('editor-layer-selected')
-      $layer.find('.editor-layer-content')
-        .css('background-image', "url(#{@mapGrid.element.toDataURL()})")
-        .css('background-repeat', 'repeat')
-      $layer.find('.editor-layer-bg')
-        .css('background-color', 'white')
+        .detach()
+      # put on top of all other elements
+      @viewport.$map.append($layer)
+      $(document.body).addClass("editor-layer-#{layer}")
 
-      @$sidebar.find('> div').hide()
-      @$sidebar.find("> div[data-layer=#{layer}]").show()
+      @$sidebar.find("> div[data-layer=#{layer}").show()
 
-      @_activateCurrentLayer()
-
-    _activateCurrentLayer: ->
-      m = "activate_#{@currentLayer}_layer"
-      console.log "viewport: activating #{@currentLayer} layer"
+      m = "activate_#{layer}_layer"
+      console.log "viewport: activating #{layer} layer"
       @viewport[m]?()
-      console.log "core: activating #{@currentLayer} layer"
+      console.log "core: activating #{layer} layer"
       @[m]?()
       @_activateCurrentTool()
 
     _deactivateCurrentLayer: ->
-      m = "deactivate_#{@currentLayer}_layer"
-      if @currentLayer
+      layer = @currentLayer
+
+      # TODO: Move to viewport
+      @viewport.$map.find(".editor-layer[data-layer=#{layer}")
+        .removeClass('editor-layer-selected')
+      $(document.body).removeClass("editor-layer-#{layer}")
+
+      @$sidebar.find("> div[data-layer=#{layer}").hide()
+
+      m = "deactivate_#{layer}_layer"
+      if layer
         if @currentTool then @_deactivateCurrentTool()
-        console.log "core: deactivating #{@currentLayer} layer"
+        console.log "core: deactivating #{layer} layer"
         @[m]?()
-        console.log "viewport: deactivating #{@currentLayer} layer"
+        console.log "viewport: deactivating #{layer} layer"
         @viewport[m]?()
 
     _initToolbox: ->

diff --git a/app/javascripts/editor/viewport.coffee b/app/javascripts/editor/viewport.coffee
@@ -10,6 +10,7 @@ define 'editor.viewport', ->
   meta.def
     init: (@core) ->
       @$elem = $('#editor-viewport')
+      @_initMapGrid()
       @_initMapElement()
       @_initBounds()
       @map = null
@@ -36,12 +37,13 @@ define 'editor.viewport', ->
       @objectBeingDragged = null
 
       @$map
-        .css('width', @map.width)
-        .css('height', @map.height)
+        .size(w: @map.width, h: @map.height)
         .removeClass('editor-map-unloaded')
+      @$mapGrid
+        .size(w: @map.width, h: @map.height)
 
       # TODO: Refactor
-      localStorage.removeItem('editor.map')
+      # localStorage.removeItem('editor.map')
       if data = localStorage.getItem('editor.map')
         console.log 'map data': data
         try
@@ -308,14 +310,49 @@ define 'editor.viewport', ->
       console.log 'viewport: saving map...'
       data = $.v.reduce $.v.keys(@objectsByLayer), (hash, layer) =>
         arr = $.v.map @objectsByLayer[layer], (id, object) ->
-          name: object.name
-          x: parseInt(object.$elem.css('left'), 10)
-          y: parseInt(object.$elem.css('top'), 10)
+          pos = object.$elem.position()
+          return {
+            name: object.name
+            x: pos.x
+            y: pos.y
+          }
         hash[layer] = arr
         return hash
       , {}
       localStorage.setItem('editor.map', JSON.stringify(data))
 
+    _initMapGrid: ->
+      # create the grid pattern that backgrounds the map
+      canvas = require('game.canvas').create(16, 16)
+      ctx = canvas.getContext()
+      ctx.strokeStyle = 'rgba(0,0,0,0.15)'
+      ctx.moveTo(0.5, 0.5)
+      ctx.lineTo(16, 0.5)
+      ctx.moveTo(0.5, 0.5)
+      ctx.lineTo(0.5, 16)
+      ctx.stroke()
+      mapGrid = canvas
+
+      @$mapGrid = $('#editor-map-grid')
+        .css('background-image', "url(#{mapGrid.element.toDataURL()})")
+        .css('background-repeat', 'repeat')
+
+    _initMapElement: ->
+      @$map = $('#editor-map')
+      for layer, i in @core.getLayers()
+        $layer = $("""
+          <div class="editor-layer" data-layer="#{layer}">
+            <div class="editor-layer-bg"></div>
+            <div class="editor-layer-content"></div>
+          </div>
+        """)
+        # $layer.css('z-index', (i + 1) * 10)
+        @$map.append($layer)
+
+    _initBounds: ->
+      offset = @$elem.offset()
+      @bounds = Bounds.rect(offset.left, offset.top, offset.width, offset.height)
+
     _addEventsToMapObjects: ($draggees) ->
       evtns = 'editor.viewport.layer-tiles.tool-normal'
       $draggees.bind "mouseupnodrag.#{evtns}", (evt) ->
@@ -342,19 +379,3 @@ define 'editor.viewport', ->
     _mouseWithinViewport: (evt) ->
       @bounds.x1 <= evt.pageX <= @bounds.x2 and
       @bounds.y1 <= evt.pageY <= @bounds.y2
-
-    _initMapElement: ->
-      @$map = $('#editor-map')
-      for layer, i in @core.getLayers()
-        $layer = $("""
-          <div class="editor-layer" data-layer="#{layer}">
-            <div class="editor-layer-bg"></div>
-            <div class="editor-layer-content"></div>
-          </div>
-        """)
-        $layer.css('z-index', (i + 1) * 10)
-        @$map.append($layer)
-
-    _initBounds: ->
-      offset = @$elem.offset()
-      @bounds = Bounds.rect(offset.left, offset.top, offset.width, offset.height)
diff --git a/app/stylesheets/editor.scss b/app/stylesheets/editor.scss
@@ -22,6 +22,14 @@ body {
   cursor: crosshair;
 }
 
+@mixin absfill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 #editor-viewport {
   // &.editor-tool-normal {
   //   cursor: auto;
@@ -37,24 +45,29 @@ body {
   // }
 
   .editor-layer, .editor-layer-content, .editor-layer-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include absfill();
   }
-  .editor-layer .editor-layer-content {
+  .editor-layer-content {
     opacity: 0.5;
   }
-  .editor-layer-selected .editor-layer-content {
-    opacity: 1
+  .editor-layer-bg {
+    background: white;
   }
-  .editor-layer-selected .editor-layer-bg {
-    // background: white;
-    opacity: 0.5;
+  .editor-layer-selected {
+    .editor-layer-content {
+      opacity: 1
+    }
+    .editor-layer-bg {
+      // background: white;
+      opacity: 0.5;
+    }
   }
 }
 
+#editor-map-grid {
+  @include absfill();
+}
+
 #editor-nav {
   $height: 40px;
 

diff --git a/app/views/editor.erb b/app/views/editor.erb
@@ -13,8 +13,8 @@
 
 <div id="editor-main">
   <div id="editor-viewport">
-    <div id="editor-map" class="editor-map-unloaded">
-    </div>
+    <div id="editor-map" class="editor-map-unloaded"></div>
+    <div id="editor-map-grid"></div>
   </div>
   <div id="editor-sidebar">
   </div>

diff --git a/public/javascripts/app/editor/core.js b/public/javascripts/app/editor/core.js