VerticalLevel by data

dabeng · Feb 21, 2023 · 28f797a · 28f797a
1 parent e8093ef
commit 28f797a
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 164 deletions.
diff --git a/demo/drag-drop.html b/demo/drag-drop.html
@@ -16,6 +16,7 @@
 
   <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/json-digger.js"></script>
   <script type="text/javascript">
     $(function() {
 

diff --git a/demo/index.html b/demo/index.html
@@ -144,6 +144,7 @@
     <li><a href="level-offset.html" target="_blank">position node in specific level</a></li>
     <li><a href="nodes-of-different-widths.html" target="_blank">nodes of different widths</a></li>
     <li><a href="drag-drop-hybrid-chart.html" target="_blank">drag&drop in hybrid chart</a></li>
+    <li><a href="isHybrid.html" target="_blank">create hybrid chart with isHybrid</a></li>
   </ol>
   </section>
 </body>

diff --git a/demo/isHybrid.html b/demo/isHybrid.html
@@ -0,0 +1,70 @@
+<!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">
+    #chart-container { height:  620px; }
+    .orgchart { padding-bottom: 20px; }
+  </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">
+    $(function() {
+
+    var datascource = {
+      'id': '1',
+      'name': 'Lao Lao',
+      'title': 'general manager',
+      'children': [
+        { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
+        { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
+          'children': [
+            { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
+            { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
+              'children': [
+                { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
+                { 'id': '7', 'name': 'Dan Dan', 'title': 'UE engineer' ,
+                'children': [
+                  { 'id': '8', 'name': 'Er Dan', 'title': 'engineer' },
+                  { 'id': '9', 'name': 'San Dan', 'title': 'engineer', 'isHybrid': true,
+                    'children': [
+                      { 'id': '10', 'name': 'Si Dan', 'title': 'intern' },
+                      { 'id': '11', 'name': 'Wu Dan', 'title': 'intern' }
+                    ]
+                  }
+                ]}
+              ]
+            }
+          ]
+        },
+        { 'id': '13', 'name': 'Chun Miao', 'title': 'department manager', 'isHybrid': true,
+          'children': [
+            { 'id': '14', 'name': 'Bing Qin', 'title': 'senior engineer' },
+            { 'id': '15', 'name': 'Yue Yue', 'title': 'senior engineer',
+              'children': [
+                { 'id': '16', 'name': 'Er Yue', 'title': 'engineer' },
+                { 'id': '17', 'name': 'San Yue', 'title': 'UE engineer' }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+
+    $('#chart-container').orgchart({
+      'data' : datascource,
+      'nodeContent': 'title'
+    });
+
+  });
+  </script>
+  </body>
+</html>
diff --git a/dist/css/jquery.orgchart.css b/dist/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;
 }

diff --git a/dist/css/jquery.orgchart.min.css b/dist/css/jquery.orgchart.min.css
diff --git a/dist/js/jquery.orgchart.js b/dist/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,7 @@
       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');
@@ -1117,52 +1120,50 @@
         return;
       }
       // special process for hybrid chart
-      if (this.$chart.data('options').verticalLevel > 1) {
-        var datasource = this.$chart.data('options').data;
-        var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
-        digger.findNodeById($dragged.data('nodeData').id).then(function(draggedNode) {
-          var copy = Object.assign({}, draggedNode)
-          digger.removeNode(draggedNode.id).then(function() {
-            digger.findNodeById($dropZone.data('nodeData').id).then(function(dropNode) {
-              if (dropNode.children) {
-                dropNode.children.push(copy);
-              } else {
-                dropNode.children = [copy];
-              }
-              that.init({ 'data': datasource });
-            });
-          });
-        });
-      } else {
-      // 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>');
+      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) {
@@ -1345,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>');
@@ -1396,25 +1402,19 @@
       }
       // 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.append($nodesLayer.addClass('vertical'));
           } else {
             $appendTo.append($nodesLayer);
           }

diff --git a/dist/js/jquery.orgchart.min.js b/dist/js/jquery.orgchart.min.js
diff --git a/dist/js/jquery.orgchart.min.js.map b/dist/js/jquery.orgchart.min.js.map
diff --git a/gulpfile.js b/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));
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.2",
     "jquery-mockjax": "^2.6.0",
-    "json-digger": "^1.3.0",
+    "json-digger": "^2.0.2",
     "jspdf": "^2.5.1"
   },
   "devDependencies": {

diff --git a/src/css/jquery.orgchart.css b/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;
 }