Данная статья является продолжением логическим продолжение предыдущей статьи «Интерактивные диаграммы PlantUML», а сама идея статьи родилась основе анализа поступившей обратной связи.
Задача:
Реализовать интерактивную функциональность для диаграммы интеграционных потоков приложений, которая позволяет пользователям выделять элементы (приложения и связи между ними) для улучшения визуального восприятия и анализа взаимодействий.
Требования:
- Выделение элементов:
- При двойном клике на приложение оно должно выделяться красным контуром;
- Одновременно должны подсвечиваться все исходящие связи (стрелки) этого приложения;
- Остальные элементы диаграммы должны становиться полупрозрачными (неактивными).
- Выделение связей:
- При двойном клике на стрелку она должна выделяться красным пунктиром;
- Связанные приложения (источник и цель стрелки) должны подсвечиваться красным контуром;
- Остальные элементы должны затемняться.
- Сброс выделения:
- Повторный клик на уже выделенный элемент или стрелку должен снимать выделение;
По итогам анализа был выбран реализации с использованием скрипта на JavaScript, встраиваемый в автоматически генерируемую HTML страницу, которая отображается в элементе формы вида «ПолеHTMLДокумента»
Результат:
- Двойной клик на приложение
- Двойной клик на стрелку
Итоговый эффект:
Пользователь может интерактивно исследовать диаграмму, выделяя нужные приложения или связи, что упрощает анализ сложных интеграционных потоков. Например:
- Двойной клик на "1С:ERP" покажет все системы, с которыми он взаимодействует.
- Двойной клик на стрелку между "1С:ERP" и "1С:ЗУП" выделит только эту связь и связанные системы.
Код обеспечивает четкую визуальную обратную связь и улучшает UX для работы с диаграммой
Метамодель базы:
- Подсистема «ВизуализациияPlantUML» - функциональность генерации диаграммы «локально». Работает в текущем пример для операционной системы Windows;
- Подсистема «ТехническаяПодсистема» - справочники, используемые при реализации примера справочник «Разделы учета» - разделы учета предприятия;
- Справочник «Приложения» - приложения или сервисы, например, конкретные информационные базы 1С. Приложения могут быть дополнительно детализированы до разделов учета (отдельная табличная часть). Пример «вырожденный», т.к. решается задача показать, как можно диализировать элемент диаграммы гиперссылками;
- Справочник «Интеграционные потоки между приложениями» - интеграционные потоки между приложениями;
- Обработка «ФормированиеКартыИнтеграционныхПотоков» - обработка формирования диаграммы. В обработку, относительно первоначальной статьи, добавлена возможность формирования диаграммы онлайн (идея позаимствована от сюда //infostart.ru/1c/tools/1714797/)
Структура HTML страницы, формируемой автоматически:
<html>
<body>
<svg>
Строка с диаграммы, сформированная PlantUML в формате SVG
</svg>
<script type="text/javascript">
Код JavaScript скрипа, который задается в методе формы «ПолучитьJavaScriptСкрипт()»
</script>
</body>
</html>
Пошаговый сценарий использования:
- Запустить обработку «Формирование карты интеграционных потоков»;
- Перейдите на страницу «Приложения» и нажмите на кнопку «Заполнить приложения», что приведет к заполнению таблицы на основе данных из справочника «Приложения». Если установлен флажок (чекбокс) напротив какого-либо приложения, оно будет отображаться на формируемой диаграмме;
- Нажмите на кнопку «Сформировать диаграмму». После завершения формирования диаграммы:
- Страница «Диаграмма» автоматически откроется и станет активной;
- Таблица на странице «Реестр интеграционных потоков» будет заполнена соответствующими данными;
- Код для формирования диаграммы на языке PlantUML появится на странице «Исходный код». JS скрипт внутри функции
ПолучитьJavaScriptСкрипт()модуля формы.
- Двойной клик на «1С:ERP» покажет все системы, с которыми он взаимодействует;
- Двойной клик на стрелку между «1С:ERP» и «1С:ЗУП» выделит только эту связь и связанные системы;
- Нажмите на кнопку «Сохранить как HTML» для сохранения страницы HTML, например, с целью «покопаться» в фактической реализации, используя консоль браузера.
P.S. Если кликнуть «ПолеHTMLДокумента» и нажать комбинацию клавиш Ctrl+Shift+Alt+F12, то откроется «консоль браузера»
Формат SVG:
- Группа (<g>):
- Основной контейнер для всех элементов диаграммы.
- Содержит заголовок: "Интеграционные потоки приложений".
- Сущности (приложения):
- Каждая сущность представлена группой (<g class="entity">) с атрибутами:
- data-entity: уникальный идентификатор приложения (например, App9e659ec8_0496_11f0_b62e_a4bf0173ebd0).
- data-source-line: ссылка на исходные данные.
- Визуально сущности отображаются как прямоугольники (<rect>) с закругленными углами (rx="2.5", ry="2.5"), залитые светло-голубым цветом (#C2F0FF).
- Каждая сущность содержит:
- Название приложения (например, "1С:ERP") в виде гиперссылки (<a>).
- Список разделов учета (например, "Разделы учета: ЭДО, Казначейство").
- Ссылку "Исключить из диаграммы".
- Каждая сущность представлена группой (<g class="entity">) с атрибутами:
- Связи (стрелки):
- Каждая связь представлена группой (<g class="link">) с атрибутами:
- data-entity-1 и data-entity-2: идентификаторы связанных сущностей.
- data-source-line: ссылка на исходные данные.
- Визуально связи отображаются как пунктирные линии (<path>) с треугольными стрелками (<polygon>).
- Каждая связь представлена группой (<g class="link">) с атрибутами:
Вместо заключения:
Текущая версия JavaScript-скрипта предназначена для онлайн-генерации диаграмм. Следует учитывать, что механизм локальной генерации отличается от онлайн-версии. Реализация JavaScript-скрипта не является универсальной (универсальность не была приоритетной задачей), и она чувствительна к формату SVG, создаваемому инструментом PlantUML. Рекомендуется проявлять осторожность при работе с данным решением.
Будьте с этим осторожны :)
Текущий стенд:
- ОС - Windows
- Платформа - 1С:Предприятие 8.3 (8.3.25.1394), Тонкий клиент
- JAVA: version "11.0.6" 2020-01-15 LTS
