Fix dragging the map so it moves the grid layer too

mcmire · Apr 1, 2012 · f55475f · f55475f
1 parent c380801
commit f55475f
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 194 deletions.
diff --git a/TODO.md b/TODO.md
@@ -72,3 +72,5 @@
 
 * 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
+
+* Bind viewport events to viewport.$elem rather than viewport.$map
diff --git a/app/javascripts/editor/core.coffee b/app/javascripts/editor/core.coffee
@@ -23,10 +23,10 @@ define 'editor.core', ->
       @_loadImages()
       @_whenImagesLoaded =>
         @_populateMapObjects()
-        @viewport.loadMap()
         @_initLayers()
         @_initToolbox()
         @_changeLayerTo(0)   # currentTool is already set
+        @viewport.loadMap()
 
     getLayers: -> LAYER_NAMES
 
@@ -35,8 +35,9 @@ define 'editor.core', ->
     getCurrentLayerElem: ->
       @findLayer(@getCurrentLayer())
 
+    # TODO: Move to viewport
     findLayer: (layer) ->
-      @viewport.$map.find(".editor-layer[data-layer=#{layer}]")
+      @viewport.getMapLayers().find(".editor-layer[data-layer=#{layer}]")
 
     _resizeUI: ->
       win = $.viewport()
@@ -159,13 +160,13 @@ define 'editor.core', ->
     _initLayers: ->
       that = this
 
-      for layer in LAYER_NAMES
-        @$sidebar.append """<div data-layer="#{layer}"></div>"""
-
       @$layerChooser = $('#editor-layer-chooser select')
         .change -> that._selectLayer(@value)
+
       for layer in LAYER_NAMES
+        @$sidebar.append """<div data-layer="#{layer}"></div>"""
         @$layerChooser.append """<option data-layer="#{layer}">#{layer}</option>"""
+        @viewport.addLayer(layer)
 
       $(window).bind 'keyup', (evt) =>
         index = LAYER_KEYS.indexOf(evt.keyCode)
@@ -188,7 +189,7 @@ define 'editor.core', ->
         .addClass('editor-layer-selected')
         .detach()
       # put on top of all other elements
-      @viewport.$map.append($layer)
+      @viewport.getMapLayers().append($layer)
       $(document.body).addClass("editor-layer-#{layer}")
 
       @$sidebar.find("> div[data-layer=#{layer}").show()
@@ -252,22 +253,17 @@ define 'editor.core', ->
 
     _initHandTool: ->
       evtns = 'editor.core.tools'
-      SHIFT_KEY = 16
-      CTRL_KEY = 17
-      mouse = {}
+      prevTool = null
       $(window)
         .bind "keydown.#{evtns}", (evt) =>
           if @keyboard.isKeyPressed(evt, 'shift')
-            @prevTool = @currentTool
-            @_selectTool('hand')
             evt.preventDefault()
+            prevTool = @currentTool
+            @_selectTool('hand')
         .bind "keyup.#{evtns}", (evt) =>
           if @keyboard.isKeyUnpressed(evt, 'shift')
-            @_selectTool(@prevTool)
-            @prevTool = null
-        .bind "mousemove.#{evtns}", (evt) =>
-          mouse.x = evt.pageX
-          mouse.y = evt.pageY
+            @_selectTool(prevTool)
+            prevTool = null
 
     _selectTool: (tool) ->
       @_deactivateCurrentTool()

diff --git a/app/javascripts/editor/viewport.coffee b/app/javascripts/editor/viewport.coffee
@@ -10,18 +10,19 @@ define 'editor.viewport', ->
       @keyboard = @core.keyboard
 
       @$elem = $('#editor-viewport')
+      @$map = $('#editor-map')
       @_initMapGrid()
-      @_initMapElement()
+      @$mapLayers = $('#editor-map-layers')
       @_initBounds()
       @map = null
       @objectsByLayer = $.v.reduce @core.getLayers(), ((h, n) -> h[n] = {}; h), {}
       @objectId = 0
       return this
 
-    addEvents: ->
-
     getElement: -> @$elem
 
+    getMapLayers: -> @$mapLayers
+
     setWidth: (width) ->
       @$elem.width(width)
       @bounds.setWidth(width)
@@ -30,26 +31,29 @@ define 'editor.viewport', ->
       @$elem.height(height)
       @bounds.setHeight(height)
 
+    addLayer: (layer) ->
+      $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)
+      @$mapLayers.append($layer)
+
     loadMap: ->
       @map = require('game.Bounds').rect(0, 0, 1024, 1024)
 
-      mouse = null
-      dragEntered = null
-      @$elemBeingDragged = null
-      @objectBeingDragged = null
-
       @$map
-        .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')
       if data = localStorage.getItem('editor.map')
-        console.log 'map data': data
         try
           objectsByLayer = JSON.parse(data)
+          console.log 'map data': data
           $.v.each objectsByLayer, (layer, objects) =>
             $.v.each objects, (o) =>
               object = @core.objectsByName[o.name]
@@ -131,7 +135,8 @@ define 'editor.viewport', ->
 
     activate_hand_tool: ->
       evtns = 'editor.viewport.tool-hand'
-      @$map
+      dragActive = false
+      @$elem
         .bind "mousedown.#{evtns}", (evt) =>
           console.log 'viewport: mousedown (hand tool)'
 
@@ -148,6 +153,11 @@ define 'editor.viewport', ->
           evt.preventDefault()
 
           $(window).bind "mousemove.#{evtns}", (evt) =>
