События изменения размера

Библиотека Interact.js предоставляет мощные возможности для работы с интерактивными элементами, включая поддержку изменения размеров элементов (resize). События изменения размера позволяют отслеживать и управлять поведением элементов при масштабировании, обеспечивая динамическое обновление интерфейса и гибкость пользовательских взаимодействий.

Настройка resize для элемента

Для начала нужно инициализировать элемент как интерактивный с возможностью изменения размера:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 500, height: 300 }
      })
    ],
    inertia: true
  });

Пояснения ключевых опций:

  • edges — указывает, с каких сторон элемента разрешено изменять размер.
  • modifiers.restrictSize — ограничивает минимальные и максимальные размеры элемента.
  • inertia — включает эффект инерции при отпускании мыши, делая анимацию более плавной.

Основные события resize

Interact.js предоставляет несколько событий, связанных с изменением размера:

  1. resizestart — срабатывает в момент начала изменения размера. Используется для подготовки интерфейса, сохранения исходных размеров или положения элемента.
  2. resizemove — основной обработчик, вызываемый на каждом шаге изменения размера. Здесь можно динамически изменять размеры элемента, обновлять данные или отображение.
  3. resizeend — срабатывает после завершения изменения размера. Часто используется для сохранения финальных значений или запуска анимаций.

Пример привязки обработчиков:

interact('.resizable')
  .on('resizestart', function (event) {
    console.log('Начало изменения размера', event.rect);
  })
  .on('resizemove', function (event) {
    let target = event.target;
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';
    target.textContent = `${Math.round(event.rect.width)} x ${Math.round(event.rect.height)}`;
  })
  .on('resizeend', function (event) {
    console.log('Изменение размера завершено', event.rect);
  });

Работа с координатами и позиционированием

При изменении размера может изменяться положение элемента, особенно при растяжении с левой или верхней стороны. Для корректного отображения важно учитывать deltaRect и смещения:

.on('resizemove', function (event) {
  let target = event.target;
  let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.deltaRect.left;
  let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.deltaRect.top;

  target.style.width  = event.rect.width + 'px';
  target.style.height = event.rect.height + 'px';
  target.style.transform = `translate(${x}px, ${y}px)`;

  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
});

Особенности:

  • event.rect — текущий размер и позиция элемента относительно его исходного состояния.
  • event.deltaRect — изменение размеров и позиции с предыдущего шага.
  • data-x и data-y — атрибуты для хранения текущей позиции, чтобы трансформации были корректными.

Модификаторы для управления поведением resize

Interact.js позволяет гибко настраивать ограничения и поведение изменения размера через модификаторы:

  • restrictEdges — ограничивает движение краёв элемента в пределах контейнера.
  • restrictSize — задаёт минимальные и максимальные размеры.
  • snap — обеспечивает привязку к сетке или определённым размерам.
  • aspectRatio — фиксирует соотношение ширины и высоты при изменении размера.

Пример использования нескольких модификаторов одновременно:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 50, height: 50 },
        max: { width: 400, height: 400 }
      }),
      interact.modifiers.aspectRatio({
        ratio: 'preserve'
      }),
      interact.modifiers.snap({
        targets: [interact.createSnapGrid({ x: 20, y: 20 })],
        range: Infinity,
        relativePoints: [{ x: 0, y: 0 }]
      })
    ]
  });

Практические сценарии использования

  1. Создание редакторов и панелей — изменение размеров блоков интерфейса, таких как окна, карты или панели инструментов.
  2. Гибкая сетка элементов — динамическое изменение размеров карточек или плиток с привязкой к сетке.
  3. Интерактивные визуализации — масштабирование графиков, диаграмм или изображений с поддержкой ограничения пропорций.

Рекомендации по оптимизации

  • Использовать throttle или requestAnimationFrame при интенсивных событиях resizemove для снижения нагрузки на рендеринг.
  • Сохранять размеры и позиции элементов в data-* атрибутах или в состоянии приложения для корректной работы при повторном рендеринге.
  • Комбинировать inertia с modifiers для плавного и ограниченного изменения размеров.

Благодаря продуманной системе событий, модификаторов и координатного управления, Interact.js обеспечивает точное и гибкое управление изменением размеров элементов в интерфейсе, позволяя создавать сложные интерактивные приложения без необходимости писать низкоуровневый код для обработки drag & resize.

Оглавление