Раскладка «ёлочкой» и план всей квартиры: как изменился калькулятор плитки за месяц

В предыдущей публикации я описывал предысторию создания собственного калькулятора плиточной раскладки — проект родился из нежелания вручную рассчитывать ванную комнату. Тогда речь шла о релизе 1.2 с базовыми возможностями: стандартной и диагональной укладкой, сметой, выгрузкой в PDF и маркировкой элементов. Обратная связь превзошла ожидания, и за минувший месяц сервис получил сразу три крупных апдейта. Главные нововведения — поддержка укладки «ёлочкой» и интерактивный мастер-план помещения, объединяющий все зоны на едином холсте. О них и пойдёт речь ниже.

## Раскладка «ёлочкой» (v1.4.0)

Этот метод подразумевает стыковку прямоугольных модулей под прямым углом по принципу паркетной кладки. Реализованы оба востребованных варианта:

— «Прямая ёлочка» — плитки соединяются строго под 90°, однако общая сетка развёрнута относительно стен на 45°. Это эталонный паркетный узор.

— «Диагональная ёлочка» — весь массив смещён на 45°, благодаря чему сами плашки ориентированы строго параллельно и перпендикулярно границам комнаты.

Существенное ограничение: подобный узор технологически применим лишь к вытянутым форматам с пропорциями сторон от 1:2 и более. Для квадратных модулей выбор блокируется всплывающей подсказкой. Если пользователь меняет параметры плитки на квадратные уже при активной схеме, алгоритм мягко переводит проект на классическую прямую сетку с предупреждением, предотвращая появление некорректных данных.

Отдельной доработки потребовала пространственная логика. Появилась привязка точки отсчёта к выбранному углу (anchor) и контроль критической подрезки (min-cut): сегменты стен с чрезмерно узкими остатками подсвечиваются оранжевым цветом, а в сводке формируется детальный перечень проблемных зон с точными размерами. Это позволяет мастеру мгновенно скорректировать смещение или поменять опорный угол. При этом инструмент автоподбора смещения при «ёлочке» штатно отключается с пояснением, исключая ложные переключения на базовый паттерн.

Интеллектуальный реюз остатков адаптирован под угловые паттерны. Это потребовало глубокой переработки геометрических вычислений: сопоставление полигонов под углом 45° наглядно маркирует парные фрагменты («из остатка №») зелёным цветом и ощутимо снижает итоговые расходы на закупку материала.

Также переписан механизм обхода внутренних препятствий — коробов вентиляции, выводов коммуникаций: исчезли артефакты выпадения пересекающихся элементов, геометрия распила теперь полностью учитывается в спецификациях. Вся логика модуля herringbone закрыта исчерпывающим набором юнит-тестов для исключения краевых сбоев.

## Мастер-план квартиры (v1.5.0)

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

Интерфейс получил быстрый тумблер «План» ⇄ «Комната» с сохранением состояния сессии. Объекты свободно позиционируются перетаскиванием с плавным предварительно рассчитанным прилипанием (снэппингом) к ребрам и углам; удерживание клавиши Alt активирует прецизионную ручную подгонку.

Строгий валидатор контролирует коллизии: стыковка внешних границ разрешена, но взаимное наложение площадей мгновенно блокируется возвратом фигуры и оповещением. При деформации стен, ведущей к пересечению соседних помещений, контур окрашивается тревожным красным цветом.

Для каждого контура доступно контекстное меню: быстрое переименование, клонирование, безопасное удаление с 10-секундным таймером отмены (Undo) и переход к детальному редактированию. Добавление новой комнаты автоматически размещает её справа от существующей группы, ускоряя верстку схемы.

Структура хранения данных обновлена до версии v3. Предыдущие конфигурации v2 при открытии автоматически выстраиваются в аккуратную цепочку (с отступом 500 мм и переносом при длине ряда свыше 10 м) без нарушения совместимости. В структуру заранее заложено поле layoutGroupId.

## Архитектурные детали релиза v1.3.0

Вспоминая промежуточную итерацию, стоит выделить полноценную работу со множеством проектов (до 50 сущностей в LocalStorage), возможность шаринга изолированных ссылок с сохранением в личный каталог, а также вводные обучающие подсказки для новых пользователей.

## Технологический стек

Архитектура остаётся легковесной и клиентской: React, TypeScript, сборщик Vite, рендеринг посредством Konva (Canvas обеспечивает высокую частоту кадров при отрисовке сотен плиток, где SVG демонстрирует просадки), управление состоянием через Zustand и полное отсутствие серверного бэкенда.

Расчёт «ёлочки» использует общие вычислительные примитивы со смещением матриц трансформации, а прецизионная работа с полигонами гарантирует математическую точность координат с плавающей точкой на обширных площадях.

## Резюме

Сервис эволюционировал из простого локального скрипта в универсальный инструмент планирования раскладки плитки для объектов любого масштаба с поддержкой сложных паттернов и алгоритмов бережного расхода материала. Калькулятор доступен бесплатно и без авторизации по адресу tilely.ru, включая поддержку работы в качестве PWA-приложения на мобильных устройствах.

Буду рад обратной связи и предложениям по дальнейшему развитию системы в комментариях. В планах — разработка интерактивных развёрток стен.

Источник