flexberry / ember-flexberry-designer Goto Github PK

Цель

Разработать объектную модель для примитива Time Constraint

Функциональные требования

1. Реализовать объектную модель для примитива Time Constraint
2. Доделать экшен создания примитива (сейчас они есть, но пустой).
3. Добавить создание примитива в модель.

Требования к реализации

Все поведение примитива должно соответствовать примитиву из вин версии дизайнера.

Исходный код

1. В директории https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives создать новыq js файл fd-uml-time-constraint.js
2. Доделать экшен для создания созданного примитива в https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-sd-primitives.js#L188
3. Добавить создание примитивов в модель https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/models/fd-dev-uml-sd.js

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитив Time Constraint на диаграммах последовательности в вин дизайнере.

Полезные ссылки, скриншоты

Time Constraint в вин дизайнере

Цель

Сверстать компонент «Чекбокс».

Полезные ссылки, скриншоты

https://iconmonstr.com/checkbox-11-svg/
https://iconmonstr.com/checkbox-9-svg/

Цель

Адаптировать страницу с моделью приложения для мобильной версии

Функциональные требования

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

Цель

Реализовать возможность присоединения связей к другим связям.

Функциональные требования

1. Реализовать возможность присоединения связей к другим связям.
2. Обновить объекты связей.

Требования к реализации

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

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Все в веб дизайнере должно соответствовать вин версии.

Цель

Сверстать блоки с подсказками.

В тулбаре есть кнопка ?, по клику на которую видимыми становятся блоки с подсказками. Параметры тени блока: box-shadow: 0 10px 75px rgba(0,0,0,.1)

Цель

Разработать объектную модель для примитивов Swimlane separator.

Функциональные требования

1. Реализовать объектную модель для примитивов Swimlane separator.
2. Добавить экшен для создания созданного примитива на диаграмму.
3. Добавить создание примитива в модель.

Требования к реализации

Примитив Swimlane separator должен быть привязан к примитиву Раздела (Partition), но тк примитивы на диаграмму попадают в рандомном порядку при построении он(примитив Swimlane separator) не должен зависеть от него(раздела)

При перемещении раздела, Swimlane separator должен перемещаться вместе с ним.
Вертикальный и горизонтальный Swimlane separator нельзя помещать в один раздел.
Все поведение примитивов должно соответствовать примитивам из вин версии дизайнера.

Исходный код

1. В директории https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives создать новый js файл fd-uml-swimlane-separator.js
2. Добавить экшен для создания созданного примитива в https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-activity-primitives.js
3. Добавить кнопку вызова экшена в шаблон https://github.com/Flexberry/ember-flexberry-designer/blob/develop/app/templates/fd-diagram-edit-form.hbs#L600
4. Добавить создание примитива в модель https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/models/fd-dev-uml-ad.js#L97

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитивы Swimlane separator на диаграммах активности в вин дизайнере.

Полезные ссылки, скриншоты

Swimlane separator внутри Разделов в вин дизайнере

Цель

Реализовать функциональную часть панели настройки свойств класса формы редактирования в UML-редакторе

Функциональные требования

1. Реализовать панель (возможно лучше сделать логику отдельным компонентом) для настройки свойств класса.
2. Добавить механизм для заполнения данными свойств созданного компонента при выборе, класса формы редактирования на диаграмме.
3. Реализовать сохранение свойств класса.

Требования к реализации

Свойства настройки класса формы редактирования должны быть аналогичны свойствам класса формы редактирования из win версии дизайнера. (см скриншот №1)

Стиль оформления панели должен соответствовать макету дизайна (см скриншот №2)
Рекомендуется вынести на форму только основные свойства(Name, Caption, Description + еще какие-нибудь), остальные скрыть в группу "дополнительные"

Исходный код

hbs - где находится панель на которую надо добавить настройку свойств класса формы редактирования.

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

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

• Макет дизайна (см скриншот №2)
• Структура приложения
• Конструкторы E и L форм - в Структуре приложения выбрать в левом дереве форму и нажать редактирование.

Полезные ссылки, скриншоты

