Средства для создания диаграмм

Размещено на http://www.allbest.ru/

Аннотация

синтаксис диаграмма редактор сервер

Существующие средства для создания диаграмм не подходят для создания синтаксических диаграмм. Объектом разработки данной выпускной квалификационной работы является веб-приложение с графическим интерфейсом, позволяющее создавать и редактировать синтаксические диаграммы. В ходе данной работы будут изучены стандарты описания грамматики языков как в графической, так и в текстовой форме, произведено исследование существующих решений для выявления их преимуществ и недостатков, затем редактор будет разработан, протестирован и установлен на веб-сервер.



Оглавление

Введение

1. Анализ предметной области

1.1 Языки описания аппаратуры

1.2 Методы описания синтаксиса

2. Обзор существующих технических решений

2.1 Обзор редакторов диаграмм общего назначения

2.2 Обзор узкоспециализированных редакторов синтаксических диаграмм

2.3 Обоснование выбранных методов и способов разработки

3. Процесс разработки приложения

3.1 Реализация функционала создания и редактирования диаграмм

3.2 Реализация операций открытия и сохранения

3.3 Реализация операций экспорта диаграмм

3.4 Реализация графического интерфейса

3.5 Оптимизация приложения

3.6 Установка приложения на сервер

3.7 Разработка документации

Заключение

Список литературы

Приложения



Введение

Сегодня невозможно представить себе жизнь без различных электронных устройств. С увеличенным спросом на устройства увеличились и объемы их производства. Однако производство устройств предполагает множество сложных этапов, одним из которых является проектирование и описание логики, используемой устройством. Для этого используют специальные языки описания аппаратуры (Hardware Description Languages). Для обучения разработчиков синтаксису языков описания аппаратуры используются описания грамматики, которые могут быть представлены как в виде текстового описания с помощью метаязыков, так и в графическом виде в качестве синтаксических диаграмм.

Описание грамматики языков так же является полезным и для описания языков программирования, потому что позволяет описать синтаксис языка в стандартизованном виде. Эти описания могут иметь разные применения - для данной работы одним из важных примеров использования считается использование при обучении языкам программирования.

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

Наличие графического интерфейса, позволяющего создать синтаксические диаграммы с нуля;

Возможность экспорта диаграмм в графических форматах (PNG, BMP, SVG, JPEG);

Возможность сохранения состояния диаграммы во внутреннем формате в виде файла и последующего открытия сохраненных приложением файлов;

Отсутствие необходимости установки специального ПО.

Исходя из поставленных требований к функционалу для выполнения цели было решено выделить следующие задачи:

Произвести обзор существующих решений;

Определить программные и инструментальные средства для разработки;

Разработать модули создания и редактирования диаграмм, графического интерфейса и сохранения диаграмм в различных форматах;

Интегрировать разработанные модули с существующими библиотеками для отображения диаграмм и оптимизировать код;

Развернуть приложение на сервере;

Протестировать приложение;

Разработать документацию.

Для решения задач используются следующие программные средства: языки программирования JavaScript (для создания функциональных возможностей и задания логики редактора), HTML (для создания веб-страниц) и CSS (для оформления графического интерфейса редактора); библиотеки mxGraph [1] и canvg [2]. В результате выполнения научно-исследовательской работы предполагается получить развернутый на сервере графический онлайн-редактор синтаксических диаграмм, соответствующий представленным выше требованиям к функционалу.



1. Анализ предметной области

1.1 Языки описания аппаратуры

Языки описания аппаратуры - языки, используемые для описания структуры и поведения электрических схем. Они похожи на языки программирования, однако важным отличием языков описания аппаратуры от языков программирования является включение концепции времени в языки описания аппаратуры. Существует множество языков для описания аппаратуры, самые популярные из них - Verilog и VHDL.

Verilog

Verilog - язык описания аппаратуры, используемый для проектирования и моделирования электронных систем. Язык был создан в 1984 году, а впервые стандартизован был в 1995 году. Важным преимуществом Verilog перед другими языками описания аппаратуры можно считать схожий с языком программирования C синтаксис - Verilog обладает такими же конструкциями if/else, for, while, case и т.д., и является регистрозависимым. При этом между языками существуют отличия, например в Verilog для описания границ процедурных блоков используется конструкция begin/end, а в C используются фигурные скобки.

Написанное на Verilog описание аппаратуры как правило состоит из модулей, соединенных между собой. Каждый модуль имеет свои входные и выходные сигналы и может состоять из комбинаций объявлений переменных, регистров, цепей, последовательных и параллельных блоки команд, и экземпляров других модулей.

Важной особенностью Verilog как языка описания аппаратуры является наличие неблокирующего присвоения. При осуществлении неблокирующего присвоения сам процесс присвоения не происходит до тех пор, пока не завершится выполнение кода в текущем блоке.

Существует расширенная версия Verilog под названием SystemVerilog. В расширенной версии добавлены новые типы данных, процесс-блоки и механизм интерфейсов. SystemVerilog и Verilog описаны стандартом IEEE Std 1800-2017 [3].

VHDL

VHDL (Very high speed integrated circuits Hardware Description Language) - язык описания аппаратуры, разработанный в 1983 году. Основной единицей языка является объект проекта, представляющий из себя последовательность лексических элементов, каждый из которых составлен из определенного набора символов. Лексическими элементами могут быть ограничители, служебные слова, строковые литералы, символьные литералы, абстрактные литералы и битово-строковые литералы.

VHDL поддерживает три стиля описания аппаратной архитектуры:

Структурное описание - архитектура представляется в виде иерархии компонентов;

Потоковое описание - архитектура представляется в виде параллельных регистровых операций, каждая из которых управляется сигналами;

Поведеченское описание - описание архитектуры последовательными программными предложениями.

Одним из самых важных преимуществ VHDL перед Verilog является строгая типизированность языка. Использование типов данных позволяет писать более структурированный код. Синтаксис VHDL схож с синтаксисом языка программирования Ada и язык VHDL не является регистрозависимым.

