added hold-mousedown delay to enable selection drag

This commit is contained in:
Mihai Sucan 2011-02-18 19:56:08 +02:00
commit c6b4fc93f2
2 changed files with 56 additions and 15 deletions

View file

@ -152,3 +152,7 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
} }
.ace_dragging .ace_marker-layer, .ace_dragging .ace_text-layer {
cursor: move;
}

View file

@ -40,6 +40,14 @@
define(function(require, exports, module) { define(function(require, exports, module) {
var event = require("pilot/event"); 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) { var MouseHandler = function(editor) {
this.editor = editor; this.editor = editor;
@ -77,6 +85,10 @@ var MouseHandler = function(editor) {
return pos; 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) { this.onMouseDown = function(e) {
var pageX = event.getDocumentX(e); var pageX = event.getDocumentX(e);
var pageY = event.getDocumentY(e); var pageY = event.getDocumentY(e);
@ -84,6 +96,7 @@ var MouseHandler = function(editor) {
var editor = this.editor; var editor = this.editor;
var selectionRange = editor.getSelectionRange(); var selectionRange = editor.getSelectionRange();
var selectionEmpty = selectionRange.isEmpty(); var selectionEmpty = selectionRange.isEmpty();
var state = STATE_UNKNOWN;
var inSelection = false; var inSelection = false;
var button = event.getButton(e) var button = event.getButton(e)
@ -109,6 +122,10 @@ var MouseHandler = function(editor) {
if (!editor.$clickSelection) if (!editor.$clickSelection)
editor.selection.clearSelection(pos.row, pos.column); 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(); editor.renderer.scrollCursorIntoView();
@ -117,6 +134,7 @@ var MouseHandler = function(editor) {
var mousePageX, mousePageY; var mousePageX, mousePageY;
var overwrite = editor.getOverwrite(); var overwrite = editor.getOverwrite();
var dragCursor = null; var dragCursor = null;
var mousedownTime = (new Date()).getTime();
var onMouseSelection = function(e) { var onMouseSelection = function(e) {
mousePageX = event.getDocumentX(e); mousePageX = event.getDocumentX(e);
@ -125,11 +143,17 @@ var MouseHandler = function(editor) {
var onMouseSelectionEnd = function() { var onMouseSelectionEnd = function() {
clearInterval(timerId); clearInterval(timerId);
self.$clickSelection = null; if (state == STATE_DRAG)
onMouseDragSelectionEnd();
else
self.$clickSelection = null;
state = STATE_UNKNOWN;
}; };
var onMouseDragSelectionEnd = function() { var onMouseDragSelectionEnd = function() {
clearInterval(timerId); dom.removeCssClass(editor.container, "ace_dragging");
if (!self.$clickSelection) { if (!self.$clickSelection) {
self.$clickSelection = null; self.$clickSelection = null;
if (!dragCursor) { if (!dragCursor) {
@ -142,22 +166,43 @@ var MouseHandler = function(editor) {
return; return;
var selection = editor.getSelectionRange(); var selection = editor.getSelectionRange();
if (selection.contains(dragCursor.row, dragCursor.column)) if (selection.contains(dragCursor.row, dragCursor.column)) {
dragCursor = null;
return; return;
}
editor.clearSelection(); editor.clearSelection();
var newRange = editor.moveText(selection, dragCursor); var newRange = editor.moveText(selection, dragCursor);
if (!newRange) if (!newRange) {
dragCursor = null;
return; return;
}
editor.selection.setSelectionRange(newRange); editor.selection.setSelectionRange(newRange);
dragCursor = null;
}; };
var onSelectionInterval = function() { var onSelectionInterval = function() {
if (mousePageX === undefined || mousePageY === undefined) if (mousePageX === undefined || mousePageY === undefined)
return; 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); var cursor = editor.renderer.screenToTextCoordinates(mousePageX, mousePageY);
cursor.row = Math.max(0, Math.min(cursor.row, editor.session.getLength()-1)); cursor.row = Math.max(0, Math.min(cursor.row, editor.session.getLength()-1));
@ -182,9 +227,6 @@ var MouseHandler = function(editor) {
}; };
var onDragSelectionInterval = function() { var onDragSelectionInterval = function() {
if (mousePageX === undefined || mousePageY === undefined)
return;
dragCursor = editor.renderer.screenToTextCoordinates(mousePageX, mousePageY); dragCursor = editor.renderer.screenToTextCoordinates(mousePageX, mousePageY);
dragCursor.row = Math.max(0, Math.min(dragCursor.row, dragCursor.row = Math.max(0, Math.min(dragCursor.row,
editor.session.getLength() - 1)); editor.session.getLength() - 1));
@ -193,13 +235,8 @@ var MouseHandler = function(editor) {
editor.renderer.scrollCursorIntoView(); editor.renderer.scrollCursorIntoView();
}; };
if (inSelection) { event.capture(editor.container, onMouseSelection, onMouseSelectionEnd);
event.capture(editor.container, onMouseSelection, onMouseDragSelectionEnd); var timerId = setInterval(onSelectionInterval, 20);
var timerId = setInterval(onDragSelectionInterval, 20);
} else {
event.capture(editor.container, onMouseSelection, onMouseSelectionEnd);
var timerId = setInterval(onSelectionInterval, 20);
}
return event.preventDefault(e); return event.preventDefault(e);
}; };