import {
set as cursorSet,
unset as cursorUnset
} from '../../util/Cursor';
import {
install as installClickTrap
} from '../../util/ClickTrap';
import {
delta as deltaPos
} from '../../util/PositionUtil';
import {
event as domEvent,
closest as domClosest
} from 'min-dom';
import {
toPoint
} from '../../util/Event';
var THRESHOLD = 15;
/**
* Move the canvas via mouse.
*
* @param {EventBus} eventBus
* @param {Canvas} canvas
*/
export default function MoveCanvas(eventBus, canvas) {
var context;
// listen for move on element mouse down;
// allow others to hook into the event before us though
// (dragging / element moving will do this)
eventBus.on('element.mousedown', 500, function(e) {
return handleStart(e.originalEvent);
});
function handleMove(event) {
var start = context.start,
position = toPoint(event),
delta = deltaPos(position, start);
if (!context.dragging && length(delta) > THRESHOLD) {
context.dragging = true;
installClickTrap(eventBus);
cursorSet('grab');
}
if (context.dragging) {
var lastPosition = context.last || context.start;
delta = deltaPos(position, lastPosition);
canvas.scroll({
dx: delta.x,
dy: delta.y
});
context.last = position;
}
// prevent select
event.preventDefault();
}
function handleEnd(event) {
domEvent.unbind(document, 'mousemove', handleMove);
domEvent.unbind(document, 'mouseup', handleEnd);
context = null;
cursorUnset();
}
function handleStart(event) {
// event is already handled by '.djs-draggable'
if (domClosest(event.target, '.djs-draggable')) {
return;
}
// reject non-left left mouse button or modifier key
if (event.button || event.ctrlKey || event.shiftKey || event.altKey) {
return;
}
context = {
start: toPoint(event)
};
domEvent.bind(document, 'mousemove', handleMove);
domEvent.bind(document, 'mouseup', handleEnd);
// we've handled the event
return true;
}
}
MoveCanvas.$inject = [
'eventBus',
'canvas'
];
// helpers ///////
function length(point) {
return Math.sqrt(Math.pow(point.x, 2) + Math.pow(point.y, 2));
}
|