bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
927 stars 330 forks source link

Using _expanded to set a new height for expanded nodes #229

Closed kctdfh closed 1 year ago

kctdfh commented 1 year ago

Hey! Great library!

I'm investigating the possibility of adopting it for our use-case and was testing out one of our requirements: the expanded node must have a different content and be taller than its collapsed version.

Here is what I have (only testing the variable height for now): https://stackblitz.com/edit/web-platform-7hab7y?file=index.html

As you can see, when you expand a few nodes and start collapsing them, it seems that the placement algorithm breaks. The nodes are placed correctly but the hierarchy lines don't correctly attach to the previously expanded nodes.

Any way to force update/reposition the hierarchy lines after repositioning the nodes? (assuming that is the issue)

Cheers

bumbeishvili commented 1 year ago

Interesting, I haven't seen a similar version

Can you try making the following part dynamic? (check if expanded and then return the relevant height and remove the code which changes height inside nodeContent)

 .nodeHeight((d) => {
      return 85;
})
.nodeWidth((d) => {
      return 220;
})
kctdfh commented 1 year ago

Thanks for the response!

Turns out _expanded isn't a good candidate for this use-case (I suspect that it's due to this function being used here). Would be nice to have a similar property that only applies to the node itself. Also _expanded is undefined on first draw. Wouldn't it be good to force it to be true or false at all times?

I tried doing what I wanted to do using _expanded here and as you can see, the _expanded property applies to children too when a parent node is expanded.

I tried using the same logic as the arrow up and arrow down if statement. It works really well but for some reason it won't work on the root node. Here's the code. Any idea why that could be or how to solve for it?

Additionally, using .nodeHeight won't work if I just return the intended value. I'd still have to set the height by also setting d.height in that function. Not sure why but that's what's working in the examples above.