orgchart 5.0.0 → 7.0.0

package/README.md

@@ -1,4 +1,4 @@
-![OrgChart](http://dabeng.github.io/OrgChart/img/heading.png)
+![OrgChart](http://dabeng.github.io/OrgChart/img/cover.png)
 
 # [简体文档](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md), [繁體文档](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md)
 
@@ -13,6 +13,8 @@ First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great w
 Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo. 
 - Since version 3.0, we use nested ul to construct tree-like chart instead of nested table.
 - Since version 4.0, users build up the ajax datasoure by themselves.
+- Since version 5.0, users are allowed to build up the family tree.
+- Since version 6.0, The orgchart component has been reverted to native implementation and no longer relies on jQuery.
 
 ## Features
 - Supports both local data and remote data (JSON).
@@ -32,7 +34,7 @@ Users could find the related CDN support for OrgChart's CSS and JavaScript.
 [![cdnjs](https://img.shields.io/cdnjs/v/orgchart)](https://cdnjs.com/libraries/orgchart) https://cdnjs.com/libraries/orgchart
 
 ## Installation
-Of course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapps.
+Of course, you can directly use the standalone build by including dist/js/orgchart.js and dist/css/orgchart.css in your webapps.
 ### Install with Bower
 ```
 # From version 1.0.2 on, users can install orgchart and add it to bower.json dependencies
@@ -44,13 +46,19 @@ $ bower install orgchart
 # From version 1.0.4 on, users can install orgchart with npm
 $ npm install orgchart
 ```
-require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.
+In CommonJS environments, `require('orgchart')` exports the `OrgChart` constructor directly.
+
+FYI, [How to use jQuery Orchart in React](https://stackblitz.com/edit/vitejs-vite-hqv4nbdt)
 
 ## [Demos on github pages](https://dabeng.github.io/OrgChart/)
 ## [Demos based on nested ul](https://codepen.io/collection/xKmPeK)
 ## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) (obsolete)
 
 ### online demos
+- [I want to render 10,000 nodes within 500 milliseconds](https://dabeng.github.io/OrgChart/10000-nodes.html)
+
+![10000-nodes](http://dabeng.github.io/OrgChart/img/10000-nodes.png)
+
 - [using ul datasource](https://dabeng.github.io/OrgChart/ul-datasource.html)(this feature comes from [Tobyee's good idea :blush:](https://github.com/dabeng/OrgChart/issues/1))
 
 - [using local datasource](https://dabeng.github.io/OrgChart/local-datasource.html)
@@ -75,7 +83,7 @@ require('orgchart') will load orgchart plugin onto the jQuery object. The orgcha
 
 ![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)
 
-**Note:** users use should set the relationship property of datasource by themselves. All of these staff are used to generate the correct expanding/collapsing arrows for nodes.
+**Note:** the library manages expand/collapse controls only for loaded nodes. The demo creates separate request buttons and handles loading through application code; no relationship metadata or loading callback option is required.
 
 - [I wanna customize the structure of node](https://dabeng.github.io/OrgChart/option-createNode.html)
 
@@ -125,7 +133,7 @@ This feature is inspired by the issues([Aligning Children Vertical](https://gith
 
 From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option "verticalLevel" allows users to align child nodes vertically from the given level.
 
-**Note**: currently, this option is incompatible with many other options or methods, like direction, drag&drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.
+When combined with `compact`, `verticalLevel` determines the layout from its configured level onward. Direction, depth limits and drag/drop continue to use the actual node hierarchy.
 
 - [I want to collapse some nodes by default](https://dabeng.github.io/OrgChart/default-collapsed.html)
 
@@ -165,40 +173,44 @@ You need the solution based on new datasource structure with **levelOffset data
 
 **compact data property** is designed for your use case. Once node data includes a "compact" prop with truthy value, itself and its descendant nodes will be arranged with compact mode.
 
+Compact layouts support `draggable`, `visibleLevel`, direction, pan, zoom and minimap together. Use `compact: true` to compact every branch, or a callback to select dense branches. `drag` is an alias for `draggable`; when both are supplied, `draggable` takes precedence. Compact drag/drop and node editing may rebuild the chart, so reacquire rendered node elements afterward.
+
+Grouped family sources use the configured `nodeId` for every member and the same one-based depth as JSON and UL sources. Compact family children are arranged as household grids. Drag/drop and editing modify the selected member and its descendants, not its surrounding household; family mutations may rebuild rendered nodes. `getHierarchy()` preserves grouped family arrays, and related-node queries include all members with the same chart parent.
+
 - [ I want to visualize genealogy/pedigree/family tree information](https://dabeng.github.io/OrgChart/family-tree.html)
 
 ![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
 
-We use the following two-dimensional array datasource to build up the Family Tree.
+We use the following two-dimensional array datasource to build up the Family Tree. Here, prop "gender" is optional.
 ```
 var datascource = [
   [
-    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather' },
     { 
-      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother',  'outsider': true,
       'children': [
         [
-          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt' }
         ],
         [
-          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother',
             'children': [
               [
               
-                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'outsider': true,
                   'children': [
-                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
-                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter' }],
                   ]
                 },
-                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me' },
               ]
             ]
           },
-          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'outsider': true }
         ],
         [
-          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt' }
         ]
       ]
     }
@@ -206,6 +218,16 @@ var datascource = [
 ];
 ```
 
+- [I want to add property tags to family tree](https://dabeng.github.io/OrgChart/familytree-custom-properties.html)
+
+![familytree-custom-properties](http://dabeng.github.io/OrgChart/img/familytree-custom-properties.png)
+
+- [I want to navigate the orgchart with a minimap](https://dabeng.github.io/OrgChart/minimap.html)
+
+![minimap](http://dabeng.github.io/OrgChart/img/minimap.png)
+
+Enable the `minimap` option to display an overview navigator. Drag its viewport to move the chart, or use the mouse wheel over the minimap to zoom.
+
 ### how to start up demos locally
 
 - you have to install node.js v6+ because our unit tests are based on jsdom v11
@@ -219,7 +241,10 @@ var datascource = [
 
 ### Instantiation Statement
 ```js
-var oc = $('#chartContainerId').orgchart(options);
+var oc = new OrgChart({
+  chartContainer: '#chartContainerId',
+  data: datasource
+});
 ```
 
 ### Structure of Datasource
@@ -230,29 +255,26 @@ var oc = $('#chartContainerId').orgchart(options);
   'collapsed': true, // By default, the children nodes of current node is hidden.
   'className': 'top-level', // It's a optional property
   // which will be used as className attribute of node.
-  'nodeTitle': 'name', // This property is used to retrieve “title” value in datasource
+  'nodeTitle': 'name', // This property is used to retrieve “title” value in datasource
   'nodeContent': 'title',// This property is used to retrieve "content" value in datasource
-  'relationship': relationshipValue, // Note: when you activate ondemand loading nodes feature,
-  // you should use json datsource (local or remote) and set this property.
-  // This property implies that whether this node has parent, siblings, children.
-  // relationshipValue is a string composed of three "0/1" identifier.
-  // First character stands for wether current node has parent node;
-  // Scond character stands for wether current node has siblings nodes;
-  // Third character stands for wether current node has children node.
   '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 // feel free to append any useful properties
 };
 ```
 
+Node relations are derived from the current loaded structure. Expand/collapse and compact-layout controls are created when a node is hovered, focused, or selected by touch, and removed when interaction ends. A control involved in loading is retained until loading finishes. Keyboard users can focus a node and activate its controls with Enter or Space.
+
+The `createNode` callback runs without prebuilt interaction controls; customize icons through `icons` rather than querying initial arrow elements. For on-demand loading, create application-owned request buttons through `createNode` and handle requests with event delegation. Keep their behavior selectors separate from built-in controls, then insert loaded nodes with `addAncestors()`, `addChildren()`, or `addDescendants()`. `getNodeState()` describes loaded relations, not data that may exist on a server. The former relationship field and relation-preprocessing method are no longer supported.
+
 ### Data Props
 <table>
   <thead>
@@ -290,10 +312,10 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>data</td>
-      <td>json or jquery object</td>
+      <td>object / array / HTMLUListElement</td>
       <td>yes</td>
       <td></td>
-      <td>datasource usded to build out structure of orgchart. It could be a json object or a jquery object(ul element)</td>
+      <td>Datasource: a JSON tree object, grouped family-tree arrays, or an HTML ul element. UL data is normalized internally so later option changes retain edits.</td>
     </tr>
     <tr>
       <td>pan</td>
@@ -309,19 +331,26 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>false</td>
       <td>Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option.</td>
     </tr>
+    <tr>
+      <td>minimap</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>false</td>
+      <td>Displays an overview navigator. Drag its viewport to move the chart, or use the wheel over the minimap to zoom. Minimap wheel zoom remains available when zoom is false.</td>
+    </tr>
     <tr>
       <td>zoominLimit</td>
       <td>number</td>
       <td>no</td>
       <td>7</td>
-      <td>Users are allowed to set a zoom-in limit.</td>
+      <td>Inclusive maximum scale. Zoom steps are clamped to this bound. Limits must be finite, positive, and ordered.</td>
     </tr>
     <tr>
       <td>zoomoutLimit</td>
       <td>number</td>
       <td>no</td>
       <td>0.5</td>
-      <td>Users are allowed to set a zoom-out limit.</td>
+      <td>Inclusive minimum scale. It must not exceed zoominLimit. Invalid limits throw a RangeError before the chart is replaced.</td>
     </tr>
     <tr>
       <td>direction</td>
@@ -346,10 +375,10 @@ var oc = $('#chartContainerId').orgchart(options);
     </tr>
     <tr>
       <td>visibleLevel</td>
-      <td>positive integer</td>
+      <td>nonnegative integer or boolean</td>
       <td>no</td>
       <td>999</td>
-      <td>It indicates the level that at the very beginning orgchart is expanded to.</td>
+      <td>It indicates the initially expanded depth. true uses the default depth (999); false shows the first level; 0 hides all initial nodes. Deeper branches can be expanded later.</td>
     </tr>
     <tr>
       <td>nodeTitle</td>
@@ -358,13 +387,6 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>"name"</td>
       <td>It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option.</td>
     </tr>
-    <tr>
-      <td>parentNodeSymbol</td>
-      <td>string</td>
-      <td>no</td>
-      <td>"oci-menu"</td>
-      <td>Using your own icon to imply that the node has child nodes.</td>
-    </tr>
     <tr>
       <td>nodeContent</td>
       <td>string</td>
@@ -391,7 +413,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>no</td>
       <td></td>
-      <td>It's a callback function used to customize every orgchart node. It receives two parameters: "$node" stands for jquery object of single node div; "data" stands for datasource of single node.</td>
+      <td>It's a callback function used to customize every orgchart node. It receives two parameters: "node" stands for the single node element; "data" stands for datasource of single node.</td>
     </tr>
     <tr>
       <td>exportButton</td>
@@ -411,7 +433,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>exportFilename</td>
       <td>string</td>
       <td>no</td>
-      <td>"Orgchart"</td>
+      <td>"OrgChart"</td>
       <td>It's filename when you export current orgchart as a picture.</td>
     </tr>
     <tr>
@@ -421,6 +443,13 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>"png"</td>
       <td>Available values are png and pdf.</td>
     </tr>
+    <tr>
+      <td>exportScale</td>
+      <td>number</td>
+      <td>no</td>
+      <td>2</td>
+      <td>Canvas resolution multiplier for PNG and PDF exports; PDF pages retain the chart's logical dimensions. Nonpositive values fall back to 1.</td>
+    </tr>
     <tr>
       <td>chartClass</td>
       <td>string</td>
@@ -447,14 +476,14 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>no</td>
       <td></td>
-      <td>It can often be useful to know when your table has fully been initialised, data loaded and rendered. It receives one parament: "$chart" stands for jquery object of initialised chart.</td>
+      <td>It can often be useful to know when your table has fully been initialised, data loaded and rendered. It receives one parameter: "chart" stands for the initialized chart element.</td>
     </tr>
     <tr>
       <td>icons</td>
       <td>json</td>
       <td>no</td>
       <td></td>
-      <td>Users can use this option to plug Font Awesome icons back in.
+      <td>Users can use this option to plug Font Awesome icons back in. Partial icon objects are merged with the defaults by field. Set icons.parentNode to customize the parent-node symbol.
         <pre>
           <code>
 'icons': {
@@ -473,23 +502,57 @@ var oc = $('#chartContainerId').orgchart(options);
     </tr>
     <tr>
       <td>compact</td>
-      <td>function</td>
+      <td>boolean or function</td>
       <td>no</td>
       <td></td>
-      <td>This callback is used to determine current node is wether rendered with compact mode. The node's data is passed in as a parameter. <b>Note:</b>The option "compact" has a higher priority than data prop "compact".</td>
+      <td>true compacts every branch; a callback receiving node data selects additional compact branches. Explicit compact data properties are preserved. Vertical/hybrid layout takes precedence at nodes where it applies.</td>
     </tr>
   </tbody>
 </table>
 
 ### Methods
-I'm sure that you can grasp the key points of the methods below after you try out demo -- [edit orgchart](http://dabeng.github.io/OrgChart/edit-orgchart/).
+Create an instance with `new OrgChart(options)`. Its `chartContainer` and `chart` properties expose the native container and rendered chart elements.
+
+```js
+const oc = new OrgChart({ chartContainer: '#chartContainerId', data: datasource });
+```
 
-#### var oc = $container.orgchart(options)
-Embeds an organization chart in designated container. Accepts an options object and you can go through the "options" section to find which options are required. Variable oc is the instance of class OrgChart.
+The public API is: `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`, and `exportPDF`. Arguments that refer to nodes or charts are native `HTMLElement` instances.
+
+#### API reference
+| Call | Parameters | Return value and behavior |
+| --- | --- | --- |
+| `oc.init(options)` | Partial options object; use `data` to replace the data source. | Rebuilds the chart and returns `oc`. |
+| `oc.setOptions(options)`<br>`oc.setOptions(name, value)` | Partial options object, or an option name and value. | Applies navigation/export settings in place; rebuilds for data, layout or node-rendering settings; returns `oc`. |
+| `oc.attachMinimap()`<br>`oc.detachMinimap()`<br>`oc.updateMinimap(forceRefresh)` | `forceRefresh` is optional; `true` redraws preview nodes. | Creates, removes, or refreshes the minimap. Prefer `setOptions('minimap', value)` for normal enablement. |
+| `oc.addAncestors(data, parentId)` | Ancestor data and the id of the ancestor node that receives the existing root. | Inserts ancestor hierarchy; no return value. |
+| `oc.addDescendants(data, parent)` | Array of descendant data and a rendered parent `.node`. | Appends descendant hierarchy; no return value. |
+| `oc.addParent(currentRoot, data)` | Rendered root `.node` and its new parent data. | Wraps the current root with a parent; no return value. |
+| `oc.addSiblings(node, data)`<br>`oc.addChildren(node, data)` | Rendered `.node` and an array of sibling or child data. | Adds rendered nodes; no return value. |
+| `oc.removeNodes(node)` | Rendered `.node` to remove. | Removes the node and its descendants; no return value. |
+| `oc.getHierarchy(includeNodeData)` | Optional boolean, default `false`. | Returns a hierarchy object for tree sources or grouped arrays for family sources; returns an error string when the chart or required node ids are unavailable. |
+| `oc.getNodeState(node, relation)` | Rendered `.node`; `relation` is `parent`, `children`, or `siblings`. | Returns `{ exist, visible }`. |
+| `oc.getParent(node)` | Rendered `.node`. | Returns its parent `.node`, or `null`. |
+| `oc.getChildren(node)`<br>`oc.getSiblings(node)` | Rendered `.node`. | Returns an array of direct child or sibling `.node` elements. |
+| `oc.getRelatedNodes(node, relation)` | Rendered `.node`; `relation` is `parent`, `children`, or `siblings`. | Equivalent generalized query; parent returns a node or `null`, other relations return arrays. |
+| `oc.hideParent(node)` / `oc.showParent(node)`<br>`oc.hideChildren(node)` / `oc.showChildren(node)` | Rendered `.node`. | Hides or reveals the related branch with the chart transition; no return value. |
+| `oc.hideSiblings(node, direction)`<br>`oc.showSiblings(node, direction)` | Rendered `.node`; optional `direction` is `left` or `right`. | Hides or reveals siblings on one side, or all siblings when omitted; no return value. |
+| `oc.setChartScale(chart, multiplier, zoomAnchor)` | Usually pass `oc.chart`; positive relative scale multiplier; optional viewport point `{ x, y }`. | Scales within configured zoom limits and keeps `zoomAnchor` fixed when supplied. |
+| `oc.export(filename, extension)` | Optional filename and `png` or `pdf` extension. | Starts export using configured defaults; returns `false` if the chart cannot be exported. |
+| `oc.exportPNG(canvas, filename)`<br>`oc.exportPDF(canvas, filename, exportScale)` | Prepared canvas; filename; PDF scale defaults to `1`. | Downloads the supplied canvas directly as PNG or PDF; normally call `export()` instead. |
 
 #### init(newOptions)
 It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.
 
+#### setOptions(options) / setOptions(name, value)
+Updates `pan`, `zoom`, `minimap`, zoom limits and export scale/filename/extension without rebuilding the chart. Other options rebuild the chart. Pass a partial options object, or an option name and value. Changes are retained by later `init()` calls; icon defaults are merged field by field. Reacquire node elements after a rebuild.
+
+#### attachMinimap() / detachMinimap()
+Creates or removes the minimap overlay for the current chart. Usually use `setOptions('minimap', true|false)` so the option state and overlay stay synchronized.
+
+#### updateMinimap(forceRefresh)
+Recalculates the minimap viewport after changing the chart transform or layout. Pass `true` to redraw the minimap node preview.
+
 #### addAncestors(data, parentId)
 Adds the ancestors for current orgchart.
 <table>
@@ -520,7 +583,7 @@ Adds the ancestors for current orgchart.
   </tbody>
 </table>
 
-#### addDescendants(data, $parent)
+#### addDescendants(data, parent)
 Adds the descendants for specified parent node.
 <table>
   <thead>
@@ -541,16 +604,16 @@ Adds the descendants for specified parent node.
       <td>datasource for building descendants</td>
     </tr>
     <tr>
-      <td>$parent</td>
-      <td>jquery object</td>
+      <td>parent</td>
+      <td>HTMLElement</td>
       <td>yes</td>
       <td></td>
-      <td>append descendants to the $parent node</td>
+      <td>append descendants to the parent node</td>
     </tr>
   </tbody>
 </table>
 
-#### addParent(data)
+#### addParent(currentRoot, data)
 Adds parent node(actullay it's always root node) for current orgchart.
 <table>
   <thead>
@@ -563,6 +626,13 @@ Adds parent node(actullay it's always root node) for current orgchart.
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>currentRoot</td>
+      <td>HTMLElement</td>
+      <td>yes</td>
+      <td></td>
+      <td>current root node that the new parent node will wrap</td>
+    </tr>
     <tr>
       <td>data</td>
       <td>json object</td>
@@ -573,7 +643,7 @@ Adds parent node(actullay it's always root node) for current orgchart.
   </tbody>
 </table>
 
-#### addSiblings($node, data)
+#### addSiblings(node, data)
 Adds sibling nodes for designated node.
 <table>
   <thead>
@@ -587,8 +657,8 @@ Adds sibling nodes for designated node.
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>yes</td>
       <td></td>
       <td>we'll add sibling nodes based on this node</td>
@@ -603,7 +673,7 @@ Adds sibling nodes for designated node.
   </tbody>
 </table>
 
-#### addChildren($node, data)
+#### addChildren(node, data)
 Adds child nodes for designed node.
 <table>
   <thead>
@@ -617,8 +687,8 @@ Adds child nodes for designed node.
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>yes</td>
       <td></td>
       <td>we'll add child nodes based on this node</td>
@@ -633,7 +703,7 @@ Adds child nodes for designed node.
   </tbody>
 </table>
 
-#### removeNodes($node）
+#### removeNodes(node)
 Removes the designated node and its descedant nodes.
 <table>
   <thead>
@@ -647,8 +717,8 @@ Removes the designated node and its descedant nodes.
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>yes</td>
       <td></td>
       <td>node to be removed</td>
@@ -675,7 +745,7 @@ This method is designed to get the hierarchy relationships of orgchart for furth
   </tr>
 </table>
 
-#### hideParent($node)
+#### hideParent(node)
 This method allows you to hide programatically the parent node of any specific node(.node element), if it has.
 <table>
   <tr>
@@ -686,15 +756,15 @@ This method allows you to hide programatically the parent node of any specific n
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to hide its parent node. Of course, its sibling nodes will be hidden at the same time</td>
+    <td>It is the node element whose parent node should be hidden. Its sibling nodes will be hidden at the same time.</td>
   </tr>
 </table>
 
-#### showParent($node)
+#### showParent(node)
 This method allows you to show programatically the parent node of any specific node(.node element), if it has.
 <table>
   <tr>
@@ -705,15 +775,15 @@ This method allows you to show programatically the parent node of any specific n
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to show its parent node</td>
+    <td>It is the node element whose parent node should be shown</td>
   </tr>
 </table>
 
-#### hideChildren($node)
+#### hideChildren(node)
 This method allows you to hide programatically the children of any specific node(.node element), if it has.
 <table>
   <tr>
@@ -724,15 +794,15 @@ This method allows you to hide programatically the children of any specific node
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to hide its children nodes</td>
+    <td>It is the node element whose child nodes should be hidden</td>
   </tr>
 </table>
 
-#### showChildren($node)
+#### showChildren(node)
 This method allows you to show programatically the children of any specific node(.node element), if it has.
 <table>
   <tr>
@@ -743,15 +813,15 @@ This method allows you to show programatically the children of any specific node
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to show its children nodes</td>
+    <td>It is the node element whose child nodes should be shown</td>
   </tr>
 </table>
 
-#### hideSiblings($node, direction)
+#### hideSiblings(node, direction)
 This method allows you to hide programatically the siblings of any specific node(.node element), if it has.
 <table>
   <tr>
@@ -762,11 +832,11 @@ This method allows you to hide programatically the siblings of any specific node
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to hide its siblings nodes</td>
+    <td>It is the node element whose sibling nodes should be hidden</td>
   </tr>
   <tr>
     <td>direction</td>
@@ -777,7 +847,7 @@ This method allows you to hide programatically the siblings of any specific node
   </tr>
 </table>
 
-#### showSiblings($node, direction)
+#### showSiblings(node, direction)
 This method allows you to show programatically the siblings of any specific node(.node element), if it has.
 <table>
   <tr>
@@ -788,11 +858,11 @@ This method allows you to show programatically the siblings of any specific node
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to show its siblings nodes</td>
+    <td>It is the node element whose sibling nodes should be shown</td>
   </tr>
   <tr>
     <td>direction</td>
@@ -803,7 +873,7 @@ This method allows you to show programatically the siblings of any specific node
   </tr>
 </table>
 
-#### getNodeState($node, relation)
+#### getNodeState(node, relation)
 This method returns you the display state of related node of the specified node.
 <table>
   <tr>
@@ -814,11 +884,11 @@ This method returns you the display state of related node of the specified node.
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to know its related nodes' display state.</td>
+    <td>It is the node element whose related nodes' display state you want to inspect.</td>
   </tr>
   <tr>
     <td>relation</td>
@@ -837,7 +907,7 @@ The returning object will have the following structure:
 }
 ```
 
-#### getRelatedNodes($node, relation)
+#### getRelatedNodes(node, relation)
 This method returns you the nodes related to the specified node.
 <table>
   <tr>
@@ -848,11 +918,11 @@ This method returns you the nodes related to the specified node.
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to know its related nodes</td>
+    <td>It is the node element whose related nodes you want to inspect</td>
   </tr>
   <tr>
     <td>relation</td>
@@ -863,7 +933,7 @@ This method returns you the nodes related to the specified node.
   </tr>
 </table>
 
-#### getParent($node)
+#### getParent(node)
 This method returns you the parent node of the specified node.
 <table>
   <tr>
@@ -874,15 +944,15 @@ This method returns you the parent node of the specified node.
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to know its parent node</td>
+    <td>It is the node element whose parent node you want to inspect</td>
   </tr>
 </table>
 
-#### getSiblings($node)
+#### getSiblings(node)
 This method returns you the sibling nodes of the specified node.
 <table>
   <tr>
@@ -893,15 +963,15 @@ This method returns you the sibling nodes of the specified node.
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to know its sibling nodes</td>
+    <td>It is the node element whose sibling nodes you want to inspect</td>
   </tr>
 </table>
 
-#### getChildren($node)
+#### getChildren(node)
 This method returns you the child nodes of the specified node.
 <table>
   <tr>
@@ -912,16 +982,18 @@ This method returns you the child nodes of the specified node.
     <th>Description</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's the desired JQuery Object to know its child nodes</td>
+    <td>It is the node element whose child nodes you want to inspect</td>
   </tr>
 </table>
 
-#### setChartScale($chart, newScale)
+#### setChartScale(chart, newScale, zoomAnchor)
 This method helps you set the specified chart with new scale.
+
+`zoomAnchor` is optional and has the form `{ x, y }` in viewport coordinates. When provided, that point remains fixed while the chart is scaled.
 <table>
   <tr>
     <th>Name</th>
@@ -931,11 +1003,11 @@ This method helps you set the specified chart with new scale.
     <th>Description</th>
   </tr>
   <tr>
-    <td>$chart</td>
-    <td>JQuery Object</td>
+    <td>chart</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td></td>
-    <td>It's a chart in your chart-container</td>
+    <td>It is the chart element in your chart-container</td>
   </tr>
   <tr>
     <td>newScale</td>
@@ -972,7 +1044,21 @@ This method allow you to export current orgchart as png or pdf file.
   </tr>
 </table>
 
+#### exportPNG(canvas, exportFilename)
+Exports a prepared canvas as a PNG download. This helper is useful when application code supplies its own canvas; most users should call `export()` instead.
+
+#### exportPDF(canvas, exportFilename, exportScale)
+Exports a prepared canvas as a PDF download. `exportScale` is the canvas render scale and is used to preserve the PDF's logical dimensions; most users should call `export()` instead.
+
 ### Events
+OrgChart dispatches bubbling native `CustomEvent` objects. Subscribe with `addEventListener`; event payloads are available on `event.detail`.
+
+```js
+oc.chart.addEventListener('nodedrop.orgchart', function (event) {
+  const { draggedNode, dragZone, dropZone } = event.detail;
+});
+```
+
 <table>
   <thead>
     <tr>
@@ -984,23 +1070,28 @@ This method allow you to export current orgchart as png or pdf file.
   <tbody>
     <tr>
       <td>nodedrop.orgchart</td>
-      <td>draggedNode, dragZone, dropZone</td>
-      <td>The event's handler is where you can place your customized function after node drop over. For more details, please refer to <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>Fires on the chart before a node is moved. Call <code>event.preventDefault()</code> to cancel the drop.</td>
+    </tr>
+    <tr>
+      <td>otherdropped.orgchart</td>
+      <td><code>event.detail</code>: draggedItem, dropZone</td>
+      <td>Fires on the chart when a non-OrgChart draggable item is dropped onto a node.</td>
     </tr>
     <tr>
       <td>init.orgchart</td>
-      <td>chart</td>
-      <td>Initialisation complete event - fired when Organization Chart has been fully initialised and data loaded.</td>
+      <td>None; <code>event.target</code> is the chart element</td>
+      <td>Fires after the chart has been rendered.</td>
     </tr>
     <tr>
       <td>show-[relation].orgchart</td>
       <td></td>
-      <td>This event is fired when related nodes of a node become visible.</td>
+      <td>Fires on the node when related nodes become visible. <code>relation</code> is parent, children, or siblings.</td>
     </tr>
     <tr>
       <td>hide-[relation].orgchart</td>
       <td></td>
-      <td>This event if fired when related nodes of a node are collapsed.</td>
+      <td>Fires on the node when related nodes are hidden. <code>relation</code> is parent, children, or siblings.</td>
     </tr>
   </tbody>
 </table>
@@ -1011,9 +1102,9 @@ This use case is inspired by the [issue](https://github.com/dabeng/OrgChart/issu
 
 Users can enable/disable exapand/collapse feature with className "noncollapsable" as shown below.
 ```js
-$('.orgchart').addClass('noncollapsable'); // deactivate
+oc.chart.classList.add('noncollapsable'); // deactivate
 
-$('.orgchart').removeClass('noncollapsable'); // activate
+oc.chart.classList.remove('noncollapsable'); // activate
 ```
 
 #### Why is the root node gone?
@@ -1022,7 +1113,7 @@ For details, please refer to the [issue](https://github.com/dabeng/OrgChart/issu
 
 Users can embed any clear up logics into the click handler of the reset buttton as shown below.
 ```js
-$('.orgchart').css('transform',''); // remove the tansform settings
+oc.chart.style.transform = ''; // remove transform settings
 ```
 
 ## Browser Compatibility