WIP: implement family tree

Author: dabeng

demo/family-tree.html

@@ -33,6 +33,7 @@
                 { 'id': '5', 'name': 'Su Miao', 'title': 'department manager', 'gender': 'female',
                   'children': [
                     [
+                    // { 'id': '6', 'name': 'Hei Hei', 'title': 'senior engineer', 'gender': 'male' },
                       { 'id': '7', 'name': 'Pang Pang', 'title': 'engineer', 'gender': 'female', 'outsider': true,
                         'children': [
                           [{ 'id': '8', 'name': 'Dan Dan', 'title': 'UE engineer', 'gender': 'female' }],
@@ -52,13 +53,19 @@
                         [{ 'id': '15', 'name': 'Liu Dan', 'title': 'UE engineer', 'gender': 'female' }]
                       ]
                     }
+                    ],
+                    [
+                    { 'id': '17', 'name': 'Er Hei', 'title': 'senior engineer', 'gender': 'male' },
+                      { 'id': '16', 'name': 'Er Yuan', 'title': 'engineer', 'gender': 'female', 'outsider': true },
+                      
+                      { 'id': '17', 'name': 'San Yuan', 'title': 'engineer', 'gender': 'female', 'outsider': true },
                     ]
                   ]
                 },
-                { 'id': '16', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
+                { 'id': '18', 'name': 'Tie Hua', 'title': 'senior engineer', 'gender': 'male', 'outsider': true }
               ],
-              [{ 'id': '17', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
-              [{ 'id': '18', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
+              [{ 'id': '19', 'name': 'Hong Miao', 'title': 'department manager', 'gender': 'female' }],
+              [{ 'id': '20', 'name': 'Chun Miao', 'title': 'department manager', 'gender': 'female' }]
             ]
           }
         ]

dist/css/jquery.orgchart.css

@@ -99,6 +99,19 @@
   border-top: 2px solid rgba(217, 83, 79, 0.8);
   box-sizing: border-box;
 }
+/* 把本姓人首次出现位置的前面的连线去掉 */
+.orgchart .hierarchy:has(~ :nth-child(1 of .hierarchy.insider))::before {
+  content: none;
+}
+
+/* 把本姓人末次出现位置的后面的连线去掉 */
+.orgchart :nth-last-child(-n + 1 of .hierarchy.insider) ~ .hierarchy::before {
+  content: none;
+}
+
+.orgchart .hierarchy.spouse::before {
+  /* top: 24px; */
+}
 
 .orgchart .hierarchy:first-child::before,
 .orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
@@ -142,6 +155,16 @@
   background-color: rgba(217, 83, 79, 0.8);
 }
 
+.orgchart .hierarchy.spouse > .node + .node::before {
+  content: "";
+  position: absolute;
+  top: 22px; /* 50% width of node - node's padding */
+  left: -7px; /* nodes' gap - node's padding */
+  width: 10px;
+  height: 2px;
+  background-color: rgba(217, 83, 79, 0.8);
+}
+
 .orgchart ul li .node.allowedDrop {
   border-color: rgba(68, 157, 68, 0.9);
 }

dist/css/jquery.orgchart.min.css

@@ -1498,7 +1498,7 @@
               }
             } else {
               // if there are more than two persons in a marriage, every node will be included in a single hierarchy
-              var $wrapper = $('<li class="hierarchy"></li>');
+              var $wrapper = $(`<li class="hierarchy${_this.length > 1 ? ' spouse' : ''}${this.outsider  ? '' : ' insider'}"></li>`);
               $wrapper.append($nodeDiv);
               $hierarchy.append($wrapper);
               if (this.children && this.children.length) {

dist/js/jquery.orgchart.js

@@ -99,6 +99,19 @@
   border-top: 2px solid rgba(217, 83, 79, 0.8);
   box-sizing: border-box;
 }
+/* 把本姓人首次出现位置的前面的连线去掉 */
+.orgchart .hierarchy:has(~ :nth-child(1 of .hierarchy.insider))::before {
+  content: none;
+}
+
+/* 把本姓人末次出现位置的后面的连线去掉 */
+.orgchart :nth-last-child(-n + 1 of .hierarchy.insider) ~ .hierarchy::before {
+  content: none;
+}
+
+.orgchart .hierarchy.spouse::before {
+  /* top: 24px; */
+}
 
 .orgchart .hierarchy:first-child::before,
 .orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
@@ -142,6 +155,16 @@
   background-color: rgba(217, 83, 79, 0.8);
 }
 
+.orgchart .hierarchy.spouse > .node + .node::before {
+  content: "";
+  position: absolute;
+  top: 22px; /* 50% width of node - node's padding */
+  left: -7px; /* nodes' gap - node's padding */
+  width: 10px;
+  height: 2px;
+  background-color: rgba(217, 83, 79, 0.8);
+}
+
 .orgchart ul li .node.allowedDrop {
   border-color: rgba(68, 157, 68, 0.9);
 }

dist/js/jquery.orgchart.min.js

@@ -1498,7 +1498,7 @@
               }
             } else {
               // if there are more than two persons in a marriage, every node will be included in a single hierarchy
-              var $wrapper = $('<li class="hierarchy"></li>');
+              var $wrapper = $(`<li class="hierarchy${_this.length > 1 ? ' spouse' : ''}${this.outsider  ? '' : ' insider'}"></li>`);
               $wrapper.append($nodeDiv);
               $hierarchy.append($wrapper);
               if (this.children && this.children.length) {