Disable Panning Viewport 2

http://stackoverflow.com/questions/42484028/fabricjs-disable-panning-viewport-x-y-axis

by 20yco

HTML

<button onclick="togglePanning()">Turn Panning ON</button>
<canvas id="c" width="400" height="400"></canvas>

CSS

#c {
  border: 1px solid red;
}

button {
  margin-bottom: 10px;
}

JavaScript

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 180,
  top: 100
});
var triangle = new fabric.Triangle({
  fill: 'green',
  left: 150,
  top: 170
});
var horLine = new fabric.Line([0, 0, 0, 400], {
  stroke: 'green',
  selectable: false
});
var verLine = new fabric.Line([0, 0, 400, 0], {
  stroke: 'green',
  selectable: false
});
canvas.add(circle, triangle, horLine, verLine);
canvas.renderAll();
var panning = false;
var isPaningMode = false;
canvas.on('mouse:up', function(e) {
  if (isPaningMode) {
    panning = false;
  }
});
canvas.on('mouse:out', function(e) {
  if (isPaningMode) {
    panning = false;
  }
});
canvas.on('mouse:down', function(e) {
  if (isPaningMode) {
    panning = true;
  }
});
var deltaX = 0;
var deltaY = 0;
canvas.on('mouse:move', function(e) {
  if (isPaningMode && e && e.e && panning) {
    moveX = e.e.movementX;
    if (deltaX >= 0) {
      deltaX -= moveX;
      if (deltaX < 0) {
        moveX = deltaX + moveX;
        deltaX = 0;
      }
    }
    moveY = e.e.movementY;
    if (deltaY >= 0) {
      deltaY -= moveY;
      if (deltaY < 0) {
        moveY = deltaY + moveY;
        deltaY = 0;
      }
    }
    if (deltaX >= 0 && deltaY >= 0) {
      canvas.relativePan(new fabric.Point(moveX, moveY));
    }
  }
});
togglePanning = function() {
  isPaningMode = !isPaningMode;
  circle.active = false;
  circle.selectable = !isPaningMode;
  triangle.active = false;
  triangle.selectable = !isPaningMode;
  canvas.selection = !isPaningMode;
  canvas.defaultCursor = 'default';
  document.getElementsByTagName('button')[0].innerHTML = 'Turn Panning ON';
  if (isPaningMode) {
    document.getElementsByTagName('button')[0].innerHTML = 'Turn Panning OFF';
    canvas.defaultCursor = 'move';
  }
  canvas.renderAll();
};