treant-js
treant-js copied to clipboard
Nodes overlap on wide trees
In a project I'm working on, I am getting nodes that are overlapping when there are a lot of siblings on the same level. I am unsure if this is Treant or my custom CSS width for nodes.
Example attached. Note the clash on the fifth tier, in the middle.
My css for a node is:-
.node {
color: #000000;
border: 2px solid #000000;
border-radius: 8px;
width: 175px;
font-family: Arial;
}
Is this me or Treant? Fixable?
I think it is a problem with Treant and stackChildNodes
property
So if I switched off stackChildNodes
for now, that could be a temporary fix?
Yeah it looks like it, it's most likely not taking into account the horizontal offset when being stacked which affects the true width of the nodes used in calculating their positions.
Can you point me in a rough direction in the lib and I could take a look.
Edit:- Implementing childrenDropLevel
on child nodes that are stacked fixes it mostly?
My immediate guess is around line 583 (// handle stacked children positioning
).
It used the stackIndent, but I suspect there's a miscalculation in and around that area.
Not having much luck here. Any more pointers?