• Скриншот 1
  

• Скриншот 2
  

Цель

Доработать объектные модели акторов.

Функциональные требования

1. Реализовать объектную модель для акторов (добиться правильной отрисовки линий под акторами, корректной работы стрелок (между линиями, а не между объектами))
2. Поправить экшены создания примитива.
3. Поправить создание примитивов в модель.

Требования к реализации

Все поведение примитивов должно соответствовать примитивам из вин версии дизайнера.

Исходный код

1. В файле https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/objects/uml-primitives/fd-uml-sequence-actor.js#L51 надо переписать приметив.
2. Доделать экшен для создания созданного примитива в https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-sd-primitives.js

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитивы Actor на диаграммах последовательности в вин дизайнере.

Полезные ссылки, скриншоты

Actor в вин дизайнере

Цель

Разработать объектную модель для примитивов EventMessage и Concurrent stage.

Функциональные требования

1. Реализовать объектную модель для примитивов EventMessage и Concurrent stage.
2. Доделать экшены создания примитива (сейчас они есть, но пустой).
3. Добавить создание примитивов в модель.

Требования к реализации

Примитив Concurrent stage должен быть привязан к примитиву Составное состояние(Composite state), но тк примитивы на диаграмму попадают в рандомном порядку при построении он(примитив Concurrent stage) не должен зависеть от него(Составного состояния)
При перемещении Составного состояния, Concurrent stage должен перемещаться вместе с ним.

Примитив EventMessage должен прикрепляться к другим связям.

Все поведение примитивов должно соответствовать примитивам из вин версии дизайнера.

Исходный код

1. В директории https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives создать новые js файлы fd-uml-event-message.js и fd-uml-concurrent-stage.js
2. Доделать экшены для создания созданных примитивов в https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-std-primitives.js#L80 и https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-std-primitives.js#L210
3. Добавить создание примитивов в модель https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/models/fd-dev-uml-std.js#L74

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитивы EventMessage и Concurrent stage на диаграммах состояний в вин дизайнере.

Полезные ссылки, скриншоты

EventMessage и Concurrent stage в вин дизайнере

Цель

Реализовать форму "Модель приложения".

Функциональные требования

1. Нужно отображать все классы выбранного проекта
2. В рамках этой задачи не нужно реализовывать возможность добавления новых классов
3. Реализовать возможность поиска

Требования к реализации

1. Необходимо доработать форму fd-application-model.
2. Реализовать компонент, который получает текущий проект и отображает все классы
3. Текущий проект брать из сервиса fd-current-project-context, методом getCurrentStage()
4. При вводе текста в строку поиска, должны показываться только классы, удовлетворяющие условию

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Тесты

Нужен тест для реализованного компонента

Полезные ссылки, скриншоты

Цель

Написать стили для темной темы оформления.

Функциональные требования

Цвета настраиваемы. Единственная особенность, что разделяющие горизонтальные линии темнее фона (при условии, что фон не черный).

Цель

Адрес страницы в адресной строке должен меняться через History API, но без /!#/.

Функциональные требования

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

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Цель

Добавить возможность редактирования связи между списковой формой и формой редактирования

Функциональные требования

Реализовать возможность выбора формы редактирования для списковой формы.

Требования к реализации

На странице редактирования списковой формы (см скрин 1) надо добавить выпадающий список выбора редактора для формы редактирования и формы создания (добавить под textbox-ом название).
В выпадающий список должны попадать все редакторы для данного типа с учётом наследования.

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

Создание списковой формы в вин дизайнере

Аналоги, примеры реализации

Можно проанализировать как эта настройка сделана в CASEBERRY

Полезные ссылки, скриншоты

Скрин 1

Цель

Сделать сайдбар скрываемым

Функциональные требования

Необходимо добавить кнопку, по которой происходит сворачивание/разворачивание сайдбара.
Сайдбар сворачивается в узкий сайдбар с иконками.
Если сайдбар находится в свернутом состоянии, то основная рабочая область растягивается на всю оставшуюся ширину, независимо от листа (компонент fd-sheet), при этом открытый на полстраницы лист не меняет положение.

