title: How can I prevent overlapping in a family tree generator?
body: <p>I'm creating an interactive family tree creator, unlike more simpler versions which are simple pedigree charts/trees.</p>
  
  <p><strong>The requirements</strong> for mine (based on familyecho.com) are: </p>
  
  <ul>
  <li>multiple partners vs just a simple 2 parent to 1 child that you normally see.</li>
  <li>multiple siblings </li>
  <li>partners dont necessarily need to have children</li>
  <li>there doesn't always have to be a parent "pair", there can just be a single father/mother</li>
  </ul>
  
  <p><strong>The problem</strong> I'm encountering is: I'm generating the offsets based on the "current" node/family member and when I go past the first generation with say, 2 parents, it overlaps. </p>
  
  <p><strong>Example of the overlap as well as partner not being drawn on the same X axis:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/scoGn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/scoGn.png" alt="enter image description here"></a></p>
  
  <p>Here is the <a href="http://tree.arounds.org/" rel="nofollow noreferrer">actual app</a> and <a href="http://tree.arounds.org/ec-app/includes/deps/jTree/tree/tree.js" rel="nofollow noreferrer">main js file</a> where I'm having the issue. And here is a <a href="http://jsfiddle.net/efLbbt01/7/" rel="nofollow noreferrer">simplified jsfiddle</a> I created that demonstrates the parent/offset issue though I really have to solve overlapping for this <strong>in general</strong>, in addition to making sure partners are drawn on the same x axis as other partners. </p>
  
  <p>How can I go about solving this and possible future overlapping conflicts? Do I need some sort of redraw function that detects <a href="https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection">collisions</a> and adjusts the offsets of each block upon detecting? I'm trying to make it seamless so there's a limited amount of redrawing done.</p>
  
  <p>An example of calculating offset relative to the "context" or current node:</p>
  
  <pre><code>var offset = getCurrentNodeOffset();
  
                          if ( relationship == RELATIONSHIPS.PARTNER ) {
                              var t = offset.top; // same level
                              var l = offset.left + ( blockWidth + 25 );
                          } else {
                              var t = offset.top - (blockHeight + 123 ); // higher
                              var l = offset.left - ( blockWidth - 25 );
                          }
  </code></pre>