orgchart 3.7.0 → 3.8.1

package/gulpfile.js

@@ -71,7 +71,7 @@ gulp.task('e2e-tests', gulp.series('addAssets', function () {
   });
 }));
 
-gulp.task('test', gulp.series('e2e-tests', 'visual-regression'));
+gulp.task('test', gulp.series('e2e-tests'));
 
 gulp.task('cleanupJS', function() {
   return del([paths.distJSFolder + '/**']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.min.js",
   "style": [
@@ -46,7 +46,7 @@
   "devDependencies": {
     "browser-sync": "^2.26.7",
     "chai": "^4.2.0",
-    "cypress": "^12.3.0",
+    "cypress": "^13.2.0",
     "del": "^3.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^3.10.0",

package/src/css/jquery.orgchart.css

@@ -273,6 +273,7 @@
 
 .orgchart .node .content {
   box-sizing: border-box;
+  width: 130px;
   height: 20px;
   line-height: 20px;
   font-size: 10px;
@@ -533,6 +534,157 @@
   border-width: 2px 0 0 0;
 }
 
+/* styles for compact nodes */
+.orgchart .hierarchy > .node.compact {
+  position: static;
+  display: grid;
+  width: 140px;
+  height: 50px;
+  overflow: hidden;
+  background-color: #eee;
+}
+
+.orgchart .node.compact.even,
+.orgchart .node.compact.even:hover {
+  background-color: #eee;
+}
+
+.orgchart .node.compact.odd,
+.orgchart .node.compact.odd:hover {
+  background-color: #fff;
+}
+
+.orgchart .node.compact.even > .node:hover,
+.orgchart .node.compact.even > .node.focused,
+.orgchart .node.compact.even > .node.selected {
+  background-color: #fff;
+}
+
+.orgchart .node.compact.odd > .node:hover,
+.orgchart .node.compact.odd > .node.focused,
+.orgchart .node.compact.odd > .node.selected {
+  background-color: #eee;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode {
+  display: grid;
+  width: unset;
+  height: unset;
+  overflow: unset;
+}
+
+.orgchart .hierarchy > .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 {
+  position: absolute;
+  top: 25px;
+  left: 5px;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode > .title {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode > .content {
+  top: 30px;
+  left: 10px;
+}
+
+.orgchart .node.compact > .node.compact.looseMode > .title {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+.orgchart .node.compact > .node.compact > .content {
+  position: absolute;
+  top: 23px;
+  left: 3px;
+}
+
+.orgchart .node.compact > .node.compact.looseMode > .content {
+  top: 28px;
+  left: 8px;
+}
+
+.orgchart .node.compact .node {
+  margin-bottom: 0;
+}
+
+.orgchart .node.compact .node:not(:only-child)::after {
+  content: unset;
+}
+
+.orgchart .backToCompactSymbol, .orgchart .backToLooseSymbol {
+  cursor: pointer;
+}
+
+.orgchart .hierarchy > .node.compact > .backToCompactSymbol {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+.orgchart .hierarchy > .node.compact.looseMode > .backToCompactSymbol {
+  top: 10px;
+  left: 10px;
+}
+
+.orgchart .node.compact > .node.compact.looseMode > .backToCompactSymbol {
+  top: 8px;
+  left: 8px;
+}
+
+.orgchart .node.compact > .node.compact > .backToCompactSymbol {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+}
+
+.orgchart .hierarchy > .node.compact > .backToLooseSymbol {
+  position: absolute;
+  top: 25px;
+  right: 5px;
+}
+
+.orgchart .node.compact > .node.compact > .backToLooseSymbol {
+  position: absolute;
+  top: 23px;
+  right: 3px;
+}
+
+.orgchart .node.compact .backToCompactSymbol::before {
+  border-top-color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node.compact .backToLooseSymbol::before {
+  border-bottom-color: rgba(68, 157, 68, 0.6);
+}
+
+.orgchart .node.compact .backToCompactSymbol:hover::before {
+  border-top-color: #449d44;
+}
+
+.orgchart .node.compact .backToLooseSymbol:hover::before {
+  border-bottom-color: #449d44;
+}
+
 /* custom icons for orgchart */
 .oci {
   display: inline-block;
@@ -600,6 +752,43 @@
   border-bottom: unset;
 }
 
+.oci-corner-top-left::before {
+  content: "";
+  display: inline-block;
+  border-top: 20px solid #000;
+  border-right: 20px solid transparent;
+}
+
+.oci-corner-top-right::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  width: 0;
+  height: 0;
+  border-top: 20px solid #000;
+  border-left: 20px solid transparent;
+}
+
+.oci-corner-bottom-right::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  width: 0;
+  height: 0;
+  border-bottom: 20px solid #000;
+  border-left: 20px solid transparent;
+}
+
+.oci-corner-bottom-left::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  width: 0;
+  height: 0;
+  border-bottom: 20px solid #000;
+  border-right: 20px solid transparent;
+}
+
 .oci-plus-square::before {
   content: "﹢";
   display: inline-block;

package/src/js/jquery.orgchart.js

@@ -28,6 +28,8 @@
         'collapseToDown': 'oci-chevron-down',
         'collapseToLeft': 'oci-chevron-left',
         'expandToRight': 'oci-chevron-right',
+        'backToCompact': 'oci-corner-top-left',
+        'backToLoose': 'oci-corner-bottom-right',
         'collapsed': 'oci-plus-square',
         'expanded': 'oci-minus-square',
         'spinner': 'oci-spinner'
@@ -113,6 +115,20 @@
 
       return this;
     },
+    handleCompactNodes: function () {
+      // caculate the compact nodes' level which is used to add different styles
+      this.$chart.find('.node.compact')
+        .each((index, node) => {
+          $(node).addClass($(node).parents('.compact').length % 2 === 0 ? 'even' : 'odd');
+        }); // the following code snippets is used to add direction arrows for the most top compact node, however the styles is not adjusted correctly
+        // .filter((index, node) => !$(node).parent().is('.compact'))
+        // .each((index, node) => {
+        //   $(node).append(`<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
+        //   if (this.getSiblings($(node)).length) {
+        //     $(node).append(`<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
+        //   }
+        // });
+    },
     //
     triggerInitEvent: function () {
       var that = this;
@@ -122,6 +138,7 @@
         for (var i = 0; i < mutations.length; i++) {
           for (var j = 0; j < mutations[i].addedNodes.length; j++) {
             if (mutations[i].addedNodes[j].classList.contains('orgchart')) {
+              that.handleCompactNodes();
               if (that.options.initCompleted && typeof that.options.initCompleted === 'function') {
                 that.options.initCompleted(that.$chart);
               }
@@ -377,14 +394,21 @@
       });
       return subObj;
     },
-    //
+    // process datasource and add necessary information
     attachRel: function (data, flags) {
       var that = this;
       data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
+      if (this.options?.compact?.constructor === Function && this.options.compact(data)) {
+        data.compact = true;
+      }
       if (data.children) {
         data.children.forEach(function(item) {
-          if (data.isHybrid || data.isVertical) {
-            item.isVertical = true;
+          if (data.hybrid || data.vertical) { // identify all the descendant nodes except the root node of hybrid structure
+            item.vertical = true;
+          } else if (data.compact && item.children) { // identify all the compact ancestor nodes
+            item.compact = true;
+          } else if (data.compact && !item.children) { // identify all the compact descendant nodes
+            item.associatedCompact = true;
           }
           that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
         });
@@ -610,13 +634,21 @@
     },
     //
     hideSiblingsEnd: function (event) {
+      var that = this;
       var $node = event.data.node;
       var $nodeContainer = event.data.nodeContainer;
       var direction = event.data.direction;
       var $siblings = direction ? (direction === 'left' ? $nodeContainer.prevAll(':not(.hidden)') : $nodeContainer.nextAll(':not(.hidden)')) : $nodeContainer.siblings();
       event.data.animatedNodes.removeClass('sliding');
       $siblings.find('.node:gt(0)').filter(this.isVisibleNode.bind(this))
-        .removeClass('slide-left slide-right').addClass('slide-up');
+        .removeClass('slide-left slide-right')
+        .addClass(function() {
+          if (that.options.compact) {
+            return '';
+          } else {
+            return 'slide-up';
+          }
+        });
       $siblings.find('.nodes, .vertical').addClass('hidden')
         .end().addClass('hidden');
 
@@ -954,6 +986,19 @@
         }
       }
     },
+    // show the compact node's children in the compact mode
+    backToCompactHandler: function (event) {
+      $(event.delegateTarget).removeClass('looseMode')
+        .children('.backToCompactSymbol').addClass('hidden').end()
+        .children('.backToLooseSymbol').removeClass('hidden');
+    },
+    // show the compact node's children in the loose mode 
+    backToLooseHandler: function (event) {
+      $(event.delegateTarget)
+        .addClass('looseMode')
+        .children('.backToLooseSymbol').addClass('hidden').end()
+        .children('.backToCompactSymbol').removeClass('hidden');
+    },
     //
     expandVNodesEnd: function (event) {
       event.data.vNodes.removeClass('sliding');
@@ -1137,7 +1182,7 @@
       // special process for hybrid chart
       var datasource = this.$chart.data('options').data;
       var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
-      const hybridNode = digger.findOneNode({ 'isHybrid': true });
+      const hybridNode = digger.findOneNode({ 'hybrid': true });
       if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
         var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
         var copy = Object.assign({}, draggedNode);
@@ -1359,18 +1404,29 @@
       var nodeData = $.extend({}, data);
       delete nodeData.children;
       $nodeDiv.data('nodeData', nodeData);
-      // append 4 direction arrows or expand/collapse buttons
+      // append 4 direction arrows or expand/collapse buttons or reset buttons
       var flags = data.relationship || '';
-      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.isVertical) {
+      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.vertical) {
         if (Number(flags.substr(2,1))) {
           $nodeDiv.append(`<i class="toggleBtn ${opts.icons.theme}"></i>`)
             .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
-      } else if (data.isHybrid) {
+      } else if (data.hybrid) {
         if (Number(flags.substr(2,1))) {
           $nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
             .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
+      } else if (data.compact) {
+        $nodeDiv.css('grid-template-columns', `repeat(${Math.floor(Math.sqrt(data.children.length + 1))}, auto)`);
+        if (Number(flags.substr(2,1))) {
+          $nodeDiv.append(`
+            <i class="${opts.icons.theme} ${opts.icons.backToCompact} backToCompactSymbol hidden"></i>
+            <i class="${opts.icons.theme} ${opts.icons.backToLoose} backToLooseSymbol"></i>
+            `)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
+        }
+      } else if (data.associatedCompact) {
+   
       } else {
         if (Number(flags.substr(0,1))) {
           $nodeDiv.append(`<i class="edge verticalEdge topEdge ${opts.icons.theme}"></i>`);
@@ -1390,6 +1446,8 @@
       $nodeDiv.on('click', '.bottomEdge', this.bottomEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.leftEdge, .rightEdge', this.hEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
+      $nodeDiv.on('click', '> .backToCompactSymbol',this.backToCompactHandler.bind(this));
+      $nodeDiv.on('click', '> .backToLooseSymbol',this.backToLooseHandler.bind(this));
 
       if (opts.draggable) {
         this.bindDragDrop($nodeDiv);
@@ -1409,6 +1467,7 @@
       var that = this;
       var opts = this.options;
       var level = 0;
+      var $nodeDiv;
       if (data.level) {
         level = data.level;
       } else {
@@ -1416,23 +1475,26 @@
       }
       // Construct the node
       if (Object.keys(data).length > 2) {
-        $appendTo.append(this.createNode(data));
+        $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.isHybrid) {
+        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.isHybrid)
+          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) {
@@ -1446,10 +1508,14 @@
         }
         // recurse through children nodes
         $.each(data.children, function () {
-          var $nodeCell = $('<li class="hierarchy">');
-          $nodesLayer.append($nodeCell);
           this.level = level + 1;
-          that.buildHierarchy($nodeCell, this);
+          if (data.compact) {
+            that.buildHierarchy($nodeDiv, this);
+          } else {
+            var $nodeCell = $('<li class="hierarchy">');
+            $nodesLayer.append($nodeCell);
+            that.buildHierarchy($nodeCell, this);
+          }
         });
       }
     },