Требования к реализации

Не использовать анимацию ширины, использовать анимацию прозрачности, которая настроена для контента листа.

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: flexberry-designer-new-style

Аналоги, примеры реализации

• компонент fd-sheet - метод с анимацией, доработать, вынести в миксин, возможно

Полезные ссылки, скриншоты

Цель

Доработка сортировки строк в редакторе формы редактирования

Функциональные требования

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

Требования к реализации

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

Исходный код

Редакторе формы редактирования: https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/controllers/fd-editform-constructor.js

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• Представления в дизайнере

Ссылки в сайдбаре по клику должны вести на отдельные страницы. Соответственно, должен меняться адрес через History API (без /!#/).

Выбранный пункт в сайдбаре должен иметь фон, соответствующий цвету фона рабочей области. В данном случае белый.

С открытым листом, фон выбранного пункта в сайдбаре становится светло серым.

Цель

Реализовать функциональную часть панели настройки свойств класса списковой формы в UML-редакторе

Функциональные требования

1. Реализовать панель (возможно лучше сделать логику отдельным компонентом) для настройки свойств класса.
2. Добавить механизм для заполнения данными свойств созданного компонента при выборе, класса списковой формы на диаграмме.
3. Реализовать сохранение свойств класса.

Требования к реализации

Свойства настройки класса формы редактирования должны быть аналогичны свойствам класса списковой формы из win версии дизайнера. (см скриншот №1)

Стиль оформления панели должен соответствовать макету дизайна (см скриншот №2)
Рекомендуется вынести на форму только основные свойства(Name, Caption, Description + еще какие-нибудь), остальные скрыть в группу "дополнительные"

Исходный код

hbs - где находится панель на которую надо добавить настройку свойств класса списковой формы.

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

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

• Макет дизайна (см скриншот №2)
• Структура приложения
• Конструкторы E и L форм - в Структуре приложения выбрать в левом дереве форму и нажать редактирование.

Полезные ссылки, скриншоты

• Скриншот 1
  

• Скриншот 2
  

Цель

Проверить добавление объектов на диаграмму классов

Функциональные требования

Проверить что объекты на диаграмму классов добавляются без ошибок (сейчас как минимум у темплейт класса при добавление появляется ошибка)

Требования к реализации

Все объекты должны добавлятся без ошибок

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Цель

В объектах диаграммы классов во view заменить все инпуты на textarea.

Функциональные требования

1. Обновить view примитивов диаграммы классов.
2. Проверить что все работает (текст не выезжает за пределы объектов)

Требования к реализации

У каждого объекта обычно в конце файла есть view объект которое имеет название как имя объекта + View (выглядит так: joint.shapes.flexberry.uml.<имя объекта>View)
внутри которого есть template в него и надо вносить изменения.

Исходный код

Все объекты находятся в репозитории: https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives

Список всех объектов используемых на диаграмме классов: https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/models/fd-dev-uml-cad.js#L10

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Цель

Сверстать компонент, который представляет каждый дочерний элемент в виде строки таблицы.

Полезные ссылки, скриншоты

Цель

Сверстать блок с копирайтом и добавить его футером к страницам.

Функциональные требования

Текст: Copyright © New platform Ltd. 2018 Создано при поддержке Фонда содействия развитию малых форм предприятий в научно-технической сфере (программа СТАРТ-2013).

Полезные ссылки, скриншоты

Цель

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

Функциональные требования

1. Реализовать панель (возможно лучше сделать логику отдельным компонентом) для настройки свойств класса.
2. Добавить механизм для заполнения данными свойств созданного компонента при выборе, класса на диаграмме.
3. Реализовать сохранение свойств класса.

Требования к реализации

Свойства настройки класса должны быть аналогичны свойствам класса из win версии дизайнера. (см скриншот №1)

Стиль оформления панели должен соответствовать макету дизайна (см скриншот №2) Рекомендуется вынести на форму только основные свойства(Name, Caption, Description, storage,BSClass + еще какие-нибудь), остальные скрыть в группу "дополнительные"

Исходный код

hbs - где находится панель на которую надо добавить настройку свойств класса.

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

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

• Макет дизайна (см скриншот №2)
• Структура приложения
• Конструкторы E и L форм - в Структуре приложения выбрать в левом дереве форму и нажать редактирование.

Полезные ссылки, скриншоты

• Скриншот 1
  

• Скриншот 2
  

Тулбар занимает всю ширину листа. Все остальные элементы листа идут ниже тулбара, потому что кнопок в нем может быть много. Пока достаточно кнопки с крестиком, которая анимировано скрывает тулбар. Фон можно сделать, например, rgba(0,0,0,.25), при наведении rgba(0,0,0,.35), при клике rgba(0,0,0,.5).

Иконки в кнопках векторные. Ссылка на крестик:

https://iconmonstr.com/x-mark-1-svg/

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

Цель

Исправить масштабирование примитива NAryAssociation

Функциональные требования

Исправить масштабирование примитива NAryAssociation при вводе текста в шапку объекта

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитив NAryAssociation на диаграммах классов в вин дизайнере.

Цель

Переписать объектную модель для примитива "интерфейс" (interface) .

Функциональные требования

1. Переписать объектную модель для примитива "интерфейс" (interface) .
2. Доделать экшен создания примитива (сейчас он есть, но пустой).
3. Добавить создание примитива в модель.

Требования к реализации

Необходимо поправить примитив "интерфейс" (interface) чтобы он не использовал внутри себя другие примитивы.
тк примитивы на диаграмму попадают в рандомном порядку при построении он(примитив интерфейс) не должен зависеть от других примитивов.

Исходный код

1. В директории https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives создать новый js файл fd-uml-interface.js
2. Доделать экшен для создания созданного примитива в https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-dpd-primitives.js#L41
3. Добавить создание примитива в модель https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/models/fd-dev-uml-dpd.js#L64

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитив "интерфейс" (interface) на диаграммах развертывания в вин дизайнере.

Полезные ссылки, скриншоты

"интерфейс" (interface) в вин дизайнере

Цель

Исправить масштабирование примитива Package

Функциональные требования

Исправить масштабирование примитива Package при вводе текста в шапку объекта

Требования к реализации

Сейчас при добавлении в шапку текста текст выходит за границы объекта (см скрин 1)
После исправления масштабирования, возможно потребуется исправить экшен при создании объекта.
Все поведение примитива должно соответствовать примитиву из вин версии дизайнера.

Исходный код

Объект Package- https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/objects/uml-primitives/fd-uml-package.js

Экшен создания объекта - https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-cad-primitives.js#L514

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитив Package на диаграммах классов в вин дизайнере (см скрин 2).

Полезные ссылки, скриншоты

• скрин 1
  

• скрин 2
  

Цель

Проверить совместимость сохраняемых диаграмм из ember-flexberry-designer с CASEBERRY

Функциональные требования

1. Нужно сохранить диаграмму из ember-flexberry-designer и открыть её в CASEBERRY. Совместимость должна остаться.
2. Нужно проверить, что полный цикл сериализации - десериализации диаграммы работает адекватно и ничего не портит.
3. Попробовать повторить действия в обратном порядке (из CASEBERRY в ember-flexberry-designer)

Требования к реализации

Надо на диаграмму добавить все объекты и все возможные связи.

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: develop

Документация

• виды диаграмм
• общие сведения о редакторе диаграмм

Аналоги, примеры реализации

• вин дизайнер - CASEBERRY (в веб должно быть все так же как в вин)

Полезные ссылки, скриншоты

• вин дизайнер и инструкцию по его установки можно найти тут

Цель

Сверстать компонент, который отображает иконку в круге и текст под ним.

Функциональные требования

• Кнопка бывает в двух вариантах: цветом выделения и серым.

Полезные ссылки, скриншоты

Отменить и создать проект:

Сохранить настройки:

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

Фон всего приложения при этом анимировано становится светло-серым. Фон сайдбара примерно rgba(0,0,0,.1), поэтому сайдбар, который находится выше фона, становится темнее.

Лист тесно связан с роутингом, потому что пользователь может, например, зайти на сайт на страницу с сущностью, например:

https://designer.example.flexberry.net/3a06d41d-4d16-4740-bd6c-573e01caae32

И у него должна открыться страница с листом с подробностями сущности.

Цель

Адаптировать компонент "Сайдбар" для мобильной версии.

Функциональные требования

В десктопной версии меню проекта (верхнее) и меню приложения (нижнее) разделены пустым пространством. В мобильной версии это один прокручиваемый список.

Цель

Надо добавить механизм добавления для каждого примитива диаграммы вариантов использования.

Функциональные требования

1. Создать мексин с экшенами для добавления примитивов.
2. Добавить этот мексин в контроллер страницы редактирования диаграмм.
3. Добавить кнопки для созданных экшенов в шаблоне страницы редактирования диаграмм.

Требования к реализации

В экшенах надо использовать методы createObjectData и createLinkData в зависимости от типа добавляемого примитива, из https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/controllers/fd-diagram-edit-form.js#L231
Внутрь вызванного метода callback-ом передать функцию создания примитива.
Список всех примитивов которые необходимо добавить можно посмотреть в вин версии.

Исходный код

1. Надо в директории https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/mixins/actions-for-primitives создать новый файл fd-actions-for-ucd-primitives.js
2. Добавить созданный мексин нужно в контроллер: https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/controllers/fd-diagram-edit-form.js#L14
3. Шаблон который надо обновить: https://github.com/Flexberry/ember-flexberry-designer/blob/develop/app/templates/fd-diagram-edit-form.hbs#L506

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Аналоги, примеры реализации

• Для всех других диаграмм кнопки добавления примитивов уже добавлены можно посмотреть как они уже сделаны и сделать аналогично. (мексины для др диаграмм: https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/mixins/actions-for-primitives, шаблон с кнопками: https://github.com/Flexberry/ember-flexberry-designer/blob/develop/app/templates/fd-diagram-edit-form.hbs)

Цель

Сверстать страницу генерации приложения.

Функциональные требования

Страница состоит из таблицы и кнопки Сохранить настроки. Ширина таблицы равна 50% от ширины страницы.

Полезные ссылки, скриншоты

Цель

Сверстать страницу с архитектурой приложения.

Ссылки на иконки:

https://iconmonstr.com/shield-21-svg/
https://iconmonstr.com/eye-3-svg/
https://iconmonstr.com/database-5-svg/
https://iconmonstr.com/map-8-svg/
https://iconmonstr.com/gear-2-svg/

Для иконки выпадающего списка можно использовать utf-8 символ ▾

По клику на подсистему внизу страницы она добавляется в соответствующий раздел.

Цель

Переписать объектную модель для примитива Realization.

Функциональные требования

1. Переписать объектную модель для примитива Realization.
2. Обновить экшен создания примитива.

Требования к реализации

Примитив Realization должен прикрепляться к другим связям, сейчас он прикрепляется только к объектам.

Исходный код

1. В файле https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/objects/uml-primitives/fd-uml-realization.js#L37 надо переписать приметив чтобы он прикреплялся к другим связям.
2. Обновит экшен https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-cad-primitives.js#L227 (даже если входные данные не изменились надо обновить объекты к которым может прикрепляться примитив)

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитив Realization на диаграммах классов в вин дизайнере.

Полезные ссылки, скриншоты

Realization в вин дизайнере

Цель

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

Функциональные требования

• Заголовок;
• Инпут с поиском, кнопка создания нового проекта;
• Блок проекта содержит: название, описание, дату обновления и кнопку, которая прикрепляет проект в верх списка.

Ширина блока фиксирована.

Проекты упорядочены по убыванию даты обновления. Прикрепленные проекты упорядочены в алфавитном порядке по возрастанию (А-Я).

Иконка с кнопкой:

https://iconmonstr.com/pin-23-svg/

Полезные ссылки, скриншоты

Цель

Сформировать из svg иконок, которые используются в макетах, шрифт и подключить к проекту.

Функциональные требования

1. Подключить шрифты и добавить необходимые для их использования стили
2. Проверить что иконки отображаются в проекте
3. Проверить, что новые иконки не перетирают существующие

Требования к реализации

Шрифты нужно импортировать через app.import() в ember-cli-build.js

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от flexberry-designer-new-style

Документация

• semantic ui icons - используются эти иконки

Функциональные требования

Известно примерно следующее соответствие форм:

• fd-stage-edit-form » fd-setting
• fd-stage-list-form » fd-all-projects
• fd-appstruct-form » fd-navigation
• fd-generation-list-form » fd-generation
• fd-diagram-list-form » fd-diagrams

Требования к реализации

По возможности переносить логику в пустые формы созданные при верстке с новым дизайном.

Исходный код

Ветка: develop

Цель

Добавить отображение текущего проекта в сайдбар

Функциональные требования

1. В сайдбаре должно отображаться название текущего проекта (подробнее в скриншоте сайдбара)

Требования к реализации

1. Текущий проект брать из сервиса fd-current-project-context, методом getCurrentStage()

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Полезные ссылки, скриншоты

И опубликовать ссылку на это в комментарии здесь, чтобы можно было зайти и порадоваться, что все работает.

Цель

Проверить во всех ли объектах на диаграмме классов реализовано редактирования текста.

Функциональные требования

1. Проверить реализацию редактирования текста в примитивах на диаграмме классов
2. Если есть примитивы у который редактирование текста не реализовано его надо добавить.
3. Сделать импуты прозрачными у объектов

Требования к реализации

Надо проверять только объекты, связи не надо.
Все должно быть как в вин версии дизайнера.

Исходный код

Директория с объектами диаграмм - https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: develop

Документация

• Примитивы диаграммы классов

Аналоги, примеры реализации

Если будут объекты с не реализованным редактированием текста, то пример реализации можно посмотреть в др объектах в которых она реализована (реализация находится во вью)

Цель

Сверстать страницу с проектами, пустую

Функциональные требования

При выборе пункта меню "Все проекты", когда в репозитории нет ни одного проекта, открывается страница, которая приветствует нового пользователя. Необходимо сверстать данную страницу в соответствии с макетом.
(чтобы открыть форму, когда проекты есть, нужно перейти по адресу /#/all-projects/empty)

Требования к реализации

1. Для создания данной структуры взять в пример страницу создания нового проекта (/#/all-projects/new).
2. Для указания цветов, необходимо использовать одну из переменных, определенных в файле https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/styles/default/globals/site.variables
3. Размер панели (на которой находится кнопка создания проекта) должен соответствовать размеру карточки проекта на странице "Все проекты"(/#/all-projects).
4. Предлагаю упростить задачу и использовать компонент fd-round-button и круг, в котором иконка находится, сделать прозрачным (только для компонента на этой странице, подобные кнопки на других страницах не должны поменять вид). Пример использования компонента на странице "Создание нового проекта" (/#/all-projects/new).
5. Иконка icon-fd-plus-thin

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: develop

Полезные ссылки, скриншоты

Документация semantic ui: https://semantic-ui.com/
Макет:

Цель

Доработать редактор представлений

Функциональные требования

Поля вычислимых свойств в представлении должны отличатся от хранимых.
В представлении и дерева атрибутов.

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: develop

Документация

Добавить описание в статью о реадкторе предтавлений дизайнера

g=posts&t=2542#post13306

Список это такой блок, состоящий из групп. Группы разделяются светло-серыми 1px линиями. Внутри группы строки. Строка это такой флексбокс, состоящий из двух столбцов: первый фиксированной ширины, второй: { flex-grow: 1; }. Группа строк может содержать один заголовок (например, Перечисление) или иметь заголовок в каждой строке (например, сущность, редактор, список). Во втором столбце каждой строки может быть иконка слева от текста. Если в строке кнопка, то ее часть с иконкой, должна быть висячей.

Этот же компонент может быть использован для таблиц с формами.

Цель

Необходимо разработать форму со списком проектов.

Функциональные требования

1. Загружать в model список проектов, которые доступны пользователю
2. Отображать проекты блоками, отсортированными в порядке убывания даты изменения
3. Возможность добавлять новые проекты
4. Возможность поиска по имени проекта

Требования к реализации

1. Реализовать компонент, отображающий список проектов блоками
2. Компонент должен принимать параметром имя формы для добавления проекта. Для проверки можно указать существующую edit-new форму проекта
3. При нажатии на блок с проектом, необходимо устанавливать выбранный проект в качестве текущего и переходить на роут модели приложения (fd-application-model).

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Цель

Редактирование текста на примитиве TemplateClass

Функциональные требования

1. Реализовать вводи текста в "шапку" TemplateClass-а.
2. Текст не должен вылезать за приделы объекта, если текст не входит ширина объекта должна увеличится.

Требования к реализации

Возможно придется править объект TemplateClass-а.
Все поведение примитива должно соответствовать примитиву из вин версии дизайнера.

Исходный код

Объект TemplateClass - https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/objects/uml-primitives/fd-uml-template-class.js

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

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

Полезные ссылки, скриншоты

Вот сюда должен вводится текст:

Цель

Обновить версию ember-flexberry до 3.0.0

Функциональные требования

1. Обновить версию ember-flexberry до 3.0.0
2. Привести код в соответствии с требованиями к ember 3
3. Добавить JSLint
4. Привести код в соответствии с требованиями JSLint-а
5. Проверить что все работает.

Требования к реализации

1. На официальном сайте эмбера есть инструкции по обновлению
2. Параллельно с обновлением, нужно написать статью по обновлению эмбера на проекте

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• JSLint
• Официальный сайт эмбера

Аналоги, примеры реализации

• Проекты ember-flexberry и ember-flexberry-data уже были обновлены до эмбера 3

Цель

Разработать объектную модель для примитива In Scope

Функциональные требования

1. Реализовать объектную модель для примитива In Scope
2. Доделать экшен создания примитива (сейчас они есть, но пустой).
3. Добавить создание примитива в модель.

Требования к реализации

Примитив In Scope должен быть привязан к др примитивам (актору и объекты) , но тк примитивы на диаграмму попадают в рандомном порядку при построении он(примитив In Scope) не должен зависеть от др примитивов
При перемещении др примитивов (акторы и объекты),In Scope должен перемещаться вместе с ним.

Примитив EventMessage должен прикрепляться к другим связям.

Все поведение примитива должно соответствовать примитиву из вин версии дизайнера.

Исходный код

1. В директории https://github.com/Flexberry/ember-flexberry-designer/tree/develop/addon/objects/uml-primitives создать новыq js файл fd-uml-in-scope.js
2. Доделать экшен для создания созданного примитива в https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/mixins/actions-for-primitives/fd-actions-for-sd-primitives.js#L178
3. Добавить создание примитивов в модель https://github.com/Flexberry/ember-flexberry-designer/blob/develop/addon/models/fd-dev-uml-sd.js

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Документация

• jointjs - библиотека с помощью которой реализованы объекты диаграмм.

Аналоги, примеры реализации

• Примитив In Scope на диаграммах последовательности в вин дизайнере.

Полезные ссылки, скриншоты

In Scope в вин дизайнере

Сайдбар (светло-серый, 200px в ширину) с основным рабочим пространством (белый, 100%-200px).

Рядом с каждым элементом в сайдбаре слева должно быть место для иконки.

Описание ошибки

При создании новой диаграммы, лист для рисования диаграммы имеет нулевую высоту.

Ожидаемое поведение

У новой диаграммы лист для рисования должен быть не нулевой высоты.

Шаги воспроизведения

Зайти на список диаграмм, нажать создание новой диаграммы.

Пути решения

Выставить для листа диаграммы минимальную высоту (400-500px)

Исходный код

Проект на GitHub: https://github.com/Flexberry/ember-flexberry-designer
Ветка: наследоваться от последней версии ветки develop

Вот это кнопка.

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

Иконку с плюсом можно взять отсюда:

https://iconmonstr.com/plus-thin-svg/

Пример использования кнопки в естественной среде обитания: