When attempting to calculate the positions of each ID in order to arrange them hierarchically on the canvas, I encounter some challenges. Whether it's organizing them into a tree structure or multiple trees resembling a forest, one restriction is that cycles are not allowed and each box should measure 240 x 100.
I kickstart this process with the connections I receive: connectionsArr.
The function graphWithTopLeft plays a pivotal role in the position calculation for each ID. However, in my test case, certain IDs end up stacked atop one another and the spacing between them doesn't meet my desired layout.
In any scenario, my objective is to achieve an outcome similar to this:
https://i.sstatic.net/R3rGn.png
Although I'm aware that these algorithms can be quite complex, I aim to refrain from relying on external libraries for assistance.
A massive thank you in advance to those who have helped or plan to assist!
Check out the code example here: codesandbox & also here.
const connectionsArr = [
{ sourceId: 1, targetId: 2 },
{ sourceId: 1, targetId: 3 },
{ sourceId: 1, targetId: 4 },
{ sourceId: 2, targetId: 5 },
{ sourceId: 2, targetId: 6 },
...
(The rest of the JavaScript code remains unchanged) ...
<html>
<head>
<title>Sandbox</title>
<meta charset="UTF-8" />
<style>
body {
background: black;
margin: 0;
}
</style>
</head>
<body>
<canvas id="paper" width="10000" height="10000"></canvas>
<script src="src/index.ts"></script>
</body>
</html>