orgchart 4.0.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.min.js",
   "style": [
@@ -44,11 +44,11 @@
     "jspdf": "^2.5.1"
   },
   "devDependencies": {
-    "browser-sync": "^2.26.7",
+    "browser-sync": "^3.0.2",
     "chai": "^4.2.0",
     "cypress": "^13.2.0",
     "del": "^3.0.0",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.0",
     "gulp-clean-css": "^3.10.0",
     "gulp-csslint": "^1.0.1",
     "gulp-eslint": "^4.0.2",

package/src/css/jquery.orgchart.css

@@ -83,6 +83,7 @@
   list-style: none;
   padding-left: 0;
   margin: 0;
+  justify-content: center;
 }
 
 .orgchart .hierarchy {
@@ -100,6 +101,62 @@
   box-sizing: border-box;
 }
 
+/* 本姓人与上一层父母的连线，借助伪元素::before实现 */
+/* 处理同一层中特殊的首节点 */
+.orgchart .couple:first-child:not(:only-child)::before {
+  width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
+  left: 69px;
+}
+
+/* 处理同一层中特殊的末节点 */
+.orgchart .couple:last-child:not(:only-child)::before {
+  width: calc(50% + 71px);
+  left: 0px;
+}
+
+.orgchart .hierarchy.couple:only-child::before {
+  width: 142px; /* half of node's width + link's width */
+  left: calc(50% - 71px); /* half width of node - half of link width */
+}
+
+/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
+/* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
+.orgchart .hierarchy.spouse:not(.couple)::after {
+  content: "";
+  position: absolute;
+  border-top: 2px solid rgba(217, 83, 79, 0.8);
+  box-sizing: border-box;
+  z-index: 0;
+  top: 24px;
+  width: var(--ft-width);
+  left: var(--ft-left-offset);
+}
+
+/* 一夫一妻情况下的连线 */
+.orgchart .couple {
+  white-space: nowrap;
+}
+
+.orgchart .couple:has(> .nodes) > .node:first-child::after {
+  content: "";
+  position: absolute;
+  top: 24px;
+  left: calc(100% + 1px);
+  width: 2px;
+  height: 33px;
+  background-color: rgba(217, 83, 79, 0.8);
+}
+.orgchart .couple::after {
+  content: "";
+  position: absolute;
+  border-top: 2px solid rgba(217, 83, 79, 0.8);
+  box-sizing: border-box;
+  z-index: 0;
+  top: 24px;
+  width: 20px;
+  left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
+}
+
 .orgchart .hierarchy:first-child::before,
 .orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
   left: calc(50% - 1px);
@@ -111,7 +168,7 @@
   width: calc(50% + 1px);
 }
 
-.orgchart .hierarchy:not(.hidden):only-child::before {
+.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
   width: 2px;
 }
 
@@ -122,17 +179,17 @@
 .orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
 .orgchart .isCollapsedSibling::before,
 .orgchart .isCollapsedSibling .hierarchy::before,
-.orgchart .isChildrenCollapsed > .node:not(:only-child)::after,
+.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
 .orgchart .isCollapsedDescendant::before,
 .orgchart .isCollapsedDescendant > .node::before,
 .orgchart .isCollapsedDescendant > .node::after,
 .orgchart .isAncestorsCollapsed:only-child::before,
-.orgchart .isAncestorsCollapsed > .node::before {
+.orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
   content: none;
 }
 
 /* excluding leaf node */
-.orgchart .node:not(:only-child)::after {
+.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
   content: "";
   position: absolute;
   bottom: -12px; /* -(background square size + node's border width) */
@@ -155,7 +212,7 @@
   background-color: rgba(238, 217, 54, 0.5);
 }
 /* excluding root node */
