npm - orgchart - Versions diffs - 5.0.0 → 7.0.0 - Mend

orgchart 5.0.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/.github/workflows/publish.yml +35 -0
package/README.md +214 -123
package/README.zh-cn.md +232 -100
package/README.zh-tw.md +232 -100
package/bower.json +6 -9
package/demo/10000-nodes.html +139 -0
package/demo/ajax-datasource.html +46 -45
package/demo/bottom2top.html +12 -9
package/demo/center-on-selected-node.html +21 -17
package/demo/color-coded.html +12 -9
package/demo/css/style.css +28 -0
package/demo/custom-icons.html +12 -9
package/demo/custom-template.html +12 -9
package/demo/data-prop-compact.html +11 -8
package/demo/data-prop-hybrid.html +79 -50
package/demo/default-collapsed.html +12 -9
package/demo/drag-drop-hybrid-chart.html +17 -14
package/demo/drag-drop.html +21 -16
package/demo/edit-chart.html +144 -94
package/demo/edit-hybrid-chart.html +177 -135
package/demo/expand-to-given-depth.html +30 -22
package/demo/export-chart-pdf.html +12 -9
package/demo/export-chart-with-pictures.html +19 -12
package/demo/export-chart.html +12 -9
package/demo/family-tree.html +14 -11
package/demo/familytree-custom-properties.html +108 -0
package/demo/filter-node.html +104 -57
package/demo/get-hierarchy.html +17 -12
package/demo/get-related-nodes.html +27 -17
package/demo/index.html +10 -3
package/demo/integrate-map.html +32 -27
package/demo/left2right.html +12 -9
package/demo/level-offset.html +16 -15
package/demo/link-node.html +12 -9
package/demo/local-datasource.html +11 -8
package/demo/minimap.html +224 -0
package/demo/nodes-of-different-widths.html +11 -8
package/demo/ondemand-loading-data.html +166 -112
package/demo/option-createNode.html +28 -17
package/demo/options-compact-drag.html +82 -0
package/demo/options-export-navigation.html +76 -0
package/demo/options-horizontal-template.html +80 -0
package/demo/options-hybrid-navigation.html +71 -0
package/demo/pan-zoom.html +20 -11
package/demo/reload-data.html +17 -14
package/demo/report-path.html +59 -29
package/demo/responsive-design.html +14 -11
package/demo/right2left.html +12 -9
package/demo/toggle-sibs-resp.html +12 -9
package/demo/ul-datasource.html +11 -8
package/demo/vertical-level.html +12 -9
package/dist/css/{jquery.orgchart.css → orgchart.css} +154 -80
package/dist/css/orgchart.min.css +1 -0
package/dist/js/orgchart.js +4474 -0
package/dist/js/orgchart.min.js +2 -0
package/dist/js/orgchart.min.js.map +1 -0
package/gulpfile.js +42 -27
package/package.json +33 -32
package/src/css/{jquery.orgchart.css → orgchart.css} +154 -80
package/src/js/orgchart.js +4474 -0
package/test/compatibility/README.md +123 -0
package/test/compatibility/browser.tests.js +1279 -0
package/test/compatibility/options.tests.js +628 -0
package/test/cypress/e2e/demo-interactions.cy.js +91 -0
package/test/cypress/e2e/demo-rendering.cy.js +161 -0
package/test/cypress/e2e/drag-drop-hybrid-chart.cy.js +23 -0
package/test/cypress/e2e/edit-chart.cy.js +20 -0
package/test/cypress/e2e/level-offset.cy.js +21 -0
package/test/cypress/e2e/local-datasource.cy.js +16 -16
package/test/cypress/e2e/minimap.cy.js +66 -0
package/test/cypress/e2e/ondemand-loading-data.cy.js +34 -10
package/test/cypress/e2e/pan-zoom.cy.js +165 -0
package/test/cypress/e2e/report-path.cy.js +20 -0
package/test/cypress/e2e/toggle-sibs-resp.cy.js +4 -4
package/test/cypress/e2e/vertical-vevel.cy.js +7 -5
package/test/e2e/local-datasource/test.js +1 -1
package/test/integration/init-tests.js +192 -99
package/test/integration/tests.js +1043 -57
package/test/unit/lifecycle-builders-export.tests.js +1487 -0
package/test/unit/minimap.tests.js +210 -0
package/test/unit/tests.js +2372 -253
package/dist/css/jquery.orgchart.min.css +0 -1
package/dist/js/jquery.orgchart.js +0 -1741
package/dist/js/jquery.orgchart.min.js +0 -5
package/dist/js/jquery.orgchart.min.js.map +0 -1
package/src/js/jquery.orgchart.js +0 -1741

