Проблема, связанная с Firefox - невозможно изменить размер и перетащить прямоугольник. В то же время тот же фрагмент кода работает правильно в Chrome - PullRequest
0 голосов
/ 14 апреля 2019

В firefox resizemove и dragMoveListener события запускаются только один раз и выходят из функции при выполнении действия.То же самое правильно работает в браузере Chrome.Было бы полезно найти причину неработающего в firefox

//Adding event to rect element inside svg 
changeDimension(event: any) {
    interact(event.firstElementChild)
    .draggable({
      inertia: true,
      autoScroll: true,
      onmove: this.dragMoveListener,
      onend: function (event) {
        const textEl = event.target.querySelector('.close');

        textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
        Math.pow(event.pageY - event.y0, 2) | 0))
        .toFixed(2) + 'px');
      }
    })
    .resizable({
      edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('resizemove', (event :any) => {
      let target = event.target,
      x = (parseFloat(target.getAttribute('data-x')) || 0),
      y = (parseFloat(target.getAttribute('data-y')) || 0);

      target.style.width =  event.rect.width+'px';
      target.style.height = event.rect.height+'px';
      x += event.deltaRect.left;
      y += event.deltaRect.top;

      target.style.webkitTransform = target.style.webkitTransform = target.style.transform =
      'translate(' + x + 'px,' + y + 'px)';
      target.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
      target.nextElementSibling.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    });
  }
// triggers onmove
  dragMoveListener(event:any) {
      const target = event.target,
      x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
      y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
      target.style.MozTransform ='translate(' + x + 'px, ' + y + 'px)';
      target.style.transform =  'translate(' + x + 'px, ' + y + 'px)';

      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
      target.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
      target.nextElementSibling.nextElementSibling.style.transform ='translate(' + x + 'px, ' + y + 'px)';
  }

I expect to trigger on move and resize function for required no.of times
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...