uaml (ui mockup as yaml code)

Данная утилита позволяет создавать кликабельные pdf-мокапы из yaml файлов.

Имеет простой веб-интерфейс для ознакомления и OpenApi запросы для интеграции с другими решениями. В планах реализация плагинов vscode и docsify.

Для работы рекомендуется плагин для vscode

Развертывание

docker build -f .\yaml-moq\Dockerfile -t uaml .
docker run -p 80:80 -d --name uaml uaml:latest

Общее описание страницы пдф

@startyaml
PageName: Имя страницы
PageComment: Описание страницы 
MinX: Минимальная ширина генерируемой страницы (по умолчанию 1920)
MinY: Минимальная высота генерируемой страницы (по умолчанию 1080)

ItemContents: Контент страницы
@endyaml

Описание контента

Описание родительского объекта

@startyaml
PageName: Имя страницы
PageComment: Описание страницы 
Debug: Режим, в котором отображается сетка координат 
MinX: Минимальная ширина генерируемой страницы (по умолчанию 1920)
MinY: Минимальная высота генерируемой страницы (по умолчанию 1080)
ItemContents: Массив элементов контента страницы
@endyaml

Описание дочернего элемента контента страницы

@startyaml
Type: Тип контента, допустимо 3 значения - Rectangle, Table, Node. Не обязательное поле, по умолчанию Rectangle
Name: Имя элемента, используется для внутренних линков. Не обязательное поле.
Link:  Кликабельный линк. Указывается значение, записанное в поле `Name` в объекте, на который идет линк (внутренний линк). Указывается значение для гиперлинка (сайт или файл с относительным путем)
Text: Текст, которым будет заполнен элемент. В случае типа Table - ячейки разделенные `|`
AllignLeft: Добавляет выравнивание по левому краю. Значение - true. По умолчанию используется выравнивание по центру.
HideLink: Скрыть стрелку на внутреннем линке
FontSize: Размер шрифта, не по умолчанию - 20.
Border: Толщина границы вокруг элемента в пикселях
Content: Контент заносимый в элемент (в случае типа Rectangle - иконка из гугл фонт, нейминг в снейк кейсе. В случае Table - хедеры таблицы разделенные через `|`)
X: Положение и ширина элемента. Указывается в формате `Положение элемента` или `Положение элемента:Ширина элемента` 
Y: Положение и высота элемента. Указывается в формате `Положение элемента` или `Положение Высота элемента` 
@endyaml

Описание работы с плагином VS Code

Мануальная установка расширения через VSIX

Для установки плагина мануально на ваш VS Code требуется зайти в проект и прописать следующую команду

code --install-extension uaml-consumer-0.1.0.vsix

Где uaml-consumer-0.1.0.vsix путь к vsix билду плагина.

Описание команд плагина

При работе с плагином доступно 2 команды, которые можно открыть с помощью "CTRL+SHIFT+P"

• uamlConsumer: Start : команда загружает превью файла с расширением .uaml в соседнем окне редактора
• uamlConsumer: Project pdf : команда загружает файл .pdf включающий в себя страницы всех файлов в рабочей директории с расширением .uaml

Для первой команды предусмотрен хоткей "CTRL+["

Настройки

Настройка плагина доступна из интерфейса VS Code , за исключением добавления заголовков, которые из себя представляют объект, который нужно указать в settings.json

Пример файла settings.json

    "uamlConsumer.server.optional.headers": {
    
        "Content-Type": "application/json"
    },
    "uamlConsumer.server.uri": "http://127.0.0.1:80",
    "uamlConsumer.login": "none",
    "uamlConsumer.password": "none",

Работа с расширением через Debug

Перейти в директорию /uaml-consumer

  cd .\uaml-consumer\

Запустить инсталляцию node-modules командой.

  npm install

После установки всех зависимостей, чтобы запустить расширение в режиме Debug следует перетащить из директории ./uaml-consumer папку .vscode в корень вашего рабочего окружения.

  copy -r .\.vscode\ ..\

Затем нажать F5 для запуска режима Debug и в вспывающем pop-up меню выбрать:

npm: compile uaml-consumer (webpack)