package/demo/ondemand-loading-data.html CHANGED Viewed

@@ -2,150 +2,204 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
+  <title>OrgChart On-Demand Loading Demo</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/orgchart.css">
   <link rel="stylesheet" href="css/style.css">
+  <style>
+    .request-control { position: absolute; width: 16px; height: 16px; padding: 0; border: 0; background: #fff; color: #1677ff; cursor: pointer; }
+    .request-control:disabled { cursor: wait; opacity: 0.5; }
+    .request-parent { top: -2px; left: calc(50% - 8px); background: transparent; }
+    .request-siblings { top: calc(50% - 8px); background: transparent; }
+    .request-siblings-left { left: -2px; }
+    .request-siblings-right { right: -2px; }
+    .request-children { bottom: -2px; left: calc(50% - 8px); background: transparent; }
+    .request-control > .oci { pointer-events: none; }
+    .request-control > .oci::before { border-color: currentColor; }
+  </style>
 </head>
 <body>
+  <section class="demo-notes">
+    <h1>On-Demand Loading Demo</h1>
+    <p>This demo loads ancestors and descendants only when users expand the corresponding branches.</p>
+  </section>
   <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" src="js/orgchart.js"></script>
   <script type="text/javascript">
-    $(function() {
+    document.addEventListener('DOMContentLoaded', () => {
-    $.mockjax({
-      url: '/orgchart/ancestors/n1',
-      contentType: 'application/json',
-      responseTime: 1000,
-      responseText: {
+    const responseMap = {
+      '/orgchart/ancestors/n1': {
         'id': 'n0',
         'name': 'Lao Lao',
-        'title': 'general manager', 'relationship': '001',
+        'title': 'general manager',
         'children': [
-        { 'id': 'n10','name': 'Bo Miao', 'title': 'department engineer', 'relationship': '110' },
-        { 'id': 'n11', 'name': 'Yu Jie', 'title': 'department engineer', 'relationship': '110' },
-        { 'id': 'n12', 'name': 'Yu Li', 'title': 'department engineer', 'relationship': '110' },
-        { 'id': 'n13', 'name': 'Hong Miao', 'title': 'department engineer', 'relationship': '110' },
-        { 'id': 'n14', 'name': 'Yu Wei', 'title': 'department engineer', 'relationship': '110' },
-        { 'id': 'n15', 'name': 'Chun Miao', 'title': 'department engineer', 'relationship': '110' },
-        { 'id': 'n16', 'name': 'Yu Tie', 'title': 'department engineer', 'relationship': '110' }
+        { 'id': 'n10','name': 'Bo Miao', 'title': 'department engineer' },
+        { 'id': 'n11', 'name': 'Yu Jie', 'title': 'department engineer' },
+        { 'id': 'n12', 'name': 'Yu Li', 'title': 'department engineer' },
+        { 'id': 'n13', 'name': 'Hong Miao', 'title': 'department engineer' },
+        { 'id': 'n14', 'name': 'Yu Wei', 'title': 'department engineer' },
+        { 'id': 'n15', 'name': 'Chun Miao', 'title': 'department engineer' },
+        { 'id': 'n16', 'name': 'Yu Tie', 'title': 'department engineer' }
         ]
-      }
-    });
-    $.mockjax({
-      url: '/orgchart/descendants/n2',
-      contentType: 'application/json',
-      responseTime: 1000,
-      responseText: [
-        { 'id': 'n4', 'name': 'Xiang Xiang', 'title': 'engineer', 'relationship': '110' }
-      ]
-    });
-    $.mockjax({
-      url: '/orgchart/descendants/n3',
-      contentType: 'application/json',
-      responseTime: 1000,
-      responseText: [
-        { 'id': 'n5', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': '111',
+      },
+      '/orgchart/descendants/n2': [
+        { 'id': 'n4', 'name': 'Xiang Xiang', 'title': 'engineer' }
+      ],
+      '/orgchart/descendants/n3': [
+        { 'id': 'n5', 'name': 'Pang Pang', 'title': 'engineer',
           'children': [
-            { 'id': 'n6', 'name': 'Er Dan', 'title': 'UE engineer', 'relationship': '110'}
+            { 'id': 'n6', 'name': 'Er Dan', 'title': 'UE engineer' }
           ]
         },
-        { 'id': 'n7', 'name': 'Dan Dan', 'title': 'engineer', 'relationship': '110' }
+        { 'id': 'n7', 'name': 'Dan Dan', 'title': 'engineer' }
       ]
+    };
+    const requestJson = (url) => new Promise((resolve) => {
+      window.setTimeout(() => resolve(JSON.parse(JSON.stringify(responseMap[url]))), 1000);
     });
+    const completedRequests = new Set();
+    const pendingRequests = new Set();
+    const removingRequestButtons = new WeakSet();
+    const requestUrl = (node, relation) => '/orgchart/'
+      + (relation === 'children' ? 'descendants/' : 'ancestors/') + node.id;
+    const removeRequestButtons = (node) => {
+      if (removingRequestButtons.has(node)) {
+        return;
+      }
+      removingRequestButtons.add(node);
+      try {
+        node.querySelectorAll(':scope > .request-control').forEach((button) => button.remove());
+      } finally {
+        removingRequestButtons.delete(node);
+      }
+    };
+    const renderRequestButtons = (node) => {
+      [
+        { relation: 'parent', icon: 'oci-chevron-up', label: 'Load ancestors' },
+        { relation: 'siblings', side: 'left', icon: 'oci-chevron-left', label: 'Load siblings' },
+        { relation: 'siblings', side: 'right', icon: 'oci-chevron-right', label: 'Load siblings' },
+        { relation: 'children', icon: 'oci-chevron-down', label: 'Load children' }
+      ].forEach(({ relation, side, icon, label }) => {
+        const url = requestUrl(node, relation);
+        const controlClass = 'request-' + relation + (side ? '-' + side : '');
+        const existingButton = node.querySelector(':scope > .' + controlClass);
+        if (!Object.prototype.hasOwnProperty.call(responseMap, url)
+          || completedRequests.has(url) || oc.getNodeState(node, relation).exist) {
+          if (existingButton) {
+            removeRequestButtons(node);
+          }
+          return;
+        }
+        if (existingButton) {
+          removingRequestButtons.add(node);
+          try {
+            existingButton.disabled = pendingRequests.has(url);
+          } finally {
+            removingRequestButtons.delete(node);
+          }
+          return;
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'request-control request-' + relation + (side ? ' ' + controlClass : '');
+        button.dataset.relation = relation;
+        button.title = label;
+        button.setAttribute('aria-label', label);
+        button.disabled = pendingRequests.has(url);
+        button.innerHTML = '<i class="oci ' + icon + '"></i>';
+        node.appendChild(button);
+      });
+    };
-    var datascource = {
+    const datasource = {
       'id': 'n1',
       'name': 'Su Miao',
       'title': 'department manager',
-      'relationship': '111',
       'children': [
-        { 'id': 'n2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '111' },
-        { 'id': 'n3','name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '111' }
+        { 'id': 'n2','name': 'Tie Hua', 'title': 'senior engineer' },
+        { 'id': 'n3','name': 'Hei Hei', 'title': 'senior engineer' }
       ]
     };
-    var ajaxURLs = {
-      'children': '/orgchart/children/',
-      'parent': '/orgchart/parent/',
-      'siblings': function(nodeData) {
-        return '/orgchart/siblings/' + nodeData.id;
-      },
-      'families': function(nodeData) {
-        return '/orgchart/families/' + nodeData.id;
-      }
-    };
-    var oc = $('#chart-container').orgchart({
-      'data' : datascource,
+    const oc = new OrgChart({
+      chartContainer: '#chart-container',
+      'data' : datasource,
       'nodeContent': 'title',
-      'nodeId': 'id'
-    });
-    oc.$chart.on('click', '.topEdge, .horizontalEdge', function(e) {
-      var $chart = oc.$chart;
-      var $topEdge = $(e.target);
-      var $node = $topEdge.parent();
-      var parentState = oc.getNodeState($node, 'parent');
-      if (!parentState.exist) {
-        if (!($chart.data('inAjax') === true)) {
-          $topEdge.addClass('hidden');
-          $node.append(`<i class="oci oci-spinner spinner"></i>`)
-          $node.children().not('.spinner').css('opacity', 0.2);
-          $chart.data('inAjax', true);
-          $.ajax({
-            'url': '/orgchart/ancestors/' + $node.data('nodeData').id,
-            'dataType': 'json'
-          })
-          .done(function(data, textStatus, jqXHR) {
-            oc.addAncestors(data, 'n0');
-          })
-          .always(function() {
-            $topEdge.removeClass('hidden');
-            $node.children('.spinner').remove();
-            $node.children().removeAttr('style');
-            $chart.data('inAjax', false);
-          });
-        }
+      'nodeId': 'id',
+      createNode: (node) => {
+        node.addEventListener('mouseenter', () => renderRequestButtons(node));
+        node.addEventListener('mouseleave', () => {
+          if (!node.contains(document.activeElement)) {
+            removeRequestButtons(node);
+          }
+        });
+        node.addEventListener('focusin', (event) => {
+          if (event.target === node) {
+            renderRequestButtons(node);
+          }
+        });
+        node.addEventListener('focusout', (event) => {
+          if (!node.contains(event.relatedTarget) && !node.matches(':hover')) {
+            removeRequestButtons(node);
+          }
+        });
       }
     });
-    oc.$chart.on('click', '.bottomEdge', function(e) {
-      var $chart = oc.$chart;
-      var $bottomEdge = $(e.target);
-      var $node = $bottomEdge.parent();
-      var childrenState = oc.getNodeState($node, 'children');
-      if (!childrenState.exist) {
-        if (!($chart.data('inAjax') === true)) {
-          $bottomEdge.addClass('hidden');
-          $node.append(`<i class="oci oci-spinner spinner"></i>`)
-          $node.children().not('.spinner').css('opacity', 0.2);
-          $chart.data('inAjax', true);
-          $.ajax({
-            'url': '/orgchart/descendants/' + $node.data('nodeData').id,
-            'dataType': 'json'
-          })
-          .done(function(data, textStatus, jqXHR) {
-            oc.addDescendants(data, $node);
-          })
-          .always(function() {
-            $bottomEdge.removeClass('hidden');
-            $node.children('.spinner').remove();
-            $node.children().removeAttr('style');
-            $chart.data('inAjax', false);
-          });
+    const chartElement = document.getElementById('chart-container');
+    chartElement.addEventListener('click', async (event) => {
+      const button = event.target.closest('.request-control');
+      if (!button || !chartElement.contains(button)) {
+        return;
+      }
+      const node = button.parentElement;
+      const relation = button.dataset.relation;
+      const url = requestUrl(node, relation);
+      if (pendingRequests.has(url) || completedRequests.has(url)) {
+        return;
+      }
+      pendingRequests.add(url);
+      renderRequestButtons(node);
+      node.setAttribute('aria-busy', 'true');
+      const spinner = document.createElement('i');
+      spinner.className = 'oci oci-spinner spinner';
+      node.appendChild(spinner);
+      let failed = false;
+      try {
+        const data = await requestJson(url);
+        if (!oc.chart.contains(node)) {
+          return;
+        }
+        if (relation === 'children') {
+          if (data.length) {
+            oc.addDescendants(data, node);
+          }
+        } else if (data) {
+          oc.addAncestors(data, data.id);
+          oc.refreshNodeControls(document.getElementById(data.id));
+        }
+        completedRequests.add(url);
+      } catch (error) {
+        failed = true;
+      } finally {
+        pendingRequests.delete(url);
+        spinner.remove();
+        node.removeAttribute('aria-busy');
+        removeRequestButtons(node);
+        if (node.matches(':hover') || node.contains(document.activeElement)) {
+          renderRequestButtons(node);
+          if (failed) {
+            node.querySelectorAll(':scope > .request-control').forEach((retryButton) => {
+              retryButton.title = 'Request failed. Click to retry.';
+            });
+          }
         }
       }
     });
-  });
+    });
   </script>
   </body>
 </html>

package/demo/option-createNode.html CHANGED Viewed

@@ -2,9 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Organization Chart Plugin</title>
+  <title>OrgChart createNode Callback Demo</title>
   <link rel="icon" href="img/logo.png">
-  <link rel="stylesheet" href="css/jquery.orgchart.css">
+  <link rel="stylesheet" href="css/orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
     .orgchart .second-menu-icon {
@@ -38,14 +38,16 @@
   </style>
 </head>
 <body>
+  <section class="demo-notes">
+    <h1>createNode Callback Demo</h1>
+    <p>This demo uses the createNode callback to append custom secondary UI after each node is created.</p>
+  </section>
   <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/orgchart.js"></script>
   <script type="text/javascript">
-    $(function() {
+    document.addEventListener('DOMContentLoaded', () => {
-    var datascource = {
+    const datasource = {
       'id': '1',
       'name': 'Lao Lao',
       'title': 'general manager',
@@ -71,20 +73,29 @@
       ]
     };
-    $('#chart-container').orgchart({
-      'data' : datascource,
+    const oc = new OrgChart({
+      chartContainer: '#chart-container',
+      'data' : datasource,
       'visibleLevel': 2,
       'nodeContent': 'title',
       'nodeID': 'id',
-      'createNode': function($node, data) {
-        var secondMenuIcon = $('<i>', {
-          'class': 'oci oci-info-circle second-menu-icon',
-          click: function() {
-            $(this).siblings('.second-menu').toggle();
-          }
+      'createNode': function(node, data) {
+        const secondMenuIcon = document.createElement('i');
+        const secondMenu = document.createElement('div');
+        const avatar = document.createElement('img');
+        secondMenuIcon.className = 'oci oci-info-circle second-menu-icon';
+        secondMenuIcon.addEventListener('click', () => {
+          secondMenu.style.display = secondMenu.style.display === 'block' ? 'none' : 'block';
         });
-        var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
-        $node.append(secondMenuIcon).append(secondMenu);
+        secondMenu.className = 'second-menu';
+        avatar.className = 'avatar';
+        avatar.src = 'img/avatar/' + data.id + '.jpg';
+        secondMenu.appendChild(avatar);
+        node.appendChild(secondMenuIcon);
+        node.appendChild(secondMenu);
       }
     });

package/demo/options-compact-drag.html ADDED Viewed

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OrgChart Compact Drag Options Demo</title>
+  <link rel="icon" href="img/logo.png">
+  <link rel="stylesheet" href="css/orgchart.css">
+  <link rel="stylesheet" href="css/style.css">
+  <style type="text/css">
+    #chart-container { height: min(620px, calc(100dvh - 110px)); min-height: 320px; }
+    .orgchart { background: #fff; }
+    .demo-notes a { color: #176b55; }
+    .orgchart .node[data-kind="team"] > .title { background-color: #176b55; }
+    .orgchart .node[data-kind="team"] > .content { border-color: #176b55; }
+  </style>
+</head>
+<body>
+  <section class="demo-notes">
+    <h1>Compact Team Assignment</h1>
+    <p>Mixed options: compact layout, drag and drop criteria, pan and zoom &middot; <output id="assignment-status" aria-live="polite">Assignments unchanged</output> &middot; <a href="index.html">All demos</a></p>
+  </section>
+  <div id="chart-container"></div>
+  <script type="text/javascript" src="js/orgchart.js"></script>
+  <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+      const datasource = {
+        id: 'studio', name: 'Lao Lao', title: 'Studio director', kind: 'director',
+        children: [
+          { id: 'engineering-team', name: 'Engineering', title: 'Delivery team', kind: 'team', children: [
+            { id: 'member-tie', name: 'Tie Hua', title: 'Services engineer', kind: 'member' },
+            { id: 'member-hei', name: 'Hei Hei', title: 'Platform engineer', kind: 'member' },
+            { id: 'member-pang', name: 'Pang Pang', title: 'API engineer', kind: 'member' },
+            { id: 'member-xiang', name: 'Xiang Xiang', title: 'UI engineer', kind: 'member' },
+            { id: 'member-dan', name: 'Dan Dan', title: 'Quality engineer', kind: 'member' },
+            { id: 'member-yu', name: 'Yu Wei', title: 'Data engineer', kind: 'member' },
+            { id: 'member-chun', name: 'Chun Miao', title: 'Release engineer', kind: 'member' },
+            { id: 'member-hong', name: 'Hong Miao', title: 'Security engineer', kind: 'member' }
+          ] },
+          { id: 'product-team', name: 'Product', title: 'Experience team', kind: 'team', children: [
+            { id: 'member-bo', name: 'Bo Miao', title: 'Product owner', kind: 'member' },
+            { id: 'member-jie', name: 'Yu Jie', title: 'UX researcher', kind: 'member' },
+            { id: 'member-li', name: 'Yu Li', title: 'Product designer', kind: 'member' },
+            { id: 'member-miao', name: 'Su Miao', title: 'Content designer', kind: 'member' }
+          ] }
+        ]
+      };
+      const oc = new OrgChart({
+        chartContainer: '#chart-container',
+        data: datasource,
+        nodeContent: 'title',
+        compact: true,
+        draggable: true,
+        pan: true,
+        zoom: true,
+        zoomoutLimit: 0.5,
+        zoominLimit: 2,
+        createNode: (node, data) => {
+          node.dataset.kind = data.kind;
+          node.title = data.name + ' - ' + data.title;
+        },
+        dropCriteria: (draggedNode, dragZone, dropZone) => {
+          return draggedNode.dataset.kind === 'member'
+            && dropZone.dataset.kind === 'team'
+            && dragZone !== dropZone;
+        }
+      });
+      oc.chartContainer.addEventListener('nodedrop.orgchart', (event) => {
+        const { draggedNode, dropZone } = event.detail;
+        document.querySelector('#assignment-status').textContent =
+          draggedNode.querySelector('.title').textContent + ' / ' + dropZone.querySelector('.title').textContent;
+      }, true);
+      oc.chartContainer.addEventListener('touchmove', (event) => {
+        event.preventDefault();
+      }, { passive: false });
+    });
+  </script>
+</body>
+</html>

package/demo/options-export-navigation.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OrgChart Export Navigation Options Demo</title>
+  <link rel="icon" href="img/logo.png">
+  <link rel="stylesheet" href="css/orgchart.css">
+  <link rel="stylesheet" href="css/style.css">
+  <style type="text/css">
+    #chart-container { height: min(620px, calc(100dvh - 110px)); min-height: 320px; }
+    .orgchart.delivery-chart { background: #fff; }
+    .demo-notes a { color: #176b55; }
+    .delivery-chart .node[data-region="west"] .title { background-color: #176b55; }
+    .delivery-chart .node[data-region="west"] .content { border-color: #176b55; }
+    .delivery-chart .node[data-region="east"] .title { background-color: #a53f60; }
+    .delivery-chart .node[data-region="east"] .content { border-color: #a53f60; }
+    .oc-export-btn { right: 1rem; bottom: 1rem; top: auto; }
+  </style>
+</head>
+<body>
+  <section class="demo-notes">
+    <h1>Regional Delivery</h1>
+    <p>Mixed options: bottom-to-top layout, custom fields, styling, pan, zoom and PDF export &middot; <a href="index.html">All demos</a></p>
+  </section>
+  <div id="chart-container"></div>
+  <script type="text/javascript" src="js/html2canvas.min.js"></script>
+  <script type="text/javascript" src="js/jspdf.umd.min.js"></script>
+  <script type="text/javascript" src="js/orgchart.js"></script>
+  <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+      const datasource = {
+        key: 'delivery-director', employee: 'Lao Lao', role: 'Delivery director',
+        children: [
+          { key: 'west-manager', employee: 'Bo Miao', role: 'West manager', region: 'west', children: [
+            { key: 'west-planning', employee: 'Tie Hua', role: 'Planning lead', region: 'west' },
+            { key: 'west-logistics', employee: 'Yu Jie', role: 'Logistics lead', region: 'west' }
+          ] },
+          { key: 'east-manager', employee: 'Su Miao', role: 'East manager', region: 'east', children: [
+            { key: 'east-planning', employee: 'Hei Hei', role: 'Planning lead', region: 'east' },
+            { key: 'east-logistics', employee: 'Yu Li', role: 'Logistics lead', region: 'east' }
+          ] }
+        ]
+      };
+      const oc = new OrgChart({
+        chartContainer: '#chart-container',
+        data: datasource,
+        chartClass: 'delivery-chart',
+        direction: 'b2t',
+        nodeId: 'key',
+        nodeTitle: 'employee',
+        nodeContent: 'role',
+        pan: true,
+        zoom: true,
+        zoomoutLimit: 0.5,
+        zoominLimit: 2,
+        exportButton: true,
+        exportButtonName: 'Export PDF',
+        exportFilename: 'Regional-Delivery',
+        exportFileextension: 'pdf',
+        exportScale: 2,
+        createNode: (node, data) => {
+          if (data.region) {
+            node.dataset.region = data.region;
+          }
+        }
+      });
+      oc.chartContainer.addEventListener('touchmove', (event) => {
+        event.preventDefault();
+      }, { passive: false });
+    });
+  </script>
+</body>
+</html>

package/demo/options-horizontal-template.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>OrgChart Horizontal Template Options Demo</title>
+  <link rel="icon" href="img/logo.png">
+  <link rel="stylesheet" href="css/fontawesome.min.css">
+  <link rel="stylesheet" href="css/orgchart.css">
+  <link rel="stylesheet" href="css/style.css">
+  <style type="text/css">
+    #chart-container { height: min(620px, calc(100dvh - 110px)); min-height: 320px; }
+    .orgchart { background: #fff; }
+    .demo-notes a { color: #176b55; }
+    .orgchart .node .avatar { float: left; width: 18px; height: 18px; margin: 1px 3px; object-fit: cover; border-radius: 3px; }
+    .orgchart .node .edge::before { color: #176b55; }
+  </style>
+</head>
+<body>
+  <section class="demo-notes">
+    <h1>Horizontal People Directory</h1>
+    <p>Mixed options: horizontal layout, custom fields, template, icons and sibling toggles &middot; <a href="index.html">All demos</a></p>
+  </section>
+  <div id="chart-container"></div>
+  <script type="text/javascript" src="js/orgchart.js"></script>
+  <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+      const datasource = {
+        key: 'design-director', label: 'Lao Lao', role: 'Design director', office: 'Shanghai', avatar: '1.jpg',
+        children: [
+          { key: 'research-lead', label: 'Bo Miao', role: 'Research lead', office: 'Beijing', avatar: '2.jpg', children: [
+            { key: 'researcher', label: 'Yu Jie', role: 'UX researcher', office: 'Beijing', avatar: '3.jpg' }
+          ] },
+          { key: 'experience-lead', label: 'Su Miao', role: 'Experience lead', office: 'Shanghai', avatar: '4.jpg', children: [
+            { key: 'designer', label: 'Tie Hua', role: 'Product designer', office: 'Shanghai', avatar: '5.jpg' },
+            { key: 'content-designer', label: 'Hei Hei', role: 'Content designer', office: 'Shanghai', avatar: '6.jpg' }
+          ] },
+          { key: 'systems-lead', label: 'Hong Miao', role: 'Design systems lead', office: 'Shenzhen', avatar: '7.jpg' }
+        ]
+      };
+      const oc = new OrgChart({
+        chartContainer: '#chart-container',
+        data: datasource,
+        direction: 'l2r',
+        nodeId: 'key',
+        nodeTitle: 'label',
+        nodeContent: 'role',
+        toggleSiblingsResp: true,
+        pan: true,
+        zoom: true,
+        zoomoutLimit: 0.5,
+        zoominLimit: 2,
+        nodeTemplate: (data) => {
+          return `<div class="title"><img class="avatar" src="img/avatar/${data.avatar}" alt="">${data.label}</div>
+            <div class="content">${data.role}</div>`;
+        },
+        createNode: (node, data) => {
+          node.dataset.office = data.office;
+          node.title = data.label + ' - ' + data.role + ' - ' + data.office;
+        },
+        icons: {
+          theme: 'fa-solid fa-sm',
+          parentNode: 'fa-user-tie',
+          expandToUp: 'fa-angles-up',
+          collapseToDown: 'fa-angles-down',
+          collapseToLeft: 'fa-angles-left',
+          expandToRight: 'fa-angles-right',
+          collapsed: 'fa-circle-plus',
+          expanded: 'fa-circle-minus'
+        }
+      });
+      oc.chartContainer.addEventListener('touchmove', (event) => {
+        event.preventDefault();
+      }, { passive: false });
+    });
+  </script>
+</body>
+</html>