[SOLVED] svgPanZoom: only pan using middle mouse button

svgPanZoom: only pan using middle mouse button

Is there an easy way to only pan when the middle mouse button is pressed? The default behavior is to pan whatever mouse button is pressed (or any touches).

The beforepan looked promising but you only get the old and new position without knowing what triggered the panning.

I can probably get it to work using the customEventsHandler but it seems like a lot of extra work for a couple of simple checks.

Solution

Before calling the svgPanZoom on the element, you could bind a mousedown event and call stopImmediatePropagation.

DEMO

document.getElementById('svg-id').onmousedown = function (e) {
  if (e.button !== 1) e.stopImmediatePropagation();
}

svgPanZoom('#svg-id', {
  zoomEnabled: true,
  controlIconsEnabled: true,
  fit: true,
  center: true,
  minZoom: 0.1
});

#container{
  width: 300px; height: 300px; border:1px solid black;
}

<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>

<div id="container">
  <svg id="svg-id" height="300px" xmlns="http://www.w3.org/2000/svg">
    <g>
      <g stroke="#000" fill="#FFF">
        <rect x="10" y="10" width="120" height="120" fill="red"/>
        <path d="M 10 10  L 130 130 Z"/>
      </g>
    </g>
  </svg>
</div>