Реализация алгоритма соединения объектов линией - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке

Для того, чтобы строить диаграммы в соответствии с рисунком 2.7, необходимо реализовать алгоритм соединения двух объектов линией. Для отображения линии на svg холсте, необходимо задать две точки - первая и вторая фигура. Для этого на этапе проектирования у объекта "Path"было определено два атрибута "obj1" и "obj2". Прорисовать линию между ними не составляет сложности, однако, обе этих фигуры динамические, а это значит, что при перемещении одной из них вторая координата (вторая точка) будет изменяться вместе с координатами фигуры. В связи с этим, прорисовку линии необходимо обновлять в функции "move", определенной в пункте 3.2.

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

Реализация основных функций веб-редактора

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

создание новой диаграммы в веб-приложении

Рисунок 3.4. Создание новой диаграммы в веб-приложении

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

Сохранение диаграммы будет производиться двумя способами: локально, на компьютер пользователя, что позволит работать с редактором автономно при сбоях на сервере, и в облачное хранилище. Для обеспечения автономности работы, файл будет сохранен в формате. xml. Однако для того, чтобы разработанные диаграммы могли быть использованы при дальнейшей работе пользователя с системой SFTA, которая позволит с помощью лексико-семантического шаблона провести анализ текста, они должны быть сохранены в формате. jape. Поэтому, все файлы, попадающие в облачное хранилище, будут проходить преобразование изXML представления в язык JAPE. Данная особенность так же позволит сделать модуль веб-редактора для описания лексико-семантических шаблонов автономным от общей системы, а значит, при необходимости внесения в него изменений, изменения в общей системе будут минимальны или их не будет вообще. Для реализации функции сохранения файлов на локальный компьютер пользователя была использована библиотека Raphael. js, которая позволяет преобразовать <svg>холст в строкуформата xml.

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

На рисунке 2.6 представлен пример лексико-семантического шаблона, который аннотирует все заголовки, не начинающиеся с буквы Sили s меткой "TitleWithoutS"(взят из руководства пользователя с официального сайта платформы GATE). На рисунке 3.3 проиллюстрировано графическое представление данного шаблона. Диаграмма выполнена в разработанном редакторе. В результате сохранения диаграммы будет получен файл, который представлен в приложении Г.

лексико-семантический шаблон, разработанный с помощью веб-редактора

Рисунок 3.3. Лексико-семантический шаблон, разработанный с помощью веб-редактора

Похожие статьи




Реализация алгоритма соединения объектов линией - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке

Предыдущая | Следующая