SnapSize - привязка размера

Библиотека Interact.js предоставляет мощные возможности для работы с перетаскиванием, масштабированием и взаимодействием с элементами на странице. Одной из ключевых функций является SnapSize — механизм привязки размеров элементов к определённой сетке или шагам, что особенно полезно при создании интерфейсов с ограничениями по размеру.

Настройка SnapSize

Для активации привязки размеров используется метод resizable вместе с опцией modifiers:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.snapSize({
        targets: [
          { width: 50, height: 50 } // шаг привязки
        ],
        range: Infinity, // радиус действия привязки
        relativePoints: [{ x: 0, y: 0 }] // точка отсчёта
      })
    ],
    inertia: true
  })
  .on('resizemove', function (event) {
    let { x, y } = event.target.dataset;

    x = (parseFloat(x) || 0);
    y = (parseFloat(y) || 0);

    Object.assign(event.target.style, {
      width: `${event.rect.width}px`,
      height: `${event.rect.height}px`,
      transform: `translate(${x}px, ${y}px)`
    });
  });

Ключевые моменты настройки:

  • targets — определяет размеры, к которым будет привязываться элемент. Можно указать массив объектов с конкретными шириной и высотой.
  • range — максимальное расстояние до точки привязки, при котором активируется snap. Значение Infinity делает привязку всегда активной.
  • relativePoints — задаёт точку элемента, которая участвует в вычислении привязки.

Принципы работы

SnapSize работает по принципу ближайшего «шага». Когда элемент изменяет размер, библиотека вычисляет ближайшую точку сетки из массива targets и автоматически корректирует ширину и высоту. Это позволяет создавать интерфейсы с фиксированными шагами размера, например, блоки сетки 50x50px.

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

  • Поддержка разных шагов по ширине и высоте, включая несоразмерные сетки.
  • Возможность использовать динамические функции для вычисления targets на лету.
  • Интеграция с другими модификаторами Interact.js, такими как restrictSize и restrictEdges.

Пример динамического расчёта шагов:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.snapSize({
        targets: (x, y, element) => [
          { width: Math.ceil(element.offsetWidth / 50) * 50, height: Math.ceil(element.offsetHeight / 50) * 50 }
        ],
        range: 20
      })
    ]
  });

Настройка диапазона и относительных точек

range определяет, насколько элемент должен быть близок к целевому размеру для срабатывания привязки. Это удобно, если требуется мягкая или жесткая привязка.

relativePoints позволяет учитывать смещение элемента при вычислении размера. Например, привязка может происходить не от левого верхнего угла, а от центра:

relativePoints: [{ x: 0.5, y: 0.5 }]

В этом случае snap будет рассчитываться относительно центра элемента, а не верхнего левого угла, что важно для симметричных интерфейсов.

Комбинация с другими модификаторами

SnapSize часто используется вместе с:

  • restrictSize — ограничивает минимальный и максимальный размер элемента.
  • restrictEdges — предотвращает выход элемента за границы контейнера.
  • inertia — добавляет плавность при изменении размера.

Пример комплексной конфигурации:

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

Такое сочетание позволяет создавать сетку элементов с фиксированными шагами и строгими ограничениями размеров, что удобно для визуальных редакторов и интерфейсов с адаптивной версткой.

Практические советы

  • Для сеток с одинаковыми шагами удобно использовать targets как массив { width: step, height: step }.
  • Для сложных интерфейсов можно передавать функцию, возвращающую массив размеров, зависящих от текущего элемента или контекста страницы.
  • Комбинация SnapSize с inertia создаёт более естественные визуальные эффекты при перетаскивании и изменении размеров.

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

Оглавление