Fix select tool so clicking on a box doesn't clear it but clicking ou…

…tside does
mcmire · Apr 1, 2012 · 10ee92e · 10ee92e
1 parent 913d71b
commit 10ee92e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 45 deletions.
diff --git a/app/javascripts/editor/viewport.coffee b/app/javascripts/editor/viewport.coffee
@@ -210,12 +210,12 @@ define 'editor.viewport', ->
         return if mouseupBound
         console.log 'binding mouseup'
         mouseupBound = true
-        # @$elem.bind("mouseup.#{evtns}", clearSelection)
+        @$elem.bind("mouseup.#{evtns}", clearSelection)
       unbindMouseup = =>
         return if not mouseupBound
         console.log 'unbinding mouseup'
         mouseupBound = false
-        # @$elem.unbind(clearSelection)
+        @$elem.unbind(clearSelection)
 
       adjustCoords = (p) =>
         x: p.x - @bounds.x1
@@ -237,12 +237,12 @@ define 'editor.viewport', ->
             evt.preventDefault()
             mouse = {x: evt.pageX, y: evt.pageY}
 
-            dragOffsetX = Math.abs(evt.pageX - mouseDownAt.x)
-            dragOffsetY = Math.abs(evt.pageY - mouseDownAt.y)
-            return unless (
-              dragOffsetX > SELECTION_ACTIVATION_OFFSET or
-              dragOffsetY > SELECTION_ACTIVATION_OFFSET
-            )
+            # dragOffsetX = Math.abs(evt.pageX - mouseDownAt.x)
+            # dragOffsetY = Math.abs(evt.pageY - mouseDownAt.y)
+            # return unless (
+            #   dragOffsetX > SELECTION_ACTIVATION_OFFSET or
+            #   dragOffsetY > SELECTION_ACTIVATION_OFFSET
+            # )
 
             unbindMouseup()
 
@@ -267,13 +267,22 @@ define 'editor.viewport', ->
             if w is 0 and h is 0
               selection.$box.hide()
             else
-              selection.$box.show().moveTo({x, y}).size({w, h})
+              selection.$box
+                .show()
+                .moveTo({x, y})
+                .size(w: w-1, h: h-1)
+
+        .delegate '.editor-selection-box', "mousedown.#{evtns}", (evt) ->
+          console.log 'selection box mousedown'
+          evt.preventDefault()
+          unbindMouseup()
 
         .delegate '.editor-selection-box', "mouseup.#{evtns}", (evt) ->
           console.log 'selection box mouseup'
-          # because otherwise the selection will be cleared
-          evt.stopPropagation()
-          evt.preventDefault()
+          # delay the re-addition of the mouseup event ever so slightly
+          # otherwise it gets fired immediately (since we're in the mouseup
+          # event ourselves)
+          setTimeout bindMouseup, 0
 
         .bind "mouseup.#{evtns}", (evt) =>
           @$elem.unbind "mousemove.#{evtns}"

diff --git a/app/stylesheets/editor.scss b/app/stylesheets/editor.scss
@@ -31,19 +31,6 @@ body {
 }
 
 #editor-viewport {
-  // &.editor-tool-normal {
-  //   cursor: auto;
-  // }
-  // &.editor-tool-hand {
-  //   cursor: url('/images/editor/tool-hand.gif'), auto;
-  // }
-  // &.editor-tool-select {
-  //   cursor: url('/images/editor/tool-select.gif'), auto;
-  // }
-  // &.editor-tool-bucket {
-  //   cursor: url('/images/editor/tool-bucket.gif'), auto;
-  // }
-
   .editor-layer, .editor-layer-content, .editor-layer-bg {
     @include absfill();
   }
@@ -58,7 +45,6 @@ body {
       opacity: 1
     }
     .editor-layer-bg {
-      // background: white;
       opacity: 0.5;
     }
   }
@@ -181,17 +167,12 @@ $sidebar-width: 300px;
   }
 }
 
-// #editor-sticky-cursor {
-//   position: absolute;
-//   z-index: 100;
-// }
-
 // marching ants like it's 1995
 // http://sunpig.com/martin/archives/2010/02/10/marching-ants-in-css.html
 .editor-selection-box {
   position: absolute;
   z-index: 10;
-  background-color: white;
+  // background-color: rgba(255,255,255,0.15);
   border: 1px dashed black;
   -moz-border-image: url(/images/editor/selection-border.gif) 1 repeat;
   -webkit-border-image: url(/images/editor/selection-border.gif) 1 repeat;

diff --git a/public/images/editor/selection-border-trans.gif b/public/images/editor/selection-border-trans.gif
diff --git a/public/javascripts/app/editor/viewport.js b/public/javascripts/app/editor/viewport.js
diff --git a/public/stylesheets/app/editor.css b/public/stylesheets/app/editor.css
@@ -122,7 +122,6 @@ body {
 .editor-selection-box {
   position: absolute;
   z-index: 10;
-  background-color: white;
   border: 1px dashed black;
   -moz-border-image: url(/images/editor/selection-border.gif) 1 repeat;
   -webkit-border-image: url(/images/editor/selection-border.gif) 1 repeat;