Визуальное редактирование front-end

Визуальное редактирование front-end осуществляется в режиме редактирования, в котором производятся все визуальные изменения активного компонента.

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

Активный компонент (выделенный нажатием мыши), обводится переливающейся сине-белой пунктирной линией, бегущей по его краям в направлении противном движению часовой стрелки.

Обводка производится по внешней геометрической границе компонента с учётом радиуса закругления внешней его границы.

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

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

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

В левом нижнем углу расположена зеленая точка, которая дает возможность изменения радиуса закругления активного компонента.

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

Перетаскивание непривязанного компонента приводит к изменению свойств Panel.x и Panel.y компонента. Поворот - к изменению свойства Panel.rotate. Изменение закругления - к изменению свойства Panel.radius.