orgchart 3.2.0 → 3.5.0

package/gulpfile.js

@@ -48,7 +48,8 @@ gulp.task('addAssets', gulp.series('integration-tests', function () {
       'node_modules/jquery/dist/jquery.min.js',
       'node_modules/jquery-mockjax/dist/jquery.mockjax.min.js',
       'node_modules/html2canvas/dist/html2canvas.min.js',
-      'node_modules/jspdf/dist/jspdf.umd.min.js'
+      'node_modules/jspdf/dist/jspdf.umd.min.js',
+      'node_modules/json-digger/dist/json-digger.js'
     ])
     .pipe(gulp.dest(paths.demoJSFolder));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.2.0",
+  "version": "3.5.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": [
@@ -40,6 +40,7 @@
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.2",
     "jquery-mockjax": "^2.6.0",
+    "json-digger": "^2.0.2",
     "jspdf": "^2.5.1"
   },
   "devDependencies": {
@@ -53,7 +54,7 @@
     "gulp-eslint": "^4.0.2",
     "gulp-inject": "^4.3.2",
     "gulp-jest": "^4.0.3",
-    "gulp-mocha": "^6.0.0",
+    "gulp-mocha": "^8.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-uglify": "^3.0.2",

package/src/css/jquery.orgchart.css

@@ -460,17 +460,9 @@
 }
 
 /* styles for vertical nodes */
-.orgchart .hierarchy.hybrid > .node {
-  margin-bottom: 0;
-}
-
-.orgchart .hierarchy.hybrid > .node::after {
-  content: none;
-}
 
 .orgchart .nodes.vertical {
   display: block;
-  margin: 0;
   padding-left: 18px;
 }
 
@@ -491,19 +483,10 @@
   content: none;
 }
 
-.orgchart .nodes.vertical::before {
-  content: '';
-  display: inline-block;
-  position: relative;
-  height: 14px;
-  width: 2px;
-  left: -9px;
-  background-color: rgba(217, 83, 79, 0.8);
-}
 .orgchart .nodes.vertical > .hierarchy:first-child::before {
   box-sizing: border-box;
-  top: -4px;
-  height: 30px;
+  top: -11px;
+  height: 35px;
   width: calc(50% - 2px);
   border-width: 2px 0 0 2px;
 }

package/src/js/jquery.orgchart.js

@@ -373,6 +373,9 @@
       data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
       if (data.children) {
         data.children.forEach(function(item) {
+          if (data.isHybrid || data.isVertical) {
+            item.isVertical = true;
+          }
           that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
         });
       }
@@ -1093,7 +1096,8 @@
       this.$chart.find('.allowedDrop').removeClass('allowedDrop');
     },
     // when user drops the node, it will be removed from original parent node and be added to new parent node