-.orgchart > ul > li > ul li > .node::before {
+.orgchart > ul > li > ul li > .node:not(.outsider)::before {
   content: "";
   position: absolute;
   top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */ 
@@ -165,7 +222,17 @@
   background-color: rgba(217, 83, 79, 0.8);
 }
 
-.orgchart > ul > li > ul li.isSiblingsCollapsed > .node::before {
+.orgchart > ul > li > ul li > .node.outsider::before {
+  content: "";
+  position: absolute;
+  top: var(--top, -12px);
+  left: calc(50% - 1px);
+  width: 0;
+  height: var(--height, 10px);
+  border-right: 2px dotted rgba(217, 83, 79, 0.8);
+}
+
+.orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
   top: var(--top-cross-point, -12px);
   height: var(--height-cross-point, 10px);
 }
@@ -179,6 +246,8 @@
   padding: 3px;
   border: 2px dashed transparent;
   text-align: center;
+  transition: transform 0.3s, opacity 0.3s;
+  z-index: 1;
 }
 
 .orgchart.l2r .node, .orgchart.r2l .node {
@@ -190,7 +259,7 @@
   background-color: rgba(238, 217, 54, 0.5);
   transition: .5s;
   cursor: default;
-  z-index: 20;
+  z-index: 2;
 }
 
 .orgchart .node.focused {
@@ -420,10 +489,6 @@
   padding: 0.5rem 1rem;
 }
 
-.orgchart .node {
-  transition: transform 0.3s, opacity 0.3s;
-}
-
 .orgchart .slide-down {
   opacity: 0;
   transform: translateY(40px);
@@ -479,8 +544,8 @@
   margin-bottom: 0;
 }
 
-.orgchart .nodes.vertical .node::before,
-.orgchart .nodes.vertical .node::after {
+.orgchart .nodes.vertical .hierarchy .node::before,
+.orgchart .nodes.vertical .hierarchy .node::after {
   content: none;
 }
 
@@ -500,6 +565,10 @@
   border-width: 0 0 2px 2px;
 }
 
+.orgchart .nodes.vertical .hierarchy:only-child::before {
+  width: 11px;
+}
+
 .orgchart .nodes.vertical .hierarchy::before {
   top: 0px;
   height: 26px; /* node top half's height(25px) + half width of line */
@@ -535,15 +604,36 @@
 }
 
 /* styles for compact nodes */
