bookmark15-familytree
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FamilyTree</title>
  <script type="text/javascript" src="js/jtopo-min.js"></script>
  <script type="text/javascript" src="js/JCFamily.js"></script>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div>
  <canvas width="850" height="550" id="canvas"></canvas>
</div>
<script>

  function sleep(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
      now = new Date();
      if (now.getTime() > exitTime)
        return;
    }
  }
  function generateUUID() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = (d + Math.random()*16)%16 | 0;
      d = Math.floor(d/16);
      return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
  };

  function isOverLap(p, t){
    if (t != p && t.painted && t.level == p.level && ((t.node.x + JCFamily.NodeWidth > p.node.x && t.node.x < p.node.x) ||
      (t.node.x > p.node.x && t.node.x < p.node.x + JCFamily.NodeWidth)))
    {
      return true;
    }else{
      return false;
    }
  }

  function moveRight(p, step){
    for (var i=0; i<JCFamily.Persons.length; i++){
      var n = JCFamily.Persons[i];
      if (n == p){
        continue;
      }
      if (n.painted){
        if (n.node.x >= p.node.x){
          n.node.setLocation(n.node.x+step, n.node.y)
        }
      }
    }
  }

  function moveRightP(p){
    for (var i=0; i<JCFamily.Persons.length; i++){
      var n = JCFamily.Persons[i];
      if (n == p){
        continue;
      }
      if (n.painted){
        if (n.x >= p.x){
          n.x += 1;
          JCFamily.RefreshNode(n);
        }
      }
    }
  }
  //r为互联的节点
  function drawPerson(p, r, level, x, y){
    if (!p.painted) {
      var node = JCFamily.PersonNode(p);
      p.painted = true;
      p.level = level;
      JCFamily.MIN_LEVEL = Math.min(level, JCFamily.MIN_LEVEL)
      JCFamily.MAX_LEVEL = Math.max(level, JCFamily.MAX_LEVEL)
      p.node = node;
      p.parents = [];
      p.children = [];
      p.spouses = [];
      node.setLocation(x, y)
      if (!r){//第一个节点
        p.x = x;
        p.y = y;
        JCFamily.MIN_X = x;
        JCFamily.MIN_Y = y;
        JCFamily.MAX_X = x;
        JCFamily.MAX_Y = y;
      }else{
        if (p.level < r.level) { //新加入的节点是父母
          var n = r.parents.length;
          p.x = r.x + n;
          p.y = r.y - 1;
          if (n != 0) {
            moveRightP(p);
          }
        }else if(p.level == r.level){ //伴侣
          var n = r.spouses.length;
          p.x = r.x + n + 1;
          p.y = r.y;
          moveRightP(p);
        }else if(p.level > r.level){ //孩子
          var n = r.children.length;
          p.x = r.x + n;
          p.y = r.y + 1;
          if (n != 0) {
            var ns = r.children[n-1].spouses.length
            if (ns != 0){ //取最后一个伴侣的坐标
              p.x = r.children[n-1].spouses[ns-1].x+1;
            }
            else{
              p.x = r.children[n-1].x+1;
            }
            moveRightP(p);
          }
        }
      }
      JCFamily.RefreshNode(p);
    }
  }

  function drawSpouse(p){
    //1-找夫妻
    var spouses = JCFamily.FindSpouse(p);
    for (var j=0; j<spouses.length; j++) {
      r = spouses[j];
      var sid = "";
      if (r.to == p.id) {
        sid = r.from;
      } else {
        sid = r.to;
      }
      var s = JCFamily.FindPerson(sid);
      //画出这个节点
      if (!s.painted) {
        drawPerson(s, p, p.level, p.node.x + (p.spouses == undefined ? 1 : p.spouses.length + 1 ) * JCFamily.BrotherGap, p.node.y);
        //moveRight(s, JCFamily.BrotherGap - JCFamily.NodeWidth);
      }

      if (!JCFamily.HasLink(p, s)){
        //画夫妻线, 可以不画线
        JCFamily.SpouseLink(p, s);
        //JTopo.Animate.stepByStep(s.node, {x: p.node.x + (p.spouses == undefined ? 1 : p.spouses.length + 1 ) * JCFamily.SpouseGap}, 1000, false).start();
      }

      //加入节点关系
      if (!p.spouses) {
        p.spouses = [];
      }
      p.spouses.push(s);
    }
  }

  function drawChild(p){
    //- 找儿女
    var children = JCFamily.FindChild(p);
    for (var j=0; j<children.length; j++){
      r = children[j];
      var cid = r.to;
      c = JCFamily.FindPerson(cid);
      //画出这个节点
      if (!c.painted){
        drawPerson(c, p, p.level+1, p.node.x + (p.children==undefined? 0: p.children.length) * JCFamily.BrotherGap, p.node.y + JCFamily.VerticlGap);
        //moveRight(c, JCFamily.BrotherGap - JCFamily.NodeWidth);
      }

      if (!JCFamily.HasLink(p, c)){
        //画父子线
        JCFamily.ParentLink(p, c);
        //JTopo.Animate.stepByStep(c.node, {y: p.node.y + JCFamily.VerticlGap, x: p.node.x + (p.children==undefined? 0: p.children.length) * JCFamily.BrotherGap} , 1000, false).start();
      }

      if (!p.children){
        p.children = [];
      }
      p.children.push(c);
    }
  }

  function drawParent(p){
    //- 找儿女
    var parents = JCFamily.FindParent(p);
    for (var j=0; j<parents.length; j++){
      r = parents[j];
      var fid = r.from;
      f = JCFamily.FindPerson(fid);
      //画出这个节点
      var painted = f.painted;
      if (!painted){
        drawPerson(f, p,  p.level-1, p.node.x + (p.parents==undefined? 0: p.parents.length) * JCFamily.SpouseGap, p.node.y - JCFamily.VerticlGap);
        //moveRight(f, JCFamily.BrotherGap - JCFamily.NodeWidth);
      }

      if (!JCFamily.HasLink(f, p)){
        //画父子线
        JCFamily.ParentLink(f, p);
        //JTopo.Animate.stepByStep(f.node, {y: p.node.y - JCFamily.VerticlGap, x: p.node.x + (p.parents==undefined? 0: p.parents.length) * JCFamily.SpouseGap} , 1000, false).start();
      }

      if (!p.parents){
        p.parents = [];
      }
      p.parents.push(f);
    }
  }

  $(document).ready(function() {
    var canvas = document.getElementById('canvas');

    var stage = new JTopo.Stage(canvas);

    var scene = new JTopo.Scene(stage);

    JCFamily.scene = scene;

    for (i=0; i<1; i++){
      p = JCFamily.Persons[0];

      drawPerson(p, null, 2, 200, 200);

      drawSpouse(p);

      drawParent(p);

      drawChild(p);
    }
    console.log('准备开始重新布局');
    JCFamily.RefreshMap(p);
//    scene.doLayout(JTopo.layout.TreeLayout('down', 30, 107));

  });

</script>
</body>
</html>