From c6b4fc93f2791e95be5796bff524836fdd057dac Mon Sep 17 00:00:00 2001
From: Mihai Sucan <mihai.sucan@gmail.com>
Date: Fri, 18 Feb 2011 19:56:08 +0200
Subject: [PATCH] added hold-mousedown delay to enable selection drag

---
 lib/ace/css/editor.css   |  4 +++
 lib/ace/mouse_handler.js | 67 +++++++++++++++++++++++++++++++---------
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css
index 6526d0fd..06bc87b9 100644
--- a/lib/ace/css/editor.css
+++ b/lib/ace/css/editor.css
@@ -152,3 +152,7 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
 }
+
+.ace_dragging .ace_marker-layer, .ace_dragging .ace_text-layer {
+  cursor: move;
+}
diff --git a/lib/ace/mouse_handler.js b/lib/ace/mouse_handler.js
index bfcff6f1..848fab9d 100644
--- a/lib/ace/mouse_handler.js
+++ b/lib/ace/mouse_handler.js
@@ -40,6 +40,14 @@
 define(function(require, exports, module) {
 
 var event = require("pilot/event");
+var dom = require("pilot/dom");
+
+const STATE_UNKNOWN = 0;
+const STATE_SELECT = 1;
+const STATE_DRAG = 2;
+
+const DRAG_TIMER = 500; // milliseconds
+const DRAG_OFFSET = 5; // pixels
 
 var MouseHandler = function(editor) {
     this.editor = editor;
@@ -77,6 +85,10 @@ var MouseHandler = function(editor) {
         return pos;
     };
 
+    this.$distance = function(ax, ay, bx, by) {
+        return Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
+    };
+
     this.onMouseDown = function(e) {
         var pageX = event.getDocumentX(e);
         var pageY = event.getDocumentY(e);
@@ -84,6 +96,7 @@ var MouseHandler = function(editor) {
         var editor = this.editor;
         var selectionRange = editor.getSelectionRange();
         var selectionEmpty = selectionRange.isEmpty();
+        var state = STATE_UNKNOWN;
         var inSelection = false;
     
         var button = event.getButton(e)
@@ -109,6 +122,10 @@ var MouseHandler = function(editor) {
                 if (!editor.$clickSelection)
                     editor.selection.clearSelection(pos.row, pos.column);
             }
+
+            // Directly pick STATE_SELECT, since the user is not clicking inside
+            // a selection.
+            state = STATE_SELECT;
         }
 
         editor.renderer.scrollCursorIntoView();
@@ -117,6 +134,7 @@ var MouseHandler = function(editor) {
         var mousePageX, mousePageY;
         var overwrite = editor.getOverwrite();
         var dragCursor = null;
+        var mousedownTime = (new Date()).getTime();
     
         var onMouseSelection = function(e) {
             mousePageX = event.getDocumentX(e);
@@ -125,11 +143,17 @@ var MouseHandler = function(editor) {
     
         var onMouseSelectionEnd = function() {
             clearInterval(timerId);
-            self.$clickSelection = null;
+            if (state == STATE_DRAG)
+                onMouseDragSelectionEnd();
+            else
+                self.$clickSelection = null;
+
+            state = STATE_UNKNOWN;
         };
 
         var onMouseDragSelectionEnd = function() {
-            clearInterval(timerId);
+            dom.removeCssClass(editor.container, "ace_dragging");
+
             if (!self.$clickSelection) {
                 self.$clickSelection = null;
                 if (!dragCursor) {
@@ -142,22 +166,43 @@ var MouseHandler = function(editor) {
                 return;
 
             var selection = editor.getSelectionRange();
-            if (selection.contains(dragCursor.row, dragCursor.column))
+            if (selection.contains(dragCursor.row, dragCursor.column)) {
+                dragCursor = null;
                 return;
+            }
 
             editor.clearSelection();
             var newRange = editor.moveText(selection, dragCursor);
-            if (!newRange)
+            if (!newRange) {
+                dragCursor = null;
                 return;
+            }
 
             editor.selection.setSelectionRange(newRange);
-            dragCursor = null;
         };
     
         var onSelectionInterval = function() {
             if (mousePageX === undefined || mousePageY === undefined)
                 return;
+
+            if (state == STATE_UNKNOWN) {
+                var distance = self.$distance(pageX, pageY, mousePageX, mousePageY);
+                var time = (new Date()).getTime();
+
+                if (distance > DRAG_OFFSET)
+                    state = STATE_SELECT;
+                else if ((time - mousedownTime) > DRAG_TIMER) {
+                    state = STATE_DRAG;
+                    dom.addCssClass(editor.container, "ace_dragging");
+                }
+
+            } else if (state == STATE_DRAG)
+                onDragSelectionInterval();
+            else if (state == STATE_SELECT)
+                onUpdateSelectionInterval();
+        };
     
+        var onUpdateSelectionInterval = function() {
             var cursor = editor.renderer.screenToTextCoordinates(mousePageX, mousePageY);
             cursor.row = Math.max(0, Math.min(cursor.row, editor.session.getLength()-1));
     
@@ -182,9 +227,6 @@ var MouseHandler = function(editor) {
         };
 
         var onDragSelectionInterval = function() {
-            if (mousePageX === undefined || mousePageY === undefined)
-                return;
-    
             dragCursor = editor.renderer.screenToTextCoordinates(mousePageX, mousePageY);
             dragCursor.row = Math.max(0, Math.min(dragCursor.row,
                                                   editor.session.getLength() - 1));
@@ -193,13 +235,8 @@ var MouseHandler = function(editor) {
             editor.renderer.scrollCursorIntoView();
         };
 
-        if (inSelection) {
-            event.capture(editor.container, onMouseSelection, onMouseDragSelectionEnd);
-            var timerId = setInterval(onDragSelectionInterval, 20);
-        } else {
-            event.capture(editor.container, onMouseSelection, onMouseSelectionEnd);
-            var timerId = setInterval(onSelectionInterval, 20);
-        }
+        event.capture(editor.container, onMouseSelection, onMouseSelectionEnd);
+        var timerId = setInterval(onSelectionInterval, 20);
     
         return event.preventDefault(e);
     };