-.orgchart .hierarchy > .node.compact {
+.orgchart .node.compact {
   position: static;
   display: grid;
   width: 140px;
   height: 50px;
-  overflow: hidden;
   background-color: #eee;
 }
 
+.orgchart .node.compact.looseMode {
+  display: grid;
+  width: unset;
+  height: unset;
+}
+
+.orgchart .node.compact > .node {
+  display: none;
+}
+
+.orgchart .node.compact.looseMode > .node {
+  display: inline-block;
+}
+
+.orgchart .node.compact > .node.compact {
+  position: relative;
+}
+
+.orgchart .node.compact > .node.compact.looseMode {
+  display: grid;
+}
+
 .orgchart .node.compact.even,
 .orgchart .node.compact.even:hover {
   background-color: #eee;
@@ -566,43 +656,22 @@
   background-color: #eee;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode {
-  display: grid;
-  width: unset;
-  height: unset;
-  overflow: unset;
-}
-
-.orgchart .hierarchy > .node.compact::before {
+.orgchart .node.compact::before {
   top: var(--top-cross-point, -10px);
 }
 
-.orgchart .node.compact > .node.compact {
-  position: relative;
-  display: grid;
-  width: 140px;
-  height: 50px;
-  overflow: hidden;
-}
-
-.orgchart .node.compact .node.compact.looseMode {
-  width: unset;
-  height: unset;
-  overflow: unset;
-}
-
-.orgchart .hierarchy > .node.compact > .content {
+.orgchart .node.compact > .content {
   position: absolute;
   top: 25px;
   left: 5px;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode > .title {
+.orgchart .node.compact.looseMode > .title {
   margin-top: 5px;
   margin-left: 5px;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode > .content {
+.orgchart .node.compact.looseMode > .content {
   top: 30px;
   left: 10px;
 }
@@ -627,7 +696,7 @@
   margin-bottom: 0;
 }
 
-.orgchart .node.compact .node:not(:only-child)::after {
+.orgchart .node.compact .node:has(+ .nodes)::after {
   content: unset;
 }
 
@@ -635,13 +704,13 @@
   cursor: pointer;
 }
 
-.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
+.orgchart .node.compact > .backToCompactSymbol {
   position: absolute;
   top: 5px;
   left: 5px;
 }
 
-.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
+.orgchart .node.compact.looseMode > .backToCompactSymbol {
   top: 10px;
   left: 10px;
 }
@@ -657,7 +726,7 @@
   left: 3px;
 }
 
-.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
+.orgchart .node.compact > .backToLooseSymbol {
   position: absolute;
   top: 25px;
   right: 5px;

package/src/js/jquery.orgchart.js

@@ -75,7 +75,8 @@
       if (typeof MutationObserver !== 'undefined') {
         this.triggerInitEvent();
       }
-      var $root = $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
+      var $root = Array.isArray(data) ? $chart.append($('<ul class="nodes"></ul>')).find('.nodes')
+        : $chart.append($('<ul class="nodes"><li class="hierarchy"></li></ul>')).find('.hierarchy');
 
         if (data instanceof $) { // ul datasource
           this.buildHierarchy($root, this.buildJsonDS(data.children()), 0, this.options);
@@ -83,7 +84,7 @@
           if (data.relationship) {
             this.buildHierarchy($root, data);
           } else {
-            this.buildHierarchy($root, this.attachRel(data, '00'));
+            this.buildHierarchy($root, Array.isArray(data) ? data : this.attachRel(data, '00'));
           }
         }
 
@@ -567,6 +568,9 @@
     isVisibleNode: function (index, elem) {
       return this.getNodeState($(elem)).visible;
     },
+    isCompactDescendant: function (index, elem) {
+      return $(elem).parent().is('.node.compact');
+    },
     // do some necessary cleanup tasks when hide animation is finished
     hideChildrenEnd: function (event) {
       var $node = event.data.node;
@@ -581,7 +585,7 @@
       $node.closest('.hierarchy').addClass('isChildrenCollapsed');
       var $lowerLevel = $node.siblings('.nodes');
       this.stopAjax($lowerLevel);
-      var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this));
+      var $animatedNodes = $lowerLevel.find('.node').filter(this.isVisibleNode.bind(this)).not(this.isCompactDescendant.bind(this));
       var isVerticalDesc = $lowerLevel.is('.vertical');
       if (!isVerticalDesc) {
         $animatedNodes.closest('.hierarchy').addClass('isCollapsedDescendant');
@@ -746,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,
@@ -937,8 +942,11 @@
     // show the compact node's children in the compact mode
     backToCompactHandler: function (event) {
       $(event.delegateTarget).removeClass('looseMode')
+        .find('.looseMode').removeClass('looseMode')
         .children('.backToCompactSymbol').addClass('hidden').end()
         .children('.backToLooseSymbol').removeClass('hidden');
+      $(event.delegateTarget).children('.backToCompactSymbol').addClass('hidden').end()
+        .children('.backToLooseSymbol').removeClass('hidden');
     },
     // show the compact node's children in the loose mode 
     backToLooseHandler: function (event) {
@@ -1341,7 +1349,10 @@
       }
       // construct the content of node
       var $nodeDiv = $('<div' + (opts.draggable ? ' draggable="true"' : '') + (data[opts.nodeId] ? ' id="' + data[opts.nodeId] + '"' : '') + (data.parentId ? ' data-parent="' + data.parentId + '"' : '') + '>')
-        .addClass('node ' + (data.className || '') +  (level > opts.visibleLevel ? ' slide-up' : ''));
+        .addClass('node ' 
+        + (data.className || '')
+        + (data?.outsider ? 'outsider' : '')
+        +  (level > opts.visibleLevel ? ' slide-up' : ''));
       if (opts.nodeTemplate) {
         $nodeDiv.append(opts.nodeTemplate(data));
       } else {
@@ -1410,51 +1421,38 @@
 
       return $nodeDiv;
     },
-    // recursively build the tree
-    buildHierarchy: function ($appendTo, data) {
+    // Construct the inferior nodes within a hierarchy
+    buildInferiorNodes: function ($hierarchy, $nodeDiv, data, level) {
       var that = this;
       var opts = this.options;
-      var level = 0;
-      var $nodeDiv;
-      if (data.level) {
-        level = data.level;
+      var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
+      var $nodesLayer;
+      if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
+        $nodesLayer = $('<ul class="nodes">');
+        if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
+          $nodesLayer.addClass('hidden');
+        }
+        if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
+          && !$hierarchy.closest('.vertical').length) {
+            $nodesLayer.addClass('vertical');
+        }
+        $hierarchy.append($nodesLayer);
+      } else if (data.compact) {
+        $nodeDiv.addClass('compact');
       } else {
-        level = data.level = $appendTo.parentsUntil('.orgchart', '.nodes').length;
-      }
-      // Construct the node
-      if (Object.keys(data).length > 2) {
-        $nodeDiv = this.createNode(data);
-        $appendTo.append($nodeDiv);
-      }
-      // Construct the "inferior nodes"
-      if (data.children && data.children.length) {
-        var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
-        var $nodesLayer;
-        if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
-          $nodesLayer = $('<ul class="nodes">');
-          if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
-            $nodesLayer.addClass('hidden');
-          }
-          if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
-            && !$appendTo.closest('.vertical').length) {
-              $appendTo.append($nodesLayer.addClass('vertical'));
-          } else {
-            $appendTo.append($nodesLayer);
-          }
-        } else if (data.compact) {
-          $nodeDiv.addClass('compact');
-        } else {
-          $nodesLayer = $('<ul class="nodes' + (isHidden ? ' hidden' : '') + '">');
-          if (Object.keys(data).length === 2) {
-            $appendTo.append($nodesLayer);
-          } else {
-            if (isHidden) {
-              $appendTo.addClass('isChildrenCollapsed');
-            }
-            $appendTo.append($nodesLayer);
-          }
+        $nodesLayer = $('<ul class="nodes' + (isHidden ? ' hidden' : '') + '">');
+        if (isHidden) {
+          $hierarchy.addClass('isChildrenCollapsed');
         }
-        // recurse through children nodes
+        $hierarchy.append($nodesLayer);
+      }
+      // recurse through children nodes
+      if (Array.isArray(data.children[0])) {
+        $.each(data.children, function() {
+          this.level = level + 1;
+        });
+        this.buildHierarchy($nodesLayer, data.children); // 构造子一层的夫妻组合（每个组合可能有多妻多夫情况）
+      } else {
         $.each(data.children, function () {
           this.level = level + 1;
           if (data.compact) {
@@ -1467,6 +1465,69 @@
         });
       }
     },
+    // recursively build the tree
+    buildHierarchy: function ($hierarchy, data) {
+      var that = this;
+      var opts = this.options;
+      var level = 0;
+      var $nodeDiv;
+      if (data.level || data[0]?.level) {
+        level = data.level;
+      } else {
+        level = $hierarchy.parentsUntil('.orgchart', '.nodes').length;
+        if (Array.isArray(data) && Array.isArray(data[0])) {
+          $.each(data, function () {
+            $.each(this, function () {
+              this.level = level;
+            });
+          });
+        } else {
+          data.level = level;
+        }
+      }
+      // Construct the single node in OrgChart or the multiple nodes in family tree
+      if (Array.isArray(data) && Array.isArray(data[0])) { // 处理family tree的情况
+        $.each(data, function () { // 构造一个家庭的hierarchy
+          var _this = this;
+          $.each(this, function (i) { // 构造一个夫/妻节点
+            $nodeDiv = that.createNode(this);
+            // if there are only two persons in a marriage, two single nodes will appear in a hierarchy
+            if (_this.length === 2 && i === 1) {
+              $hierarchy.find(`#${_this[0].id}`).after($nodeDiv);
+              if (this.children && this.children.length && this.children[0].length) {
+                that.buildInferiorNodes($hierarchy.find(`#${_this[0].id}`).parent(), $nodeDiv, this, level);
+              }
+            } 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${_this.length > 1 ? ' spouse' : ''}${_this.length === 2 ? ' couple' : ''}${!!this.outsider === false && _this.length > 2  ? ' insider' : ''}"></li>`);
+
+              //在family tree中，一个多妻/多夫组合里，本姓人只有一个，外姓人可能有多个，我们通过水平的连线来表示他们是一家子
+              if (i === 0) {
+                $wrapper.css({'--ft-width': '50%', '--ft-left-offset': '50%'});
+              } else if (i > 0 && i < _this.length - 1) {
+                $wrapper.css({'--ft-width': '100%', '--ft-left-offset': '0px'});
+              } else {
+                $wrapper.css({'--ft-width': '50%', '--ft-left-offset': '0px'});
+              }
+
+              $wrapper.append($nodeDiv);
+              $hierarchy.append($wrapper);
+              if (this.children && this.children.length && this.children[0].length) {
+                that.buildInferiorNodes($wrapper, $nodeDiv, this, level);
+              }
+            }
+          });
+        });
+      } else {
+        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);
+        }
+      }
+    },
     // build the child nodes of specific node
     buildChildNode: function ($appendTo, data) {
       this.buildHierarchy($appendTo, { 'children': data });

package/demo/multiple-layers.html

@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
-  <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
-  <link rel="stylesheet" href="css/style.css">
-  <style type="text/css">
-    .hidden { display: none; }
-    .orgchart .drill-icon {
-      transition: opacity .5s;
-      opacity: 0;
-      right: -8px;
-      top: -8px;
-      z-index: 2;
-      position: absolute;
-    }
-    .orgchart .drill-icon::before {
-      background-color: rgba(68, 157, 68, 0.5);
-    }
-    .orgchart .drill-icon:hover::before { background-color: #449d44; }
-    .orgchart .node:hover .drill-icon { opacity: 1; }
-  </style>
-</head>
-<body>
-  <div id="chart-container"></div>
-
-  <script type="text/javascript" src="js/jquery.min.js"></script>
-  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
-  <script type="text/javascript" src="js/jquery.mockjax.min.js"></script>
-  <script type="text/javascript">
-    $.mockjax({
-    url: '/orgchart/root-node',
-    responseTime: 1000,
-    contentType: 'application/json',
-    responseText: {
-      'className': 'root-node',
-      'name': 'Lao Lao',
-      'dept': 'president office',
-      'children': [
-        { 'name': 'Bo Miao', 'dept': 'product dept' },
-        { 'className': 'drill-down asso-rd', 'name': 'Su Miao', 'dept': 'R&D dept' },
-        { 'name': 'Hong Miao', 'dept': 'finance dept' },
-        { 'name': 'Chun Miao', 'dept': 'HR dept' }
-      ]
-    }
-  });
-
-  $.mockjax({
-    url: '/orgchart/asso-rd',
-    responseTime: 1000,
-    contentType: 'application/json',
-    responseText: {
-      'className': 'asso-rd drill-up',
-      'name': 'Su Miao',
-      'dept': 'R&D dept',
-      'children': [
-        { 'name': 'Tie Hua', 'dept': 'backend group' },
-        { 'className': 'drill-down asso-frontend', 'name': 'Hei Hei', 'dept': 'frontend group' }
-      ]
-    }
-  });
-
-  $.mockjax({
-    url: '/orgchart/asso-frontend',
-    responseTime: 1000,
-    contentType: 'application/json',
-    responseText:  {
-      'className': 'asso-frontend drill-up',
-      'name': 'Hei Hei',
-      'dept': 'frontend group',
-      'children': [
-        { 'name': 'Pang Pang', 'dept': 'frontend group' },
-        { 'name': 'Xiang Xiang', 'dept': 'frontend group',
-          'children': [
-            { 'name': 'Xiao Xiao', 'dept': 'frontend group' },
-            { 'name': 'Dan Dan', 'dept': 'frontend group' },
-            { 'name': 'Zai Zai', 'dept': 'frontend group' }
-          ]
-        }
-      ]
-    }
-  });
-
-  function initOrgchart(rootClass) {
-    $('#chart-container').orgchart({
-      'chartClass': rootClass,
-      'data' : '/orgchart/' + rootClass,
-      'nodeContent': 'dept',
-      'createNode': function($node, data) {
-        if ($node.is('.drill-down')) {
-          var assoClass = data.className.match(/asso-\w+/)[0];
-          var drillDownIcon = $('<i>', {
-            'class': 'oci oci-arrow-square-down drill-icon',
-            'click': function() {
-              $('#chart-container').find('.orgchart:visible').addClass('hidden');
-              if (!$('#chart-container').find('.orgchart.' + assoClass).length) {
-                initOrgchart(assoClass);
-              } else {
-                $('#chart-container').find('.orgchart.' + assoClass).removeClass('hidden');
-              }
-            }
-          });
-          $node.append(drillDownIcon);
-        } else if ($node.is('.drill-up')) {
-          var assoClass = data.className.match(/asso-\w+/)[0];
-          var drillUpIcon = $('<i>', {
-            'class': 'oci oci-arrow-square-up drill-icon',
-            'click': function() {
-              $('#chart-container').find('.orgchart:visible').addClass('hidden').end()
-                .find('.drill-down.' + assoClass).closest('.orgchart').removeClass('hidden');
-            }
-          });
-          $node.append(drillUpIcon);
-        }
-      }
-    });
-  }
-
-  $(function() {
-
-    initOrgchart('root-node');
-
-  });
-  </script>
-  </body>
-</html>