RestrictSize - ограничение размера

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

Подключение и инициализация

Для использования RestrictSize необходимо подключить Interact.js и настроить событие 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
  })
  .on('resizemove', function (event) {
    let { width, height } = event.rect;
    event.target.style.width = width + 'px';
    event.target.style.height = height + 'px';
  });

Ключевые моменты:

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

Настройка минимального и максимального размера

restrictSize позволяет указать минимальную и максимальную ширину и высоту:

interact.modifiers.restrictSize({
  min: { width: 150, height: 100 },
  max: { width: 600, height: 400 }
});
  • min.width и min.height — минимальные размеры элемента.
  • max.width и max.height — максимальные размеры.
  • Можно использовать только одно из значений: например, ограничить только минимальную ширину, оставив остальное неограниченным.

Ограничение по пропорциям

Для сохранения пропорций элемента при изменении размера можно комбинировать restrictSize с AspectRatio модификатором:

interact('.resizable')
  .resizable({
    edges: { right: true, bottom: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 100 },
        max: { width: 400, height: 400 }
      }),
      interact.modifiers.aspectRatio({ ratio: 1 })
    ]
  });
  • aspectRatio заставляет ширину и высоту изменяться синхронно, сохраняя заданное соотношение.
  • Это полезно для квадратных блоков, аватаров и иконок.

Ограничение размера относительно родительского контейнера

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

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  });
  • restriction: 'parent' ограничивает размер элементом-родителем.
  • endOnly: true означает, что ограничение применяется только при завершении изменения размера, а не во время движения.

Динамическое изменение ограничений

Значения min и max могут быть заданы не только статически, но и через функции, что позволяет динамически менять ограничения в зависимости от состояния приложения:

interact('.resizable')
  .resizable({
    edges: { right: true, bottom: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: function (element, interactable, action) {
          return { width: element.offsetWidth / 2, height: 50 };
        },
        max: function (element, interactable, action) {
          return { width: 800, height: 600 };
        }
      })
    ]
  });
  • Функции получают текущий элемент, объект interactable и тип действия (resize, drag), что позволяет использовать любую логику для вычисления ограничений.

Особенности работы с Transform и CSS

RestrictSize корректно работает как с абсолютными размерами (width/height), так и с CSS transform:

interact('.resizable')
  .resizable({
    edges: { right: true, bottom: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 100 },
        max: { width: 500, height: 500 }
      })
    ]
  })
  .on('resizemove', function (event) {
    let target = event.target;
    target.style.transform = `translate(${event.deltaRect.left}px, ${event.deltaRect.top}px)`;
    target.style.width = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';
  });
  • event.rect содержит размеры элемента после применения модификаторов.
  • event.deltaRect содержит смещения, полезные при работе с transform.

Частые ошибки при использовании RestrictSize

  1. Неправильное определение edges — если задать только right, элемент можно будет сжимать только с одной стороны, что может привести к неожиданному поведению.
  2. Конфликт с другими модификаторами — порядок модификаторов важен: сначала restrictSize, затем aspectRatio, иначе ограничения могут игнорироваться.
  3. Статические размеры при динамическом контенте — если размеры элементов меняются во время runtime, лучше использовать функции для вычисления min и max.

Примеры практического применения

  • Карточки продуктов с ограничением минимального и максимального размера для поддержания дизайна сетки.
  • Аватары и иконки, сохраняющие квадратные пропорции с помощью AspectRatio + restrictSize.
  • Модальные окна с ограничением, чтобы они не выходили за границы родительского контейнера.
  • Диаграммы и графики, где изменение размера должно соответствовать заданным максимальным и минимальным параметрам для корректного отображения данных.

Использование RestrictSize в Interact.js позволяет точно управлять размерами интерактивных элементов, предотвращая визуальные и функциональные ошибки, создавая интерфейсы с предсказуемым поведением. Контроль минимальных и максимальных размеров в сочетании с другими модификаторами, такими как aspectRatio и restrictRect, обеспечивает гибкость и точность при разработке сложных веб-приложений.

Оглавление