Creating MindMap with LiveView

Phoenix Forum Chat / Discussions
, ,
1

I am evaluating the feasibility of using LiveView for building a feature for user to create an executable workflow/flowchart/DAG/MindMap using drag & drop UX where edges connect the nodes.

Is LiveView a good fit to develop such a functionality or is it an overkill i.e. not worth the complexity and would I better using Vue/React for this ?

2

Drag/drop isn’t really available directly in LiveView so you would need some JS on the front end to handle those drawing interactions, but you could potentially push updates from a graphical widget via pushEvent almost continuously to record drawing state changes on the server (if that was appropriate), and the handleEvent callback to receive server state updates (or initial state for the initial render). Also, if you have “form” type information to record against each edge & node, it would be straightforward to manage that using a liveview.

If you are wanting to display server side updates of execution progressing for a business process this would be a reasonably nice model - probably easier than wiring up channels into React or Vue.

3

Are there any examples of such a hybrid approach? Seems like you are suggesting using JS through phx-hook for drag & drop functionality, right?

4

This would be easier to do now, but should give you an idea… https://github.com/hurty/live_view_demo