treant-js icon indicating copy to clipboard operation
treant-js copied to clipboard

Nodes overlap on wide trees

Open pconnell99 opened this issue 7 years ago • 6 comments

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.

chart-new

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?

pconnell99 avatar Nov 08 '17 11:11 pconnell99

I think it is a problem with Treant and stackChildNodes property

fperucic avatar Nov 08 '17 12:11 fperucic

So if I switched off stackChildNodes for now, that could be a temporary fix?

pconnell99 avatar Nov 08 '17 14:11 pconnell99

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.

dlgoodchild avatar Nov 08 '17 14:11 dlgoodchild

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?

pconnell99 avatar Nov 08 '17 14:11 pconnell99

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.

dlgoodchild avatar Nov 08 '17 14:11 dlgoodchild

Not having much luck here. Any more pointers?

pconnell99 avatar Nov 23 '17 15:11 pconnell99