Какой подход использовать для создания визуального конструктора?

Question

[Timur Baiguzhaev]

Всем привет! Подскажите пожалуйста, с чего начать. Задача следующая: Предположим что у нас есть определенный сайдбар с dragndrop компонентами, которые можно перетащить на сетку, визуально выстроить иерархию или связать их друг с другом. Некоторые компоненты могут быть текстовые и т. п. некоторые будут логические, в зависимости от ввода пользователя выполнить одно из условий и перейти к соответствующему блоку. Изображение ниже думаю поясняет.

Для сетки нашел решение: https://interactjs.io/
Сохранять хотелось бы все данные в JSON.

Понимаю что вопрос достаточно абстрактный, подскажите куда копать и что можно почитать. Какими путями можно реализовать данный проект? Какие библиотеки можно посмотреть? И по связи компонентов и компиляции JSON хотелось бы каких то best practices.

Answer 1

[Timur Baiguzhaev]

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

Если по текущему статусу решения вопроса, то пока вырисовывается так:

• После некоторого ресерча оказалось что не совсем понимал работу JS с DOM.
  
• Также для большей свободы и контроля, решил перейти с стандартного dragndrop на свой, основанный на mouseevents (https://learn.javascript.ru/mouse-drag-and-drop).
  
• С сеткой тоже все оказалось проще, CSS разлиновал сетку по точкам, а когда отпускаю блок (mouseup) высчитываю ближайшее расстояние до точки и двигаю его туда. Так что обошлось без лишних библиотек.
  
• Данные буду хранить в атрибутах, перебирать элементы (над этим еще надо подумать) и сохранять в один из форматов.
  

В общем потихоньку решил накидать основу на Vanilla и мигрировать на Vue используя компоненты.
Насчет graphQL спасибо, почитаю. А готовые решения боюсь не подойдут, много переделывать под себя.

Сейчас один из вопросов который возник, перемещение нескольких добавленных элементов, когда между ними добавляют элемент. Или при добавлении нескольких ветвей (if-else-...) у нас визуально растет дерево, и если такие сложные условия будут на нижних уровнях, они будут двигать все элементы дерева сверху. В общем не знаю еще как это решать, может есть идеи?) Насчет вместе покодить я не против общего репо)

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

Comments

[golentor]

Я и потрошил код Элементора и главное - учился как правильно строить useability - то взаимодействие которое нужно пользователю.
Если Вам не страшно открывать код для общей разработки можете запостить ссылку на свой проэкт на гите.
Про дерево - это наверное Вы про массив объектов. Их эллементарно добавлять распарсив json в Array. Ябы почитал про алгоритмя работы с массивами.
Графкул - это я так понял обёртка чтобы json гнать сразу в БД. Это иммитация REST API два в одном)

[golentor]

Нашёл красивое решение сортировки списка
https://ru.vuejs.org/v2/guide/transitions.html

Answer 2

[golentor]

Наверное я несильный эксперт по визуал конструкторам, и судя по Вашей подписи, Вы всё-таки Гоу-разработчик, поэтому Vue вряд-ли Вам подойдёт.
Копать советую в сторону graphQL (JSON уже морально устарел)
Посмотреть из готового можно Elementor под Wordpress. Под WP можно найти несколько таких конструкторов.
graphQL к Гоу прикручивается эллементарно.
Как клиент Вам подойдёт видимо связка докер - Vue - vuetify (всёже без него - никуда).
В своё время я начинал пилить свой вижел констрактор на Vue, так что если есть желание можно вместе покодить - хороших конструкторов в мире веба - просто по-пальцам не перечесть)