В релизе 2022.4 были реструктурированы пакеты продуктов Reports.JS, Reports.PHP, Dashboards.JS и Dashboards.PHP.

---

Предыстория

Все началось с решения добавить в наши продукты новую тему интерфейса в стиле Microsoft Office 2022. Однако, это значительно увеличило бы количество CSS-файлов, что, естественно, повлекло бы за собой увеличение размера пакетов продуктов. В итоге было принято решение изменить модели оформления JS-компонентов для решения следующих задач:

• добавить новую тему интерфейса с различными цветовыми акцентами;


• сохранить обратную совместимость для наших пользователей;


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

Расскажем обо всем по порядку.

---

Новая тема

Как уже отмечалось, одной из основных задач релиза 2022.4 было добавление новой темы интерфейса для JS компонентов в стиле Microsoft Office 2022 с различными цветовыми акцентами и использование этой темы по умолчанию, а также сохранение обратной совместимости, то есть возможности в любой момент поменять тему на Microsoft Office 2013 с необходимым цветовым оттенком.

---

Избавление от CSS файлов

Добавление новой темы интерфейса при старой модели оформления повлекло бы увеличение количества CSS-файлов. Мы нашли решение этой проблемы – перенесли все стилевые настройки и элементы управления в файлы скриптов, полностью избавившись от CSS-файлов.

Теперь файл stimulsoft.viewer.js содержит все необходимые стилевые настройки компонента для просмотра отчетов и дашборда, а файл stimulsoft.designer.js все стилевые настройки компонента для создания и редактирования отчетов и дашбордов. Таким образом, CSS-файлы вообще не требуются для работы продукта.

---

Новый метод и новая опция

Для сохранения обратной совместимости мы предусмотрели возможность использования опции компонента или специального метода. Для установки темы интерфейса по умолчанию в JS-компоненты добавлена новая опция theme, которая располагается в группе настроек appearance. Эта опция может быть установлена одним из перечислений StiViewerTheme (StiDesignerTheme). Например, options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteBlue.

Кроме этого, для изменения темы компонента добавлен специальный метод setTheme, который позволяет менять тему в процессе работы с JS-компонентом. В качестве аргумента метод принимает всё то же перечисление, например, viewer.setTheme(Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteTeal).

---

Отображение иконок в различных масштабах

Для отображения иконок в различных масштабах экрана мы добавили дополнительные изображения элементов управления компонентов в нескольких размерах. Естественно, увеличение числа изображений привело к увеличению размера скриптов. Чтобы избежать этого, мы сконвертировали все изображения в формат WebP, и это позволило сохранить прежний размер скриптов продуктов. Теперь все JS-компоненты, дизайнер и вьювер, выглядят корректно при различных масштабах экрана пользователя.