orgchart 4.0.1 → 6.0.0

package/README.zh-tw.md

@@ -11,6 +11,9 @@
 ## 寫在前面的話
 感謝[wesnolte](https://github.com/wesnolte)的非常棒的作品-- [jOrgChart](https://github.com/wesnolte/jOrgChart)。用嵌套的table來構造樹狀結構，用td的border來構造節點間的連線，非常有創意。天然地降低了前端程序員在構造樹狀結構時的工作量和難度，要知道，利用D3.js中的腦圖去達到同樣效果，開發周期就會長好多。哪怕你對svg，canvas等高級的制圖API了然于胸，當你的樹狀結構圖激發出HR大姐的各種天馬行空的需求時，你會坦誠的承認svg或canvas這種重型武器拖累了你的快速解決一小戳敵人的能力。相比較而言，用單純的**HTML5 + CSS3**的解決方案就像是 **“小米 + 步槍”的輕步兵**，天然地降低了你在實現樹狀結構圖的難度，同時給予你更大的定制空間去面對基于這個結構圖衍生出的種種瑣碎需求。只要你的需求足夠多，基于這個樹狀結構圖，打造出一個完備的HR系統，也是可以期待的。實際上，網絡上很多OrgChart商業軟件就是圍繞著一個樹狀結構核心模型展開的業務邏輯實現。
 
+- 自 5.0 版本起，使用者可以建立家譜樹。
+- 自 6.0 版本起，OrgChart 元件已回歸原生實作，不再依賴 jQuery。
+
 ## 功能特性
 - 支持本地和遠程的數據源。
 - 用戶可以展開/折疊節點或子樹，方便地浏覽局部的結構圖。
@@ -40,7 +43,9 @@ $ bower install orgchart
 # From version 1.0.4 on, users can install orgchart with npm
 $ npm install orgchart
 ```
-`require('orgchart')`會把orgchart插件追加到jQuery對象上。orgchart模塊本身並不導出任何東西。
+在 CommonJS 環境中，`require('orgchart')`會直接導出 `OrgChart` 構造函數。
+
+可參考這個例子, [在React中使用jQuery Orchart](https://stackblitz.com/edit/vitejs-vite-hqv4nbdt)
 
 ## [gihtub pages實例集合](https://dabeng.github.io/OrgChart/)
 ## [基于嵌套ul的實例集合](https://codepen.io/collection/nWqvzY)
@@ -105,10 +110,6 @@ $ npm install orgchart
 
 我們只需要把css的樣式與數據源中的id字段或css類字段關聯起來就好。
 
-- [我想實現一個多層級（而非深度）的組織結構圖](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-如果你的組織層級很多，二每個層級下的節點也很多，那麽上面的方案可以采納嘗試。
-
 - [我想構造一個混合布局的（水平方向 + 垂直方向）組織結構圖](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 這個特性的靈感來源于這兩個話題的討論--[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)提供了非常棒的混合布局的解決方案。
@@ -125,6 +126,84 @@ $ npm install orgchart
 
 沒問題，我們推薦使用ES6的模版字符串。
 
+- [我想將節點安置在特定的層級。 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
+
+你需要的是一個復合的解決方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
+
+- [我想構造一個組織結構圖，每個節點寬度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
+
+![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
+
+- [我想在混合布局中實現拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
+
+- [我想指定從某一分支開始，其下所有子節點都以垂直樣式顯示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
+
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
+
+**hybrid data property** 就派上用場了。 在數據源的某個節點中提供"hybrid"屬性，那麽它的所有後代節點都會垂直布局。
+
+- [我想用Font Awesome圖標代替內置的圖標](https://dabeng.github.io/OrgChart/custom-icons.html)
+
+- [子節點眾多的時候，我想以一種壓縮起來的展示方式盡可能節省空間](https://dabeng.github.io/OrgChart/data-prop-compact.html)
+
+![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
+
+**compact data property** 就派上用場了。在數據源的某個節點裏提供了"compact"屬性，並賦為真值，那麽它和它的子節點就會展示為壓縮模式。
+
+- [我想構造族譜，家譜，宗譜的關系圖](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+我們使用如下的二維數組數據源來構建家譜。“outsider”代表外姓人。
+
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt' }
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt' }
+        ]
+      ]
+    }
+  ]
+];
+```
+
+- [我想往族譜裏追加一些自定義的標識](https://dabeng.github.io/OrgChart/familytree-custom-properties.html)
+
+![familytree-custom-properties](http://dabeng.github.io/OrgChart/img/familytree-custom-properties.png)
+
+- [我想通過小地圖導航組織結構圖](https://dabeng.github.io/OrgChart/minimap.html)
+
+![minimap](http://dabeng.github.io/OrgChart/img/minimap.png)
+
+啓用 `minimap` 選項即可顯示概覽導航器。拖動其中的視口可以移動組織結構圖，在小地圖上滾動鼠標滾輪可以縮放。
+
 ### 本地運行orgchart
 
 - 必須安裝node.js v6+，因爲我們的單元測試是基于jsdom v11。
@@ -138,7 +217,10 @@ $ npm install orgchart
 
 ### 實例化組織結構圖
 ```js
-var oc = $('#chartContainerId').orgchart(options);
+var oc = new OrgChart({
+  chartContainer: '#chartContainerId',
+  data: datasource
+});
 ```
 
 ### 數據源示例
@@ -187,7 +269,7 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>data</td>
-      <td>json / jquery object</td>
+      <td>json / HTMLUListElement</td>
       <td>是</td>
       <td></td>
       <td>用于構造組織結構圖的數據源。它的值可以是JSON或能提供數據的ul元素。</td>
@@ -288,7 +370,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>否</td>
       <td></td>
-      <td>爲該選項提供的函數，會在默認節點結構創建完畢後調用。利用傳入的兩個參數--"$node"和"data"，可以幫助開發者定制或改動現有的節點結構。</td>
+      <td>爲該選項提供的函數，會在默認節點結構創建完畢後調用。利用傳入的兩個參數--"node"和"data"，可以幫助開發者定制或改動現有的節點結構。</td>
     </tr>
     <tr>
       <td>exportButton</td>
@@ -344,20 +426,54 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>否</td>
       <td></td>
-      <td>組織結構圖初始化完成後，該選項指定的回調函數被觸發。該函數接受一個參數--"$chart", 即初始化後的組織結構圖jquery對象。</td>
+      <td>組織結構圖初始化完成後，該選項指定的回調函數被觸發。該函數接受一個參數--"chart", 即初始化後的組織結構圖元素。</td>
     </tr>
   </tbody>
 </table>
 
 ### 方法
-我們相信當你研究了[edit orgchart](http://dabeng.github.io/OrgChart/edit-orgchart/)這個Demo後，會基本掌握orgchart插件的所有方法。
+使用 `new OrgChart(options)` 建立實例。`chartContainer` 和 `chart` 屬性分別提供原生容器元素與已渲染的組織結構圖元素。
+
+```js
+const oc = new OrgChart({ chartContainer: '#chartContainerId', data: datasource });
+```
 
-#### var oc = $container.orgchart(options)
-在指定容器元素內嵌入一個組織結構圖。該方法接受的options參數的細節可以到上面的“選項”一節中查看。這裏的oc是OrgChart類的實例。
+公開 API 包括：`init`、`setOptions`、`attachMinimap`、`detachMinimap`、`updateMinimap`、`addAncestors`、`addDescendants`、`addParent`、`addSiblings`、`addChildren`、`removeNodes`、`getHierarchy`、`getNodeState`、`getParent`、`getChildren`、`getSiblings`、`getRelatedNodes`、`hideParent`、`showParent`、`hideChildren`、`showChildren`、`hideSiblings`、`showSiblings`、`setChartScale`、`export`、`exportPNG` 和 `exportPDF`。其中節點和圖表參數均為原生 `HTMLElement`。
+
+#### API 參考
+| 呼叫 | 參數 | 回傳值與呼叫行為 |
+| --- | --- | --- |
+| `oc.init(options)` | 部分選項物件；傳入 `data` 可替換資料來源。 | 重新建立圖表並回傳 `oc`。 |
+| `oc.setOptions(options)`<br>`oc.setOptions(name, value)` | 包含 `data`、`pan`、`zoom` 或 `minimap` 的物件；或受支援的選項名稱及布林值。 | `data` 會重建圖表，其他選項切換相應功能；回傳 `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.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` 元素陣列。 |
+| `oc.getRelatedNodes(node, relation)` | 已渲染 `.node`；`relation` 為 `parent`、`children` 或 `siblings`。 | 通用關聯查詢；parent 回傳節點或 `null`，其他關係回傳陣列。 |
+| `oc.hideParent(node)` / `oc.showParent(node)`<br>`oc.hideChildren(node)` / `oc.showChildren(node)` | 已渲染 `.node`。 | 透過圖表過渡隱藏或顯示關聯分支；無回傳值。 |
+| `oc.hideSiblings(node, direction)`<br>`oc.showSiblings(node, direction)` | 已渲染 `.node`；可選 `direction` 為 `left` 或 `right`。 | 隱藏或顯示指定一側的兄弟節點；省略方向時處理全部兄弟節點；無回傳值。 |
+| `oc.setChartScale(chart, multiplier, zoomAnchor)` | 通常傳入 `oc.chart`；正數的相對縮放倍數；可選視口座標 `{ x, y }`。 | 在配置的縮放範圍內縮放，提供 `zoomAnchor` 時固定該點。 |
+| `oc.export(filename, extension)` | 可選檔案名稱和 `png` 或 `pdf` 副檔名。 | 按配置預設值開始匯出；無法匯出時回傳 `false`。 |
+| `oc.exportPNG(canvas, filename)`<br>`oc.exportPDF(canvas, filename, exportScale)` | 已準備的 canvas、檔案名稱；PDF 縮放預設 `1`。 | 將傳入 canvas 直接下載為 PNG 或 PDF；通常應呼叫 `export()`。 |
 
 #### init(newOptions)
 當你想基于新的options或數據源刷新組織結構圖時，這個方法就派上用場了。
 
+#### setOptions(options) / setOptions(name, value)
+無需重新建立圖表即可更新 `pan`、`zoom` 或 `minimap`。可傳入選項物件，或傳入支援的選項名稱和布林值；傳入包含 `data` 的物件時會重新建立圖表。
+
+#### attachMinimap() / detachMinimap()
+建立或移除目前圖表的小地圖覆蓋層。通常應使用 `setOptions('minimap', true|false)`，以確保選項狀態和覆蓋層保持同步。
+
+#### updateMinimap(forceRefresh)
+在修改圖表變換或版面配置後重新計算小地圖視口。傳入 `true` 會重繪小地圖中的節點預覽。
+
 #### addAncestors(data, parentId)
 爲當前的組織結構圖增加祖先節點，可以不止壹個層級。
 <table>
@@ -388,7 +504,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addDescendants(data, $parent)
+#### addDescendants(data, parent)
 爲指定的父節點增加後代節點。
 <table>
   <thead>
@@ -409,8 +525,8 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>用于構造後代節點的數據源</td>
     </tr>
     <tr>
-      <td>$parent</td>
-      <td>jquery object</td>
+      <td>parent</td>
+      <td>HTMLElement</td>
       <td>yes</td>
       <td></td>
       <td>後代節點要追加到的父節點對象</td>
@@ -418,7 +534,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addParent(data)
+#### addParent(currentRoot, data)
 爲當前的組織結構圖增加父節點。
 <table>
   <thead>
@@ -431,6 +547,13 @@ var oc = $('#chartContainerId').orgchart(options);
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>currentRoot</td>
+      <td>HTMLElement</td>
+      <td>是</td>
+      <td></td>
+      <td>當前組織結構圖的根節點，新父節點會包裹這個根節點</td>
+    </tr>
     <tr>
       <td>data</td>
       <td>json object</td>
@@ -441,7 +564,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addSiblings($node, data)
+#### addSiblings(node, data)
 爲指定的節點增加兄弟節點。
 <table>
   <thead>
@@ -455,8 +578,8 @@ var oc = $('#chartContainerId').orgchart(options);
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>是</td>
       <td></td>
       <td>基于該節點增加其兄弟節點</td>
@@ -471,7 +594,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addChildren($node, data)
+#### addChildren(node, data)
 爲指定的節點增加孩子節點。
 <table>
   <thead>
@@ -485,8 +608,8 @@ var oc = $('#chartContainerId').orgchart(options);
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>是</td>
       <td></td>
       <td>基于該節點增加其孩子節點</td>
@@ -501,7 +624,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### removeNodes($node）
+#### removeNodes(node)
 刪除指定的節點及其後代節點。
 <table>
   <thead>
@@ -515,8 +638,8 @@ var oc = $('#chartContainerId').orgchart(options);
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>是</td>
       <td></td>
       <td>待刪除的節點。</td>
@@ -544,7 +667,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### hideParent($node)
+#### hideParent(node)
 隱藏指定節點的父節點。當然其兄弟節點及祖先節點也一並隱藏了。
 <table>
   <tr>
@@ -555,15 +678,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td>None</td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
 </table>
 
-#### showParent($node)
+#### showParent(node)
 顯示指定節點的父節點。但不包括更上一層的祖先節點。
 
 <table>
@@ -575,15 +698,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
 </table>
 
-#### hideChildren($node)
+#### hideChildren(node)
 隱藏指定節點的孩子節點。當然這其中包含了所有的後代節點。
 
 <table>
@@ -595,15 +718,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
 </table>
 
-#### showChildren($node)
+#### showChildren(node)
 顯示指定節點的孩子節點。默認只顯示緊鄰的下一個層級，並不包括所有的後代節點。
 
 <table>
@@ -615,15 +738,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
 </table>
 
-#### hideSiblings($node, direction)
+#### hideSiblings(node, direction)
 隱藏指定節點的兄弟節點。
 
 <table>
@@ -635,11 +758,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
   <tr>
     <td>direction</td>
@@ -650,7 +773,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### showSiblings($node, direction)
+#### showSiblings(node, direction)
 顯示指定節點的兄弟節點。
 
 <table>
@@ -662,11 +785,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>It's the desired JQuery Object to show its siblings nodes</td>
+    <td>指定節點元素。</td>
   </tr>
   <tr>
     <td>direction</td>
@@ -677,7 +800,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### getNodeState($node, relation)
+#### getNodeState(node, relation)
 該方法幫你了解指定節點的相關節點的顯示狀況。
 
 <table>
@@ -689,11 +812,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
   <tr>
     <td>relation</td>
@@ -711,7 +834,7 @@ var oc = $('#chartContainerId').orgchart(options);
   "visible":true|false, // 標識相關節點當前是否可見
 }
 ```
-#### getRelatedNodes($node, relation)
+#### getRelatedNodes(node, relation)
 獲得指定節點的關聯節點。
 
 <table>
@@ -723,11 +846,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定節點的jquery對象。</td>
+    <td>指定節點元素。</td>
   </tr>
   <tr>
     <td>relation</td>
@@ -738,9 +861,20 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### setChartScale($chart, newScale)
+#### getParent(node)
+回傳指定節點的父節點；如果不存在父節點，則回傳 `null`。
+
+#### getChildren(node)
+回傳指定節點的直接子節點陣列。回傳值中的每一項都是原生 `HTMLElement`。
+
+#### getSiblings(node)
+回傳指定節點的兄弟節點陣列。回傳值中的每一項都是原生 `HTMLElement`。
+
+#### setChartScale(chart, newScale, zoomAnchor)
 用這個方法可以幫你爲指定的組織結構圖設置新的scale系數。
 
+`zoomAnchor` 為可選參數，格式為視口座標 `{ x, y }`。提供該參數後，縮放時會固定該座標點。
+
 <table>
   <tr>
     <th>名稱</th>
@@ -750,8 +884,8 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$chart</td>
-    <td>JQuery Object</td>
+    <td>chart</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td>None</td>
     <td>組織結構圖容器中的某一個圖。</td>
@@ -792,8 +926,22 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
+#### exportPNG(canvas, exportFilename)
+將準備好的 canvas 匯出為 PNG 下載。當應用程式自行提供 canvas 時可直接呼叫；大多數情境應使用 `export()`。
+
+#### exportPDF(canvas, exportFilename, exportScale)
+將準備好的 canvas 匯出為 PDF 下載。`exportScale` 是 canvas 的渲染縮放比例，用於保持 PDF 的邏輯尺寸；大多數情境應使用 `export()`。
+
 ### 事件
 
+OrgChart 會派發可冒泡的原生 `CustomEvent`。請使用 `addEventListener` 訂閱，事件參數位於 `event.detail`。
+
+```js
+oc.chart.addEventListener('nodedrop.orgchart', function (event) {
+  const { draggedNode, dragZone, dropZone } = event.detail;
+});
+```
+
 <table>
   <thead>
     <tr>
@@ -805,23 +953,28 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>nodedrop.orgchart</td>
-      <td>draggedNode, dragZone, dropZone</td>
-      <td>當你拖拽一個節點，然後在目前區域松放時，該事件被觸發。請參考實例 <a target="_blank" href="http://dabeng.github.io/OrgChart/drag-drop/">example drag & drop</a>。</td>
+      <td><code>event.detail</code>: draggedNode, dragZone, dropZone</td>
+      <td>在節點移動前於圖表元素上觸發。呼叫 <code>event.preventDefault()</code> 可取消本次拖放。</td>
+    </tr>
+    <tr>
+      <td>otherdropped.orgchart</td>
+      <td><code>event.detail</code>: draggedItem, dropZone</td>
+      <td>非 OrgChart 的可拖放項目被放到節點上時，於圖表元素上觸發。</td>
     </tr>
     <tr>
       <td>init.orgchart</td>
-      <td>chart</td>
-      <td>當組織結構圖初始化完成時，該事件觸發。在響應事件處理器中，你可以訪問到渲染出的任意節點。</td>
+      <td>無；<code>event.target</code> 為圖表元素</td>
+      <td>圖表渲染完成後觸發。</td>
     </tr>
     <tr>
       <td>show-[relation].orgchart</td>
       <td></td>
-      <td>在顯示指定節點的關聯節點時，觸發該事件。</td>
+      <td>關聯節點顯示時在該節點上觸發；<code>relation</code> 為 parent、children 或 siblings。</td>
     </tr>
     <tr>
       <td>hide-[relation].orgchart</td>
       <td></td>
-      <td>在隱藏指定節點的關聯節點時，觸發該事件。</td>
+      <td>關聯節點隱藏時在該節點上觸發；<code>relation</code> 為 parent、children 或 siblings。</td>
     </tr>
   </tbody>
 </table>
@@ -832,9 +985,9 @@ var oc = $('#chartContainerId').orgchart(options);
 
 我們提供了一個CSS類"noncollapsable"，可以方便地完成這件事。
 ```js
-$('.orgchart').addClass('noncollapsable'); // 禁掉展開/折疊
+oc.chart.classList.add('noncollapsable'); // 禁掉展開/折疊
 
-$('.orgchart').removeClass('noncollapsable'); // 開啓展開/折疊
+oc.chart.classList.remove('noncollapsable'); // 開啓展開/折疊
 ```
 
 #### 爲啥根節點消失了，看不到了？

package/bower.json

@@ -1,18 +1,16 @@
 {
   "name": "orgchart",
-  "version": "3.2.0",
+  "version": "6.0.0",
   "homepage": "https://github.com/dabeng/OrgChart",
   "authors": [
     "dabeng <dabeng413@gmail.com>"
   ],
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": [
-    "dist/js/jquery.orgchart.min.js",
-    "dist/css/jquery.orgchart.min.css"
+    "dist/js/orgchart.min.js",
+    "dist/css/orgchart.min.css"
   ],
   "keywords": [
-    "jquery",
-    "plugin",
     "organization",
     "chart",
     "orgchart",
@@ -29,9 +27,8 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "^3.6.2",
-    "jquery-mockjax": "^2.6.0",
-    "jspdf": "^2.5.1",
-    "html2canvas": "^1.4.1"
+    "html2canvas": "^1.4.1",
+    "json-digger": "^2.0.2",
+    "jspdf": "^3.0.1"
   }
 }