javascriptmxgraphjgraph

Implementing a hierarchical tree editor with mxGraph


I would like to implement an editor for dialogue trees with mxGraph.

I started out with the workfloweditor example [1] and try to customize the code to my needs. Drawing the graph using the subprocess template as nodes and directed connectors works perfectly. However, the graph hierarchy seems to be missing: The tooltip always shows "Children: 0", no matter how many nodes I connect. Same happens in the original sample code.

How can I explicitly configure the graph to follow a hierarchical parent-children layout?

[1] https://jgraph.github.io/mxgraph/javascript/examples/editors/workfloweditor.html


Solution

  • The children are not what I think you think.

    What is a children? These are cells with current cell as a parent. What is a parent ? Try that : Add a box, right click on it and click "enter group". You are now inside in sub-process if you like. Place a few boxes there, then right click on the canvas "exit group". Now you have a parent cell with children cells.

    What you are trying to do is to read the connections between your boxes. Have a look at how to traverse the graph or you can implement manually too, it's fairly straightforward.