Разработать ReactFlow model
использовать reactflow
задача простая и всё есть по сути в ReactFlow
требуется Знать как работать с React Flow
ВВОДНЫЕ ДАННЫЕ:
1) с backend приходит json data по примеру пункта (E) ниже в описание либо приходит пустой JSON
Требуется:
используя react flow
открывается canvas на страничке как пример смотри вложенные "example canvas.png"
нужно создать:
- контейнер(главная нода) в котором есть child nodes
- от child nodes идет флоу до сл контейера
описание:
1) над canvas должна быть кнопка "add container"
2) главный контейнер должен иметь а) заголовок приходящий из JSON + Container ID б) в низу контейнера должна быть кнопка "add action" и кнопка "edit container"
между заголовком главного контейра и кнопкой "add action" должны быть:
3) child nodes - их может быть несколько либо вообще не быть; child node это мини контейнер который создержит: а) заголовок б) кнопка "edit action"
А) разработка добавления контейров:
когда наживаем на "add container" появляется справа менюшка которая содержит
- container name filed - text - обязательное поле
- order - int
- conection to container ID - int - но может быть пустым
- Action выподающий список: [text, button]
- кнопка "create container"
после нажатия создать контейнер - обновляется react flow и таким обзом у нас теперь два главных контейнера
Б) разработка добавления actions для определенного контейнера
при нажатие "add action" справа открыывется меню с названием "Adding Action to {container ID}":
- Action name - text field (обязательное поле)
- order action - int (не обязательное поле)
- action type: выпадающий список [text, button] (обязательное поле)
- element data: вписать название текста
- connection to container - int (не обязательное поле)
- кнопка "create acion" после нажатия кнопки обновляется контейнер в reactlow
С) также требуется уметь редактировать эти ноды
D) варианты соединений:
смотри загруженные документы
- "connection variant 1.png"
- "connection variant 2.png"
E) должны быть кнопка на канвасе "Save Flow"
при нажатие на данную кнопку должен сформироваться json типа
{
......{{container ID}}: {
............"ContainerName": "{{Container Name}}",
............"Order": "{{Order}}",
............"ConectionToContainer":{{ConectionToContainer}},
............"Actions":{
.................."{{ActionID}}":{
........................"ActionName": {{"ActionName"}},
........................"ActionOrder": {{"ActionOrder"}},
........................"ActionType": {{"ActionType"}},
........................"ActionData": {{"ActionData"}},
........................"ConectionToC": {{"ConteinerID"}},
..................},
............}
......}
}
и он должен быть отправлен на endpoint of flask project "/flow-update"
P.S. если сможете такое реализовать - то можно будет дальше поработать над улучшением дополнительных функций
перед началом работы прошу указать ваши примеры по работе с React / Reactflow