{"id":13627214,"url":"https://github.com/dabeng/OrgChart-Webcomponents","last_synced_at":"2025-04-16T19:31:21.014Z","repository":{"id":16987530,"uuid":"77022907","full_name":"dabeng/OrgChart-Webcomponents","owner":"dabeng","description":"It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.","archived":false,"fork":false,"pushed_at":"2023-12-17T05:47:40.000Z","size":8426,"stargazers_count":120,"open_issues_count":14,"forks_count":61,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-07T22:22:26.722Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-12-21T06:04:09.000Z","updated_at":"2025-03-28T00:48:51.000Z","dependencies_parsed_at":"2024-04-16T11:05:31.640Z","dependency_job_id":null,"html_url":"https://github.com/dabeng/OrgChart-Webcomponents","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart-Webcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart-Webcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart-Webcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart-Webcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabeng","download_url":"https://codeload.github.com/dabeng/OrgChart-Webcomponents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249268551,"owners_count":21240942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T22:00:31.459Z","updated_at":"2025-04-16T19:31:16.004Z","avatar_url":"https://github.com/dabeng.png","language":"JavaScript","readme":"![OrgChart](http://dabeng.github.io/OrgChart-Webcomponents/img/orgchart-heading.png)\n\n# [jQuery Version](http://github.com/dabeng/OrgChart)\n# [ES6 Version](http://github.com/dabeng/OrgChart-Webcomponents)\n# [Vue.js Version](https://github.com/dabeng/vue-orgchart)\n# [Angular Version](https://github.com/dabeng/ng-orgchart)\n# [React Version](https://github.com/dabeng/react-orgchart)\n\n## Foreword\n- First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg.\n- 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.\n- Font Awesome provides us with administration icon, second level menu icon and loading spinner.\n\n## Features\n- Supports both local data and remote data (JSON).\n- Smooth expand/collapse effects based on CSS3 transitions.\n- Align the chart in 4 orientations.\n- Allows user to change orgchart structure by drag/drop nodes.\n- Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.\n- Supports exporting chart as a picture.\n- Supports pan and zoom\n- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)\n- touch-enabled plugin for mobile divice\n\n## Getting started\n### Build\n    npm install\n    gulp build\n### Serve\n    gulp serve\nNow, you can try out all the demos on http://localhost:3000.\n\n**Note**: your nodejs version should be 4+.\n\n## Demo\n- **[using ul datasource](http://dabeng.github.io/OrgChart-Webcomponents/ul-datasource/)**(this feature comes from [Tobyee's good idea:blush:](https://github.com/dabeng/OrgChart/issues/1))\n```html\n\u003c!-- wrap the text node with \u003ca href=\"#\"\u003e , \u003cspan\u003e, blabla is also OK. Note:text node must immediately follow the \u003cli\u003e tag, with no intervening characters of any kind.  --\u003e\n\u003cul id=\"ul-data\"\u003e\n  \u003cli\u003eLao Lao\n    \u003cul\u003e\n      \u003cli\u003eBo Miao\u003c/li\u003e\n      \u003cli\u003eSu Miao\n        \u003cul\u003e\n          \u003cli\u003eTie Hua\u003c/li\u003e\n          \u003cli\u003eHei Hei\n            \u003cul\u003e\n              \u003cli\u003ePang Pang\u003c/li\u003e\n              \u003cli\u003eXiang Xiang\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n```js\nlet orgchart = new OrgChart({\n  'data' : '#ul-data'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![ul datasource](http://dabeng.github.io/OrgChart-Webcomponents/ul-datasource/snapshot.png)\n\n- **[using local datasource](http://dabeng.github.io/OrgChart-Webcomponents/local-datasource/)**\n```js\nlet datascource = {\n  'name': 'Lao Lao',\n  'title': 'general manager',\n  'children': [\n    { 'name': 'Bo Miao', 'title': 'department manager' },\n    { 'name': 'Su Miao', 'title': 'department manager',\n      'children': [\n        { 'name': 'Tie Hua', 'title': 'senior engineer' },\n        { 'name': 'Hei Hei', 'title': 'senior engineer',\n          'children': [\n            { 'name': 'Pang Pang', 'title': 'engineer' },\n            { 'name': 'Xiang Xiang', 'title': 'UE engineer' }\n          ]\n        }\n      ]\n    },\n    { 'name': 'Yu Jie', 'title': 'department manager' },\n    { 'name': 'Yu Li', 'title': 'department manager' },\n    { 'name': 'Hong Miao', 'title': 'department manager' },\n    { 'name': 'Yu Wei', 'title': 'department manager' },\n    { 'name': 'Chun Miao', 'title': 'department manager' },\n    { 'name': 'Yu Tie', 'title': 'department manager' }\n  ]\n},\norgchart = new OrgChart({\n  'data' : datascource,\n  'depth': 2,\n  'nodeContent': 'title'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![local datasource](http://dabeng.github.io/OrgChart-Webcomponents/local-datasource/recorder.gif)\n\n- **[I wanna pan\u0026zoom the orgchart](http://dabeng.github.io/OrgChart-Webcomponents/pan-zoom/)**\n\n![pan \u0026 zoom](http://dabeng.github.io/OrgChart-Webcomponents/pan-zoom/recorder.gif)\n\n- **I wanna align orgchart with different orientation**(this feature comes from [the good idea of fvlima and badulesia :blush:](https://github.com/dabeng/OrgChart/issues/5))\n\n  Top to Bottom -- default direction, as you can see all other examples on this page.\n\n  [Bottom to Top](http://dabeng.github.io/OrgChart-Webcomponents/direction/bottom2top)\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'direction': 'b2t'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![Bottom to Top](http://dabeng.github.io/OrgChart-Webcomponents/direction/b2t.png)\n\n  [Left to Right](http://dabeng.github.io/OrgChart-Webcomponents/direction/left2right)\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'direction': 'l2r'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![Left to Right](http://dabeng.github.io/OrgChart-Webcomponents/direction/l2r.png)\n\n  [Right to Left](http://dabeng.github.io/OrgChart-Webcomponents/direction/right2left)\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'direction': 'r2l'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![Right to Left](http://dabeng.github.io/OrgChart-Webcomponents/direction/r2l.png)\n\n- **[I wanna show/hide left/right sibling nodes respectively by clicking left/right arrow](http://dabeng.github.io/OrgChart-Webcomponents/toggle-sibs-resp/)**\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'toggleSiblingsResp': true\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![toggle siblings respectively](http://dabeng.github.io/OrgChart-Webcomponents/toggle-sibs-resp/recorder.gif)\n\n- **[I wanna load datasource through ajax](http://dabeng.github.io/OrgChart-Webcomponents/ajax-datasource/)**\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : '/orgchart/initdata',\n  'depth': 2,\n  'nodeContent': 'title'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![ajax datasource](http://dabeng.github.io/OrgChart-Webcomponents/ajax-datasource/recorder.gif)\n\n- **[I wanna load data on-demand](http://dabeng.github.io/OrgChart-Webcomponents/ondemand-loading-data/)**\n\nNote: when users use ajaxURL option to build orghchart, they must use json datasource(both local and remote are OK) and set the relationship property of datasource by themselves. All of these staff are used to generate the correct expanding/collapsing arrows for nodes.\n```js\n// sample of core source code\nlet datascource = {\n  'id': '1',\n  'name': 'Su Miao',\n  'title': 'department manager',\n  'relationship': '111',\n  'children': [\n    { 'id': '2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },\n    { 'id': '3','name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '111' }\n  ]\n},\najaxURLs = {\n  'children': '/orgchart/children/',\n  'parent': '/orgchart/parent/',\n  'siblings': function(nodeData) {\n    return '/orgchart/siblings/' + nodeData.id;\n  },\n  'families': function(nodeData) {\n    return '/orgchart/families/' + nodeData.id;\n  }\n},\norgchart = new OrgChart({\n  'data' : datascource,\n  'ajaxURL': ajaxURLs,\n  'nodeContent': 'title',\n  'nodeId': 'id'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![on-demand loading data](http://dabeng.github.io/OrgChart-Webcomponents/ondemand-loading-data/recorder.gif)\n\n- **[I wanna customize the structure of node](http://dabeng.github.io/OrgChart-Webcomponents/option-createNode/)**\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'depth': 2,\n  'nodeContent': 'title',\n  'nodeID': 'id',\n  'createNode': function(node, data) {\n    let secondMenuIcon = document.createElement('i'),\n      secondMenu = document.createElement('div');\n\n    secondMenuIcon.setAttribute('class', 'fa fa-info-circle second-menu-icon');\n    secondMenuIcon.addEventListener('click', (event) =\u003e {\n      event.target.nextElementSibling.classList.toggle('hidden');\n    });\n    secondMenu.setAttribute('class', 'second-menu hidden');\n    secondMenu.innerHTML = `\u003cimg class=\"avatar\" src=\"../img/avatar/${data.id}.jpg\"\u003e`;\n    node.appendChild(secondMenuIcon)\n    node.appendChild(secondMenu);\n  }\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![option--createNode](http://dabeng.github.io/OrgChart-Webcomponents/option-createNode/recorder.gif)\n\n- **[I wanna export the organization chart as a picture](http://dabeng.github.io/OrgChart-Webcomponents/export-orgchart/)**\n\nHere, we need the help from [html2canvas](https://github.com/niklasvh/html2canvas).\n```js\n// sample of core source code\nfunction clickExportButton() {\n  let chartContainer = document.querySelector('#chart-container'),\n    mask = chartContainer.querySelector(':scope \u003e .mask'),\n    sourceChart = chartContainer.querySelector('org-chart:not(.hidden)'),\n    flag = sourceChart.classList.contains('l2r') || sourceChart.classList.contains('r2l');\n\n  if (!mask) {\n    mask = document.createElement('div');\n    mask.setAttribute('class', 'mask');\n    mask.innerHTML = `\u003ci class=\"fa fa-circle-o-notch fa-spin spinner\"\u003e\u003c/i\u003e`;\n    chartContainer.appendChild(mask);\n  } else {\n    mask.classList.remove('hidden');\n  }\n  chartContainer.classList.add('canvasContainer');\n  window.html2canvas(sourceChart, {\n    'width': flag ? sourceChart.clientHeight : sourceChart.clientWidth,\n    'height': flag ? sourceChart.clientWidth : sourceChart.clientHeight,\n    'onclone': function (cloneDoc) {\n      let canvasContainer = cloneDoc.querySelector('.canvasContainer');\n\n      canvasContainer.style.overflow = 'visible';\n      canvasContainer.querySelector('org-chart:not(.hidden)').transform = '';\n    }\n  })\n  .then((canvas) =\u003e {\n    let downloadBtn = chartContainer.querySelector('.oc-download-btn');\n\n    chartContainer.querySelector('.mask').classList.add('hidden');\n    downloadBtn.setAttribute('href', canvas.toDataURL());\n    downloadBtn.click();\n  })\n  .catch((err) =\u003e {\n    console.error('Failed to export the curent orgchart!', err);\n  })\n  .finally(() =\u003e {\n    chartContainer.classList.remove('canvasContainer');\n  });\n}\n\ndocument.addEventListener('DOMContentLoaded', function () {\n\n  let orgchart = new OrgChart({\n    'data' : datascource,\n    'depth': 2,\n    'nodeContent': 'title'\n  }),\n  chartContainer = document.querySelector('#chart-container');\n\n  chartContainer.appendChild(orgchart);\n  // append the export button to the chart-container\n  let exportBtn = document.createElement('button'),\n    downloadBtn = document.createElement('a');\n\n  exportBtn.setAttribute('class', 'oc-export-btn');\n  exportBtn.innerHTML = 'Export';\n  exportBtn.addEventListener('click', clickExportButton);\n  downloadBtn.setAttribute('class', 'oc-download-btn');\n  downloadBtn.setAttribute('download', 'MyOrgChart.png');\n  chartContainer.appendChild(exportBtn);\n  chartContainer.appendChild(downloadBtn);\n});\n```\n![export orgchart](http://dabeng.github.io/OrgChart-Webcomponents/export-orgchart/recorder.gif)\n\n- **[I wanna itegrate organization chart with geographic information](http://dabeng.github.io/OrgChart-Webcomponents/integrate-map/)**\n\nHere, we fall back on [OpenLayers](https://github.com/openlayers/ol3). It's the most aewsome open-source js library for Web GIS you sholdn't miss.\n```js\n// sample of core source code\nlet map = new ol.Map({\n  layers: [\n    new ol.layer.Tile({\n      source: new ol.source.Stamen({\n        layer: 'watercolor'\n      }),\n      preload: 4\n    }),\n    new ol.layer.Tile({\n      source: new ol.source.Stamen({\n        layer: 'terrain-labels'\n      }),\n      preload: 1\n    })\n  ],\n  target: 'pageBody',\n  view: new ol.View({\n    center: ol.proj.transform([-87.6297980, 41.8781140], 'EPSG:4326', 'EPSG:3857'),\n    zoom: 10\n  })\n});\n\ndocument.body.insertBefore(document.querySelector('#chart-container'), map.getViewport());\n\nlet datascource = {\n  'name': 'Lao Lao',\n  'title': 'President Office',\n  'position': [-87.6297980, 41.8781140],\n  'children': [\n    { 'name': 'Bo Miao', 'title': 'Administration  Dept.', 'position': [-83.0457540, 42.3314270]},\n        { 'name': 'Su Miao', 'title': 'R \u0026 D Dept.', 'position': [-81.6943610, 41.4993200]},\n        { 'name': 'Yu Jie', 'title': 'Product Dept.', 'position': [-71.0588800, 42.3600820]},\n        { 'name': 'Yu Li', 'title': 'Legal Dept.', 'position': [-74.0059410, 40.7127840]},\n        { 'name': 'Hong Miao', 'title': 'Finance Dept.', 'position': [-80.8431270, 35.2270870]},\n        { 'name': 'Yu Wei', 'title': 'Security Dept.', 'position': [-81.6556510, 30.3321840]},\n        { 'name': 'Chun Miao', 'title': 'HR Dept. ', 'position': [-81.3792360, 28.5383350]},\n        { 'name': 'Yu Tie', 'title': 'Marketing Dept.', 'position': [-80.1917900, 25.7616800] }\n  ]\n},\norgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'createNode': function(node, data) {\n    node.addEventListener('click', () =\u003e {\n      let view = map.getView(),\n        duration = 2000,\n        start = +new Date(),\n        pan = ol.animation.pan({\n          'duration': duration,\n          'source':  view.getCenter(),\n          'start': start\n        }),\n        bounce = ol.animation.bounce({\n          'duration': duration,\n          'resolution': 4 * view.getResolution(),\n          'start': start\n        });\n\n      map.beforeRender(pan, bounce);\n      view.setCenter(ol.proj.transform(data.position, 'EPSG:4326', 'EPSG:3857'));\n    });\n  }\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![integrate map](http://dabeng.github.io/OrgChart-Webcomponents/integrate-map/recorder.gif)\n\n- **[I wanna edit orgchart](http://dabeng.github.io/OrgChart-Webcomponents/edit-orgchart/)**\n\nWith the help of exposed core methods(addParent(), addSiblings(), addChildren(), removeNodes()) of orgchart plugin, we can finish this task easily.\n```js\nfunction addNodes(orgchart) {\n  let nodeVals = [];\n\n  Array.from(document.getElementById('new-nodelist').querySelectorAll('.new-node'))\n    .forEach(item =\u003e {\n      let validVal = item.value.trim();\n        \n      if (validVal) {\n        nodeVals.push(validVal);\n      }\n    });\n  let selectedNode = document.getElementById(document.getElementById('selected-node').dataset.node);\n\n  if (!nodeVals.length) {\n    alert('Please input value for new node');\n    return;\n  }\n  let nodeType = document.querySelector('input[name=\"node-type\"]:checked');\n\n  if (!nodeType) {\n    alert('Please select a node type');\n    return;\n  }\n  if (nodeType.value !== 'parent' \u0026\u0026 !document.querySelector('.orgchart')) {\n    alert('Please creat the root node firstly when you want to build up the orgchart from the scratch');\n    return;\n  }\n  if (nodeType.value !== 'parent' \u0026\u0026 !selectedNode) {\n    alert('Please select one node in orgchart');\n    return;\n  }\n\n  if (nodeType.value === 'parent') {\n    if (!document.querySelector('#chart-container').children.length) {// if the original chart has been deleted\n      orgchart = new OrgChart({\n        'data' : { 'name': nodeVals[0] },\n        'exportButton': true,\n        'exportFilename': 'SportsChart',\n        'parentNodeSymbol': 'fa-th-large',\n        'createNode': function(node, data) {\n          node.id = getId();\n        }\n      });\n      orgchart.chart.classList.add('view-state');\n    } else {\n      orgchart.addParent(orgchart.querySelector('.node'), { 'name': nodeVals[0], 'Id': getId() });\n    }\n  } else if (nodeType.value === 'siblings') {\n    orgchart.addSiblings(selectedNode, {\n      'siblings': nodeVals.map(item =\u003e {\n        return { 'name': item, 'relationship': '110', 'Id': getId() };\n      })\n    });\n  } else {\n    let hasChild = selectedNode.parentNode.colSpan \u003e 1;\n\n    if (!hasChild) {\n      let rel = nodeVals.length \u003e 1 ? '110' : '100';\n\n      orgchart.addChildren(selectedNode, {\n        'children': nodeVals.map(item =\u003e {\n          return { 'name': item, 'relationship': rel, 'Id': getId() };\n        })\n      });\n    } else {\n      orgchart.addSiblings(closest(selectedNode, el =\u003e el.nodeName === 'TABLE').querySelector('.nodes').querySelector('.node'),\n        { 'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110', 'Id': getId() }; })\n      });\n    }\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', function () {\n  let orgchart,\n    datascource = {\n      'name': 'Ball game',\n      'children': [\n        { 'name': 'Football' },\n        { 'name': 'Basketball' },\n        { 'name': 'Volleyball' }\n      ]\n    };\n\n  orgchart = new OrgChart({\n    'data' : datascource,\n    'exportButton': true,\n    'exportFilename': 'SportsChart',\n    'parentNodeSymbol': 'fa-th-large',\n    'createNode': function(node, data) {\n      node.id = getId();\n    }\n  });\n  document.querySelector('#chart-container').appendChild(orgchart);\n\n  bindEventHandler('.node', 'click', clickNode, '#chart-container');\n  bindEventHandler('org-chart', 'click', clickChart, '#chart-container');\n  bindEventHandler('input[name=\"chart-state\"]', 'click', toggleViewState);\n  bindEventHandler('input[name=\"node-type\"]', 'click', toggleNodeType);\n  document.getElementById('btn-add-input').addEventListener('click', addInputs);\n  document.getElementById('btn-remove-input').addEventListener('click', removeInputs);\n  document.getElementById('btn-add-nodes').addEventListener('click', () =\u003e addNodes(orgchart));\n  document.getElementById('btn-delete-nodes').addEventListener('click', () =\u003e deleteNodes(orgchart));\n  document.getElementById('btn-reset').addEventListener('click', resetPanel);\n\n});\n```\n![edit orgchart](http://dabeng.github.io/OrgChart-Webcomponents/edit-orgchart/recorder.gif)\n\n- **[I wanna drag \u0026 drop the nodes of orgchart](http://dabeng.github.io/OrgChart-Webcomponents/drag-drop/)**\n\nUsers are allowed to drag \u0026 drop the nodes of orgchart when option \"draggable\" is assigned to true(**Note**: this feature doesn't work on IE due to its poor support for HTML5 drag \u0026 drop API).\n\n![drag \u0026 drop](http://dabeng.github.io/OrgChart-Webcomponents/drag-drop/recorder.gif)\n\nFurthermore, users can make use of option dropCriteria to inject their custom limitations on drag \u0026 drop. As shown below, we don't want an manager employee to be under a engineer under no circumstance.\n```js\n// sample of core source code\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'draggable': true,\n  'dropCriteria': function(draggedNode, dragZone, dropZone) {\n    if(draggedNode.querySelector(':scope \u003e .content').textContent.includes('manager') \u0026\u0026\n      dropZone.querySelector(':scope \u003e .content').textContent.includes('engineer')) {\n      return false;\n    }\n    return true;\n  }\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n\n- **[I want a method that can decribe the hierarchy of orgchart](http://dabeng.github.io/OrgChart-Webcomponents/get-hierarchy/)**\n\nThat's where getHierarchy() comes in.\n```html\n\u003cul id=\"ul-data\"\u003e\n  \u003cli id=\"1\"\u003eLao Lao\n    \u003cul\u003e\n      \u003cli id=\"2\"\u003eBo Miao\u003c/li\u003e\n      \u003cli id=\"3\"\u003eSu Miao\n        \u003cul\u003e\n          \u003cli id=\"4\"\u003eTie Hua\u003c/li\u003e\n          \u003cli id=\"5\"\u003eHei Hei\n            \u003cul\u003e\n              \u003cli id=\"6\"\u003ePang Pang\u003c/li\u003e\n              \u003cli id=\"7\"\u003eXiang Xiang\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n```js\nlet orgchart = new OrgChart({\n  'chartContainer': '#chart-container',\n  'data' : '#ul-data'\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\ndocument.querySelector('#btn-export-hier').addEventListener('click', () =\u003e {\n  if (!document.querySelector('pre')) {\n    let pre = document.createElement('pre'), \n      hierarchy = orgchart.getHierarchy();\n\n    pre.innerHTML = JSON.stringify(hierarchy, null, 2);\n    document.querySelector('body').insertBefore(pre, document.querySelector('.home-link'));\n  }\n});\n```\n![get hierarchy](http://dabeng.github.io/OrgChart-Webcomponents/get-hierarchy/snapshot.png)\n\n- **[I want a color-coded chart](http://dabeng.github.io/OrgChart-Webcomponents/color-coded/)**\n\nIt's a so easy task, we just need to append id or className property to node data.\n```js\nlet datasource = {\n  'name': 'Lao Lao',\n  'title': 'general manager',\n  'className': 'top-level',\n  'children': [\n    { 'name': 'Bo Miao', 'title': 'department manager', 'className': 'middle-level',\n      'children': [\n        { 'name': 'Li Jing', 'title': 'senior engineer', 'className': 'bottom-level' },\n        { 'name': 'Li Xin', 'title': 'senior engineer', 'className': 'bottom-level' }\n      ]\n    }\n  };\n```\n```css\n.orgchart .top-level .title {\n  background-color: #006699;\n}\n.orgchart .top-level .content {\n  border-color: #006699;\n}\n.orgchart .middle-level .title {\n  background-color: #009933;\n}\n.orgchart .middle-level .content {\n  border-color: #009933;\n}\n.orgchart .bottom-level .title {\n  background-color: #993366;\n}\n.orgchart .bottom-level .content {\n  border-color: #993366;\n}\n```\n![color coded](http://dabeng.github.io/OrgChart-Webcomponents/color-coded/snapshot.png)\n\n- **[I want a multiple-layers chart](http://dabeng.github.io/OrgChart-Webcomponents/multiple-layers/)**\n\nIn fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.\n\n![multiple layers](http://dabeng.github.io/OrgChart-Webcomponents/multiple-layers/recorder.gif)\n\n- **[I want a hybrid(horizontal + vertical) chart](http://dabeng.github.io/OrgChart-Webcomponents/vertical-depth/)**\n\nThis feature is inspired by the issues([Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)). Thank [mfahadi](https://github.com/mfahadi) and [Destructrix](https://github.com/Destructrix) for their constructive suggestions:blush:\n\nFrom now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option \"verticalDepth\" allows users to align child nodes vertically from the given depth.\n\n**Note**: currently, this option is incompatible with many other options or methods, like direction, drag\u0026drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.\n\n```js\nlet orgchart = new OrgChart({\n  'data' : datascource,\n  'nodeContent': 'title',\n  'verticalDepth': 3, // From the 3th level of orgchart, nodes will be aligned vertically.\n  'depth': 4\n});\ndocument.querySelector('#chart-container').appendChild(orgchart);\n```\n![hybrid layout](http://dabeng.github.io/OrgChart-Webcomponents/vertical-depth/snapshot.png)\n\n## Usage\n\n### Instantiation Statement\n```js\nlet orgchart = new OrgChart(options);\n```\n\n### Structure of Datasource\n```js\n{\n  'id': 'rootNode', // It's a optional property which will be used as id attribute of node\n  // and data-parent attribute, which contains the id of the parent node\n  'className': 'top-level', // It's a optional property which will be used as className attribute of node.\n  'nodeTitlePro': 'Lao Lao',\n  'nodeContentPro': 'general manager',\n  'relationship': relationshipValue, // Note: when you activate ondemand loading nodes feature,\n  // you should use json datsource (local or remote) and set this property.\n  // This property implies that whether this node has parent node, siblings nodes or children nodes.\n  // relationshipValue is a string composed of three \"0/1\" identifier.\n  // First character stands for wether current node has parent node;\n  // Scond character stands for wether current node has siblings nodes;\n  // Third character stands for wether current node has children node.\n  'children': [ // The property stands for nested nodes. \"children\" is just default name you can override.\n    { 'nodeTitlePro': 'Bo Miao', 'nodeContentPro': 'department manager', 'relationship': '110' },\n    { 'nodeTitlePro': 'Su Miao', 'nodeContentPro': 'department manager', 'relationship': '111',\n      'children': [\n        { 'nodeTitlePro': 'Tie Hua', 'nodeContentPro': 'senior engineer', 'relationship': '110' },\n        { 'nodeTitlePro': 'Hei Hei', 'nodeContentPro': 'senior engineer', 'relationship': '110' }\n      ]\n    },\n    { 'nodeTitlePro': 'Yu Jie', 'nodeContentPro': 'department manager', 'relationship': '110' }\n  ],\n  'otherPro': anyValue\n};\n```\n\n### Options\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eRequired\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echartContainer\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eselector usded to query the wrapper element of orgchart. It could be an id or an unique className. Note: when you want to enable pan\u0026zoom option, you must set \"chartContainer\" option at the same time.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\u003ctd\u003ejson or string\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003edatasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epan\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eUsers could pan the orgchart by mouse drag\u0026drop if they enable this option.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoom\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eUsers could zoomin/zoomout the orgchart by mouse wheel if they enable this option.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edirection\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\"t2b\"\u003c/td\u003e\u003ctd\u003eThe available values are t2b(implies \"top to bottom\", it's default value), b2t(implies \"bottom to top\"), l2r(implies \"left to right\"), r2l(implies \"right to left\").\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003everticalDepth\u003c/td\u003e\u003ctd\u003einteger\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eUsers can make use of this option to align the nodes vertically from the specified depth.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etoggleSiblingsResp\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eOnce enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eajaxURL\u003c/td\u003e\u003ctd\u003ejson\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eIt inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edepth\u003c/td\u003e\u003ctd\u003epositive integer\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e999\u003c/td\u003e\u003ctd\u003eIt indicates the level that at the very beginning orgchart is expanded to.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeTitle\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\"name\"\u003c/td\u003e\u003ctd\u003eIt 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.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eparentNodeSymbol\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\"fa-users\"\u003c/td\u003e\u003ctd\u003eUsing font awesome icon to imply that the node has child nodes.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeContent\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eIt sets one property of datasource as text content of content section of orgchart node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeId\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\"id\"\u003c/td\u003e\u003ctd\u003eIt sets one property of datasource as unique identifier of every orgchart node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecreateNode\u003c/td\u003e\u003ctd\u003efunction\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eIt's a callback function used to customize every orgchart node. It recieves two parament: \"$node\" stands for jquery object of single node div; \"data\" stands for datasource of single node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eexportButton\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eIt enable the export button for orgchart.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eexportFilename\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\"Orgchart\"\u003c/td\u003e\u003ctd\u003eIt's filename when you export current orgchart as a picture.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echartClass\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\"\"\u003c/td\u003e\u003ctd\u003ewhen you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edraggable\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003efalse\u003c/td\u003e\u003ctd\u003eUsers can drag \u0026 drop the nodes of orgchart if they enable this option. **Note**: this feature doesn't work on IE due to its poor support for HTML5 drag \u0026 drop API.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edropCriteria\u003c/td\u003e\u003ctd\u003efunction\u003c/td\u003e\u003ctd\u003eno\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eUsers can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Methods\nI'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-Webcomponents/edit-orgchart/).\n##### let orgchart = new OrgChart(options);\nEmbeds an organization chart in designated container. Accepts an options object and you can go through the \"options\" section to find which options are required.\n##### .addParent(root, data)\nAdds parent node(actullay it's always root node) for current orgchart.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eRequired\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\u003ctd\u003eroot\u003c/td\u003e\u003ctd\u003edom node\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003eroot node of designated orgchart\u003c/td\u003e\u003ctd\u003eoptions used for overriding initial options\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003edata\u003c/td\u003e\u003ctd\u003ejson object\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003edatasource for building root node\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n##### .addSiblings(node, data)\nAdds sibling nodes for designated node.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eRequired\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\u003ctd\u003enode\u003c/td\u003e\u003ctd\u003edom node\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003ewe'll add sibling nodes based on this node\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003edata\u003c/td\u003e\u003ctd\u003ejson object\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003edatasource for building sibling nodes\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n##### .addChildren(node, data）\nAdds child nodes for designed node.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eRequired\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\u003ctd\u003enode\u003c/td\u003e\u003ctd\u003edom node\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003ewe'll add child nodes based on this node\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003edata\u003c/td\u003e\u003ctd\u003ejson object\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003edatasource for building child nodes\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n##### .removeNodes(node）\nRemoves the designated node and its descedant nodes.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eType\u003c/th\u003e\u003cth\u003eRequired\u003c/th\u003e\u003cth\u003eDefault\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\u003ctd\u003enode\u003c/td\u003e\u003ctd\u003edom node\u003c/td\u003e\u003ctd\u003eyes\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003enode to be removed\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n##### .getHierarchy()\nThis method is designed to get the hierarchy relationships of orgchart for further processing. For example, after editing the orgchart, you could send the returned value of this method to server-side and save the new state of orghcart.\n##### .hideChildren(node)\nThis method allows you to hide programatically the children of any specific node(.node element), if it has\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003edom node\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003eIt's the desired dom node that we'll hide its children nodes\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n##### .showChildren(node)\nThis method allows you to show programatically the children of any specific node(.node element), if it has\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003edom node\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003eIt's the desired dom node that we'll show its children nodes\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n##### .hideSiblings(node, direction)\nThis method allows you to hide programatically the siblings of any specific node(.node element), if it has\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003edom node\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003eIt's the desired dom node that we'll hide its siblings nodes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edirection\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003ePossible values:\"left\",\"rigth\". Specifies if hide the siblings at left or rigth. If not defined hide both of them.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n##### .showSiblings(node, direction)\nThis method allows you to show programatically the siblings of any specific node(.node element), if it has\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003edom node\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003eIt's the desired dom node that we'll show its siblings nodes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edirection\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003ePossible values:\"left\",\"rigth\". Specifies if hide the siblings at left or rigth. If not defined hide both of them.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n##### .getNodeState(node, relation)\nThis method returns you the display state of the related nodes.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003edom node\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003eIt's the desired dom node that we wanna know its related nodes' display state.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003erelation\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003ePossible values: \"parent\", \"children\" and \"siblings\". Specifies the desired relation to return.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\nThe returning object will have the next structure:\n```js\n{\n  \"exists\": true|false,  //Indicates if has parent|children|siblings\n  \"visible\":true|false,  //Indicates if the related nodes are visible\n}\n```\n##### .getRelatedNodes(node, relation)\nThis method returns you the nodes related to the specified node\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enode\u003c/td\u003e\n    \u003ctd\u003edom node\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003eIt's the desired that we wanna get its related nodes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003erelation\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003eNone\u003c/td\u003e\n    \u003ctd\u003ePossible values: \"parent\", \"children\" and \"siblings\". Specifies the desired relation to return.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Events\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\u003cth\u003eEvent Type\u003c/th\u003e\u003cth\u003eAttached Data\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\u003ctd\u003enodedropped.orgchart\u003c/td\u003e\u003ctd\u003edraggedNode, dragZone, dropZone\u003c/td\u003e\u003ctd\u003eThe event's handler is where you can place your customized function after node drop over. For more details, please refer to \u003ca target=\"_blank\" href=\"http://dabeng.github.io/OrgChart-Webcomponents/drag-drop/\"\u003eexample drag \u0026 drop\u003c/a\u003e.\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n","funding_links":[],"categories":["DevTools"],"sub_categories":["Languages"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabeng%2FOrgChart-Webcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabeng%2FOrgChart-Webcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabeng%2FOrgChart-Webcomponents/lists"}