@TimurBaiguzhaev
Backend Golang Developer

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

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

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

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

5f6eecfe8de34047608144.png
  • Вопрос задан
  • 501 просмотр
Пригласить эксперта
Ответы на вопрос 2
@TimurBaiguzhaev Автор вопроса
Backend Golang Developer
golentor спасибо за ответ. В свободное время для личных проектов пишу фронт, Vue стараюсь активно использовать, куда ж без него)

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы