Add onMouseDrag method to the DragdropHandler
This commit is contained in:
parent
624eb7c117
commit
165cec553a
3 changed files with 38 additions and 63 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue