svgPanZoom: только панорамирование с помощью средней кнопки мыши

Question

Есть ли простой способ панорамирования только при нажатии средней кнопки мыши? Поведение по умолчанию - панорамирование любой нажатой кнопки мыши (или любых касаний).

beforepan выглядело многообещающе, но вы получаете только старую и новую позицию, не зная, что вызвало панорамирование.

Я, вероятно, могу заставить его работать, используя customEventsHandler но кажется, что для пары простых проверок требуется много дополнительной работы.

Answer 1

Прежде чем позвонить svgPanZoom на элементе, вы можете связать событие mousedown и вызвать 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>

Answer 2

Нет, нет простого способа изменить события, которые обрабатывают панорамирование. У вас есть 2 решения:

• Измените исходный код и скомпилируйте свою собственную версию. Это должно быть просто, но имеет и обратную сторону: при каждом обновлении библиотеки вам придется перекомпилировать свою версию, если вы хотите последнюю версию. С другой стороны, версия 3 очень стабильна, и за последние два года изменились только незначительные вещи.
• использование customEventsHandler, Да, это не тривиально, но вы получаете преимущество, не меняя ядро. Это должно быть довольно просто, так как вы можете использовать panBy и передавать только дельту между последней позицией мыши и текущей позицией мыши (без необходимости беспокоиться о текущем масштабе / масштабе SVG).