+            unless dragActive
+              # do only when the drag starts
+              $(document.body).addClass('editor-drag-active')
+              dragActive = true
+
             x = evt.pageX
             y = evt.pageY
 
@@ -178,13 +188,14 @@ define 'editor.viewport', ->
             evt.preventDefault()
 
           $(window).one "mouseup.#{evtns}", (evt) =>
-            if mouse
-              mouse = null
+            $(document.body).removeClass('editor-drag-active')
+            dragActive = false
+            mouse = null
             $(window).unbind "mousemove.#{evtns}"
 
     deactivate_hand_tool: ->
       evtns = 'editor.viewport.tool-hand'
-      @$map.unbind(".#{evtns}")
+      @$elem.unbind(".#{evtns}")
       $(window).unbind(".#{evtns}")
 
     activate_fill_select_tool: ->
@@ -354,18 +365,6 @@ define 'editor.viewport', ->
         .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 = require('game.Bounds').rect(

diff --git a/app/stylesheets/editor.scss b/app/stylesheets/editor.scss
@@ -1,4 +1,12 @@
 
+@mixin absfill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 // prevent rubber-band effect in webkit browsers when scrolling
 // http://mir.aculo.us/2011/07/29/prevent-rubber-band-scrolling-for-single-page-apps-in-safari-5-1/
 html, body {
@@ -12,46 +20,19 @@ body {
   font-family: Helvetica Neue, Arial, sans-serif;
 }
 
-.editor-drag-active,
+.editor-tool-normal .editor-drag-active,
 .editor-tool-normal .editor-map-object,
 #editor-sidebar div.img {
   cursor: move
 }
 
-.editor-tool-select #editor-viewport {
-  cursor: crosshair;
+.editor-tool-hand #editor-viewport,
+.editor-tool-hand .editor-drag-active {
+  cursor: url(/images/editor/tool-hand.gif), auto;
 }
 
-@mixin absfill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-#editor-viewport {
-  .editor-layer, .editor-layer-content, .editor-layer-bg {
-    @include absfill();
-  }
-  .editor-layer-content {
-    opacity: 0.5;
-  }
-  .editor-layer-bg {
-    background: white;
-  }
-  .editor-layer-selected {
-    .editor-layer-content {
-      opacity: 1
-    }
-    .editor-layer-bg {
-      opacity: 0.5;
-    }
-  }
-}
-
-#editor-map-grid {
-  @include absfill();
+.editor-tool-select #editor-viewport {
+  cursor: crosshair;
 }
 
 #editor-nav {
@@ -77,6 +58,28 @@ body {
 
 $sidebar-width: 300px;
 
+#editor-sidebar {
+  $spacing: 10px;
+
+  position: absolute;
+  width: $sidebar-width;
+  // height is determined via JS
+  top: 0;
+  right: 0;
+  background-color: #999;
+  height: 300px;
+  padding: $spacing;
+  overflow-y: scroll;
+
+  div.img {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: $spacing;
+    margin-bottom: $spacing;
+    overflow: hidden;
+  }
+}
+
 #editor-viewport {
   position: absolute;
   top: 0;
@@ -88,6 +91,24 @@ $sidebar-width: 300px;
   height: 300px;
   overflow: hidden;
 
+  .editor-layer, .editor-layer-content, .editor-layer-bg {
+    @include absfill();
+  }
+  .editor-layer-content {
+    opacity: 0.5;
+  }
+  .editor-layer-bg {
+    background: white;
+  }
+  .editor-layer-selected {
+    .editor-layer-content {
+      opacity: 1
+    }
+    .editor-layer-bg {
+      opacity: 0.5;
+    }
+  }
+
   .editor-dragged-image {
     position: absolute;
     z-index: 10;
@@ -111,6 +132,10 @@ $sidebar-width: 300px;
   }
 }
 
+#editor-map-content, #editor-map-grid {
+  @include absfill();
+}
+
 #editor-toolbox {
   border-radius: 5px;
   border: 1px solid #666;
@@ -136,28 +161,6 @@ $sidebar-width: 300px;
   }
 }
 
-#editor-sidebar {
-  $spacing: 10px;
-
-  position: absolute;
-  width: $sidebar-width;
-  // height is determined via JS
-  top: 0;
-  right: 0;
-  background-color: #999;
-  height: 300px;
-  padding: $spacing;
-  overflow-y: scroll;
-
-  div.img {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: $spacing;
-    margin-bottom: $spacing;
-    overflow: hidden;
-  }
-}
-
 .editor-map-object {
   position: absolute;
   z-index: 5;
@@ -167,7 +170,7 @@ $sidebar-width: 300px;
   }
 }
 
-// marching ants like it's 1995
+// marching ants like it's 1991
 // http://sunpig.com/martin/archives/2010/02/10/marching-ants-in-css.html
 .editor-selection-box {
   position: absolute;

diff --git a/app/views/editor.erb b/app/views/editor.erb
@@ -13,8 +13,10 @@
 
 <div id="editor-main">
   <div id="editor-viewport">
-    <div id="editor-map" class="editor-map-unloaded"></div>
-    <div id="editor-map-grid"></div>
+    <div id="editor-map" class="editor-map-unloaded">
+      <div id="editor-map-layers"></div>
+      <div id="editor-map-grid"></div>
+    </div>
   </div>
   <div id="editor-sidebar">
   </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -72,3 +72,5 @@

		* 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

		* Bind viewport events to viewport.$elem rather than viewport.$map