Цепочки модификаторов

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

Принцип работы цепочек

Цепочка модификаторов строится из нескольких отдельных модификаторов, которые выполняются последовательно в порядке их объявления. Каждый модификатор получает текущие координаты или параметры действия и возвращает изменённые значения для следующего модификатора. Это позволяет создавать сложные комбинации ограничений, например, привязку к сетке с дополнительным ограничением по зоне действия.

Ключевой момент: порядок модификаторов критически важен — первый модификатор влияет на входные данные для следующего.

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 30, y: 30 })] }),
      interact.modifiers.restrict({ restriction: 'parent' })
    ]
  });

В этом примере сначала применяется snap (привязка к сетке), затем координаты ограничиваются рамками родителя.

Типы модификаторов в цепочках

  1. Snap (привязка) Позволяет “привязывать” объект к точкам, линиям или сетке. Может использоваться как для перемещения, так и для масштабирования.

    Опции:

    • targets — массив объектов SnapPoint или SnapLine.
    • range — радиус действия привязки.
    • offset — смещение точки привязки.
    interact.modifiers.snap({
  targets: [interact.snappers.grid({ x: 50, y: 50 })],
  range: 20
});

  2. Restrict (ограничение) Ограничивает координаты действия внутри зоны, элемента или прямоугольника.

    Опции:

    • restriction — CSS-селектор, DOM-элемент, или объект с координатами.
    • endOnly — применять ограничение только в конце действия.
    • elementRect — задаёт относительную область ограничения внутри элемента.

  3. RestrictSize (ограничение размеров) Контролирует минимальные и максимальные размеры элемента при изменении его размеров.

    Опции:

    • min и max — объект с полями width и height.
    • endOnly — применять ограничение только при завершении действия.

  4. RestrictEdges Комбинирует ограничения по краям элемента и родительскому контейнеру.

  5. SnapEdges / SnapSize Применяются для привязки размеров или границ к сетке или другим элементам.

Комбинирование нескольких модификаторов

Для создания цепочки модификаторов используется массив modifiers при инициализации действия (draggable, resizable, gesturable). Каждый модификатор возвращает объект с новыми координатами или размерами, которые передаются следующему.

Пример цепочки для перетаскиваемого элемента с привязкой к сетке и ограничением по родителю:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        targets: [interact.snappers.grid({ x: 40, y: 40 })],
        range: 15
      }),
      interact.modifiers.restrict({
        restriction: '.container',
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
      }),
      interact.modifiers.restrictEdges({
        outer: '.container'
      })
    ]
  });

Здесь snap корректирует координаты, затем restrict проверяет попадание внутрь контейнера, и restrictEdges обеспечивает дополнительную защиту от выхода за края.

Особенности работы и рекомендации

  • Порядок модификаторов: изменения координат действуют по цепочке. Меняя порядок, можно получить совершенно разные результаты.
  • endOnly: если применить endOnly: true, модификатор срабатывает только при завершении действия, что удобно для плавной анимации привязки.
  • Совместимость: некоторые модификаторы лучше комбинировать с конкретными действиями. Например, restrictSize имеет смысл только для resizable.
  • Производительность: каждая цепочка увеличивает вычислительные затраты, особенно при использовании сложных snap-целей или большого количества ограничений.

Примеры продвинутых цепочек

  1. Перетаскивание с сеткой, ограничением родителя и минимальной дистанцией от центра:
interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 50, y: 50 })] }),
      interact.modifiers.restrict({ restriction: 'parent' }),
      interact.modifiers.restrict({
        restriction: function (x, y) {
          const centerX = window.innerWidth / 2;
          const centerY = window.innerHeight / 2;
          return {
            x: Math.max(x, centerX - 100),
            y: Math.max(y, centerY - 100)
          };
        }
      })
    ]
  });
  1. Масштабирование с ограничением размера и привязкой к шагам:
interact('.resizable')
  .resizable({
    modifiers: [
      interact.modifiers.restrictSize({ min: { width: 100, height: 100 }, max: { width: 500, height: 500 } }),
      interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 50, y: 50 })] })
    ],
    edges: { left: true, right: true, bottom: true, top: true }
  });

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

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

  • Всегда сначала применять корректирующие модификаторы (snap), затем ограничения (restrict).
  • Для сложных условий ограничения можно использовать функцию вместо статического объекта в restriction.
  • Разделение модификаторов на логические блоки облегчает поддержку кода и тестирование.
  • Проверять взаимодействие всех модификаторов в цепочке при разных сценариях, чтобы избежать конфликтов.

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

Оглавление