И начал я делать svg-редактор, и настрадался я сильно. Неожиданная особенность тега rect или как меня обманула фигма

— — — лирическое вступление

На тот момент я уже добился определенных прогрессов в mvp проекта. Имел холст для рисования, панельку инструментов и окошко со слоями. Мое чудо умело слушать базовые события мышки, а через паттерн «стратегия» поведение менялось в зависимости от выбранного инструмента. Кружки и прямоугольники рисовались, а если был выбран инструмент «Select», то можно было клацать по фигуркам и перемещать их.

Мне было лень, на тот момент, отрисовывать элементы управления для ресайзинга, так как это неизбежно привело бы к переписыванию большей часть редактора, потому что писался он на коленке (0% осуждения, 100% понимания). Поэтому решил, что пора. Пора добавить красок в проект и сверстать форму редактирования параметров выбранной фигуры. Да, та самая правая панелька в фигме, в которой мы задаем позицию, размер, цвет и много других всяких ужасов, которые помогают дизайнерам красить кнопочки.

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

Решил значит я, что мне страх, как надо, добавить возможность скруглять углы прямоугольника. Вполне себе базовый случай, когда у какого-нибудь блока нужно скруглить все или часть углов, подумал я.

Ну, а там дело за малым, расширил интерфейс для объекта RectElement, добавив 4 поля для каждого из углов, добавил 4 соответствующих поля в форму и полез в код компонента, который отвечает за отрисовку элементов…

— — —

Открыв спецификацию тега rect вижу: два поля ry и rx, один отвечает за скругление по вертикали, второй за скругление по горизонтали. Если никто не задан, то скругление 0 у всех углов, если задан только один, то второй это значение подхватывает.

Полей типа «radius-top-right» не вижу 🤨

— — —

Ловя 5-ти минутный ступор, я прокручиваю у себя в голове все те разы, когда в фигме дергал конкретный угол квадратиков и менял их скругление. В голове только один вопрос: «Как?». (я не знаю)

Ещё минут 10 я бегал по форумам и мучил gpt вопросами, на которые уже знал ответ, но не хотел признавать 🤓

— — —

В результате не хитрых экспериментов с кнопкой «экспорт, как свг» в фигме я сделал вывод: 1. Если у прямоугольника нет скруглений, это rect 😈 2. Если у прямоугольника все углы скруглены одним значением, это rect 😈 3. В остальных случаях это будет path 👿

— — — лирическое отступление

В общем да, фигма была основным вдохновителем на том проекте, из-за чего нередко случались подобные курьезные случаи. Когда я смотрел на фигму, думая, что так svg и работает, а потом сталкивался с реальностью.

Возможно, когда-нибудь я найду способ преодолеть стыд и nda, чтобы показать визуал/исходники проекта, но это не точно 😼

До тех пор буду продолжать делиться интересными штучками с этого любопытного кейса