# all files / diagram-js/lib/navigation/movecanvas/ MoveCanvas.js

10% Statements 3/30
0% Branches 0/16
16.67% Functions 1/6
10% Lines 3/30

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125

    1×

    58×

    1×

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