From 165cec553a6dc35591c56169d5e519629d7186e9 Mon Sep 17 00:00:00 2001 From: DanyaPostfactum Date: Sun, 15 Sep 2013 01:25:40 +1000 Subject: [PATCH] Add onMouseDrag method to the DragdropHandler --- lib/ace/mouse/default_handlers.js | 18 +------- lib/ace/mouse/dragdrop_handler.js | 77 ++++++++++++++----------------- lib/ace/mouse/mouse_handler.js | 6 +-- 3 files changed, 38 insertions(+), 63 deletions(-) diff --git a/lib/ace/mouse/default_handlers.js b/lib/ace/mouse/default_handlers.js index 92ee07a7..9f80e9f4 100644 --- a/lib/ace/mouse/default_handlers.js +++ b/lib/ace/mouse/default_handlers.js @@ -98,7 +98,7 @@ function DefaultHandlers(mouseHandler) { return ev.preventDefault(); }; - this.startSelect = function(pos, fromEvent) { + this.startSelect = function(pos) { pos = pos || this.editor.renderer.screenToTextCoordinates(this.x, this.y); var editor = this.editor; if (this.mousedownEvent.getShiftKey()) { @@ -109,21 +109,7 @@ function DefaultHandlers(mouseHandler) { editor.selection.clearSelection(); } if (editor.container.setCapture) { - if (fromEvent) { - editor.container.setCapture(); - } else { - var self = this; - var onMouseMove = function() { - event.removeListener(editor.container, 'mousemove', onMouseMove); - editor.container.setCapture(); - }; - var onMouseUp = function() { - event.removeListener(editor.container, 'mouseup', onMouseUp); - event.removeListener(editor.container, 'mousemove', onMouseMove); - }; - event.addListener(editor.container, 'mousemove', onMouseMove); - event.addListener(editor.container, 'mouseup', onMouseUp); - } + editor.container.setCapture(); } editor.setStyle("ace_selecting"); this.setState("select"); diff --git a/lib/ace/mouse/dragdrop_handler.js b/lib/ace/mouse/dragdrop_handler.js index 0bbc442f..e3788ded 100644 --- a/lib/ace/mouse/dragdrop_handler.js +++ b/lib/ace/mouse/dragdrop_handler.js @@ -49,7 +49,7 @@ function DragdropHandler(mouseHandler) { editor.container.appendChild(proxy); } - var exports = ["dragWait", "dragWaitEnd", "startDrag", "dragReadyEnd"]; + var exports = ["dragWait", "dragWaitEnd", "startDrag", "dragReadyEnd", "onMouseDrag"]; exports.forEach(function(x) { mouseHandler[x] = this[x]; @@ -278,52 +278,56 @@ function DragdropHandler(mouseHandler) { (function() { this.dragWait = function() { - var editor = this.editor; - var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y); var interval = (new Date()).getTime() - this.mousedownEvent.time; - - if (distance > 0) - this.startSelect(this.mousedownEvent.getDocumentPosition()); - else if (interval > editor.getDragDelay()) + if (interval > this.editor.getDragDelay()) this.startDrag(); }; this.dragWaitEnd = function() { - this.startSelect(this.mousedownEvent.getDocumentPosition(), true); + this.startSelect(this.mousedownEvent.getDocumentPosition()); this.selectEnd(); }; - this.startDrag = function(){ - var target = this.editor.container; - this.setState("dragReady"); - this.editor.renderer.$cursorLayer.setBlinking(false); - target.draggable = true; - this.editor.setStyle("ace_dragging"); - if (useragent.isIE) { - // IE does not handle [draggable] attribute set after mousedown - event.addListener(target, "mousemove", forceDragIE); - } - }; - this.dragReadyEnd = function(e) { var target = this.editor.container; target.draggable = false; - this.editor.unsetStyle("ace_dragging"); - if (useragent.isIE) { - event.removeListener(target, "mousemove", forceDragIE); - } this.editor.renderer.$cursorLayer.setBlinking(!this.editor.getReadOnly()); - this.startSelect(this.mousedownEvent.getDocumentPosition(), true); - this.selectEnd(); + this.editor.unsetStyle("ace_dragging"); + this.dragWaitEnd(); + }; + + this.startDrag = function(){ + var target = this.editor.container; + target.draggable = true; + this.editor.renderer.$cursorLayer.setBlinking(false); + this.editor.setStyle("ace_dragging"); + this.setState("dragReady"); + }; + + this.onMouseDrag = function(e) { + if (useragent.isOpera) + document.getSelection().removeAllRanges(); + if (useragent.isIE && this.state == "dragReady") { + // IE does not handle [draggable] attribute set after mousedown + var target = this.editor.container; + var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y); + if (distance > 3) + target.dragDrop(); + } + if (this.state === "dragWait") { + var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y); + if (distance > 0) + this.startSelect(this.mousedownEvent.getDocumentPosition()); + } }; this.onMouseDown = function(e) { if (!this.$dragEnabled) return; - var inSelection = e.inSelection(); - var editor = this.editor; this.mousedownEvent = e; + var editor = this.editor; + var inSelection = e.inSelection(); var button = e.getButton(); if (button === 0 && inSelection) { this.mousedownEvent.time = (new Date()).getTime(); @@ -339,29 +343,16 @@ function DragdropHandler(mouseHandler) { mouseTarget.draggable = false; }, 8); } - this.captureMouse(e, "dragWait"); + this.setState("dragWait"); } else { this.startDrag(); - this.captureMouse(e); - } - - if (useragent.isOpera) { - var cancelSelection = function(e){ - document.getSelection().removeAllRanges(); - editor.container.removeEventListener("mousemove", cancelSelection); - }; - editor.container.addEventListener("mousemove", cancelSelection); } + this.captureMouse(e, this.onMouseDrag.bind(this)); // TODO: a better way to prevent default handler without preventing browser default action e.defaultPrevented = true; } }; - function forceDragIE() { - event.removeListener(this, "mousemove", forceDragIE); - this.dragDrop(); - } - function calcDistance(ax, ay, bx, by) { return Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2)); } diff --git a/lib/ace/mouse/mouse_handler.js b/lib/ace/mouse/mouse_handler.js index 1e8895b5..2565bd19 100644 --- a/lib/ace/mouse/mouse_handler.js +++ b/lib/ace/mouse/mouse_handler.js @@ -99,10 +99,7 @@ var MouseHandler = function(editor) { this.state = state; }; - this.captureMouse = function(ev, state) { - if (state) - this.setState(state); - + this.captureMouse = function(ev, mouseMoveHandler) { this.x = ev.x; this.y = ev.y; @@ -117,6 +114,7 @@ var MouseHandler = function(editor) { var onMouseMove = function(e) { self.x = e.clientX; self.y = e.clientY; + mouseMoveHandler && mouseMoveHandler(e); }; var onCaptureEnd = function(e) {