Язык VHDL описан в стандарте IEEE Std 1076-2008 [4].

1.2 Методы описания синтаксиса

Первоначально необходимо подробнее разобраться со спецификой синтаксических диаграмм и методами описания грамматики языков в общем.

Существуют несколько способов описания грамматики языка:

текстовое описание грамматики - с применением метаязыков, например форма Бэкуса-Наура (БНФ) и расширенная форма Бэкуса Наура (РБНФ);

графический способ - с помощью синтаксических диаграмм.

Каждый из способов имеет свои достоинства и недостатки, поэтому целесообразность использования того или иного способа зависит от целей и требований к описанию грамматики. Достоинства и недостатки методов представлены в таблице 1.

Таблица 1. Достоинства и недостатки визуального и текстового представлений.

Критерий	Текстовое представление	Графическое представление
Наличие установленных стандартов представления	Да	Нет
Удобство восприятия человеком	Зависит от сложности описываемого синтаксиса - чем сложнее синтаксис, тем сложнее воспринимать информацию	Наглядно воспринимается человеком
Удобство программной обработки	Да (текстовая информация, составленная по определенным правилам)	Нет (графическая информация)

Анализ способов текстового описания синтаксиса

Для описания грамматики в текстовой форме используются метаязыки. Одним из таких языков является расширенная Бэкус-Наур форма (РБНФ), которая представляет из себя усовершенствованную версию оригинальной Бэкус-Наур формы (БНФ).

Описание грамматики в расширенной Бэкус-Наур форме, как и в оригинальной - набор правил, описывающих грамматическую структуру понятий языка с использованием терминальных и нетерминальных символов. Терминальные символы - минимальная единица языка, не имеющая грамматическую структуру. Нетерминальные символы в свою очередь имеют собственную структуру и могут состоять как из одного или более терминальных символов, так и из других нетерминальных символов и сочетаний терминальных и нетерминальных символов. Эти сочетания определяются правилами грамматики. Каждый нетерминальный символ обладает собственным именем.

Правила в расширенной Бэкус-Наур форме, как и в оригинальной Бэкус-Наур форме, представляют из себя выражения, в которых имени нетерминального символа ставится в соответствие выражение, состоящее из комбинации терминальных и/или нетерминальных символов и специальных знаков. Стандарт описания грамматик языков с помощью РБНФ был закреплен в 1996 году (ISO/IEC 14977:1996) [5].

Описания в РБНФ как правило короче, чем в БНФ - в БНФ нельзя описать повторения без добавления специальных правил. Кроме того, в БНФ правило не может занимать более одной строки, в РБНФ конец правила устанавливается символом окончания - таким образом правила могут занимать более одной строки. В БНФ описаниях символы “<”, “>”, “|”, “::=” не могут присутствовать как нетерминальные или терминальные символы в правилах - в РБНФ таких ограничений нет, так как для обозначения терминалов используются кавычки, а для обозначения нетерминалов нет необходимости использовать символы “<” и “>”.

Пример описания грамматики с помощью расширенной Бэкус-Наур формы представлен на рисунке 1.



Рис. 1. Грамматика расширенной Бэкус-Наур формы, описанная с помощью расширенной Бэкус-Наур формы

В таблице 2 представлены все описанные в нотации [5] специальные знаки.

Таблица 2. Специальные знаки в нотации [5] РБНФ

