WIP: implement family tree

Author: dabeng

demo/family-tree.html

@@ -9,14 +9,15 @@
   <style type="text/css">
     .orgchart { background: #fff; }
     #chart-container {
-      height: 800px;
+      height: 850px;
     }
     .orgchart .node {
       padding: 3px 8px;
       /* box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px; */
     }
     .orgchart .node .avatar {
-      box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
+      border-radius: 60px;
+      box-shadow: rgba(99, 99, 99, 0.8) 0px 2px 8px 0px;
     }
     .orgchart .couple:has(> .nodes) > .node:first-child::after {
       top: 148px;
@@ -64,7 +65,7 @@
                       { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
                         'children': [
                           [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
-                          [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                          // [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
                         ]
                       },
                       { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },

demo/option-createNode.html

@@ -26,7 +26,7 @@
       border-radius: 35px;
       box-shadow: 0 0 10px 1px #999;
       background-color: #fff;
-      z-index: 1;
+      z-index: 3;
     }
     .orgchart .node .second-menu .avatar {
       width: 60px;

dist/css/jquery.orgchart.css

@@ -259,7 +259,7 @@
   background-color: rgba(238, 217, 54, 0.5);
   transition: .5s;
   cursor: default;
-  z-index: 20;
+  z-index: 2;
 }
 
 .orgchart .node.focused {

dist/css/jquery.orgchart.min.css

@@ -750,6 +750,7 @@
     },
     // whether the cursor is hovering over the node
     isInAction: function ($node) {
+      // TODO: 展开/折叠的按钮不止4个箭头，还有toggleBtn
       return [
         this.options.icons.expandToUp,
         this.options.icons.collapseToDown,
@@ -1474,7 +1475,7 @@
         level = data.level;
       } else {
         level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
-        if (Array.isArray(data)) {
+        if (Array.isArray(data) && Array.isArray(data[0])) {
           $.each(data, function () {
             $.each(this, function () {
               this.level = level;
@@ -1485,7 +1486,7 @@
         }
       }
       // Construct the single node in OrgChart or the multiple nodes in family tree
-      if (Array.isArray(data)) { // 处理family tree的情况
+      if (Array.isArray(data) && Array.isArray(data[0])) { // 处理family tree的情况
         $.each(data, function () { // 构造一个家庭的hierarchy
           var _this = this;
           $.each(this, function (i) { // 构造一个夫/妻节点
@@ -1518,8 +1519,10 @@
           });
         });
       } else {
-        $nodeDiv = this.createNode(data);
-        $hierarchy.append($nodeDiv);
+        if (Object.keys(data).length > 2) { // TODO: 应该用更好的方式来判断是否是供父一级节点创建的信息
+          $nodeDiv = this.createNode(data);
+          $hierarchy.append($nodeDiv);
+        }
         if (data.children && data.children.length) {
           this.buildInferiorNodes($hierarchy, $nodeDiv, data, level);
         }

dist/js/jquery.orgchart.js

@@ -259,7 +259,7 @@
   background-color: rgba(238, 217, 54, 0.5);
   transition: .5s;
   cursor: default;
-  z-index: 20;
+  z-index: 2;
 }
 
 .orgchart .node.focused {

dist/js/jquery.orgchart.min.js

@@ -750,6 +750,7 @@
     },
     // whether the cursor is hovering over the node
     isInAction: function ($node) {
+      // TODO: 展开/折叠的按钮不止4个箭头，还有toggleBtn
       return [
         this.options.icons.expandToUp,
         this.options.icons.collapseToDown,
@@ -1474,7 +1475,7 @@
         level = data.level;
       } else {
         level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
-        if (Array.isArray(data)) {
+        if (Array.isArray(data) && Array.isArray(data[0])) {
           $.each(data, function () {
             $.each(this, function () {
               this.level = level;
@@ -1485,7 +1486,7 @@
         }
       }
       // Construct the single node in OrgChart or the multiple nodes in family tree
-      if (Array.isArray(data)) { // 处理family tree的情况
+      if (Array.isArray(data) && Array.isArray(data[0])) { // 处理family tree的情况
         $.each(data, function () { // 构造一个家庭的hierarchy
           var _this = this;
           $.each(this, function (i) { // 构造一个夫/妻节点
@@ -1518,8 +1519,10 @@
           });
         });
       } else {
-        $nodeDiv = this.createNode(data);
-        $hierarchy.append($nodeDiv);
+        if (Object.keys(data).length > 2) { // TODO: 应该用更好的方式来判断是否是供父一级节点创建的信息
+          $nodeDiv = this.createNode(data);
+          $hierarchy.append($nodeDiv);
+        }
         if (data.children && data.children.length) {
           this.buildInferiorNodes($hierarchy, $nodeDiv, data, level);
         }