Неправильная регистрация освобождения мыши в элементе панорамирования / масштабирования - PullRequest
Новая
       17

Неправильная регистрация освобождения мыши в элементе панорамирования / масштабирования

0 голосов
/ 03 мая 2019

Я работаю над проектом, в котором у меня есть редактор для перетаскивания элементов в рабочую область.В игре три компонента:

  • Контейнер, который вычисляет действительные позиции и фиксирует элементы на месте
  • Область BuildArea, которая позволяет выполнять панорамирование и масштабирование
  • Перетаскиваемые плитки (IДля этого я использую «реагирующее-перетаскиваемое»)

В области сборки соответствующий код выглядит следующим образом: 

<div style={{transform:`matrix(${this.state.matrixData.toString()})`}}>
{this.props.children}
</div>

С matrixData является массивом, который выглядит следующим образом: matrixData:[zoom, 0, 0, zoom, pan.x, pan.y] Масштаб и панорамирование передаются в родительский контейнер.

Я настроил перетаскиваемые элементы для обратного вызова в контейнер при выпуске, чтобы онизащелкнуться на месте.Обратный вызов выглядит следующим образом: 

_tileCallback = (number) => e => {
    const rect = this.element.getBoundingClientRect()
    const pos = {
      x: (e.pageX - rect.left - this.element.clientLeft - this.state.pan.x) / this.state.scale,
      y: (e.pageY - rect.top - this.element.clientTop - this.state.pan.y) / this.state.scale
    }
    const newAxial = lockToGrid(pos)
    if ((newAxial.q < 0 || newAxial.q > 19 || newAxial.r < 0 || newAxial > 19)
        || this.state.axial[newAxial.r][newAxial.q] !== 0) {
      return
    }
    this._setTileToAxial(number, newAxial)
  }

Все вышеперечисленное прекрасно работает, когда масштаб равен 1, но при увеличении масштаба события мыши слишком далеко вправо и при уменьшении слишком далеко влево.

Я часами бился об эту проблему и читаю почти все ТАК вопросы о трансформациях / щелчках мышью, которые там есть, но не могу найти ничего, что помогло бы мне.Любые предложения о том, где искать или что попробовать, с благодарностью!Спасибо за ваше время!

...