Angular, Calculate width, center and offset for a div according to other divs

I'm working on an Angular 13 app which has an option to see an org chart

Here's the expected result



The problem is that I have no Idea how to create those curvy lines that connects the parent node with its children. I think chatGPT doesn't have any idea neither because all the solutions didn't work

Here's the code that I have right now. The component is called stakeholders-map-node and YES, it renders itself in the ng-container

<!-- CHILDREN -->
<div class="node-card">{{ node.name }}</div>
<div class="tree-children" *ngIf="node.isExpanded">
<div class="tree-elements-group">
<div #nodeLinesContainer class="node-lines flex flex-row">
<div *ngFor="let child of node.children; let i = index" class="line">
<svg width="100%" height="75" viewBox="0 0 600 75" preserveAspectRatio="none">
<path *ngIf="i < centerIndex" d="M 600,0 C 600,100 0,0 0,75" stroke="#71CAAE" stroke-width="5" fill="none" vector-effect="non-scaling-stroke"></path>
<path *ngIf="i === centerIndex" d="M 2.5,0 L 2.5,600" stroke="#71CAAE" stroke-width="5" fill="none" vector-effect="non-scaling-stroke"></path>
<path *ngIf="i > centerIndex" d="M 0,0 C 0,100 600,0 600,75" stroke="#71CAAE" stroke-width="5" fill="none" vector-effect="non-scaling-stroke"></path>
</svg>
</div>
</div>
<ng-container *ngFor="let child of node.children; let i = index">
<stakeholders-map-node
#childNode
[nodeId]="child"
class="tree-node tree-child"></stakeholders-map-node>
</ng-container>
</div>
</div>


Note that I added an SVG with the correct curvy line for each node and updated the path according if the children is before the center or after it.

the function is this

get centerIndex() {
if (!this.node) { return 0 }
const length = this.node.childrenCount();
if (length % 2 === 0) {
const lowerHalf = (length / 2) - 1;
const upperHalf = lowerHalf + 1;
return (lowerHalf + upperHalf) / 2;
}

return Math.floor(length / 2);
}


All the svgs reacts according to the width of the container. The thing is that I need to calculate the Div's width from the center of the card childrend to the center of the #nodeLinesContainer then create it and add the offset. The thing is that the child node can be expanded with its own children and the whole div will change its width, the curvy needs to react to this change.

In less words, I want to create divs in this way



Note that the green divs are the ones with the class .line and should be displayed in the way that the image says. Also note that the childs will not have the same width, it depends if the child is expanded or not. The div needs to react to the width change.

Continue reading...