¶ Фронтенд
В данной статье будут рассмотрены только внесенные изменения в основной клиент draw.io.
¶ Используемые библиотеки и фрэймворки
- axios — асинхронный HTTP-клиент, с помощью которого реализуется взаимодействие с сервером.
- Vue.js — графический фреймворк, реализующий реакивную связь между данными и DOM, достаточно легковесный и быстрый для применения с клиентом draw.io.
Библиотеки загружаются с помощью CDN jsDelivr (см. файл
index.jsp).
¶ Панель заданий и ответов от сервера
Данная панель создана на основе панели Format (класс Format в файле app.min.js) уже реализованной в интерфейсе.
Вызов панели происходит при инициализации интерфейса, а также по нажатию кнопки Server response в правом верхнем углу (аналогично по реализации кнопке Format).
Сама панель состоит из трех блоков (каждый элемент которых является элементом объекта vueWidget класса Vue):
- Task (поля
aиbобъектаvueWidget)
<textarea>, содержащий получаемое с сервера задание.
- Response (поля
cиdобъектаvueWidget)
<textarea>, содержащий получаемый с сервера комментарий к выполненной схеме.
- Кнопки Submit и Reset (поля
eиfобъектаvueWidget)
Submit выполняет отправку выполненной схемы на контроллер/submit(реализация в методеsubmitобъектаvueWidget).
Reset возвращает графическое поле к изначальному состоянию (реализация в методеresetобъектаvueWidgetс использованиемEditorUI.setGraphXml()).
¶ URL-параметры
clibs— измененный параметр из оригинального draw.io для загрузки внешних библиотек объектов схемы.
Применение:https://draw.miem.hse.ru/?clibs=Ua, гдеaможет быть URL библиотеки или численным идентификатором библиотеки в базе данных библиотек.
Пример:https://draw.miem.hse.ru/?clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-libs%2Fmaster%2Flibs%2Ffont-awesome.xml
Использование
Uперед URL или идентификатором в параметреclibsобязательно!
g— новый параметр для загрузки изначальной схемы.
Применение:https://draw.miem.hse.ru/?g=a, гдеaможет быть URL схемы или численным идентификатором схемы в базе данных схем.
Пример:https://draw.miem.hse.ru/?g=https%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fmaster%2Fdiagrams%2Fmath.xmlt— новый параметр для сохранения идентификатора задания.
Применение:https://draw.miem.hse.ru/?t=a, гдеa— идентификатор задания. Если параметр не указан, то идентификатор задания принимается заundefined.
Пример:https://draw.miem.hse.ru/?t=1234u— новый параметр для сохранения email студента.
Применение:https://draw.miem.hse.ru/?u=a, гдеa— email студента. Если параметр не указан, то идентификатор задания принимается заundefined.
Пример:https://draw.miem.hse.ru/?u=ameliseenko%40miem.hse.ru
Также возможно применение сразу нескольких параметров разделенных символом
&. Пример:https://draw.miem.hse.ru/?t=1234&u=ameliseenko%40miem.hse.ru&clibs=Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-libs%2Flibs%2Ftemplates.xml
¶ Отправка схем для проверки
Динамическая отправка схем на сервер реализовано в методе fileChanged класса DrawioFile. Запросы отправляются на контроллер /test.
Помимо заполнения поля Response изменненного интерфейса при получении ответа от сервера производится изменение цвета соединительных стрелочек (зеленый — верное соединение, красный — неверное) с использованием ui.editor.graph.setCellStyles().