Релиз 0.0.8 Идея и реализация

 

Задача и принятое решение

В Схемопоинте отсутствовал пользовательский инструмент назначения цвета BPMN-элементам. Требовалось добавить визуальное выделение элементов, сохранив читаемость схемы и минимальный объём изменений.

Проверка зависимостей показала, что используемая версия bpmn-js 18.16.1 уже поддерживает назначение и сохранение цветов. Обновление библиотеки для этой задачи не потребовалось.

Реализована компактная палитра из семи согласованных цветов и команды «Без цвета», расположенная над выбранным элементом. Применение цвета выполняется штатным API bpmn-js.

Пользовательское поведение (требования)

• Палитра появляется при выборе одного поддерживаемого BPMN-элемента.
• Нажатие цвета немедленно изменяет заливку фигуры.
• Контур фигуры, внутренние и внешние подписи становятся чёрными.
• Для дорожек применяется более светлый вариант выбранного оттенка.
• «Без цвета» снимает пользовательскую заливку, сохраняя чёрные контур и текст.
• При снятии выделения, выборе нескольких элементов или загрузке другой схемы палитра скрывается.
• Для потоков, соединений и отдельно выделенных подписей палитра не отображается.
• Изменения сохраняются по существующей команде 1С «Записать».

Окрашивание доступно для задач, событий, шлюзов, дорожек, Data Object, Data Store, подпроцессов и Call Activity. Пулы в текущую реализацию не включены.

Цветам не назначена обязательная бизнес-семантика: пользователь самостоятельно определяет их значение.

Палитра и оформление дорожек

Цвет	Обычные фигуры	Дорожки
Голубой	#B8DAF5	#DCEDFA
Зелёный	#C5E4B5	#E2F2DA
Жёлтый	#F7E39A	#FBF1CD
Персиковый	#F5C7A5	#FAE3D2
Розовый	#F0BBC9	#F8DDE4
Сиреневый	#D5C1EE	#EAE0F7
Серый	#D5DEE5	#EAEFF2

Для дорожек оттенки осветлены примерно наполовину белым. Дополнительно используется штатная отрисовка bpmn-js 18.16.1: непрозрачность заливки дорожек — 0.25, задач — 0.95.

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

Отдельные полупрозрачные rgba-цвета не используются: штатный setColor() этой версии не принимает цвета с альфа-каналом меньше единицы. В XML сохраняются обычные HEX-цвета.

Взаимодействие 1С, HTML и JavaScript

Этап	Реализация
Выбор элемента	Существующее событие selection.changed определяет выбранную фигуру
Показ палитры	Сервис overlays размещает HTML-палитру над элементом
Назначение цвета	modeling.setColor() задаёт заливку и чёрный контур
Цвет подписи	При наличии отдельного объекта di.label его цвет устанавливается через modeling.updateModdleProperties()
Запись процесса	Существующий modeler.saveXML() формирует XML с оформлением
Повторное открытие и импорт	Существующий modeler.importXML() восстанавливает оформление

Новые поля обмена между 1С и HTML не добавлялись. Модуль формы 1С, структура справочников и регистров, синхронизация BPMN-элементов остались прежними.

Цвет хранится в графических данных BPMN XML. Отдельное хранение цветов в 1С не требуется.

Изменённые файлы и функции

Файл / объект	Изменения
src/oneCEntry.js	Массив elementColors, получение сервиса modeling, функции создания, показа, удаления палитры и применения цвета
selection.changed	Добавлен показ палитры для одного выбранного элемента
clearSelectedElement()	Добавлено удаление палитры
loadDiagram()	Добавлено удаление палитры перед загрузкой XML
build-1c.mjs	CSS палитры и обновлённое оформление значка связи
dist/BPMNHTML.html	Пересобран автономный HTML
Общий макет BPMNHTML	Заменён результатом сборки

Основные функции палитры:

• createColorPalette(element) — создаёт восемь кнопок;
• showColorPalette(element) — проверяет допустимость элемента и показывает палитру;
• removeColorPalette() — удаляет overlay палитры;
• applyElementColor(element, color) — применяет заливку, чёрный контур и цвет подписи.

Для исключения соединений используется наличие element.waypoints, для исключения отдельных подписей — element.labelTarget.

Функция isSupportedBpmnElement() не изменялась: она продолжает использоваться для синхронизации элементов с 1С, включая потоки.

Результаты визуальной корректировки

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

После проверки:

• согласованы более насыщенные светлые заливки;
• контуры и подписи переведены в чёрный цвет;
• палитра поднята: позиция top изменена с -38 на -54, left: 0;
• для дорожек добавлены отдельные облегчённые оттенки;
• палитра скрыта для потоков.

Синий круг значка связи Data Store заменён тонкой тёмно-серой цепочкой:

• цвет — #555555;
• фон, круговая рамка и тень отсутствуют;
• область значка — 20 × 20;
• SVG — 18 × 18;
• толщина линии — 1.6;
• текст представления связанного объекта — чёрный.

Сам SVG-рисунок цепочки и логика связи с объектом 1С не менялись.

Совместимость и границы доработки

Сохранённые XML автоматически не изменяются. Новое оформление применяется только после выбора цвета пользователем и сохраняется при записи. Ранее окрашенные потоки также автоматически не перекрашиваются.

Оформление цепочки обновляется при открытии схемы независимо от её версии: это HTML-overlay, формируемый по данным связи из 1С.

В объём доработки не входили:

• обновление bpmn-js;
• изменение размеров элементов;
• массовое окрашивание;
• разработка интерфейса Undo/Redo и его проверка;
• автоматическое размещение палитры у границ холста.

Используется штатный API моделирования; внутренний механизм истории команд библиотеки не отключался.