Операция	Специальный знак
определение	=
конкатенация	,
окончание	;
сложение	|
необязательность	[…]
повторение	{…}
группировка	(…)
терминальный символ	“...”
терминальный символ	`…'
комментарий	(*…*)
особая последовательность	?...?
исключение	-

Анализ способов графического описания синтаксиса

Для описания грамматики в графической форме используются синтаксические диаграммы. Полное описание грамматики языка представляет из себя набор определений нетерминальных символов. Каждое определение имеет точку начала и точку конца и описывает нетерминал, показывая возможные пути, проходящие между началом и концом через терминалы и нетерминалы. Пример определения нетерминального символа изображен на рисунке 2.

Рис. 2. Пример определения нетерминального символа

На рис. 2 прямоугольники - нетерминальные символы, а прямоугольники со скругленными углами - терминальные символы. Над диаграммой пишется название описываемого нетерминала. Удобство графического представления синтаксиса по сравнению с текстовым заключается в простоте понимания для человека, особенно в случае громоздких описаний со множеством определений. Для операций необязательности и сложения используются ответвляющиеся соединительные линии, направление которых совпадает с направлением основной соединительной линии (показаны на рис. 2), а для повторения используются соединительные линии, направленные в противоположную родительской соединительной линии сторону.

Стоит отметить, что внешний вид синтаксических диаграмм может варьироваться, так как не существует установленных стандартов, определяющих их внешний вид.



2. Обзор существующих технических решений

2.1 Обзор редакторов диаграмм общего назначения

Сначала рассмотрим широконаправленные редакторы диаграмм и их применение в области создания синтаксических диаграмм на примере редактора draw.io. Данный инструмент обладает удобным графическим интерфейсом (изображен на рисунке 3) и содержит в себе все необходимые графические элементы для построения синтаксических диаграмм, поэтому в данном редакторе возможно с нуля вручную строить синтаксические диаграммы. Кроме того, редактор позволяет экспортировать диаграммы в графическом формате, а так же сохранять во внутреннем формате для дальнейшего редактирования. Однако в силу того, что синтаксические диаграммы сложны с точки зрения геометрии и содержат в себе большое количество графических элементов, создание синтаксических диаграмм в широконаправленных редакторах диаграмм в целом и в данном редакторе в частности займет значительное время.

Рис. 3. Графический интерфейс draw.io



2.2 Обзор узкоспециализированных редакторов синтаксических диаграмм

Перейдем к рассмотрению более узкоспециализированных инструментов. EBNF Visualizer [6] - программа, позволяющая создавать синтаксические диаграммы из описания грамматики в РБНФ. Графический интерфейс программы представлен на рисунке 4. Из преимуществ можно отметить высокую производительность программы. Однако в программе не предусмотрена возможность построения диаграмм с помощью графического интерфейса - функция, которая необходима для ускорения процесса построения диаграмм с нуля. В данном инструменте для создания диаграммы необходимо сначала описать грамматику в РБНФ. Кроме того, программа поддерживает экспорт диаграмм только в форматах GIF и EMF, а в качестве входных данных принимает только файлы с расширением .ebnf.

Рис. 4. Графический интерфейс EBNF Visualizer



Далее рассмотрим веб-ориентированное решение Railroad Diagram Generator [7], интерфейс которого представлен на рисунке 5. Данное решение поддерживает сохранение полученных диаграмм как в векторном представлении (SVG), так и в растровом (PNG). Однако как и в случае с EBNF Visualizer, поддерживается только создание диаграмм из уже существующего описания грамматики в РБНФ. Кроме того, синтаксис РБНФ, принимаемый на вход в данном решении отличается от принятого в стандарте [5] - знаки определения и повторения отличаются от принятых.

Рис. 5. Графический интерфейс Railroad Diagram Generator

Существует также клиентское программное обеспечение с открытым исходным кодом, заточенное под создание синтаксических диаграмм (BrakhMen Syntax Diagram Editor [8]). Приложение поддерживает сохранение диаграмм во внутреннем представлении для дальнейшего открытия, сохранение диаграмм как в растровом представлении, так и в векторном. Кроме того, приложение заточено под создание синтаксических диаграмм с нуля с помощью графического интерфейса. Однако при тестировании было выявлено, процесс создания диаграммы предполагает ручную расстановку элементов. Кроме того, перед началом работы приложение необходимо установить.

Ebnf2ps [9] - решение для создания синтаксических диаграмм с открытым кодом. Из-за того, что для создания диаграммы необходимо загрузить описание грамматики в РБНФ, процесс создания диаграмм полностью автоматизирован, и создание диаграмм “с нуля” (без существующей грамматики в виде РБНФ) не поддерживается. Отсутствует поддержка экспорта диаграмм в распространенных графических файловых форматах - экспорт диаграмм возможен только в форматах EPS и FIG. Кроме того, приложение необходимо предварительно скомпилировать, что заметно затрудняет использование.

Image generator for EBNF [10] - решение для генерации синтаксических диаграмм, написанное на PHP. Из преимуществ можно отметить поддержку экспорта во все популярные графические форматы благодаря использованию специальной PHP библиотеки для работы с изображениями, но главным недостатком данного решения является то, что оно не является графическим - данное решение работает через командную строку, так же осуществляется и установка.

Исходя из достоинств и недостатков рассмотренных выше решений была составлена таблица 3.

Таблица 3. Сравнительная таблица решений для создания синтаксических диаграмм

Решение для создания синтаксических диаграмм	Создание диаграмм с помощью графического интерфейса	Экспорт диаграмм в графических форматах	Сохранение и открытие состояния во внутреннем формате	Необходимость установки или настройки перед использованием
Draw.io	Да (полностью ручное создание диаграмм)	PNG, SVG, BMP, JPEG	Да	Нет
EBNF Visualizer	Нет	GIF, EMF	Нет	Да (клиентское приложение, требует установки)
Railroad Diagram Generator	Нет	PNG, SVG	Нет	Нет
BrakhMen Syntax Diagram Editor	Да (ручное создание диаграмм из шаблонов элементов)	BMP, PNG, SVG	Да	Да (клиентское приложение, требует установки)
Ebnf2ps	Нет	EPS, FIG	Нет	Да (требуется компиляция)
Создаваемое в ходе данной работы решение	Да	PNG, SVG, BMP, JPEG	Да	Нет

2.3 Обоснование выбранных методов и способов разработки

Исходя из того, что существующие сервисы и программы имеют недостатки и не решают задачу удобного построения синтаксических диаграмм с нуля, было принято решение разработать веб-ориентированное ПО с графическим интерфейсом и функциями экспорта диаграмм в графическом виде.

В силу того, что разрабатываемое ПО должно быть основанным на веб-технологиях и не запрашивать от пользователя установки какого-либо дополнительного ПО, а так же обладать графическим интерфейсом (при работе с редакторами с графическим интерфейсом пользователю очень важна отзывчивость приложения и скорость его работы), было принято решение отказаться от использования backend составляющих для реализации функционала редактора, так как отправка запросов к серверу и ожидание ответа при совершении любого действия серьезно замедлили бы работу. Исходя из этого принято решение использовать JavaScript и передавать код приложения пользователю с веб-сервера через HTML страницу при переходе на URL редактора.

Для отображения графика планируется использовать библиотеку mxGraph [1], которая отличается высокой производительностью и использованием SVG (Scalable Vector Graphics) графики. Использование SVG вместо традиционной растровой графики позволяет добиться хороших визуальных результатов - диаграммы выглядят четко и не теряют качество при изменении масштаба страницы или разрешения экрана.

Для разработки основной логики приложения (позиции элементов диаграмм, определение нетерминалов и терминалов, соединение элементов диаграмм и так далее) и операций по открытию/сохранению и экспорту диаграмм планируется использовать JavaScript - код редактора будет оформлен в виде отдельной интегрированной в страницу JavaScript библиотеки.

Кроме того, необходимо принять во внимание производительность. Например, все используемые библиотеки будут сокращены, минимизированы и упакованы в минимально возможное количество для ускорения первоначальной загрузки страницы с приложением, а код самих библиотек должен быть очищен от ненужных функций и оптимизирован для ускорения работы [11]. С задачей оптимизации и сжатия кода можно справиться с помощью специальных сервисов (например, JSCompress [12]).

Для оформления страницы будет использовано сочетание JavaScript кода, создающего HTML элементы внутри страницы в совокупности с CSS разметкой для установки внешнего вида элементов (цветовой схемы, ширины и высоты, шрифтов текста и так далее).



3. Процесс разработки приложения

3.1 Реализация функционала создания и редактирования диаграмм

Задача разработки основного функционала редактора была решена созданием двух библиотек: app.js (отвечает за инициализацию редактора) и syntaxeditor.js (содержит основную логику программы).

Создание диаграммы начинается с добавления определения нетерминального символа. Добавить новое определение нетерминального символа в диаграмму пользователь может нажатием правой кнопки мыши на главном рабочем поле и выбором пункта контекстного меню “Add New Non-Terminal”. После этого пользователю предлагается ввести название нетерминала (выводится окно типа “prompt” [13], показано на рис. 6).

Рис. 6. Prompt-окно, выводимое при нажатии на кнопку добавления нового определения нетерминала

Если введенная пользователем строка не является пустой, то в главной рабочей области приложения появится новое пустое определение нетерминала. Перед добавлением определения находится вертикальная координата нижнего края самого низкого из существующих определений на диаграмме и сохраняется в переменной lowestY. В случае отсутствия определений на диаграмме lowestY присваивается значение 0. Значение lowestY затем используется в качестве вертикальной координаты вновь добавляемого определения. Таким образом, если при добавлении нового определения нетерминального символа на диаграмме уже существуют другие определения нетерминальных символов, то вновь добавляемое определение автоматически поместится ниже всех существующих определений.

Определение нетерминального символа состоит из контейнера, внутри которого по умолчанию добавляются два эллипса, обозначающие начало и конец определения, а так же соединительная линия.

Рис. 7. Добавленное определение нетерминала

Вместе с элементами определения нетерминала, описанными выше, появляются два элемента управления: элемент управления в правом краю диаграммы определения для добавления новых нетерминалов и терминалов на текущую соединительную линию, и элемент управления под диаграммой нетерминала для добавления циклов и обходов. Стоит отметить, что все добавляемые впоследствии элементы (кроме других определений нетерминалов) добавляются как подчиненные “контейнеру”-нетерминалу, что позволяет в будущем при редактировании диаграммы получать список всех элементов только внутри нужного контейнера, таким образом уменьшая количество шагов в циклах и повышая производительность. Описание нетерминала с элементами управления представлено на рисунке 8.



Рис. 8. Добавленное определение нетерминала с элементами управления. Буквой а) обозначена кнопка добавления элементов на текущую соединительную линию, буквой б) - добавление новых соединительных линий

При нажатии на кнопку добавления нового элемента на текущую соединительную линию (рис. 8, а) вызывается метод-обработчик нажатия кнопки. После нажатия пользователю выводится диалоговое окно типа “prompt”, в котором он должен ввести название нового элемента. Если строка, введенная пользователем, не является пустой, вызывается вспомогательная функция nonTerminalsList. Эта функция в цикле получает все названия нетерминалов и возвращает их названия в виде массива. Если введенное пользователем название нового элемента не совпадает с названиями нетерминалов, добавляемому элементу устанавливается форма прямоугольника с закругленными краями, иначе - форма обычного прямоугольника. Далее вызывается вспомогательная функция getTextWidth, в которую передается строка, ширину которой надо вычислить, и шрифт, который используется для отображения названия элемента на диаграмме. Результат выполнения функции - ширина текста в пикселях с учетом шрифта, которая используется для задания ширины добавляемого элемента. После того, как определена форма и ширина добавляемого элемента, необходимо определить координаты добавляемого элемента. Если на данной соединительной линии отсутствуют другие элементы, то новый элемент добавляется посередине соединительной линии, иначе находится крайний правый элемент диаграммы и новый элемент добавляется на 40 единиц правее этого элемента. Нахождение крайнего правого элемента производится путем сравнения координат элементов в цикле, при этом координаты начальной и конечной точек диаграммы не принимаются во внимание (в сравнение берутся только прямоугольники, прямоугольники со скругленными краями, а так же точки начала и конца циклов и обходов). Если вновь добавляемый элемент “не помещается” в диаграмму (длина соединительной линии меньше чем сумма длин всех элементов с учетом расстояний между ними на этой линии), правый край соединительной линии вместе с символом, обозначающим конец диаграммы (окружность), перемещается вправо на расстояние, равное x + 40, где x - ширина вновь добавляемого элемента. Размер родительского контейнера так же увеличивается на соответствующее количество единиц, таким образом часть диаграммы, описывающая нетерминал, всегда находится внутри границ контейнера, соответствующего этому нетерминалу. Сам элемент управления перемещается вместе с краем соединительной линии.

При нажатии на кпопку добавления циклов и обходов вызывается метод-обработчик нажатия. В этом методе выключается отображение существующих элементов управления и в цикле добавляются новые временные элементы управления, имеющие форму эллипсов с черной заливкой по краям (рис. 9).

Рис. 9. Временные элементы управления



Сначала в цикле for добавляются элементы слева от терминальных и нетерминальных символов в диаграмме внутри текущего контейнера (только если не существует соединительных линий непосредственно под этим символом) (рис. 10, а), затем в том же цикле for справа символа добавляется элементы управления в случаях, когда символ находится в конце цикла (или обхода) на диаграмме (рис. 10, б). Затем отдельно добавляются два элемента управления у начала и конца диаграммы (справа и слева от эллипсов, обозначающих начало и конец диаграммы соответственно) (рис. 10, в).

Рис. 10. Результат выполнения алгоритма добавления временных элементов управления; а) добавленные кнопки слева от терминальных и нетерминальных символов; б) добавленный справа от крайнего правого терминального символа; в) добавленные слева от правого крайнего эллипса (конца определения) и справа от крайнего левого эллипса (начала определения)

Для каждого из добавленных элементов управления создается обработчик события нажатия на них, и каждый элемент добавляется в массив (чтобы в дальнейшем их проще было удалять с диаграммы). Одновременно с этим создается новое всплывающее окно (используется встроенный в mxGraph класс mxWindow), внутри которого создается HTML элемент div. Для элемента div через параметр innerHTML задается контент всплывающего окна - подсказка для пользователя и кнопка отмены выбора (рис. 10). Для кнопки отмены добавляется обработчик нажатия - при нажатии добавленные элементы управления удаляются (используется встроенный mxGraph метод remove), а всплывающее окно уничтожается. Сначала пользователю необходимо выбрать точку начала цикла или обхода нажатием на один из добавленных эллипсов. После выбора точки начала с диаграммы убираются (удаляются) элементы управления, которые не подходят в качестве конечной точки цикла/обхода в зависимости от первой выбранной точки, при этом меняется текст подсказки во всплывающем окне. Порядок выбора точек влияет на направление соединительной линии, которая будет добавлена в итоге. Как только пользователь выбирает конечную точку цикла/обхода, всплывающее окно закрывается, все добавленные временные элементы управления удаляются, и включается отображение стандартных элементов управления (для добавления терминалов и нетерминалов). Далее необходимо удостовериться, что добавляемая соединительная линия не будет пересекаться с уже существующими линиями. Для этого находится самый нижний элемент в данном контейнере и в переменную bottomY записывается его координата по оси Y. После этого значение вертикальной координаты вновь добавляемой линии устанавливается на значение, равное bottomY + 30. Стоит отметить, что необходимо также изменить размер контейнера, чтобы все дочерние элементы были в его рамках, и переместить к нижнему краю контейнера элемент управления, отвечающий за добавление новых циклов и обходов. Соединительная линия создается из трех отдельных элементов mxGraph типа Edge (см. рис. 11).

Рис. 11. Три элемента типа Edge (верхняя часть рисунка), составляющие соединительную линию (нижняя часть рисунка)



При этом на вновь добавленной соединительной линии создается новый элемент управления, отвечающий за добавление новых терминальных и нетерминальных символов на эту линию (см. рис. 12).

Рис. 12. Элемент управления для добавления новых терминальных и нетерминальных символов на добавленную соединительную линию

Алгоритм работы добавленного элемента управления схож с алгоритмом работы кнопки для добавления элементов на текущую соединительную линию. Однако в данном случае необходимо учитывать вертикальную координату при добавлении новых терминальных и нетерминальных символов, а так же горизонтальную координату левого края соединительной линии. Смещение элементов диаграммы вправо при необходимости происходит так же, как и при добавлении терминальных и нетерминальных символов на первую соединительную линию.

Пользователь имеет возможность изменять существующую диаграмму - перемещать элементы, менять названия, менять размеры, задавать координаты и так далее. Изменение параметров реализовано через контекстное меню. Кроме того, пользователь может добавлять различные элементы (текст, прямоугольники, эллипсы, линии) на диаграмму вручную, используя панель инструментов в левой части графического интерфейса.

Для управления масштабом используются методы-обработчики, вызываемые при движении колеса мыши. Пользователь так же может управлять масштабом, нажимая на кнопки ниже главной рабочей области приложения, или через контекстное меню. Само изменение масштаба реализовано через встроенные в mxGraph функции zoomIn и zoomOut. Кроме кнопок управления масштабом внизу от главной рабочей области присутствует флажок, при активации которого пользователь может увидеть текстовое представление диаграммы. При активации флажка функции изменения масштаба с помощью колеса мыши деактивируются, чтобы пользователь мог листать текстовое представление диаграммы.

Контекстное меню реализовано на основе объекта mxGraph mxPopupMenu [14], для которого был разработан функционал, позволяющий редактировать свойства и атрибуты элементов, вырезать, вставлять, копировать элементы, управлять масштабом, добавлять новые определения нетерминалов, управлять отображением элементов управления диаграммой, менять шрифты, цвет и размер текста, а так же заливку и цвет контура элементов.

3.2 Реализация операций открытия и сохранения

Приложение поддерживает сохранение диаграмм во внутреннем формате как на жесткий диск в виде xml файла, так и в local storage [15]. Соответственно поддерживается открытие как сохраненных приложением xml файлов, так и восстановление состояния из local storage.

При нажатии кнопки “Save As” пользователю выводится prompt-окно, в котором ему предлагается ввести название файла для сохранения. После ввода пользователем названия происходит проверка на корректность названия (название должно состоять менее чем из 255 символов и более чем из 0 символов, и не содержать запрещенные в названиях файлов в Microsoft Windows символы). Если в введенной пользователем строке отсутствует расширение .xml, то оно добавляется в конец строки. Далее существующая диаграмма приводится к текстовому описанию всех составляющих ее элементов с учетом иерархии, для каждого элемента при этом сохраняются координаты, размеры, стили и прочие атрибуты. Пример текстового описания представлен на рис. 13.

Рис. 13. Пример текстового представления диаграммы

После этого для полученной строки создается Blob-объект типа xml, который представляет из себя содержимое файла. Сам процесс сохранения файла происходит следующим образом: объект Blob конвертируется в URL (используется метод URL.createObjectURL [16]), затем на странице создается новый элемент-ссылка, значение адреса (href) которой - URL представление содержимого файла, а значение атрибута download - введенное пользователем название файла. После создания ссылки симулируется клик на нее путем вызова метода (click), который начинает загрузку файла, а затем ссылка удаляется со страницы. Файл сохраняется в папку загрузок браузера по умолчанию.



Рис. 14. Код преобразования текстового представления диаграммы в xml файл

Алгоритм сохранения в local storage проще, так как необходимо лишь преобразовать диаграмму в текстовое описание и сохранить полученную строковую переменную как отдельный элемент в local storage.

Восстановление состояния из local storage происходит путем получения текстового описания диаграммы по ключу из local storage и восстановления элементов из него с установлением стилей элементов, координат, размеров и названий. Так как закодировать методы обработки событий для элементов управления вместе с ними в текстовом описании не представлялось целесообразным решением, было решено создавать элементы управления и задавать логику для них каждый раз при открытии. За это отвечает метод populateOverlays, который вызывается после восстановления диаграммы из текстового описания. В этом методе запускается цикл, в котором каждый элемент проверяется на необходимость задания методов-обработчиков событий. Если проверяемый элемент является соединительной линией, у которой вертикальные координаты начала и конца совпадают, то необходимо добавить новый элемент управления (для добавления терминальных и нетерминальных символов на эту соединительную линию). Для добавленного элемента управления устанавливается обработчик нажатия, алгоритм работы которого описан в п. 3.1.

Аналогично реализовано и открытие диаграммы из xml файла на компьютере пользователя, однако в данном случае необходимо предварительно получить от пользователя файл, содержащий текстовое описание диаграммы. Для этого в HTML коде страницы присутствует элемент “input” типа “file”, который по умолчанию не отображается (имеет стиль “display: none”). При нажатии кнопки “Open” включается отображение элемента input - пользователю выводится окно выбора файла. Для удобства пользователя параметр “accept” элемента “input” устанавливается на “.xml” - при открытии диалога пользователю будут показаны только .xml файлы. Так как в HTML нет способа ограничить выбор пользователя только одним файлом, при выборе нескольких файлов за раз учитывается только первый из выбранных. Далее создается объект FileReader [17], который используется для прочтения содержимого файла в переменную для дальнейшего интерпретирования. Остальные действия производятся по аналогии с восстановлением состояния из local storage.

3.3 Реализация операций экспорта диаграмм

Для экспорта диаграммы пользователю необходимо нажать на соответствующую кнопку в панели управления. При нажатии кнопки пользователю выводится всплывающее диалоговое окно, в котором он может указать название файла и формат, в котором хочет сохранить диаграмму. Экспортирование диаграммы условно разделено на две составляющие: общие действия для подготовки диаграммы к экспортированию вне зависимости от выбранного формата и специальные действия для выбранного формата файла.

После ввода названия файла и выбора формата пользователь нажимает кнопку Export внутри диалогового окна, вызывая таким образом стандартный метод onclick. После этого с помощью метода toggleOverlay выключается отображение элементов управления (их не должно быть видно на итоговой диаграмме), в переменную fileFormat записывается выбранный пользователем формат, а в переменную fileName - введенное название файла. Далее происходит проверка названия файла на соответствие условиям (название файла должно содержать не более 255 символов, но не менее 1 символа, а так же не должно содержать запрещенных в названиях файлов в Microsoft Windows символов). Если проверка успешна, в отдельные переменные записывается объект-диаграмма (который представляет из себя описание всех элементов в диаграмме), масштаб, установленный пользователем в главной рабочей области и размер диаграммы (в координатной системе главной рабочей области). Полученный масштаб используется при рендеринге диаграммы, таким образом пользователь может управлять итоговым разрешением экспортируемого изображения (кроме SVG). Кроме того, при экспорте рендерится полная диаграмма вне зависимости от того, помещается ли она в главной рабочей области приложения в выбранном масштабе или нет - для этого используется переменная, в которой хранится размер диаграммы. Описанные выше действия необходимы для того, чтобы получить представление диаграммы в виде HTML страницы, в которой сама диаграмма представлена в виде SVG графики (для представления диаграммы в виде веб-страницы используется встроенный метод библиотеки mxGraph mxUtils.show, а для конвертирования полученной веб-страницы в переменную-строку, содержащую HTML код, используется метод стандартного объекта JavaScript XMLSerializer serializeToString). Из полученной HTML страницы с помощью встроенных в JavaScript функций для работы со строками в отдельную переменную записывается SVG код диаграммы. Дальнейшие действия зависят от выбранного пользователем формата.

Сохранение в формате SVG

Так как на данном этапе уже был получен SVG код диаграммы, никаких дополнительных конвертаций совершать нет надобности, необходимо лишь отправить код пользователю в виде файла. Для этого используется Blob-объект с типом данных image/svg+xml, в который в качестве данных передается переменная с SVG кодом. Для этого Blob-объекта создается URL-адрес с помощью метода createObjectURL. Чтобы инициировать сохранение файла, необходимо симулировать нажатие пользователем на ссылку, адрес которой - URL полученного Blob-объекта. Для этого в веб-странице редактора программно создается новый элемент ссылки (элемент “a”), который добавлятся в конец HTML кода страницы с помощью метода document.body.appendChild, затем симулируется событие нажатия на эту ссылку (вызывается метод click объекта созданной ссылки), после чего созданный элемент “a” удаляется из кода страницы. Таким образом симулированное событие нажатия на ссылку открывает адрес Blob-объекта и начинает загрузку файла на компьютер пользователя.

После успешного экспорта диаграммы еще раз вызывается функция toggleOverlay, включающая отображение элементов управления, а так же уничтожается диалоговое окно экспорта.

Сохранение в форматах PNG и BMP

В случае с экспортом в PNG и BMP необходимо конвертировать полученный SVG код в изображение. Стоит отметить, что при экспорте в BMP используется 32 битный цвет - таким образом реализована поддержка прозрачного фона диаграммы. Так как оба формата поддерживают прозрачность, нет необходимости производить какие-либо манипуляции с фоном диаграммы.

Для того, чтобы сконвертировать SVG в растровые графические форматы, необходимо создать так называемый “холст” - canvas. Canvas - элемент HTML, предназначенный для создания графики с помощью JavaScript. Отобразить диаграмму на холсте позволяет библиотека canvg [2], которая предназначена для считывания SVG кода и конвертирования его в графическое представление на элементах-холстах. Размеры холста задаются с учетом масштаба и размеров диаграммы, после чего с помощью встроенного метода объекта canvas генерируется представление данных изображения в виде dataURL [18]. Если передать полученную ссылку Для полученного объекта dataURL создается Blob-объект, для которого, как и в случае с сохранением в SVG, необходимо создать новый элемент в странице и симулировать нажатие на этот элемент. Дальнейшие действия аналогичны действиям при сохранении в SVG - диалоговое окно уничтожается и включается отображение элементов управления.

Сохранение в формате JPG

Сохранение в формате JPG принципиально отличается от сохранения в форматах PNG и BMP в силу того, что JPG не поддерживает прозрачность, поэтому перед преобразованием SVG кода в объект canvas необходимо добавить одноцветный фон. Так как SVG код на данном этапе хранится как строка в переменной, в начало этой строки можно добавить другую строку, создающую прямоугольник с заливкой белого цвета. Размеры прямоугольника при этом соответствуют высоте и ширине самого объекта canvas. Далее, как и при сохранении файлов других форматов, SVG код диаграммы отображается на объект canvas, создается Blob-объект, и симулируется нажатие на ссылку, после чего диалоговое окно уничтожается и включается отображение элементов управления.

3.4 Реализация графического интерфейса

Важным аспектом работы было создание графического интерфейса приложения. Необходимо было подобрать палитру цветов, продумать расположение элементов на странице, а так же предусмотреть вариацию в разрешениях экрана и браузерах.

Графический интерфейс редактора представлен на рис. 15.



Рис. 15. Графический интерфейс редактора

Редактор расположен на HTML странице, которая оформлена следующим образом: весь контент страницы расположен внутри div элемента, который имеет границы размером в 1 пиксель со всех сторон и занимает 95% высоты экрана. В “шапке” страницы находится закрашенный прямоугольник с названием редактора, которое расположено с отступом на 12 пикселей от левого края.

Ниже “шапки” страницы расположена панель, позволяющая совершать основные действия с диаграммой - открытие, сохранение и так далее. Панель реализована как элемент div с отступом сверху в 8 пикселей, в который программно добавляются элементы типа button, с прописанными для них CSS стилями.

Главная рабочая область редактора реализована таблицей с одной строкой и двумя ячейками. Ширина таблицы - 95% от ширины родительского div элемента, высота - 88%, слева и справа от краев родительского элемента отступы по 12 пикселей. Левая ячейка отведена под панель инструментов, из которой пользователь может добавлять элементы на диаграмму вручную, ее ширина - 5% от ширины таблицы. Правая ячейка используется для отображения диаграммы, она использует остальные 95% ширины таблицы и имеет фоновый рисунок - повторяющаяся сетка. Использование фона-сетки облегчает пользователю ориентирование в координатной плоскости диаграммы.

Ниже главной рабочей области редактора представлены дополнительные элементы управления - контроль масштаба, а так же “input” элементы типа “checkbox”, управляющие отображением элементов управления на диаграмме и отображением текстового представления диаграммы. У этих элементов установлены отступы в 12 пикселей.

Так как размеры окна браузера у разных пользователей могут быть разными, необходимо было предусмотреть масштабирование страницы в зависимости от размера - при тестировании было обнаружено, что таблица, включающая в себя главную рабочую область, некорректно масштабировалась при задании ширины и высоты в процентах в CSS стиле элемента, поэтому было принято решение вычислять и задавать конечный размер таблицы в пикселях для конкретного размера окна браузера. Это реализовано через JavaScript в основном коде приложения:

Рис. 16. Код, задающий высоту и ширину контейнера с диаграммой при запуске редактора

При первоначальном запуске приложения (заходе на страницу) вычисляется высота и ширина окна (используются параметры window.innerHeight и window.innerWidth, которые возвращают высоту и ширину фактической страницы на экране - без адресной строки, вкладок и прочих элементов интерфейса браузера), из которых вычитаются размеры всех элементов, кроме таблицы. Таким образом находится фактический размер таблицы в пикселях относительно остальных элементов при конкретном разрешении окна браузера. Так же добавлен обработчик события onresize [19], функция которого - пересчитывать размер элемента при изменении размера окна браузера.

3.5 Оптимизация приложения

Для веб-приложений важна производительность при работе и скорость загрузки, поэтому после разработки приложения была проведена оптимизация приложения. Было минимизировано использование сторонних JavaScript библиотек - например, библиотека FileSave, ранее использованная для сохранения Blob объектов в файлы, была заменена методом сохранения через создание элемента-ссылки (см. п. 3.2). Было оптимизировано обращение к библиотеке mxGraph- все .js модули библиотеки были объединены в один файл - mxClient.js. Библиотека, содержащая код редактора (syntaxeditor.js), была объединена с библиотекой, инициализирующей интерфейс редактора (app.js). Полученные объединенные библиотеки были очищены от комментариев, пробелов и разрывов строк для уменьшения размера с помощью сервиса JSCompress [12] - например, размер библиотеки syntaxeditor.js таким образом был уменьшен с 131 килобайт до 47 килобайт, а библиотеки mxClient.js - с 2122 килобайт до 768 килобайт. В результате проведенной оптимизации кода удалось достичь уменьшения времени загрузки страницы в ~1.8 раза. Время загрузки считалось от момента нажатия левой кнопкой мыши на ссылку до момента окончания загрузки редактора (моментом окончания загрузки считалось окончание события “first meaningful paint” [20]). Тестировалась загрузка редактора, развернутого на сервисе GitHub Pages. Результаты тестирования времени загрузки представлены в таблице 4.



Таблица 4. Результаты тестирования времени загрузки

n	Время от mouseDown до окончания first meaningful paint, мс
	До оптимизации	После оптимизации
1	2693	1565
2	2840	1473
3	2755	1467
4	2782	1342
5	2459	1691
6	2501	1450
7	2381	1526
8	2846	1576
9	2661	1462
10	2755	1597
Средний результат	2677.3	1514.9

Важным аспектом оптимизации так же являлось обеспечение корректной работы редактора в разных браузерах. С учетом использованных библиотек и технологий HTML и JavaScript было определено, что корректно работать редактор будет в Internet Explorer 10 (выпущен в августе 2012 г.) и новее, Edge 20 (июнь 2015 г.) и новее, Firefox 31 (июль 2014 г.) и новее, Safari 6.2 (сентябрь 2014 г.) и новее, Opera 20 (март 2014 г.) и новее, Chrome 30 (октябрь 2013 г.) и новее. Протестирована работа редактора была на Google Chrome 41, Google Chrome 74, Edge 44, Firefox 52, Opera 20.

3.6 Установка приложения на сервер

Так как приложение состоит только из статических элементов и для работы необходимо лишь доставить пользователю необходимые файлы (HTML страницу, JS библиотеки, изображения, и файлы CSS разметки), нет необходимости устанавливать и настраивать на сервере специальное программное обеспечение. Исходя из этого, было принято решение развернуть приложение на сервисе GitHub Pages.



3.7 Разработка документации

Для приложения была разработана страница с инструкцией по использованию. На странице описаны основные функции, известные проблемы, графический интерфейс приложения, а так же описан процесс создания синтаксических диаграмм. Страница открывается перед открытием редактора, а так же может быть открыта из главного меню нажатием на кнопку “Help”.



Заключение

В ходе работы были углублены и укреплены знания о работе с JavaScript, HTML и CSS и получен дополнительный опыт разработки веб-ориентированных приложений. В результате выполнения работы был проведен обзор существующих решений для создания синтаксических диаграмм, выбраны методы разработки и создан графический онлайн-редактор синтаксических диаграмм, обладающий функционалом создания и редактирования синтаксических диаграмм, поддерживающий сохранение и открытие диаграмм как в виде файла во внутреннем представлении, так и в local storage, а так же поддерживающий экспорт диаграмм в форматах PNG, BMP, JPEG и SVG. Код редактора был оптимизирован, а сам редактор был размещен на сервере и доступен по адресу [21]. В приложении 1 приведен пример созданного с помощью редактора фрагмента синтаксической диаграммы чисел языка Verilog, соответствующий синтаксис в РБНФ представлен в приложении 2. В приложении 3 приведен пример созданной с помощью редактора синтаксической диаграммы подмножества Component Pascal, соответствующий синтаксис в РБНФ представлен в приложении 4. Редактор позволяет создавать синтаксические диаграммы быстрее и с меньшими трудозатратами, чем редакторы диаграмм общего назначения, и не требует установки или настройки. В дальнейшем возможно развитие редактора путем добавления следующего функционала: выделение отдельных определений в диаграмме цветами, экспорт диаграмм в РБНФ представлении, а так же автоматическое создание диаграмм из РБНФ представления.



Список литературы

1. mxGraph. URL: https://jgraph.github.io/mxgraph/ (дата обращения: 05.02.2019).

2. canvg/canvg: Javascript SVG parser and renderer on Canvas. URL: https://github.com/canvg/canvg (дата обращения: 20.04.2019).

3. IEEE Std 1800-2017. IEEE Standard for SystemVerilog-- Unified Hardware Design, Specification, and Verification Language. 2017. 1315 с.

4. IEEE Std 1076-2008. IEEE Standard VHDL Language Reference Manual. 2008. 640 с.

5. ISO/IEC 14977:1996. Information technology -- Syntactic metalanguage -- Extended BNF. 1996. 24 c.

6. EBNF Visualizer. URL: http://dotnet.jku.at/applications/Visualizer/1 (дата обращения: 21.02.2019).

7. Railroad Diagram Generator. URL: https://bottlecaps.de/rr/ui (дата обращения: 24.02.2019).

8. BrakhMen Syntax Diagrams Editor. URL: https://github.com/N1ghtF1re/The-syntax-diagram-editor (дата обращения: 06.03.2019).

9. Ebnf2ps: Peter's Syntax Diagram Drawing Tool. URL: http://www2.informatik.uni-freiburg.de/~thiemann/haskell/ebnf2ps/ (дата обращения: 15.03.2019).

10. Image generator for EBNF. URL: https://github.com/Weltraumschaf/ebnf (дата обращения: 20.03.2019).

11. M. Selakovic, M. Pradel. Performance Issues and Optimizations in JavaScript: An Empirical Study. [2016 IEEE/ACM 38th International Conference on Software Engineering (ICSE)]. Austin, 2016. 13 с.

12. JSCompress. URL: https://jscompress.com/ (дата обращения 22.03.2019).

13. Window.prompt() - Web APIs | MDN. URL: https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt (дата обращения: 07.04.2019).

14. mxPopupMenu. URL: https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxPopupMenu-js.html (дата обращения 15.04.2019).

15. Window.localStorage - Web APIs | MDN. URL: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage (дата обращения: 15.04.2019).

16. URL.createObjectURL() - Web APIs | MDN. URL: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL (дата обращения: 16.04.2019).

17. FileReader - Web APIs | MDN. URL: https://developer.mozilla.org/en-US/docs/Web/API/FileReader (дата обращения: 20.04.2019).

18. RFC 2397 - The “data” URL scheme. URL: https://tools.ietf.org/html/rfc2397 (дата обращения: 20.04.2019).

19. GlobalEventHandlers.onresize - Web APIs | MDN. URL: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize (дата обращения: 20.04.2019).

20. First Meaningful Paint | Tools For Web Developers | Google Developers. URL: https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint (дата обращения: 20.04.2019).

21. mxGraph Based Syntax Diagram Editor. URL: https://edefanov.github.io/Syntax-Diagram-Editor/ (дата обращения: 25.04.2019).



Приложение 1

Фрагмент синтаксической диаграммы чисел в Verilog

Приложение 2

Отрывок из описания синтаксиса чисел в Verilog (РБНФ)

number = decimal_number | octal_number | binary_number | hex_number | real_number.

real_number = unsigned_number "." unsigned_number

...