123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- 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));
- }
|