-    dropHandler: function (event) {
+    dropHandler: async function (event) {
+      var that = this;
       var $dropZone = $(event.delegateTarget);
       var $dragged = this.$chart.data('dragged');
 
@@ -1115,33 +1119,51 @@
       if (dropEvent.isDefaultPrevented()) {
         return;
       }
-      // firstly, deal with the hierarchy of drop zone
-      if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
-        $dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
-          .after('<ul class="nodes"></ul>')
-          .siblings('.nodes').append($dragged.find('.horizontalEdge').remove().end().closest('.hierarchy'));
-        if ($dropZone.children('.title').length) {
-          $dropZone.children('.title').prepend('<i class="oci '+  this.$chart.data('options').parentNodeSymbol + ' symbol"></i>');
+      // 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 });
+      if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
+        var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
+        var copy = Object.assign({}, draggedNode);
+        digger.removeNode(draggedNode.id);
+        var dropNode = digger.findNodeById($dropZone.data('nodeData').id);
+        if (dropNode.children) {
+          dropNode.children.push(copy);
+        } else {
+          dropNode.children = [copy];
         }
+        that.init({ 'data': datasource });
       } else {
-        var horizontalEdges = '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>';
-        if (!$dragged.find('.horizontalEdge').length) {
-          $dragged.append(horizontalEdges);
+        // The folowing code snippets are used to process horizontal chart
+        // firstly, deal with the hierarchy of drop zone
+        if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
+          $dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
+            .after('<ul class="nodes"></ul>')
+            .siblings('.nodes').append($dragged.find('.horizontalEdge').remove().end().closest('.hierarchy'));
+          if ($dropZone.children('.title').length) {
+            $dropZone.children('.title').prepend('<i class="oci '+  this.$chart.data('options').parentNodeSymbol + ' symbol"></i>');
+          }
+        } else {
+          var horizontalEdges = '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>';
+          if (!$dragged.find('.horizontalEdge').length) {
+            $dragged.append(horizontalEdges);
+          }
+          $dropZone.siblings('.nodes').append($dragged.closest('.hierarchy'));
+          var $dropSibs = $dragged.closest('.hierarchy').siblings().find('.node:first');
+          if ($dropSibs.length === 1) {
+            $dropSibs.append(horizontalEdges);
+          }
         }
-        $dropZone.siblings('.nodes').append($dragged.closest('.hierarchy'));
-        var $dropSibs = $dragged.closest('.hierarchy').siblings().find('.node:first');
-        if ($dropSibs.length === 1) {
-          $dropSibs.append(horizontalEdges);
+        // secondly, deal with the hierarchy of dragged node
+        if ($dragZone.siblings('.nodes').children('.hierarchy').length === 1) { // if there is only one sibling node left
+          $dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
+            .find('.horizontalEdge').remove();
+        } else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
+          $dragZone.find('.bottomEdge, .symbol').remove()
+            .end().siblings('.nodes').remove();
         }
       }
-      // secondly, deal with the hierarchy of dragged node
-      if ($dragZone.siblings('.nodes').children('.hierarchy').length === 1) { // if there is only one sibling node left
-        $dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
-          .find('.horizontalEdge').remove();
-      } else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
-        $dragZone.find('.bottomEdge, .symbol').remove()
-          .end().siblings('.nodes').remove();
-      }
     },
     //
     touchstartHandler: function (event) {
@@ -1324,11 +1346,16 @@
       $nodeDiv.data('nodeData', nodeData);
       // append 4 direction arrows or expand/collapse buttons
       var flags = data.relationship || '';
-      if (opts.verticalLevel && level >= opts.verticalLevel) {
-        if ((level + 1) > opts.verticalLevel && Number(flags.substr(2,1))) {
+      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.isVertical) {
+        if (Number(flags.substr(2,1))) {
           $nodeDiv.append('<i class="toggleBtn oci"></i>')
             .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
         }
+      } else if (data.isHybrid) {
+        if (Number(flags.substr(2,1))) {
+          $nodeDiv.append('<i class="edge verticalEdge bottomEdge oci"></i>')
+            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+        }
       } else {
         if (Number(flags.substr(0,1))) {
           $nodeDiv.append('<i class="edge verticalEdge topEdge oci"></i>');
@@ -1375,25 +1402,20 @@
       }
       // Construct the node
       if (Object.keys(data).length > 2) {
-        var $nodeDiv = this.createNode(data);
-        if (opts.verticalLevel && level >= opts.verticalLevel) {
-          $appendTo.append($nodeDiv);
-        } else {
-          $appendTo.append($nodeDiv);
-        }
+        $appendTo.append(this.createNode(data));
       }
       // Construct the "inferior nodes"
       if (data.children && data.children.length) {
         var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
-        var isVerticalLayer = opts.verticalLevel && (level + 1) >= opts.verticalLevel;
         var $nodesLayer;
-        if (isVerticalLayer) {
+        if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.isHybrid) {
           $nodesLayer = $('<ul class="nodes">');
-          if (isHidden && level + 1 >= opts.verticalLevel) {
+          if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
             $nodesLayer.addClass('hidden');
           }
-          if (level + 1 === opts.verticalLevel) {
-            $appendTo.addClass('hybrid').append($nodesLayer.addClass('vertical'));
+          if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.isHybrid)
+            && !$appendTo.closest('.vertical').length) {
+              $appendTo.append($nodesLayer.addClass('vertical'));
           } else {
             $appendTo.append($nodesLayer);
           }

package/test/integration/init-tests.js

@@ -72,7 +72,7 @@ describe('orgchart -- integration tests', function () {
     });
 
     it('initialize chart with the given vertical level', function () {
-      var fragment = '<li class="hierarchy hybrid"><div id="n1" class="node"><div class="title">' +
+      var fragment = '<li class="hierarchy"><div id="n1" class="node"><div class="title">' +
         '<i class="oci oci-leader symbol"></i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci">' +
         '</i></div><ul class="nodes vertical"><li class="hierarchy"><div id="n2" data-parent="n1" class="node">' +
         '<div class="title">Bo Miao</div></div></li><li class="hierarchy"><div id="n3" data-parent="n1" class="node">' +
@@ -100,7 +100,7 @@ describe('orgchart -- integration tests', function () {
       };
 
       it('verticalLevel=2 and visibleLevel=1', function () {
-        var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy hybrid">' +
+        var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
           '<div class="node"><div class="title"><i class="oci oci-leader symbol">' +
           '</i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci"></i></div>' +
           '<ul class="nodes hidden vertical"><li class="hierarchy"><div class="node slide-up">' +
@@ -119,7 +119,7 @@ describe('orgchart -- integration tests', function () {
       });
 
       it('verticalLevel=2 and visibleLevel=2', function () {
-        var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy hybrid">' +
+        var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
           '<div class="node"><div class="title"><i class="oci oci-leader symbol"></i>Lao Lao</div>' +
           '<i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes vertical">' +
           '<li class="hierarchy"><div class="node"><div class="title">Bo Miao</div></div></li>' +
@@ -137,7 +137,7 @@ describe('orgchart -- integration tests', function () {
       });
 
       it('verticalLevel=2 and visibleLevel=3', function () {
-        var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy hybrid">' +
+        var fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
           '<div class="node"><div class="title"><i class="oci oci-leader symbol"></i>Lao Lao</div>' +
           '<i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes vertical">' +
           '<li class="hierarchy"><div class="node"><div class="title">Bo Miao</div></div></li>' +