Панели и поля свойств

Эта глава описывает закреплённые боковые панели редактора и поля свойств выбранного узла.

Боковые панели

Библиотеку блоков и свойства выбранного узла удобно держать в панелях, которые не закрывают холст. Для этого у <sf-drawer> есть режим docked: панель становится областью страницы без затемнения и без удержания фокуса, а контейнер с атрибутом data-sf-drawer-dock-host получает отступы на ширину открытых панелей.

<div class="editor-page" data-sf-drawer-dock-host>
  <sf-composition-overlay for="canvas" accepts="blocks"></sf-composition-overlay>
  <div id="canvas"></div>
</div>
<sf-drawer id="blocks" docked open placement="inline-start" title="Блоки">
  <sf-sortable group="blocks" mode="copy" label="Библиотека блоков">…</sf-sortable>
</sf-drawer>
<sf-drawer id="properties" docked open placement="inline-end" title="Свойства">…</sf-drawer>

Поведение панелей:

• левая и правая панели открываются одновременно, отступы считаются для каждой стороны отдельно;
• на узком экране страница не сужается, и панель перекрывает её;
• Escape, уже обработанный inline-редактором или перетаскиванием, панель не закрывает;
• высоту шапки редактора над панелями задаёт переменная --sf-drawer-dock-block-start.

Закреплённые панели подходят рабочим местам, где человек долго переключается между холстом и настройками. Для короткого подтверждения или настройки, после которой нужно вернуться к странице, используйте модальное окно <sf-modal> или обычный модальный Drawer. Справочник: Drawer.

Поля свойств узла

Панель свойств строится не вручную для каждого типа. У типа может быть манифест редактора (simai.composition.editor-manifest) — описание полей, которые человек может менять: куда пишет поле (props, data или presentation), какого оно вида, какие у него границы, варианты, значение по умолчанию и ключи подписей.

Виды полей фиксированы: choice (выбор из списка), integer (целое), text (строка) и toggle (переключатель). Например, у секции есть поле выбора пресета surface или contrast, у колонок — число колонок от 1 до 12, у заголовка — уровень от 1 до 6.

Манифест редактора не меняет ни Recipe, ни Document. Подсказки о правах в нём — только имена для поиска в реестре продукта: Framework по ним ничего не разрешает и не запрещает. Перевод, права, черновики, сохранение и публикацию делает продукт. Для отрисовки полей без скриптов есть серверный запасной вариант (renderFieldFallback) и разбор отправленной формы (parseFieldSubmission).