bumbeishvili / org-chart

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

Resize node when click an element inside #389

Open milhlhat opened 6 months ago

milhlhat commented 6 months ago

Hi bumbeishvili, how can I change width, height of node when click an element inside node? Thankyou so much!

bumbeishvili commented 6 months ago

@milhlhat same way as usual, just rerender the graph

Pseudocode

clickHandler = (nodeData) =>{
   chart.nodeWidth(d=> d!=nodeData?oldHeight:newHeight)
  chart.render()
}
milhlhat commented 6 months ago

@milhlhat same way as usual, just rerender the graph

Pseudocode

clickHandler = (nodeData) =>{
   chart.nodeWidth(d=> d!=nodeData?oldHeight:newHeight)
  chart.render()
}

Could you please give an example? and I don't know how binding clickHandler in nodeContent

TommySharpNZ commented 1 month ago

Is there a way to resize just a single node so it can expand and show more details about the single node?

bumbeishvili commented 1 month ago

I've done it about 2 years ago, I don't remember a specific code but the key point is you should precalculate an expanding node height,then specify a new height when the expand button is clicked, then rerender the graph.

For precalculation you can create a dummy, hidden node with absolute position somewhere in the dom and just get height of it