orgchart 6.0.0 → 7.0.0

package/README.zh-tw.md

@@ -1,4 +1,4 @@
-![OrgChart](http://dabeng.github.io/OrgChart/img/heading.svg)
+![OrgChart](http://dabeng.github.io/OrgChart/img/cover.png)
 
 # Read this in other languages: [简体中文](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md), [English](https://github.com/dabeng/OrgChart/blob/master/README.md)
 
@@ -52,6 +52,10 @@ $ npm install orgchart
 ## [基于嵌套table的實例集合](https://codepen.io/collection/AWxGVb/) (過時)
 
 ### 天馬行空的需求
+- [我想在500毫秒內渲染10,000個節點](https://dabeng.github.io/OrgChart/10000-nodes.html)
+
+![10000-nodes](http://dabeng.github.io/OrgChart/img/10000-nodes.png)
+
 - [ul數據源](https://dabeng.github.io/OrgChart/ul-datasource.html)(感謝 [Tobyee的好點子:blush:](https://github.com/dabeng/OrgChart/issues/1))
 
 - [本地數據源](https://dabeng.github.io/OrgChart/local-datasource.html)
@@ -114,6 +118,8 @@ $ npm install orgchart
 
 這個特性的靈感來源于這兩個話題的討論--[Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)。感謝[mfahadi](https://github.com/mfahadi)和[Destructrix](https://github.com/Destructrix)建設性的討論:blush:尤其感謝[tedliang](https://github.com/tedliang)提供了非常棒的混合布局的解決方案。
 
+與 `compact` 同時設定時，`verticalLevel` 從指定層級開始決定版面配置。方向、層級限制和拖放仍按照實際的父子關係處理。
+
 - [我想在組織結構圖初始化時，就默認折疊掉若幹節點（不限時這些節點的子節點）](https://dabeng.github.io/OrgChart/default-collapsed.html)
 
 這個好辦。在數據源中，給父節點追加`'collapsed': true`，給子節點追加`'className': 'slide-up'`。
@@ -152,6 +158,10 @@ $ npm install orgchart
 
 **compact data property** 就派上用場了。在數據源的某個節點裏提供了"compact"屬性，並賦為真值，那麽它和它的子節點就會展示為壓縮模式。
 
+緊湊版面配置可以與 `draggable`、`visibleLevel`、方向、平移、縮放和小地圖同時使用。`compact: true` 會將所有分支設為緊湊版面配置，也可以透過回呼選擇子節點較多的分支。`drag` 是 `draggable` 的別名，同時提供兩者時以 `draggable` 為準。緊湊版面配置中的拖放和節點編輯可能重建圖表，操作後應重新取得已渲染的節點元素。
+
+家譜分組資料中的每個成員都使用設定的 `nodeId`，層級與 JSON、UL 資料一樣從第 1 層起算。緊湊家譜的子節點按家庭分組排列成網格。拖放和編輯只修改選取成員及其後代，不會誤移動整個家庭；家譜修改可能重建節點元素。`getHierarchy()` 會保留家譜分組陣列，關聯節點查詢包含同一圖表父級下的全部成員。
+
 - [我想構造族譜，家譜，宗譜的關系圖](https://dabeng.github.io/OrgChart/family-tree.html)
 
 ![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
@@ -233,28 +243,25 @@ var oc = new OrgChart({
   // 來檢索數據源，然後渲染默認結構樣式的節點的上半部分
   'nodeContent': 'title', // 可選屬性。插件會以該屬性的值爲屬性，
   // 來檢索數據源，然後渲染默認結構樣式的節點的下半部分
-  'relationship': relationshipValue, // 注意：當你激活按需載入節點特性時
-  // 你應該使用JSON數據源（不論本地或遠程）並設置本屬性
-  // 本屬性標識當前節點是否具有父節點，兄弟節點，子節點
-  // relationshipValue的值是由“0”或“1”組成的長度爲3的字符串
-  // 第1個字符代表當前節點是否具有父節點
-  // 第2個字符代表當前節點是否具有兄弟節點
-  // 第三個字符代表當前節點是否具有孩子節點
   'children': [ // The property stands for nested nodes.
-    { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': '110' },
-    { 'name': 'Su Miao', 'title': 'department manager', 'relationship': '111',
+    { 'name': 'Bo Miao', 'title': 'department manager' },
+    { 'name': 'Su Miao', 'title': 'department manager',
       'children': [
-        { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },
-        { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '110' }
+        { 'name': 'Tie Hua', 'title': 'senior engineer' },
+        { 'name': 'Hei Hei', 'title': 'senior engineer' }
       ]
     },
-    { 'name': 'Yu Jie', 'title': 'department manager', 'relationship': '110' }
+    { 'name': 'Yu Jie', 'title': 'department manager' }
   ],
   'otherPro': anyValue // 數據源中可以追加任意其他字段，只要你覺得
   // 在之後的渲染和操作組織結構圖時派得上用場
 };
 ```
 
+節點關係直接依據目前已載入的結構判斷。展開摺疊和緊湊佈局切換按鈕在節點懸浮、聚焦或觸控選取時才建立，互動結束後回收；參與載入的按鈕保留至載入完成。鍵盤使用者可以聚焦節點，再用 Enter 或空白鍵啟動按鈕。
+
+`createNode` 回呼執行時沒有預先建立的互動按鈕，請透過 `icons` 自訂圖示，不要查詢初始化時的箭頭元素。按需載入由 demo 或業務層透過 `createNode` 建立獨立請求按鈕，並使用事件委派處理請求；請求按鈕應使用與內建控制項不同的行為選擇器。載入後呼叫 `addAncestors()`、`addChildren()` 或 `addDescendants()` 加入實際節點，不需要關係中繼資料或新的載入回呼選項。`getNodeState()` 只描述已載入的關係，不推斷伺服器尚未載入的資料。舊的關係屬性和關係預處理方法不再支援。
+
 ### 選項
 <table>
   <thead>
@@ -269,10 +276,10 @@ var oc = new OrgChart({
   <tbody>
     <tr>
       <td>data</td>
-      <td>json / HTMLUListElement</td>
+      <td>object / array / HTMLUListElement</td>
       <td>是</td>
       <td></td>
-      <td>用于構造組織結構圖的數據源。它的值可以是JSON或能提供數據的ul元素。</td>
+      <td>資料來源可以是 JSON 樹狀物件、家譜分組陣列或 HTML ul 元素。UL 資料會在內部正規化，後續修改選項時仍會保留編輯結果。</td>
     </tr>
     <tr>
       <td>pan</td>
@@ -288,19 +295,26 @@ var oc = new OrgChart({
       <td>false</td>
       <td>啓動本選項，用戶可以通過鼠標滾輪或觸摸板對組織結構圖進行縮放。</td>
     </tr>
+    <tr>
+      <td>minimap</td>
+      <td>boolean</td>
+      <td>否</td>
+      <td>false</td>
+      <td>顯示小地圖導覽。拖動視口框可移動圖表，在小地圖上使用滾輪可縮放；即使 zoom 為 false，小地圖自身的滾輪縮放仍然可用。</td>
+    </tr>
     <tr>
       <td>zoominLimit</td>
       <td>number</td>
       <td>否</td>
       <td>7</td>
-      <td>放大的上限值</td>
+      <td>包含邊界的最大縮放比例。縮放步長會限制到此邊界。上下限必須為有限正數，且下限不能大於上限。</td>
     </tr>
     <tr>
       <td>zoomoutLimit</td>
       <td>number</td>
       <td>否</td>
       <td>0.5</td>
-      <td>縮小的下限值</td>
+      <td>包含邊界的最小縮放比例，不能大於 zoominLimit。無效的上下限會在替換圖表前拋出 RangeError。</td>
     </tr>
     <tr>
       <td>direction</td>
@@ -325,10 +339,10 @@ var oc = new OrgChart({
     </tr>
     <tr>
       <td>visibleLevel</td>
-      <td>positive integer</td>
+      <td>非負整數或布林值</td>
       <td>否</td>
       <td>999</td>
-      <td>該選項爲用戶指定初始化組織結構圖時，可見的展開的層級是多少</td>
+      <td>指定初始展開深度。true 使用預設深度（999）；false 只顯示第一層；0 隱藏所有初始節點。更深的分支可以隨後展開。</td>
     </tr>
     <tr>
       <td>nodeTitle</td>
@@ -337,13 +351,6 @@ var oc = new OrgChart({
       <td>"name"</td>
       <td>將默認節點結構中的標題部分關聯到數據源中的一個屬性</td>
     </tr>
-    <tr>
-      <td>parentNodeSymbol</td>
-      <td>string</td>
-      <td>否</td>
-      <td>"oci-leader"</td>
-      <td>爲所有父節點的icon標識指定CSS類名</td>
-    </tr>
     <tr>
       <td>nodeContent</td>
       <td>string</td>
@@ -390,7 +397,7 @@ var oc = new OrgChart({
       <td>exportFilename</td>
       <td>string</td>
       <td>否</td>
-      <td>"Orgchart"</td>
+      <td>"OrgChart"</td>
       <td>導出文件的文件名。</td>
     </tr>
     <tr>
@@ -400,6 +407,13 @@ var oc = new OrgChart({
       <td>"png"</td>
       <td>導出文件的擴展名。</td>
     </tr>
+    <tr>
+      <td>exportScale</td>
+      <td>number</td>
+      <td>否</td>
+      <td>2</td>
+      <td>匯出畫布的解析度倍數，PNG 和 PDF 均適用；PDF 頁面保留圖表的邏輯尺寸。非正數會回退為 1。</td>
+    </tr>
     <tr>
       <td>chartClass</td>
       <td>string</td>
@@ -428,6 +442,35 @@ var oc = new OrgChart({
       <td></td>
       <td>組織結構圖初始化完成後，該選項指定的回調函數被觸發。該函數接受一個參數--"chart", 即初始化後的組織結構圖元素。</td>
     </tr>
+    <tr>
+      <td>icons</td>
+      <td>json</td>
+      <td>否</td>
+      <td></td>
+      <td>自訂圖示的 CSS 類別名稱。部分圖示物件會逐欄位與預設值合併，父節點圖示使用 icons.parentNode 設定。
+        <pre>
+          <code>
+'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'
+}
+          </code>
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>compact</td>
+      <td>布林值或函式</td>
+      <td>否</td>
+      <td></td>
+      <td>true 會將所有分支設為緊湊版面配置；接收節點資料的回呼可選擇額外的緊湊分支。節點資料中明確設定的 compact 屬性會保留。在適用的節點上，垂直或混合版面配置優先。</td>
+    </tr>
   </tbody>
 </table>
 
@@ -444,14 +487,14 @@ const oc = new OrgChart({ chartContainer: '#chartContainerId', data: datasource
 | 呼叫 | 參數 | 回傳值與呼叫行為 |
 | --- | --- | --- |
 | `oc.init(options)` | 部分選項物件；傳入 `data` 可替換資料來源。 | 重新建立圖表並回傳 `oc`。 |
-| `oc.setOptions(options)`<br>`oc.setOptions(name, value)` | 包含 `data`、`pan`、`zoom` 或 `minimap` 的物件；或受支援的選項名稱及布林值。 | `data` 會重建圖表，其他選項切換相應功能；回傳 `oc`。 |
+| `oc.setOptions(options)`<br>`oc.setOptions(name, value)` | 部分選項物件，或選項名稱及對應值。 | 原地更新導覽與匯出設定；資料、版面配置或節點渲染設定會重建圖表；回傳 `oc`。 |
 | `oc.attachMinimap()`<br>`oc.detachMinimap()`<br>`oc.updateMinimap(forceRefresh)` | `forceRefresh` 可選；傳入 `true` 會重繪節點預覽。 | 建立、移除或刷新小地圖。一般啟用應使用 `setOptions('minimap', value)`。 |
 | `oc.addAncestors(data, parentId)` | 祖先資料，以及接收原根節點的祖先節點 id。 | 插入祖先層級；無回傳值。 |
 | `oc.addDescendants(data, parent)` | 後代資料陣列和已渲染的父 `.node`。 | 附加後代層級；無回傳值。 |
 | `oc.addParent(currentRoot, data)` | 已渲染的根 `.node` 和新父節點資料。 | 用新父節點包裹目前根；無回傳值。 |
 | `oc.addSiblings(node, data)`<br>`oc.addChildren(node, data)` | 已渲染的 `.node` 和兄弟節點或子節點資料陣列。 | 增加渲染節點；無回傳值。 |
 | `oc.removeNodes(node)` | 要刪除的已渲染 `.node`。 | 刪除該節點及其後代；無回傳值。 |
-| `oc.getHierarchy(includeNodeData)` | 可選布林值，預設 `false`。 | 回傳層級物件；圖表或必要節點 id 不可用時回傳錯誤字串。 |
+| `oc.getHierarchy(includeNodeData)` | 可選布林值，預設 `false`。 | 樹狀資料回傳層級物件，家譜資料回傳分組陣列；圖表或必要節點 id 不可用時回傳錯誤字串。 |
 | `oc.getNodeState(node, relation)` | 已渲染 `.node`；`relation` 為 `parent`、`children` 或 `siblings`。 | 回傳 `{ exist, visible }`。 |
 | `oc.getParent(node)` | 已渲染 `.node`。 | 回傳父 `.node`，不存在時回傳 `null`。 |
 | `oc.getChildren(node)`<br>`oc.getSiblings(node)` | 已渲染 `.node`。 | 回傳直接子節點或兄弟節點 `.node` 元素陣列。 |
@@ -466,7 +509,7 @@ const oc = new OrgChart({ chartContainer: '#chartContainerId', data: datasource
 當你想基于新的options或數據源刷新組織結構圖時，這個方法就派上用場了。
 
 #### setOptions(options) / setOptions(name, value)
-無需重新建立圖表即可更新 `pan`、`zoom` 或 `minimap`。可傳入選項物件，或傳入支援的選項名稱和布林值；傳入包含 `data` 的物件時會重新建立圖表。
+無需重新建立圖表即可更新 `pan`、`zoom`、`minimap`、縮放上下限，以及匯出的解析度倍數、檔案名稱和副檔名。其他選項會重建圖表。可傳入部分選項物件，或選項名稱及對應值。後續 `init()` 呼叫會保留這些變更，圖示預設值逐欄位合併。重建後應重新取得節點元素。
 
 #### attachMinimap() / detachMinimap()
 建立或移除目前圖表的小地圖覆蓋層。通常應使用 `setOptions('minimap', true|false)`，以確保選項狀態和覆蓋層保持同步。

package/demo/edit-chart.html

@@ -215,7 +215,6 @@
         }
         oc.addSiblings(selectedNode, nodeVals.map((item) => ({
           'name': item,
-          'relationship': '110',
           'id': getId()
         })));
         return;
@@ -223,16 +222,13 @@
 
       const childLevel = selectedNode.nextElementSibling;
       if (!childLevel || !childLevel.classList.contains('nodes')) {
-        const relationship = nodeVals.length > 1 ? '110' : '100';
         oc.addChildren(selectedNode, nodeVals.map((item) => ({
           'name': item,
-          'relationship': relationship,
           'id': getId()
         })));
       } else {
         oc.addSiblings(childLevel.querySelector('.node'), nodeVals.map((item) => ({
           'name': item,
-          'relationship': '110',
           'id': getId()
         })));
       }

package/demo/edit-hybrid-chart.html

@@ -217,16 +217,15 @@
             alert('You are not allowed to directly add sibling nodes to root node');
             return;
           }
-          oc.addSiblings(selectedNode, nodeVals.map((item) => ({ 'name': item, 'relationship': '110', 'id': getId() })));
+          oc.addSiblings(selectedNode, nodeVals.map((item) => ({ 'name': item, 'id': getId() })));
           return;
         }
 
         const childLevel = selectedNode.nextElementSibling;
         if (!childLevel || !childLevel.classList.contains('nodes')) {
-          const rel = nodeVals.length > 1 ? '110' : '100';
-          oc.addChildren(selectedNode, nodeVals.map((item) => ({ 'name': item, 'relationship': rel, 'id': getId() })));
+          oc.addChildren(selectedNode, nodeVals.map((item) => ({ 'name': item, 'id': getId() })));
         } else {
-          oc.addSiblings(childLevel.querySelector('.node'), nodeVals.map((item) => ({ 'name': item, 'relationship': '110', 'id': getId() })));
+          oc.addSiblings(childLevel.querySelector('.node'), nodeVals.map((item) => ({ 'name': item, 'id': getId() })));
         }
       });
 

package/demo/index.html

@@ -13,7 +13,7 @@
       background-color: #000;
     }
     section {
-      width: 36rem;
+      width: 50rem;
       margin-top: 200px;
       margin-left: auto;
       margin-right: auto;
@@ -151,6 +151,10 @@
     <li><a href="data-prop-compact.html" target="_blank">layout for children which is too many</a></li>
     <li><a href="family-tree.html" target="_blank">visualize genealogy/pedigree/family tree information</a></li>
     <li><a href="familytree-custom-properties.html" target="_blank">family tree with custom properties</a></li>
+    <li><a href="options-hybrid-navigation.html" target="_blank">mixed options: hybrid layout, visible depth, sibling toggles, pan, zoom and minimap</a></li>
+    <li><a href="options-compact-drag.html" target="_blank">mixed options: compact layout, drag and drop criteria, pan and zoom</a></li>
+    <li><a href="options-horizontal-template.html" target="_blank">mixed options: horizontal layout, custom fields, template, icons and sibling toggles</a></li>
+    <li><a href="options-export-navigation.html" target="_blank">mixed options: bottom-to-top layout, custom fields, styling, pan, zoom and PDF export</a></li>
   </ol>
   </section>
 </body>

package/demo/ondemand-loading-data.html

@@ -6,6 +6,17 @@
   <link rel="icon" href="img/logo.png">
   <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">
@@ -21,42 +32,94 @@
       '/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' }
         ]
       },
       '/orgchart/descendants/n2': [
-        { 'id': 'n4', 'name': 'Xiang Xiang', 'title': 'engineer', 'relationship': '110' }
+        { 'id': 'n4', 'name': 'Xiang Xiang', 'title': 'engineer' }
       ],
       '/orgchart/descendants/n3': [
-        { 'id': 'n5', 'name': 'Pang Pang', 'title': 'engineer', 'relationship': '111',
+        { '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(responseMap[url]), 1000);
+      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);
+      });
+    };
 
     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' }
       ]
     };
 
@@ -64,80 +127,74 @@
       chartContainer: '#chart-container',
       'data' : datasource,
       'nodeContent': 'title',
-      'nodeId': 'id'
-    });
-
-    const chartElement = document.getElementById('chart-container');
-    const getAjaxFlag = () => oc.chart.dataset.inAjax === 'true';
-    const setAjaxFlag = (value) => {
-      oc.chart.dataset.inAjax = value ? 'true' : 'false';
-    };
-    const toggleLoading = (edgeElement, isLoading) => {
-      const nodeElement = edgeElement.parentElement;
-      const spinner = nodeElement.querySelector('.spinner');
-      edgeElement.classList.toggle('hidden', isLoading);
-      if (isLoading && !spinner) {
-        nodeElement.insertAdjacentHTML('beforeend', '<i class="oci oci-spinner spinner"></i>');
-        Array.from(nodeElement.children)
-          .filter((child) => !child.classList.contains('spinner'))
-          .forEach((child) => {
-            child.style.opacity = '0.2';
-          });
-        setAjaxFlag(true);
-        return;
-      }
-      if (!isLoading) {
-        const currentSpinner = nodeElement.querySelector('.spinner');
-        if (currentSpinner) {
-          currentSpinner.remove();
-        }
-        Array.from(nodeElement.children).forEach((child) => {
-          child.removeAttribute('style');
+      '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);
+          }
         });
-        setAjaxFlag(false);
       }
-    };
+    });
 
+    const chartElement = document.getElementById('chart-container');
     chartElement.addEventListener('click', async (event) => {
-      const clickableAncestor = event.target.closest('.topEdge, .horizontalEdge');
-      if (!clickableAncestor || !chartElement.contains(clickableAncestor)) {
+      const button = event.target.closest('.request-control');
+      if (!button || !chartElement.contains(button)) {
         return;
       }
-      const nodeElement = clickableAncestor.parentElement;
-      const parentState = oc.getNodeState(nodeElement, 'parent');
-      if (!parentState.exist) {
-        if (getAjaxFlag()) {
-          return;
-        }
-        toggleLoading(clickableAncestor, true);
-        try {
-          const nodeData = nodeElement ? nodeElement.__ocNodeData || nodeElement.dataset : {};
-          const data = await requestJson('/orgchart/ancestors/' + nodeData.id);
-          oc.addAncestors(data, 'n0');
-        } finally {
-          toggleLoading(clickableAncestor, false);
-        }
-      }
-    });
-
-    chartElement.addEventListener('click', async (event) => {
-      const bottomEdge = event.target.closest('.bottomEdge');
-      if (!bottomEdge || !chartElement.contains(bottomEdge)) {
+      const node = button.parentElement;
+      const relation = button.dataset.relation;
+      const url = requestUrl(node, relation);
+      if (pendingRequests.has(url) || completedRequests.has(url)) {
         return;
       }
-      const nodeElement = bottomEdge.parentElement;
-      const childrenState = oc.getNodeState(nodeElement, 'children');
-      if (!childrenState.exist) {
-        if (getAjaxFlag()) {
+      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;
         }
-        toggleLoading(bottomEdge, true);
-        try {
-          const nodeData = nodeElement ? nodeElement.__ocNodeData || nodeElement.dataset : {};
-          const data = await requestJson('/orgchart/descendants/' + nodeData.id);
-          oc.addDescendants(data, nodeElement);
-        } finally {
-          toggleLoading(bottomEdge, false);
+        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.';
+            });
+          }
         }
       }
     });

package/demo/options-compact-drag.html

@@ -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>