orgchart 6.0.0 → 7.0.0

package/src/js/orgchart.js

@@ -18,6 +18,7 @@
   }
 }(function (window, document, undefined) {
   const elementDataStore = new WeakMap();
+  const nodeLayoutStore = new WeakMap();
   const getWindow = () => (typeof globalThis !== 'undefined' && globalThis.window ? globalThis.window : window);
   const getDocument = () => {
     const currentWindow = getWindow();
@@ -41,10 +42,128 @@
     return normalizeInput(input, context || getDocument());
   }
 
+  function getChildNodesContainer(nodeElement) {
+    const nodeData = getState(nodeElement, 'sourceData');
+    const containers = Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).filter(function (element) {
+      return element.classList.contains('nodes');
+    });
+    const ownedContainer = containers.find(function (container) {
+      return nodeData && getState(container, 'parentData') === nodeData;
+    });
+    if (ownedContainer) {
+      return ownedContainer;
+    }
+    if (containers.some(function (container) { return !!getState(container, 'parentData'); })) {
+      return null;
+    }
+    const nextElement = nodeElement.nextElementSibling;
+    if (nextElement && nextElement.classList.contains('nodes')) {
+      return nextElement;
+    }
+    if (nodeElement.parentElement && nodeElement.parentElement.classList.contains('hierarchy')) {
+      return Array.from(nodeElement.parentElement.children).find(function (element) {
+        return element.classList.contains('nodes');
+      }) || null;
+    }
+    return null;
+  }
+
   function mergeObjects() {
     return Object.assign.apply(Object, [{}].concat(Array.from(arguments)));
   }
 
+  function mergeChartOptions(defaults) {
+    const options = mergeObjects({}, defaults);
+    options.icons = mergeObjects({}, defaults.icons);
+    Array.from(arguments).slice(1).forEach(function (overrides) {
+      if (!overrides) {
+        return;
+      }
+      Object.assign(options, overrides, { icons: mergeObjects({}, options.icons, overrides.icons) });
+      if (Object.prototype.hasOwnProperty.call(overrides, 'drag')
+        && !Object.prototype.hasOwnProperty.call(overrides, 'draggable')) {
+        options.draggable = overrides.drag;
+      }
+    });
+    options.visibleLevel = options.visibleLevel === true ? defaults.visibleLevel
+      : options.visibleLevel === false ? 1 : Number(options.visibleLevel);
+    if (!Number.isInteger(options.visibleLevel) || options.visibleLevel < 0) {
+      throw new RangeError('visibleLevel must be a nonnegative integer or boolean');
+    }
+    options.zoomoutLimit = Number(options.zoomoutLimit);
+    options.zoominLimit = Number(options.zoominLimit);
+    if (!Number.isFinite(options.zoomoutLimit) || !Number.isFinite(options.zoominLimit)
+      || options.zoomoutLimit <= 0 || options.zoominLimit < options.zoomoutLimit) {
+      throw new RangeError('zoom limits must be positive and zoomoutLimit must not exceed zoominLimit');
+    }
+    if (!['t2b', 'b2t', 'l2r', 'r2l'].includes(options.direction)) {
+      throw new RangeError('direction must be t2b, b2t, l2r, or r2l');
+    }
+    return options;
+  }
+
+  function prepareNodeData(data, resetLayout) {
+    if (Array.isArray(data)) {
+      data.forEach(function (item) {
+        prepareNodeData(item, resetLayout);
+      });
+      return;
+    }
+    if (!isPlainObject(data)) {
+      return;
+    }
+    const layoutKeys = ['compact', 'associatedCompact', 'vertical', 'level', 'parentId'];
+    let layout = nodeLayoutStore.get(data);
+    if (!layout) {
+      layout = {};
+      layoutKeys.forEach(function (key) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+          layout[key] = data[key];
+        }
+      });
+      nodeLayoutStore.set(data, layout);
+    }
+    if (resetLayout) {
+      delete layout.level;
+      delete layout.parentId;
+    }
+    layoutKeys.forEach(function (key) {
+      if (Object.prototype.hasOwnProperty.call(layout, key)) {
+        data[key] = layout[key];
+      } else {
+        delete data[key];
+      }
+    });
+    (data.children || []).forEach(function (child) {
+      prepareNodeData(child, resetLayout);
+    });
+  }
+
+  function usesCompactLayout(data, options, level) {
+    return !!data.compact && !data.hybrid && !data.vertical
+      && !(options.verticalLevel && level + 1 >= options.verticalLevel);
+  }
+
+  function findDataLocation(datasource, target) {
+    let location = null;
+    const visit = function (data, parent, list, index, outerList, outerIndex) {
+      if (location) {
+        return;
+      }
+      if (Array.isArray(data)) {
+        data.forEach(function (item, itemIndex) {
+          visit(item, parent, data, itemIndex, list, index);
+        });
+      } else if (data === target) {
+        location = { parent: parent, list: list, index: index, outerList: outerList, outerIndex: outerIndex };
+      } else if (data && data.children) {
+        visit(data.children, data, null, null, null, null);
+      }
+    };
+    visit(datasource, null, null, null, null, null);
+    return location;
+  }
+
   function forEachValue(collection, callback) {
     if (Array.isArray(collection) || isNodeList(collection)) {
       for (let index = 0; index < collection.length; index += 1) {
@@ -116,8 +235,16 @@
     if (!element || element.nodeType !== 1) {
       return false;
     }
-    const style = getWindow().getComputedStyle(element);
-    return style.display !== 'none' && style.visibility !== 'hidden';
+    let currentElement = element;
+    while (currentElement && currentElement.nodeType === 1) {
+      const style = getWindow().getComputedStyle(currentElement);
+      if (currentElement.classList.contains('hidden') || style.display === 'none'
+        || style.visibility === 'hidden' || style.visibility === 'collapse' || style.opacity === '0') {
+        return false;
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return true;
   }
 
   function matchesSelector(element, selector) {
@@ -344,7 +471,7 @@
 
   function getChartTransform(chartElement) {
     let currentTransform;
-    let matrixValues;
+    let matrixValues = [1, 0, 0, 1, 0, 0];
     let currentScale = 1;
     let currentTranslateX = 0;
     let currentTranslateY = 0;
@@ -353,7 +480,8 @@
       return {
         scale: currentScale,
         translateX: currentTranslateX,
-        translateY: currentTranslateY
+        translateY: currentTranslateY,
+        matrix: matrixValues
       };
     }
 
@@ -363,14 +491,14 @@
         matrixValues = currentTransform.slice(9, -1).split(',').map(function (value) {
           return getWindow().parseFloat(value.trim());
         });
-        currentScale = Math.abs(matrixValues[0]) || 1;
+        currentScale = Math.hypot(matrixValues[0], matrixValues[1], matrixValues[2]) || 1;
         currentTranslateX = matrixValues[12] || 0;
         currentTranslateY = matrixValues[13] || 0;
       } else if (currentTransform.indexOf('matrix(') === 0) {
         matrixValues = currentTransform.slice(7, -1).split(',').map(function (value) {
           return getWindow().parseFloat(value.trim());
         });
-        currentScale = Math.abs(matrixValues[0]) || 1;
+        currentScale = Math.hypot(matrixValues[0], matrixValues[1]) || 1;
         currentTranslateX = matrixValues[4] || 0;
         currentTranslateY = matrixValues[5] || 0;
       } else if (currentTransform.indexOf('scale3d(') === 0) {
@@ -378,21 +506,82 @@
           return getWindow().parseFloat(value.trim());
         });
         currentScale = Math.abs(matrixValues[0]) || 1;
+        matrixValues = [matrixValues[0], 0, 0, 0, 0, matrixValues[1], 0, 0, 0, 0, matrixValues[2], 0, 0, 0, 0, 1];
       } else if (currentTransform.indexOf('scale(') === 0) {
         matrixValues = currentTransform.slice(6, -1).split(',').map(function (value) {
           return getWindow().parseFloat(value.trim());
         });
         currentScale = Math.abs(matrixValues[0]) || 1;
+        matrixValues = [matrixValues[0], 0, 0, matrixValues[1] === undefined ? matrixValues[0] : matrixValues[1], 0, 0];
       }
     }
 
     return {
       scale: currentScale,
       translateX: currentTranslateX,
-      translateY: currentTranslateY
+      translateY: currentTranslateY,
+      matrix: matrixValues
     };
   }
 
+  function applyChartTransform(chartElement, chartTransform, scale, translateX, translateY) {
+    const matrixValues = chartTransform.matrix.slice();
+    const scaleRatio = scale / chartTransform.scale;
+    const is3d = matrixValues.length === 16;
+    const linearIndexes = is3d ? [0, 1, 2, 4, 5, 6, 8, 9, 10] : [0, 1, 2, 3];
+
+    linearIndexes.forEach(function (index) {
+      matrixValues[index] *= scaleRatio;
+    });
+    matrixValues[is3d ? 12 : 4] = translateX;
+    matrixValues[is3d ? 13 : 5] = translateY;
+    chartElement.style.transformOrigin = '0 0';
+    chartElement.style.transform = (is3d ? 'matrix3d(' : 'matrix(') + matrixValues.join(', ') + ')';
+  }
+
+  function rebuildFromData(orgChart, expandedData, updatedDatasource) {
+    const chartElement = orgChart.chart;
+    const datasource = updatedDatasource || getState(chartElement, 'datasource') || orgChart.options.data;
+    const expansionStates = new Map();
+    const transform = chartElement.style.transform;
+    const transformOrigin = chartElement.style.transformOrigin;
+    Array.from(chartElement.querySelectorAll('.node')).forEach(function (nodeElement) {
+      expansionStates.set(getState(nodeElement, 'sourceData'), {
+        visible: isVisibleElement(nodeElement),
+        expanded: nodeElement.classList.contains('compact')
+          ? nodeElement.classList.contains('looseMode')
+          : orgChart.getNodeState(nodeElement, 'children').visible
+      });
+    });
+    prepareNodeData(datasource, true);
+    orgChart.init({ data: datasource });
+    orgChart.chart.style.transform = transform;
+    orgChart.chart.style.transformOrigin = transformOrigin;
+    Array.from(orgChart.chart.querySelectorAll('.node')).forEach(function (nodeElement) {
+      const nodeData = getState(nodeElement, 'sourceData');
+      const state = expansionStates.get(nodeData);
+      const expanded = nodeData === expandedData || (state && state.expanded);
+      if (state && state.visible) {
+        nodeElement.classList.remove('slide-up');
+      }
+      if (nodeElement.classList.contains('compact')) {
+        if (expanded && orgChart.getChildren(nodeElement).length) {
+          orgChart.backToLooseHandler({ compactNode: nodeElement });
+        }
+      } else {
+        const childContainer = getChildNodesContainer(nodeElement);
+        if (childContainer && (state || nodeData === expandedData)) {
+          childContainer.classList.toggle('hidden', !expanded);
+          nodeElement.closest('.hierarchy').classList.toggle('isChildrenCollapsed', !expanded);
+          if (expanded) {
+            orgChart.getChildren(nodeElement).forEach(function (child) { child.classList.remove('slide-up'); });
+          }
+        }
+      }
+    });
+    orgChart.updateMinimap(true);
+  }
+
   const OrgChart = function (elem, opts) {
     if (!(this instanceof OrgChart)) {
       return new OrgChart(elem, opts);
@@ -405,6 +594,7 @@
       this.opts = opts || {};
     }
     this.chart = null;
+    this.exportButtonElement = null;
     this.defaultOptions = {
       'icons': {
         'theme': 'oci',
@@ -454,7 +644,9 @@
   OrgChart.prototype = {
     //
     init: function (opts) {
-      this.options = mergeObjects({}, this.defaultOptions, this.opts, opts);
+      const options = mergeChartOptions(this.defaultOptions, this.opts, opts);
+      this.opts = options;
+      this.options = options;
       // build the org-chart
       const chartContainerElement = this.chartContainer;
       let chartElement;
@@ -464,6 +656,13 @@
 
       this.detachMinimap();
       if (this.chart) {
+        const initObserver = getState(this.chart, 'initMutationObserver');
+        if (initObserver) {
+          initObserver.disconnect();
+        }
+        this.panEndHandler({ chart: this.chart });
+        this.unbindPan();
+        this.unbindZoom();
         this.chart.remove();
       }
       const data = this.options.data;
@@ -479,12 +678,21 @@
           Array.from(chartElement.querySelectorAll('.node.focused')).forEach(function (focusedNodeEl) {
             focusedNodeEl.classList.remove('focused');
           });
+          const activeElement = getDocument().activeElement;
+          if (activeElement && chartElement.contains(activeElement) && activeElement.closest('.node')) {
+            activeElement.blur();
+          }
         }
       });
       if (typeof getWindow().MutationObserver !== 'undefined') {
         this.triggerInitEvent();
       }
       const isListElementData = isElement(data) && data.tagName === 'UL';
+      const datasource = isListElementData ? this.buildJsonDS(data.firstElementChild) : data;
+      prepareNodeData(datasource);
+      setState(chartElement, 'datasource', datasource);
+      this.options.data = datasource;
+      this.opts.data = datasource;
       rootNodesContainerElement = getDocument().createElement('ul');
       rootNodesContainerElement.className = 'nodes';
       chartElement.appendChild(rootNodesContainerElement);
@@ -498,23 +706,22 @@
         rootElement = rootHierarchyElement;
       }
 
-        if (isListElementData) { // ul datasource
-          this.buildHierarchy(rootElement, this.buildJsonDS(data.firstElementChild));
-        } else { // local json datasource
-          if (data.relationship) {
-            this.buildHierarchy(rootElement, data);
-          } else {
-            this.buildHierarchy(rootElement, Array.isArray(data) ? data : this.attachRel(data, '00'));
-          }
-        }
+      this.buildHierarchy(rootElement, datasource);
 
       if (chartContainerElement) {
         chartContainerElement.appendChild(chartElement);
       }
 
       // append the export button
-      if (this.options.exportButton && !getDocument().querySelector('.oc-export-btn')) {
-        this.attachExportButton();
+      if (this.options.exportButton) {
+        if (!this.exportButtonElement || !this.exportButtonElement.parentElement) {
+          this.attachExportButton();
+        } else {
+          this.exportButtonElement.textContent = this.options.exportButtonName;
+        }
+      } else if (this.exportButtonElement) {
+        this.exportButtonElement.remove();
+        this.exportButtonElement = null;
       }
 
       if (this.options.pan) {
@@ -556,26 +763,30 @@
     //
     triggerInitEvent: function () {
       const orgChart = this;
+      const chartElement = this.chart;
+      const options = this.options;
       const MutationObserverCtor = getWindow().MutationObserver;
       const mo = new MutationObserverCtor(function (mutations) {
         mo.disconnect();
+        setState(chartElement, 'initMutationObserver', null);
         initTime:
         for (let i = 0; i < mutations.length; i++) {
           for (let j = 0; j < mutations[i].addedNodes.length; j++) {
-            if (mutations[i].addedNodes[j].classList && mutations[i].addedNodes[j].classList.contains('orgchart')) {
+            if (mutations[i].addedNodes[j] === chartElement) {
               orgChart.handleCompactNodes();
-              if (!orgChart.chart) {
+              if (!chartElement.isConnected) {
                 break initTime;
               }
-              if (orgChart.options.initCompleted && typeof orgChart.options.initCompleted === 'function') {
-                orgChart.options.initCompleted(orgChart.chart);
+              if (options.initCompleted && typeof options.initCompleted === 'function') {
+                options.initCompleted(chartElement);
               }
-              mutations[i].addedNodes[j].dispatchEvent(createTriggeredEvent('init.orgchart'));
+              chartElement.dispatchEvent(createTriggeredEvent('init.orgchart'));
               break initTime;
             }
           }
         }
       });
+      setState(chartElement, 'initMutationObserver', mo);
       mo.observe(this.chartContainer, { childList: true });
     },
     triggerShowEvent: function (targetEl, rel) {
@@ -601,72 +812,53 @@
       exportButtonElement = getDocument().createElement('button');
       exportButtonElement.className = 'oc-export-btn';
       exportButtonElement.textContent = this.options.exportButtonName;
+      setState(exportButtonElement, 'orgChart', this);
       exportButtonElement.addEventListener('click', function (event) {
         event.preventDefault();
         orgChart.export();
       });
+      this.exportButtonElement = exportButtonElement;
       chartContainerElement.insertAdjacentElement('afterend', exportButtonElement);
     },
     setOptions: function (opts, val) {
-      if (typeof opts === 'string') {
-        if (opts === 'pan') {
-          if (val) {
-            this.bindPan();
-          } else {
-            this.unbindPan();
-          }
-        }
-        if (opts === 'zoom') {
-          if (val) {
-            this.bindZoom();
-          } else {
-            this.unbindZoom();
-          }
+      const overrides = typeof opts === 'string' ? { [opts]: val } : opts;
+      if (!overrides || typeof overrides !== 'object') {
+        return this;
+      }
+      const options = mergeChartOptions(this.defaultOptions, this.opts, this.options, overrides);
+      const needsRebuild = Object.keys(overrides).some(function (key) {
+        return !['pan', 'zoom', 'minimap', 'zoominLimit', 'zoomoutLimit', 'exportScale', 'exportFilename', 'exportFileextension'].includes(key);
+      });
+      if (needsRebuild) {
+        return this.init(options);
+      }
+      this.opts = options;
+      this.options = options;
+      if (this.chart) {
+        setState(this.chart, 'options', options);
+      }
+      if (Object.prototype.hasOwnProperty.call(overrides, 'pan')) {
+        if (options.pan) {
+          this.bindPan();
+        } else {
+          this.panEndHandler({ chart: this.chart });
+          this.unbindPan();
         }
-        if (opts === 'minimap') {
-          this.options = mergeObjects({}, this.options || {}, { minimap: val });
-          if (this.chart) {
-            setState(this.chart, 'options', this.options);
-          }
-          if (val) {
-            this.attachMinimap();
-          } else {
-            this.detachMinimap();
-          }
+      }
+      if (Object.prototype.hasOwnProperty.call(overrides, 'zoom')) {
+        if (options.zoom) {
+          this.bindZoom();
+        } else {
+          this.unbindZoom();
         }
       }
-      if (typeof opts === 'object') {
-        if (opts.data) {
-          this.init(opts);
+      if (Object.prototype.hasOwnProperty.call(overrides, 'minimap')) {
+        if (options.minimap) {
+          this.attachMinimap();
         } else {
-          if (typeof opts.pan !== 'undefined') {
-            if (opts.pan) {
-              this.bindPan();
-            } else {
-              this.unbindPan();
-            }
-          }
-          if (typeof opts.zoom !== 'undefined') {
-            if (opts.zoom) {
-              this.bindZoom();
-            } else {
-              this.unbindZoom();
-            }
-          }
-          if (typeof opts.minimap !== 'undefined') {
-            this.options = mergeObjects({}, this.options || {}, { minimap: opts.minimap });
-            if (this.chart) {
-              setState(this.chart, 'options', this.options);
-            }
-            if (opts.minimap) {
-              this.attachMinimap();
-            } else {
-              this.detachMinimap();
-            }
-          }
+          this.detachMinimap();
         }
       }
-
       return this;
     },
     attachMinimap: function () {
@@ -679,7 +871,9 @@
       let minimapViewportElement;
       let minimapWheelBoundHandler;
       let minimapPointerDownBoundHandler;
+      let minimapViewportChangeBoundHandler;
       let minimapMutationObserver;
+      let minimapResizeObserver;
 
       if (!chartContainerElement || !chartElement) {
         return;
@@ -712,21 +906,53 @@
       minimapPointerDownBoundHandler = function (event) {
         orgChart.minimapStartHandler(event);
       };
+      minimapViewportChangeBoundHandler = function () {
+        orgChart.updateMinimap();
+      };
 
-      minimapElement.addEventListener('wheel', minimapWheelBoundHandler);
+      minimapElement.addEventListener('wheel', minimapWheelBoundHandler, { passive: false });
       minimapViewportElement.addEventListener('mousedown', minimapPointerDownBoundHandler);
+      chartContainerElement.addEventListener('scroll', minimapViewportChangeBoundHandler);
+      getWindow().addEventListener('resize', minimapViewportChangeBoundHandler);
 
       if (typeof getWindow().MutationObserver !== 'undefined') {
-        minimapMutationObserver = new (getWindow().MutationObserver)(function () {
-          orgChart.updateMinimap(true);
+        minimapMutationObserver = new (getWindow().MutationObserver)(function (mutations) {
+          const controlsSelector = '.edge, .toggleBtn, .backToCompactSymbol, .backToLooseSymbol';
+          const needsRefresh = mutations.some(function (mutation) {
+            if (mutation.type === 'childList') {
+              return Array.from(mutation.addedNodes).concat(Array.from(mutation.removedNodes)).some(function (node) {
+                return node.nodeType !== 1 || !node.matches(controlsSelector);
+              });
+            }
+            if (mutation.target.matches(controlsSelector)) {
+              return false;
+            }
+            const layoutClasses = function (value) {
+              return (value || '').split(/\s+/).filter(function (className) {
+                return className && className !== 'controls-active' && className !== 'focused';
+              }).sort().join(' ');
+            };
+            return layoutClasses(mutation.oldValue) !== layoutClasses(mutation.target.className);
+          });
+          if (needsRefresh) {
+            orgChart.updateMinimap(true);
+          }
         });
         minimapMutationObserver.observe(chartElement, {
           childList: true,
           subtree: true,
           attributes: true,
+          attributeOldValue: true,
           attributeFilter: ['class']
         });
       }
+      if (typeof getWindow().ResizeObserver !== 'undefined') {
+        minimapResizeObserver = new (getWindow().ResizeObserver)(function () {
+          orgChart.updateMinimap(true);
+        });
+        minimapResizeObserver.observe(chartContainerElement);
+        minimapResizeObserver.observe(chartElement);
+      }
 
       setState(chartElement, 'minimapElement', minimapElement);
       setState(chartElement, 'minimapStageElement', minimapStageElement);
@@ -734,7 +960,9 @@
       setState(chartElement, 'minimapViewportElement', minimapViewportElement);
       setState(chartElement, 'minimapWheelBoundHandler', minimapWheelBoundHandler);
       setState(chartElement, 'minimapPointerDownBoundHandler', minimapPointerDownBoundHandler);
+      setState(chartElement, 'minimapViewportChangeBoundHandler', minimapViewportChangeBoundHandler);
       setState(chartElement, 'minimapMutationObserver', minimapMutationObserver || null);
+      setState(chartElement, 'minimapResizeObserver', minimapResizeObserver || null);
 
       this.updateMinimap(true);
     },
@@ -748,6 +976,8 @@
       let minimapMoveBoundHandler;
       let minimapEndBoundHandler;
       let minimapMutationObserver;
+      let minimapViewportChangeBoundHandler;
+      let minimapResizeObserver;
 
       if (chartElement) {
         minimapElement = getState(chartElement, 'minimapElement');
@@ -757,6 +987,8 @@
         minimapMoveBoundHandler = getState(chartElement, 'minimapMoveBoundHandler');
         minimapEndBoundHandler = getState(chartElement, 'minimapEndBoundHandler');
         minimapMutationObserver = getState(chartElement, 'minimapMutationObserver');
+        minimapViewportChangeBoundHandler = getState(chartElement, 'minimapViewportChangeBoundHandler');
+        minimapResizeObserver = getState(chartElement, 'minimapResizeObserver');
 
         if (minimapElement && minimapWheelBoundHandler) {
           minimapElement.removeEventListener('wheel', minimapWheelBoundHandler);
@@ -773,6 +1005,13 @@
         if (minimapMutationObserver) {
           minimapMutationObserver.disconnect();
         }
+        if (minimapViewportChangeBoundHandler) {
+          chartContainerElement.removeEventListener('scroll', minimapViewportChangeBoundHandler);
+          getWindow().removeEventListener('resize', minimapViewportChangeBoundHandler);
+        }
+        if (minimapResizeObserver) {
+          minimapResizeObserver.disconnect();
+        }
         if (minimapElement && minimapElement.parentElement) {
           minimapElement.remove();
         }
@@ -787,6 +1026,8 @@
           'minimapMoveBoundHandler',
           'minimapEndBoundHandler',
           'minimapMutationObserver',
+          'minimapViewportChangeBoundHandler',
+          'minimapResizeObserver',
           'minimapDragState',
           'minimapScale',
           'minimapOffsetX',
@@ -813,6 +1054,9 @@
       if (typeof event.preventDefault === 'function') {
         event.preventDefault();
       }
+      if (typeof event.stopPropagation === 'function') {
+        event.stopPropagation();
+      }
 
       this.setChartScale(this.chart, 1 + (event.deltaY > 0 ? -0.2 : 0.2), {
         x: chartContainerElement.getBoundingClientRect().left + (chartContainerElement.clientWidth / 2),
@@ -897,8 +1141,7 @@
       let localViewportHeight;
       let localLeft;
       let localTop;
-      let baseLeft;
-      let baseTop;
+      let transformedRect;
 
       if (!chartElement || !chartContainerElement || !minimapStageElement || !minimapScale || !chartRect || !containerRect) {
         return;
@@ -908,13 +1151,11 @@
       localViewportHeight = viewportHeight / minimapScale;
       localLeft = clampValue((stageLeft - minimapOffsetX) / minimapScale, 0, Math.max(minimapContentWidth - localViewportWidth, 0));
       localTop = clampValue((stageTop - minimapOffsetY) / minimapScale, 0, Math.max(minimapContentHeight - localViewportHeight, 0));
-      baseLeft = chartRect.left - chartTransform.translateX;
-      baseTop = chartRect.top - chartTransform.translateY;
-
-      chartElement.style.transformOrigin = '0 0';
-      chartElement.style.transform = 'matrix(' + chartTransform.scale + ', 0, 0, ' + chartTransform.scale + ', '
-        + (containerRect.left - baseLeft - (localLeft * chartTransform.scale)) + ', '
-        + (containerRect.top - baseTop - (localTop * chartTransform.scale)) + ')';
+      applyChartTransform(chartElement, chartTransform, chartTransform.scale, chartTransform.translateX, chartTransform.translateY);
+      transformedRect = chartElement.getBoundingClientRect();
+      applyChartTransform(chartElement, chartTransform, chartTransform.scale,
+        chartTransform.translateX + containerRect.left - (localLeft * chartTransform.scale) - transformedRect.left,
+        chartTransform.translateY + containerRect.top - (localTop * chartTransform.scale) - transformedRect.top);
       this.updateMinimap();
     },
     updateMinimap: function (forceRefresh) {
@@ -953,6 +1194,8 @@
       minimapScale = Math.min(stageWidth / Math.max(contentWidth, 1), stageHeight / Math.max(contentHeight, 1));
       minimapOffsetX = (stageWidth - (contentWidth * minimapScale)) / 2;
       minimapOffsetY = (stageHeight - (contentHeight * minimapScale)) / 2;
+      const minimapElement = getState(chartElement, 'minimapElement');
+      minimapElement.style.transform = 'translate(' + chartContainerElement.scrollLeft + 'px, ' + chartContainerElement.scrollTop + 'px)';
 
       minimapContentElement.style.width = contentWidth + 'px';
       minimapContentElement.style.height = contentHeight + 'px';
@@ -1005,11 +1248,11 @@
       if (lastTf !== 'none') {
         const temp = lastTf.split(',');
         if (lastTf.indexOf('3d') === -1) {
-          lastX = parseInt(temp[4]);
-          lastY = parseInt(temp[5]);
+          lastX = parseFloat(temp[4]) || 0;
+          lastY = parseFloat(temp[5]) || 0;
         } else {
-          lastX = parseInt(temp[12]);
-          lastY = parseInt(temp[13]);
+          lastX = parseFloat(temp[12]) || 0;
+          lastY = parseFloat(temp[13]) || 0;
         }
       }
       let startX = 0;
@@ -1065,8 +1308,8 @@
             matrix[13] = ' ' + newY;
           }
           chartElement.style.transform = matrix.join(',');
-          orgChart.updateMinimap();
         }
+        orgChart.updateMinimap();
       };
 
       setState(chartElement, 'panMoveHandler', panMoveHandler);
@@ -1203,6 +1446,7 @@
         dist = orgChart.getPinchDist(nativeEvent);
         pinchCenter = orgChart.getPinchCenter(nativeEvent);
         setState(chartElement, 'pinchDistStart', dist);
+        setState(chartElement, 'pinchDistEnd', dist);
         setState(chartElement, 'pinchCenterStart', pinchCenter);
         setState(chartElement, 'pinchCenterEnd', pinchCenter);
       }
@@ -1214,7 +1458,7 @@
       let dist;
       let pinchCenter;
 
-      if(chartElement && getState(chartElement, 'pinching')) {
+      if(chartElement && getState(chartElement, 'pinching') && nativeEvent.touches && nativeEvent.touches.length === 2) {
         dist = orgChart.getPinchDist(nativeEvent);
         pinchCenter = orgChart.getPinchCenter(nativeEvent);
         setState(chartElement, 'pinchDistEnd', dist);
@@ -1340,16 +1584,9 @@
       const chartContainerElement = this.chartContainer;
       let opts;
       let chartRect;
-      let currentScale = 1;
-      let currentTranslateX = 0;
-      let currentTranslateY = 0;
+      let chartTransform;
+      let transformedRect;
       let targetScale = 1;
-      let anchorX;
-      let anchorY;
-      let localAnchorX;
-      let localAnchorY;
-      let baseLeft;
-      let baseTop;
       let containerRect;
       let targetTranslateX;
       let targetTranslateY;
@@ -1359,17 +1596,18 @@
       }
 
       opts = getState(chartElement, 'options');
-      currentScale = getChartTransform(chartElement).scale;
-      currentTranslateX = getChartTransform(chartElement).translateX;
-      currentTranslateY = getChartTransform(chartElement).translateY;
+      chartTransform = getChartTransform(chartElement);
 
-      targetScale = currentScale * newScale;
-      if (!(targetScale > opts.zoomoutLimit && targetScale < opts.zoominLimit)) {
+      if (!Number.isFinite(newScale) || newScale <= 0) {
+        return;
+      }
+      targetScale = clampValue(chartTransform.scale * newScale, opts.zoomoutLimit, opts.zoominLimit);
+      if (targetScale === chartTransform.scale) {
         return;
       }
 
-      targetTranslateX = currentTranslateX;
-      targetTranslateY = currentTranslateY;
+      targetTranslateX = chartTransform.translateX;
+      targetTranslateY = chartTransform.translateY;
       chartRect = typeof chartElement.getBoundingClientRect === 'function'
         ? chartElement.getBoundingClientRect()
         : null;
@@ -1380,19 +1618,15 @@
           y: containerRect.top + (containerRect.height / 2)
         };
       }
-      if (zoomAnchor && chartRect && typeof zoomAnchor.x === 'number' && typeof zoomAnchor.y === 'number' && currentScale !== 0) {
-        anchorX = zoomAnchor.x;
-        anchorY = zoomAnchor.y;
-        localAnchorX = (anchorX - chartRect.left) / currentScale;
-        localAnchorY = (anchorY - chartRect.top) / currentScale;
-        baseLeft = chartRect.left - currentTranslateX;
-        baseTop = chartRect.top - currentTranslateY;
-        targetTranslateX = anchorX - baseLeft - (localAnchorX * targetScale);
-        targetTranslateY = anchorY - baseTop - (localAnchorY * targetScale);
+      applyChartTransform(chartElement, chartTransform, targetScale, targetTranslateX, targetTranslateY);
+      if (zoomAnchor && chartRect && typeof zoomAnchor.x === 'number' && typeof zoomAnchor.y === 'number' && chartTransform.scale !== 0) {
+        const scaleRatio = targetScale / chartTransform.scale;
+        transformedRect = chartElement.getBoundingClientRect();
+        targetTranslateX += zoomAnchor.x + ((chartRect.left - zoomAnchor.x) * scaleRatio) - transformedRect.left;
+        targetTranslateY += zoomAnchor.y + ((chartRect.top - zoomAnchor.y) * scaleRatio) - transformedRect.top;
       }
 
-      chartElement.style.transformOrigin = '0 0';
-      chartElement.style.transform = 'matrix(' + targetScale + ', 0, 0, ' + targetScale + ', ' + targetTranslateX + ', ' + targetTranslateY + ')';
+      applyChartTransform(chartElement, chartTransform, targetScale, targetTranslateX, targetTranslateY);
       this.updateMinimap();
     },
     //
@@ -1411,12 +1645,7 @@
       }) || null;
 
       jsonNodeData = {
-        'name': ((liElement.childNodes && liElement.childNodes[0]) ? liElement.childNodes[0].textContent : '').trim(),
-        'relationship': (liElement.parentElement && liElement.parentElement.parentElement && liElement.parentElement.parentElement.tagName === 'LI' ? '1' : '0')
-          + (liElement.parentElement ? Array.from(liElement.parentElement.children).filter(function (siblingEl) {
-              return siblingEl !== liElement && siblingEl.tagName === 'LI';
-            }).length ? 1 : 0 : 0)
-          + (childListElement ? 1 : 0)
+        'name': ((liElement.childNodes && liElement.childNodes[0]) ? liElement.childNodes[0].textContent : '').trim()
       };
       forEachValue(getDatasetSnapshot(liElement), function(key, value) {
         jsonNodeData[key] = value;
@@ -1435,33 +1664,10 @@
 
       return jsonNodeData;
     },
-    // process datasource and add necessary information
-    attachRel: function (data, flags) {
-      const orgChart = this;
-      data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
-      if (this.options?.compact?.constructor === Function && this.options.compact(data)) {
-        data.compact = true;
-      }
-      if (data.children) {
-        data.children.forEach(function(item) {
-          if (data.hybrid || data.vertical) { // identify all the descendant nodes except the root node of hybrid structure
-            item.vertical = true;
-          } else if (data.compact && item.children) { // identify all the compact ancestor nodes
-            item.compact = true;
-          } else if (data.compact && !item.children) { // identify all the compact descendant nodes
-            item.associatedCompact = true;
-          }
-          orgChart.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
-        });
-      }
-      return data;
-    },
-    //
     loopChart: function (chartEl, includeNodeData) {
       const orgChart = this;
       const chartElement = getElement(chartEl);
       let nodeElement;
-      let childNodesContainerElement;
       let hierarchyNodeData;
 
       includeNodeData = (includeNodeData !== null && includeNodeData !== undefined) ? includeNodeData : false;
@@ -1470,11 +1676,13 @@
         return {};
       }
 
-      nodeElement = chartElement.classList && chartElement.classList.contains('hierarchy')
-        ? Array.from(chartElement.children || []).find(function (childEl) {
+      nodeElement = chartElement.classList && chartElement.classList.contains('node')
+        ? chartElement
+        : chartElement.classList && chartElement.classList.contains('hierarchy')
+          ? Array.from(chartElement.children || []).find(function (childEl) {
             return childEl.classList && childEl.classList.contains('node');
           })
-        : chartElement.querySelector('.node');
+          : chartElement.querySelector('.node');
       if (!nodeElement) {
         return {};
       }
@@ -1485,18 +1693,10 @@
           hierarchyNodeData[key] = value;
         });
       }
-      childNodesContainerElement = Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-        return childEl !== nodeElement && childEl.classList && childEl.classList.contains('nodes');
-      }) || null;
-      if (childNodesContainerElement) {
-        Array.from(childNodesContainerElement.children).forEach(function (childEl) {
-          if (!childEl.classList || !childEl.classList.contains('hierarchy')) {
-            return;
-          }
-          if (!hierarchyNodeData.children) {
-            hierarchyNodeData.children = [];
-          }
-          hierarchyNodeData.children.push(orgChart.loopChart(childEl, includeNodeData));
+      const childNodeElements = this.getChildren(nodeElement);
+      if (childNodeElements.length) {
+        hierarchyNodeData.children = childNodeElements.map(function (childNodeElement) {
+          return orgChart.loopChart(childNodeElement, includeNodeData);
         });
       }
 
@@ -1520,95 +1720,61 @@
           }
         }
       }
+      const datasource = getState(chartElement, 'datasource');
+      if (Array.isArray(datasource)) {
+        const exportFamily = function (groups) {
+          return groups.map(function (group) {
+            return group.map(function (data) {
+              const node = nodeElements.find(function (element) { return getState(element, 'sourceData') === data; });
+              const result = includeNodeData ? mergeObjects({}, getState(node, 'nodeData')) : {};
+              result.id = node.id;
+              if (data.children && data.children.length) {
+                result.children = Array.isArray(data.children[0]) ? exportFamily(data.children)
+                  : data.children.map(function (childData) {
+                    const childNode = nodeElements.find(function (element) { return getState(element, 'sourceData') === childData; });
+                    return this.loopChart(childNode, includeNodeData);
+                  }, this);
+              }
+              return result;
+            }, this);
+          }, this);
+        }.bind(this);
+        return exportFamily(datasource);
+      }
       return this.loopChart(chartElement, includeNodeData);
     },
     // detect the exist/display state of related node
     getNodeState: function (nodeEl, relation) {
       const nodeElement = getElement(nodeEl);
-      let relatedElement;
-      let isVerticalNode;
-      let siblingElements;
 
       if (!nodeElement || !nodeElement.classList || !nodeElement.classList.contains('node')) {
         return { 'exist': false, 'visible': false };
       }
 
       relation = relation || 'self';
-      isVerticalNode = !!nodeElement.closest('vertical');
-
       if (relation === 'parent') {
-        if (isVerticalNode) {
-          relatedElement = nodeElement.closest('ul');
-          relatedElement = relatedElement ? relatedElement.parentElement && relatedElement.parentElement.closest('ul') : null;
-          if (!relatedElement) {
-            relatedElement = nodeElement.closest('.nodes');
-            if (!relatedElement) {
-              relatedElement = nodeElement.closest('.vertical');
-              relatedElement = relatedElement && relatedElement.parentElement ? relatedElement.parentElement.firstElementChild : null;
-            }
-          }
-        } else {
-          relatedElement = nodeElement.closest('.nodes');
-          relatedElement = relatedElement ? relatedElement.previousElementSibling : null;
-        }
-
-        if (relatedElement) {
-          if (relatedElement.classList.contains('hidden')
-            || (relatedElement.closest('.nodes') && relatedElement.closest('.nodes').classList.contains('hidden'))
-            || (relatedElement.closest('.vertical') && relatedElement.closest('.vertical').classList.contains('hidden'))) {
-            return { 'exist': true, 'visible': false };
-          }
-          return { 'exist': true, 'visible': true };
-        }
+        const parentElement = this.getParent(nodeElement);
+        return { exist: !!parentElement, visible: !!parentElement && this.getNodeState(parentElement).visible };
       } else if (relation === 'children') {
-        relatedElement = isVerticalNode
-          ? Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-              return childEl.tagName === 'UL';
-            }) || null
-          : Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-              return childEl !== nodeElement && childEl.classList && childEl.classList.contains('nodes');
-            }) || null;
-
-        if (relatedElement) {
-          if (!relatedElement.classList.contains('hidden')) {
-            return { 'exist': true, 'visible': true };
-          }
-          return { 'exist': true, 'visible': false };
-        }
+        const childElements = this.getChildren(nodeElement);
+        const childContainer = getChildNodesContainer(nodeElement);
+        return {
+          exist: childElements.length > 0 || !!childContainer,
+          visible: childElements.length > 0
+            ? childElements.some(function (childElement) { return this.getNodeState(childElement).visible; }, this)
+            : !!childContainer && !childContainer.closest('.hidden') && this.getNodeState(nodeElement).visible
+        };
       } else if (relation === 'siblings') {
-        if (isVerticalNode) {
-          relatedElement = nodeElement.closest('ul');
-          siblingElements = relatedElement ? Array.from(relatedElement.children || []).filter(function (childEl) {
-            return childEl.tagName === 'LI';
-          }) : [];
-        } else {
-          siblingElements = nodeElement.parentElement && nodeElement.parentElement.parentElement
-            ? Array.from(nodeElement.parentElement.parentElement.children).filter(function (childEl) {
-                return childEl !== nodeElement.parentElement;
-              })
-            : [];
-          relatedElement = siblingElements[0] || null;
-        }
-
-        if (relatedElement && (!isVerticalNode || siblingElements.length > 1)) {
-          if (!siblingElements.some(function (siblingEl) { return siblingEl.classList.contains('hidden'); })
-            && !siblingElements.some(function (siblingEl) { return siblingEl.parentElement && siblingEl.parentElement.classList.contains('hidden'); })
-            && (!isVerticalNode || !relatedElement.closest('.vertical') || !relatedElement.closest('.vertical').classList.contains('hidden'))) {
-            return { 'exist': true, 'visible': true };
-          }
-          return { 'exist': true, 'visible': false };
-        }
-      } else {
-        if (!((nodeElement.closest('.nodes') && nodeElement.closest('.nodes').classList.contains('hidden')) ||
-          (nodeElement.closest('.hierarchy') && nodeElement.closest('.hierarchy').classList.contains('hidden')) ||
-          (nodeElement.closest('.vertical') && ((nodeElement.closest('.nodes') && nodeElement.closest('.nodes').classList.contains('hidden')) || nodeElement.closest('.vertical').classList.contains('hidden')))
-        )) {
-          return { 'exist': true, 'visible': true };
-        }
-        return { 'exist': true, 'visible': false };
+        const siblingElements = this.getSiblings(nodeElement);
+        return {
+          exist: siblingElements.length > 0,
+          visible: siblingElements.length > 0
+            && siblingElements.every(function (siblingElement) { return this.getNodeState(siblingElement).visible; }, this)
+        };
       }
-
-      return { 'exist': false, 'visible': false };
+      const collapsedCompactAncestor = nodeElement.parentElement
+        ? nodeElement.parentElement.closest('.node.compact:not(.looseMode)') : null;
+      return { exist: true, visible: !nodeElement.closest('.hidden') && !collapsedCompactAncestor };
     },
     getParent: function (nodeEl) {
       return this.getRelatedNodes(nodeEl, 'parent');
@@ -1631,12 +1797,25 @@
       }
 
       if (relation === 'parent') {
+        if (nodeElement.parentElement && nodeElement.parentElement.classList.contains('node')) {
+          return nodeElement.parentElement;
+        }
         nodesContainerEl = nodeElement.closest('.nodes');
+        const parentData = nodesContainerEl ? getState(nodesContainerEl, 'parentData') : null;
+        if (parentData) {
+          return Array.from(nodeElement.closest('.orgchart').querySelectorAll('.node')).find(function (element) {
+            return getState(element, 'sourceData') === parentData;
+          }) || null;
+        }
         return nodesContainerEl ? nodesContainerEl.previousElementSibling : null;
       } else if (relation === 'children') {
-        childNodesContainerElement = Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-          return childEl !== nodeElement && childEl.classList && childEl.classList.contains('nodes');
+        const nestedNodeElements = Array.from(nodeElement.children).filter(function (childElement) {
+          return childElement.classList.contains('node');
         });
+        if (nestedNodeElements.length) {
+          return nestedNodeElements;
+        }
+        childNodesContainerElement = getChildNodesContainer(nodeElement);
 
         if (!childNodesContainerElement) {
           return [];
@@ -1644,20 +1823,27 @@
 
         return Array.from(childNodesContainerElement.children).filter(function (childEl) {
           return childEl.classList && childEl.classList.contains('hierarchy');
-        }).map(function (childHierarchyEl) {
-          return childHierarchyEl.querySelector('.node');
-        }).filter(Boolean);
+        }).flatMap(function (childHierarchyEl) {
+          return Array.from(childHierarchyEl.children).filter(function (element) { return element.classList.contains('node'); });
+        });
       } else if (relation === 'siblings') {
+        if (nodeElement.parentElement && nodeElement.parentElement.classList.contains('node')) {
+          return Array.from(nodeElement.parentElement.children).filter(function (siblingElement) {
+            return siblingElement !== nodeElement && siblingElement.classList.contains('node');
+          });
+        }
         hierarchyEl = nodeElement.closest('.hierarchy');
         if (!hierarchyEl || !hierarchyEl.parentElement) {
           return [];
         }
 
         return Array.from(hierarchyEl.parentElement.children).filter(function (siblingEl) {
-          return siblingEl !== hierarchyEl;
-        }).map(function (siblingHierarchyEl) {
-          return siblingHierarchyEl.querySelector('.node');
-        }).filter(Boolean);
+          return siblingEl.classList.contains('hierarchy');
+        }).flatMap(function (siblingHierarchyEl) {
+          return Array.from(siblingHierarchyEl.children).filter(function (element) {
+            return element !== nodeElement && element.classList.contains('node');
+          });
+        });
       }
 
       return [];
@@ -1820,9 +2006,7 @@
       }
 
       hierarchyElement = nodeElement.closest('.hierarchy');
-      lowerLevelElement = Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-        return childEl !== nodeElement && childEl.classList && childEl.classList.contains('nodes');
-      }) || null;
+      lowerLevelElement = getChildNodesContainer(nodeElement);
 
       if (!lowerLevelElement) {
         return;
@@ -1898,9 +2082,7 @@
       }
 
       hierarchyElement = nodeElement.closest('.hierarchy');
-      levelsElement = Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-        return childEl !== nodeElement && childEl.classList && childEl.classList.contains('nodes');
-      }) || null;
+      levelsElement = getChildNodesContainer(nodeElement);
 
       if (!levelsElement) {
         return;
@@ -1915,11 +2097,7 @@
         ? Array.from(levelsElement.querySelectorAll('.node')).filter(function (visibleNodeEl, index) {
             return this.isVisibleNode(index, visibleNodeEl);
           }, this)
-        : Array.from(levelsElement.children).filter(function (childEl) {
-            return childEl.classList && childEl.classList.contains('hierarchy');
-          }).map(function (childHierarchyEl) {
-            return childHierarchyEl.querySelector('.node');
-          }).filter(function (visibleNodeEl, index) {
+        : this.getChildren(nodeElement).filter(function (visibleNodeEl, index) {
             return this.isVisibleNode(index, visibleNodeEl);
           }, this);
       if (!isVerticalDesc) {
@@ -2266,18 +2444,22 @@
       edgeElement.classList.add('hidden');
       nodeElement = edgeElement.parentElement;
       if (nodeElement) {
+        setState(nodeElement, 'loadingEdge', edgeElement);
         nodeElement.insertAdjacentHTML('beforeend', `<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`);
         spinnerElement = Array.from(nodeElement.children || []).find(function (childEl) {
           return childEl.classList && childEl.classList.contains('spinner');
         }) || null;
         Array.from(nodeElement.children || []).forEach(function (childEl) {
           if (childEl !== spinnerElement) {
+            setState(childEl, 'loadingOriginalOpacity', childEl.style.opacity);
             childEl.style.opacity = 0.2;
           }
         });
       }
       setState(chartElement, 'inAjax', true);
-      Array.from(getDocument().querySelectorAll('.oc-export-btn')).forEach(function (exportButtonEl) {
+      Array.from(getDocument().querySelectorAll('.oc-export-btn')).filter(function (exportButtonEl) {
+        return !getState(exportButtonEl, 'orgChart') || getState(exportButtonEl, 'orgChart') === this;
+      }, this).forEach(function (exportButtonEl) {
         exportButtonEl.disabled = true;
       });
       return true;
@@ -2299,32 +2481,132 @@
           spinnerEl.remove();
         });
         Array.from(nodeElement.children || []).forEach(function (childEl) {
-          childEl.removeAttribute('style');
+          childEl.style.opacity = getState(childEl, 'loadingOriginalOpacity') || '';
+          if (!childEl.style.cssText) {
+            childEl.removeAttribute('style');
+          }
         });
+        setState(nodeElement, 'loadingEdge', null);
+        if (this.isInAction(nodeElement)) {
+          this.nodeEnterLeaveHandler({ type: 'mouseenter', node: nodeElement });
+        } else {
+          this.removeNodeControls(nodeElement);
+        }
       }
       setState(chartElement, 'inAjax', false);
-      Array.from(getDocument().querySelectorAll('.oc-export-btn')).forEach(function (exportButtonEl) {
+      Array.from(getDocument().querySelectorAll('.oc-export-btn')).filter(function (exportButtonEl) {
+        return !getState(exportButtonEl, 'orgChart') || getState(exportButtonEl, 'orgChart') === this;
+      }, this).forEach(function (exportButtonEl) {
         exportButtonEl.disabled = false;
       });
     },
     // whether the cursor is hovering over the node
     isInAction: function (nodeEl) {
       const nodeElement = getElement(nodeEl);
-      const edgeClassName = Array.from(nodeElement ? nodeElement.children : []).filter(function (childEl) {
-        return childEl.classList && childEl.classList.contains('edge');
-      }).map(function (edgeEl) {
-        return edgeEl.className;
-      }).join(' ');
-
-      // TODO: 展开/折叠的按钮不止4个箭头，还有toggleBtn
-      return [
-        this.options.icons.expandToUp,
-        this.options.icons.collapseToDown,
-        this.options.icons.collapseToLeft,
-        this.options.icons.expandToRight
-      ].some(function (icon) {
-        return edgeClassName.indexOf(icon) > -1;
+      return !!nodeElement && nodeElement.classList.contains('controls-active');
+    },
+    renderNodeControls: function (nodeEl) {
+      const nodeElement = getElement(nodeEl);
+      if (!nodeElement || !this.isInAction(nodeElement) || getState(nodeElement, 'loadingEdge')
+        || getState(nodeElement, 'updatingControls')) {
+        return;
+      }
+      const data = getState(nodeElement, 'sourceData') || {};
+      const opts = this.options;
+      const icons = opts.icons;
+      const hasChildren = this.getNodeState(nodeElement, 'children').exist;
+      const isVertical = data.vertical || (opts.verticalLevel && data.level >= opts.verticalLevel)
+        || !!nodeElement.closest('.nodes.vertical');
+      const controls = [];
+      if (isVertical) {
+        if (hasChildren) {
+          controls.push(`<i class="toggleBtn ${icons.theme}"></i>`);
+        }
+      } else if (data.hybrid) {
+        if (hasChildren) {
+          controls.push(`<i class="edge verticalEdge bottomEdge ${icons.theme}"></i>`);
+        }
+      } else if (usesCompactLayout(data, opts, data.level)) {
+        if (hasChildren) {
+          const isLoose = nodeElement.classList.contains('looseMode');
+          controls.push(`<i class="${icons.theme} ${icons.backToCompact} backToCompactSymbol${isLoose ? '' : ' hidden'}"></i>`);
+          controls.push(`<i class="${icons.theme} ${icons.backToLoose} backToLooseSymbol${isLoose ? ' hidden' : ''}"></i>`);
+        }
+      } else if (!data.associatedCompact) {
+        if (this.getNodeState(nodeElement, 'parent').exist) {
+          controls.push(`<i class="edge verticalEdge topEdge ${icons.theme}"></i>`);
+        }
+        if (this.getNodeState(nodeElement, 'siblings').exist) {
+          controls.push(`<i class="edge horizontalEdge rightEdge ${icons.theme}"></i>`);
+          controls.push(`<i class="edge horizontalEdge leftEdge ${icons.theme}"></i>`);
+        }
+        if (hasChildren) {
+          controls.push(`<i class="edge verticalEdge bottomEdge ${icons.theme}"></i>`);
+        }
+      }
+      const controlClasses = ['topEdge', 'bottomEdge', 'leftEdge', 'rightEdge', 'toggleBtn', 'backToCompactSymbol', 'backToLooseSymbol'];
+      const newControls = createNodesFromHtml(controls.join(''));
+      const desiredClasses = newControls.map(function (control) {
+        return controlClasses.find(function (className) { return control.classList.contains(className); });
       });
+      setState(nodeElement, 'updatingControls', true);
+      try {
+        Array.from(nodeElement.children).filter(function (child) {
+          return controlClasses.some(function (className) { return child.classList.contains(className); })
+            && !desiredClasses.some(function (className) { return child.classList.contains(className); });
+        }).forEach(function (control) { control.remove(); });
+        newControls.forEach(function (control, index) {
+          const existingControl = nodeElement.querySelector(':scope > .' + desiredClasses[index]);
+          const label = desiredClasses[index] === 'topEdge' ? 'Toggle parent nodes'
+            : desiredClasses[index] === 'leftEdge' || desiredClasses[index] === 'rightEdge' ? 'Toggle sibling nodes'
+            : desiredClasses[index] === 'backToCompactSymbol' ? 'Use compact layout'
+            : desiredClasses[index] === 'backToLooseSymbol' ? 'Expand compact layout' : 'Toggle child nodes';
+          if (existingControl) {
+            existingControl.className = control.className;
+          } else {
+            control.tabIndex = 0;
+            control.setAttribute('role', 'button');
+            control.setAttribute('aria-label', label);
+            control.title = label;
+            nodeElement.appendChild(control);
+          }
+        });
+      } finally {
+        setState(nodeElement, 'updatingControls', false);
+      }
+    },
+    removeNodeControls: function (nodeEl) {
+      const nodeElement = getElement(nodeEl);
+      if (!nodeElement || getState(nodeElement, 'updatingControls')) {
+        return;
+      }
+      setState(nodeElement, 'updatingControls', true);
+      try {
+        Array.from(nodeElement.children).filter(function (child) {
+          return child.matches('.edge, .toggleBtn, .backToCompactSymbol, .backToLooseSymbol')
+            && child !== getState(nodeElement, 'loadingEdge');
+        }).forEach(function (control) { control.remove(); });
+      } finally {
+        setState(nodeElement, 'updatingControls', false);
+      }
+    },
+    refreshNodeControls: function (nodeEl) {
+      const nodeElement = getElement(nodeEl);
+      if (nodeElement) {
+        const titleElement = nodeElement.querySelector(':scope > .title');
+        const symbol = titleElement ? titleElement.querySelector('.parentNodeSymbol') : null;
+        const hasChildren = this.getNodeState(nodeElement, 'children').exist;
+        if (titleElement && hasChildren && !symbol) {
+          titleElement.insertAdjacentHTML('afterbegin', `<i class="${this.options.icons.theme} ${this.options.icons.parentNode} parentNodeSymbol"></i>`);
+        } else if (!hasChildren && symbol) {
+          symbol.remove();
+        }
+      }
+      if (this.chart) {
+        Array.from(this.chart.querySelectorAll('.node.controls-active')).forEach(function (activeNode) {
+          this.nodeEnterLeaveHandler({ type: 'mouseenter', node: activeNode });
+        }, this);
+      }
     },
     //
     switchVerticalArrow: function (arrowEl) {
@@ -2402,61 +2684,42 @@
       const nativeEvent = event.originalEvent || event;
       const eventType = nativeEvent.type;
       const nodeElement = event.node || nativeEvent.currentTarget;
-      const childElements = Array.from(nodeElement ? nodeElement.children : []);
-      const isVerticalNode = !!(nodeElement && nodeElement.closest('.nodes.vertical'));
-      const toggleBtnElement = childElements.find(function (childEl) {
-        return childEl.classList && childEl.classList.contains('toggleBtn');
-      }) || null;
-      const topEdgeElement = childElements.find(function (childEl) {
-        return childEl.classList && childEl.classList.contains('topEdge');
-      }) || null;
-      const rightEdgeElement = childElements.find(function (childEl) {
-        return childEl.classList && childEl.classList.contains('rightEdge');
-      }) || null;
-      const bottomEdgeElement = childElements.find(function (childEl) {
-        return childEl.classList && childEl.classList.contains('bottomEdge');
-      }) || null;
-      const leftEdgeElement = childElements.find(function (childEl) {
-        return childEl.classList && childEl.classList.contains('leftEdge');
-      }) || null;
-      let isExpanded = false;
-      if (isVerticalNode) {
-        if (eventType === 'mouseenter') {
-          if (toggleBtnElement) {
-            isExpanded = this.getNodeState(nodeElement, 'children').visible;
-            toggleBtnElement.classList.toggle(this.options.icons.collapsed, !isExpanded);
-            toggleBtnElement.classList.toggle(this.options.icons.expanded, isExpanded);
-          }
-        } else if (toggleBtnElement) {
-          toggleBtnElement.classList.remove(this.options.icons.collapsed, this.options.icons.expanded);
-        }
-      } else {
-        if (eventType === 'mouseenter') {
-          if (topEdgeElement) {
-            isExpanded = this.getNodeState(nodeElement, 'parent').visible;
-            topEdgeElement.classList.toggle(this.options.icons.expandToUp, !isExpanded);
-            topEdgeElement.classList.toggle(this.options.icons.collapseToDown, isExpanded);
-          }
-          if (bottomEdgeElement) {
-            isExpanded = this.getNodeState(nodeElement, 'children').visible;
-            bottomEdgeElement.classList.toggle(this.options.icons.collapseToDown, !isExpanded);
-            bottomEdgeElement.classList.toggle(this.options.icons.expandToUp, isExpanded);
-          }
-          if (leftEdgeElement || rightEdgeElement) {
-            this.switchHorizontalArrow(nodeElement);
-          }
-        } else {
-          childElements.forEach(function (childEl) {
-            if (childEl.classList && childEl.classList.contains('edge')) {
-              childEl.classList.remove(
-                this.options.icons.expandToUp,
-                this.options.icons.collapseToDown,
-                this.options.icons.collapseToLeft,
-                this.options.icons.expandToRight
-              );
-            }
-          }, this);
+      if (!nodeElement || getState(nodeElement, 'updatingControls')) {
+        return;
+      }
+      if (eventType === 'mouseleave' || eventType === 'focusout') {
+        const activeElement = getDocument().activeElement;
+        if ((eventType === 'mouseleave' && activeElement && activeElement.closest('.node') === nodeElement)
+          || (eventType === 'focusout' && ((nativeEvent.relatedTarget && nodeElement.contains(nativeEvent.relatedTarget))
+            || nodeElement.matches(':hover')))) {
+          return;
         }
+        nodeElement.classList.remove('controls-active');
+        this.removeNodeControls(nodeElement);
+        return;
+      }
+      nodeElement.classList.add('controls-active');
+      this.renderNodeControls(nodeElement);
+      const toggle = nodeElement.querySelector(':scope > .toggleBtn');
+      const topEdge = nodeElement.querySelector(':scope > .topEdge');
+      const bottomEdge = nodeElement.querySelector(':scope > .bottomEdge');
+      if (toggle) {
+        const expanded = this.getNodeState(nodeElement, 'children').visible;
+        toggle.classList.toggle(this.options.icons.collapsed, !expanded);
+        toggle.classList.toggle(this.options.icons.expanded, expanded);
+      }
+      if (topEdge) {
+        const expanded = this.getNodeState(nodeElement, 'parent').visible;
+        topEdge.classList.toggle(this.options.icons.expandToUp, !expanded);
+        topEdge.classList.toggle(this.options.icons.collapseToDown, expanded);
+      }
+      if (bottomEdge) {
+        const expanded = this.getNodeState(nodeElement, 'children').visible;
+        bottomEdge.classList.toggle(this.options.icons.collapseToDown, !expanded);
+        bottomEdge.classList.toggle(this.options.icons.expandToUp, expanded);
+      }
+      if (nodeElement.querySelector(':scope > .horizontalEdge')) {
+        this.switchHorizontalArrow(nodeElement);
       }
     },
     //
@@ -2468,11 +2731,18 @@
       if (!chartElement || !nodeElement || !nodeElement.classList) {
         return;
       }
+      if (nativeEvent.target && nativeEvent.target.closest && nativeEvent.target.closest('.node') !== nodeElement) {
+        return;
+      }
 
       Array.from(chartElement.querySelectorAll('.focused')).forEach(function (focusedEl) {
         focusedEl.classList.remove('focused');
       });
       nodeElement.classList.add('focused');
+      if (!this.isInAction(nodeElement)) {
+        nodeElement.focus({ preventScroll: true });
+        this.nodeEnterLeaveHandler({ type: 'mouseenter', node: nodeElement });
+      }
     },
     addAncestors: function (data, parentId) {
       const rootHierarchyElement = this.chart ? this.chart.querySelector(':scope > .nodes > .hierarchy') : null;
@@ -2502,6 +2772,7 @@
       if (targetSiblingsContainerElement && targetSiblingsContainerElement !== ancestorWrapperElement.parentElement) {
         targetSiblingsContainerElement.appendChild(ancestorWrapperElement);
       }
+      this.refreshNodeControls(targetParentNodeElement);
     },
     addDescendants:function (data, parentEl) {
       const orgChart = this;
@@ -2511,6 +2782,10 @@
       if (!parentElement || !parentElement.parentElement) {
         return;
       }
+      if (getState(parentElement, 'sourceData')) {
+        this.addChildren(parentElement, data);
+        return;
+      }
 
       descendantsElement = getDocument().createElement('ul');
       descendantsElement.className = 'nodes';
@@ -2526,8 +2801,9 @@
     //
     HideFirstParentEnd: function (event) {
       const nativeEvent = event.originalEvent || event;
-      const topEdgeElement = getElement(event.topEdge || nativeEvent.topEdge);
-      const nodeElement = topEdgeElement ? topEdgeElement.parentElement : null;
+      const previousEdge = getElement(event.topEdge || nativeEvent.topEdge);
+      const nodeElement = getElement(event.node || nativeEvent.node) || (previousEdge ? previousEdge.parentElement : null);
+      const topEdgeElement = nodeElement ? nodeElement.querySelector(':scope > .topEdge') : null;
 
       if (this.isInAction(nodeElement)) {
         this.switchVerticalArrow(topEdgeElement);
@@ -2553,7 +2829,7 @@
           this.hideParent(nodeElement);
           if (parentEl) {
             parentEl.addEventListener('transitionend', function (transitionEvent) {
-              transitionEvent.topEdge = topEdgeElement;
+              transitionEvent.node = nodeElement;
               orgChart.HideFirstParentEnd(transitionEvent);
             }, { once: true });
           }
@@ -2572,16 +2848,8 @@
       let childNodesContainerElement;
       let childNodeElements;
       if (childrenState.exist) {
-        childNodesContainerElement = Array.from(nodeElement.parentElement ? nodeElement.parentElement.children : []).find(function (childEl) {
-          return childEl !== nodeElement && childEl.classList && childEl.classList.contains('nodes');
-        }) || null;
-        childNodeElements = childNodesContainerElement
-          ? Array.from(childNodesContainerElement.children).filter(function (childEl) {
-              return childEl.classList && childEl.classList.contains('hierarchy');
-            }).map(function (childHierarchyEl) {
-              return childHierarchyEl.querySelector('.node');
-            }).filter(Boolean)
-          : [];
+        childNodesContainerElement = getChildNodesContainer(nodeElement);
+        childNodeElements = childNodesContainerElement ? this.getChildren(nodeElement) : [];
         if (childNodeElements.some(function (childNodeEl) { return childNodeEl.classList.contains('sliding'); })) { return; }
         // hide the descendant nodes of the specified node
         if (childrenState.visible) {
@@ -2658,7 +2926,13 @@
       }
 
       compactNodeEl.classList.remove('looseMode');
-      nestedLooseModeElements = Array.from(compactNodeEl.querySelectorAll('.looseMode'));
+      const familyContainer = getChildNodesContainer(compactNodeEl);
+      if (familyContainer && familyContainer.classList.contains('compact-family')) {
+        familyContainer.classList.add('hidden');
+      }
+      nestedLooseModeElements = Array.from(compactNodeEl.querySelectorAll('.looseMode')).concat(
+        familyContainer ? Array.from(familyContainer.querySelectorAll('.looseMode')) : []
+      );
       nestedLooseModeElements.forEach(function (nestedLooseModeEl) {
         const nestedBackToCompactSymbolElement = Array.from(nestedLooseModeEl.children || []).find(function (childEl) {
           return childEl.classList && childEl.classList.contains('backToCompactSymbol');
@@ -2668,6 +2942,10 @@
         }) || null;
 
         nestedLooseModeEl.classList.remove('looseMode');
+        const nestedContainer = getChildNodesContainer(nestedLooseModeEl);
+        if (nestedContainer && nestedContainer.classList.contains('compact-family')) {
+          nestedContainer.classList.add('hidden');
+        }
         if (nestedBackToCompactSymbolElement) {
           nestedBackToCompactSymbolElement.classList.add('hidden');
         }
@@ -2701,6 +2979,13 @@
       }
 
       compactNodeEl.classList.add('looseMode');
+      const familyContainer = getChildNodesContainer(compactNodeEl);
+      if (familyContainer && familyContainer.classList.contains('compact-family')) {
+        familyContainer.classList.remove('hidden');
+      }
+      this.getChildren(compactNodeEl).forEach(function (childElement) {
+        childElement.classList.remove('slide-up');
+      });
       backToLooseSymbolElement = Array.from(compactNodeEl.children || []).find(function (childEl) {
         return childEl.classList && childEl.classList.contains('backToLooseSymbol');
       }) || null;
@@ -2804,8 +3089,6 @@
       const origEvent = nativeEvent;
       const isFirefox = /firefox/.test(getWindow().navigator.userAgent.toLowerCase());
       let sourceRect;
-      let transformValue;
-      let transformValues;
       let isVerticalChartDirection;
       let scaleFactor;
       let ghostNodeEl, nodeCoverEl;
@@ -2831,10 +3114,8 @@
       }
 
       sourceRect = sourceNodeEl.getBoundingClientRect();
-      transformValue = chartElement.style.transform || getWindow().getComputedStyle(chartElement).transform || 'none';
-      transformValues = transformValue.split(',');
       isVerticalChartDirection = opts.direction === 't2b' || opts.direction === 'b2t';
-      scaleFactor = Math.abs(getWindow().parseFloat(isVerticalChartDirection ? transformValues[0].slice(transformValues[0].indexOf('(') + 1) : transformValues[1]));
+      scaleFactor = getChartTransform(chartElement).scale;
       ghostNodeEl.setAttribute('width', isVerticalChartDirection ? sourceRect.width : sourceRect.height);
       ghostNodeEl.setAttribute('height', isVerticalChartDirection ? sourceRect.height : sourceRect.width);
       nodeCoverEl.setAttribute('x',5 * scaleFactor);
@@ -2878,12 +3159,10 @@
         return 0;
       }
 
-      currentElement = nodeElement.parentElement;
+      currentElement = nodeElement;
       while (currentElement) {
-        if (currentElement.classList && currentElement.classList.contains('hierarchy')) {
-          levelCount += 1;
-        }
-        currentElement = currentElement.parentElement;
+        levelCount += 1;
+        currentElement = this.getParent(currentElement);
       }
 
       return levelCount;
@@ -2955,15 +3234,18 @@
         ? draggedNodeEl.closest('[draggable]')
         : null;
       draggingNode = !!(draggableHostEl && draggableHostEl.classList && draggableHostEl.classList.contains('node'));
-      draggedParentNodeEl = draggedNodeEl && draggedNodeEl.closest('.nodes')
-        ? draggedNodeEl.closest('.nodes').previousElementSibling
-        : null;
-      draggedSubtreeNodeEls = draggedNodeEl && draggedNodeEl.closest('.hierarchy')
-        ? Array.from(draggedNodeEl.closest('.hierarchy').querySelectorAll('.node'))
-        : [];
+      draggedParentNodeEl = this.getParent(draggedNodeEl);
+      draggedSubtreeNodeEls = [];
+      const pendingNodes = draggingNode ? [draggedNodeEl.closest('.node')] : [];
+      while (pendingNodes.length) {
+        const currentNode = pendingNodes.pop();
+        draggedSubtreeNodeEls.push(currentNode);
+        Array.prototype.push.apply(pendingNodes, this.getChildren(currentNode));
+      }
       excludedNodeEls = new Set(draggedSubtreeNodeEls);
       setState(chartElement, 'dragged', draggedNodeEl);
       Array.from(chartElement.querySelectorAll('.node')).forEach(function (node) {
+        node.classList.remove('allowedDrop');
         if (!draggingNode || !excludedNodeEls.has(node)) {
           if (opts.dropCriteria) {
             if (opts.dropCriteria(draggedNodeEl, draggedParentNodeEl, node)) {
@@ -3052,7 +3334,7 @@
           return;
       }
 
-      draggedParentNodeEl = draggedEl.closest('.nodes') ? draggedEl.closest('.nodes').previousElementSibling : null;
+      draggedParentNodeEl = this.getParent(draggedEl);
       const dropEvent = createEventLike('nodedrop.orgchart');
       if (chartElement) {
         const triggeredDropEvent = createTriggeredEvent(dropEvent, {
@@ -3068,23 +3350,66 @@
       if (dropEvent.isDefaultPrevented()) {
         return;
       }
+      const sourceData = getState(draggedEl, 'sourceData');
+      const parentData = draggedParentNodeEl ? getState(draggedParentNodeEl, 'sourceData') : null;
+      const targetData = getState(dropZoneEl, 'sourceData');
+      const datasource = getState(chartElement, 'datasource') || chartOptions.data;
+      const sourceLocation = sourceData ? findDataLocation(datasource, sourceData) : null;
+      if (sourceData && targetData && findDataLocation(sourceData, targetData)) {
+        return;
+      }
+      const needsRebuild = Array.isArray(datasource) || this.options.compact || chartOptions.verticalLevel
+        || chartElement.querySelector('.node.compact, .nodes.vertical');
+      if (needsRebuild && sourceLocation && sourceLocation.list && targetData) {
+        sourceLocation.list.splice(sourceLocation.index, 1);
+        if (!sourceLocation.list.length && sourceLocation.outerList) {
+          sourceLocation.outerList.splice(sourceLocation.outerIndex, 1);
+        }
+        if (sourceLocation.parent && sourceLocation.parent.children && !sourceLocation.parent.children.length) {
+          delete sourceLocation.parent.children;
+        }
+        const isGrouped = Array.isArray(datasource) || (targetData.children && Array.isArray(targetData.children[0]));
+        if (!targetData.children) {
+          targetData.children = [];
+        }
+        targetData.children.push(isGrouped ? [sourceData] : sourceData);
+        rebuildFromData(this, targetData);
+        return;
+      }
       // special process for hybrid chart
-      const datasource = chartOptions.data;
       const dataDigger = new JSONDigger(datasource, chartOptions.nodeId, 'children');
       const hybridNodeData = dataDigger.findOneNode({ 'hybrid': true });
       if (chartOptions.verticalLevel > 1 || hybridNodeData) {
-        const draggedNodeData = dataDigger.findNodeById(getState(draggedEl, 'nodeData').id);
+        const draggedNodeId = getState(draggedEl, 'nodeData')[chartOptions.nodeId];
+        const dropNodeId = getState(dropZoneEl, 'nodeData')[chartOptions.nodeId];
+        const draggedNodeData = dataDigger.findNodeById(draggedNodeId);
+        const dropNodeData = dataDigger.findNodeById(dropNodeId);
+        if (!draggedNodeData || !dropNodeData) {
+          return;
+        }
         const draggedNodeCopy = Object.assign({}, draggedNodeData);
-        dataDigger.removeNode(draggedNodeData.id);
-        const dropNodeData = dataDigger.findNodeById(getState(dropZoneEl, 'nodeData').id);
+        dataDigger.removeNode(draggedNodeId);
         if (dropNodeData.children) {
           dropNodeData.children.push(draggedNodeCopy);
         } else {
           dropNodeData.children = [draggedNodeCopy];
         }
-		orgChart.attachRel(datasource, '00');
         orgChart.init({ 'data': datasource });
       } else {
+        if (sourceData && parentData && targetData && parentData.children
+          && parentData.children.indexOf(sourceData) !== -1) {
+          parentData.children.splice(parentData.children.indexOf(sourceData), 1);
+          if (!parentData.children.length) {
+            delete parentData.children;
+          }
+          if (!targetData.children) {
+            targetData.children = [];
+          }
+          targetData.children.push(sourceData);
+          sourceData.parentId = targetData[chartOptions.nodeId];
+          getState(draggedEl, 'nodeData').parentId = sourceData.parentId;
+          draggedEl.setAttribute('data-parent', sourceData.parentId);
+        }
         // The folowing code snippets are used to process horizontal chart
         draggedHierarchyEl = draggedEl.closest('.hierarchy');
         dropChildrenContainerEl = Array.from(dropZoneEl.parentElement ? dropZoneEl.parentElement.children : []).find(function (childEl) {
@@ -3092,33 +3417,11 @@
         }) || null;
         // firstly, deal with the hierarchy of drop zone
         if (!dropChildrenContainerEl) { // if the drop zone is a leaf node
-          dropZoneEl.insertAdjacentHTML('beforeend', `<i class="edge verticalEdge bottomEdge ${this.options.icons.theme}"></i>`);
           dropZoneEl.insertAdjacentHTML('afterend', '<ul class="nodes"></ul>');
           dropChildrenContainerEl = dropZoneEl.nextElementSibling;
-          Array.from(draggedEl.querySelectorAll('.horizontalEdge')).forEach(function (edgeEl) {
-            edgeEl.remove();
-          });
           dropChildrenContainerEl.appendChild(draggedHierarchyEl);
-          const titleEl = Array.from(dropZoneEl.children || []).find(function (childEl) {
-            return childEl.classList && childEl.classList.contains('title');
-          }) || null;
-          if (titleEl) {
-            titleEl.insertAdjacentHTML('afterbegin', `<i class="${this.options.icons.theme} ${chartOptions.icons.parentNode} parentNodeSymbol"></i>`);
-          }
         } else {
-          const horizontalEdges = `<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`;
-          if (!draggedEl.querySelector('.horizontalEdge')) {
-            draggedEl.insertAdjacentHTML('beforeend', horizontalEdges);
-          }
           dropChildrenContainerEl.appendChild(draggedHierarchyEl);
-          const dropSiblingNodeEls = Array.from(dropChildrenContainerEl.children || []).filter(function (childEl) {
-            return childEl !== draggedHierarchyEl && childEl.classList && childEl.classList.contains('hierarchy');
-          }).map(function (siblingHierarchyEl) {
-            return siblingHierarchyEl.querySelector('.node');
-          }).filter(Boolean);
-          if (dropSiblingNodeEls.length === 1) {
-            dropSiblingNodeEls[0].insertAdjacentHTML('beforeend', horizontalEdges);
-          }
         }
         // secondly, deal with the hierarchy of dragged node
         draggedParentChildrenContainerEl = Array.from(draggedParentNodeEl && draggedParentNodeEl.parentElement ? draggedParentNodeEl.parentElement.children : []).find(function (childEl) {
@@ -3129,21 +3432,20 @@
               return childEl.classList && childEl.classList.contains('hierarchy');
             })
           : [];
-        if (remainingHierarchyEls.length === 1) { // if there is only one sibling node left
-          const remainingNodeEl = remainingHierarchyEls[0].querySelector('.node');
-          if (remainingNodeEl) {
-            Array.from(remainingNodeEl.querySelectorAll('.horizontalEdge')).forEach(function (edgeEl) {
-              edgeEl.remove();
-            });
-          }
-        } else if (remainingHierarchyEls.length === 0) {
-          Array.from(draggedParentNodeEl.querySelectorAll('.bottomEdge, .parentNodeSymbol')).forEach(function (edgeEl) {
-            edgeEl.remove();
-          });
+        if (remainingHierarchyEls.length === 0) {
           if (draggedParentChildrenContainerEl) {
             draggedParentChildrenContainerEl.remove();
           }
         }
+        dropChildrenContainerEl.classList.remove('hidden');
+        dropZoneEl.closest('.hierarchy').classList.remove('isChildrenCollapsed');
+        this.getChildren(dropZoneEl).forEach(function (childNode) {
+          childNode.classList.remove('slide-up', 'sliding');
+          childNode.closest('.hierarchy').classList.remove('isCollapsedDescendant');
+        });
+        this.refreshNodeControls(draggedParentNodeEl);
+        this.refreshNodeControls(dropZoneEl);
+        this.updateMinimap(true);
       }
     },
     //
@@ -3334,19 +3636,33 @@
         return;
       }
 
-      nodeElement.addEventListener('dragstart', this.dragstartHandler.bind(this));
-      nodeElement.addEventListener('dragover', this.dragoverHandler.bind(this));
-      nodeElement.addEventListener('dragend', this.dragendHandler.bind(this));
-      nodeElement.addEventListener('drop', this.dropHandler.bind(this));
-      nodeElement.addEventListener('touchstart', this.touchstartHandler.bind(this));
-      nodeElement.addEventListener('touchmove', this.touchmoveHandler.bind(this));
-      nodeElement.addEventListener('touchend', this.touchendHandler.bind(this));
+      const orgChart = this;
+      const handlers = {
+        dragstart: this.dragstartHandler,
+        dragover: this.dragoverHandler,
+        dragend: this.dragendHandler,
+        drop: this.dropHandler,
+        touchstart: this.touchstartHandler,
+        touchmove: this.touchmoveHandler,
+        touchend: this.touchendHandler
+      };
+      Object.keys(handlers).forEach(function (eventType) {
+        nodeElement.addEventListener(eventType, function (event) {
+          if (!event.target.closest || event.target.closest('.node') === nodeElement) {
+            handlers[eventType].call(orgChart, event);
+          }
+        }, { passive: false });
+      });
     },
     // create node
     createNode: function (data) {
       const opts = this.options;
       const level = data.level;
-      const flags = data.relationship || '';
+      if ((opts.compact === true && data.children && data.children.length)
+        || (typeof opts.compact === 'function' && opts.compact(data))) {
+        data.compact = true;
+      }
+      const isCompactLayout = usesCompactLayout(data, opts, level);
       const nodeClassName = [
         'node',
         data.className || '',
@@ -3356,7 +3672,7 @@
       const titleMarkupParts = [];
       const contentMarkupParts = [];
       const nodeMarkupParts = [];
-      const shouldAddParentSymbol = Number(flags.substr(2, 1));
+      const shouldAddParentSymbol = !!(data.children && data.children.length);
 
       if (data.children && data[opts.nodeId]) {
         forEachValue(data.children, function (index, child) {
@@ -3379,32 +3695,6 @@
         nodeMarkupParts.push(contentMarkupParts.join(''));
       }
 
-      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.vertical) {
-        if (shouldAddParentSymbol) {
-          nodeMarkupParts.push(`<i class="toggleBtn ${opts.icons.theme}"></i>`);
-        }
-      } else if (data.hybrid) {
-        if (shouldAddParentSymbol) {
-          nodeMarkupParts.push(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`);
-        }
-      } else if (data.compact) {
-        if (shouldAddParentSymbol) {
-          nodeMarkupParts.push(`<i class="${opts.icons.theme} ${opts.icons.backToCompact} backToCompactSymbol hidden"></i>`);
-          nodeMarkupParts.push(`<i class="${opts.icons.theme} ${opts.icons.backToLoose} backToLooseSymbol"></i>`);
-        }
-      } else if (!data.associatedCompact) {
-        if (Number(flags.substr(0, 1))) {
-          nodeMarkupParts.push(`<i class="edge verticalEdge topEdge ${opts.icons.theme}"></i>`);
-        }
-        if (Number(flags.substr(1, 1))) {
-          nodeMarkupParts.push(`<i class="edge horizontalEdge rightEdge ${opts.icons.theme}"></i>`);
-          nodeMarkupParts.push(`<i class="edge horizontalEdge leftEdge ${opts.icons.theme}"></i>`);
-        }
-        if (shouldAddParentSymbol) {
-          nodeMarkupParts.push(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`);
-        }
-      }
-
       // construct the content of node
       const nodeElement = getDocument().createElement('div');
       const routeNodeClick = function (selector, handler) {
@@ -3431,19 +3721,38 @@
         nodeElement.setAttribute('data-parent', data.parentId);
       }
       nodeElement.className = nodeClassName;
+      nodeElement.tabIndex = 0;
       nodeElement.insertAdjacentHTML('beforeend', nodeMarkupParts.join(''));
       //
       const storedNodeData = mergeObjects({}, data);
       delete storedNodeData.children;
       setState(nodeElement, 'nodeData', storedNodeData);
+      setState(nodeElement, 'sourceData', data);
       nodeElement.__ocNodeData = storedNodeData;
-      if (data.compact && nodeElement && nodeElement.style) {
-        nodeElement.style.gridTemplateColumns = `repeat(${Math.floor(Math.sqrt(data.children.length + 1))}, auto)`;
+      if (isCompactLayout && nodeElement && nodeElement.style) {
+        nodeElement.style.gridTemplateColumns = `repeat(${Math.floor(Math.sqrt((data.children || []).length + 1))}, auto)`;
       }
 
       nodeElement.addEventListener('mouseenter', this.nodeEnterLeaveHandler.bind(this));
       nodeElement.addEventListener('mouseleave', this.nodeEnterLeaveHandler.bind(this));
+      nodeElement.addEventListener('focusin', function (event) {
+        if (event.target.closest('.node') === nodeElement) {
+          this.nodeEnterLeaveHandler(event);
+        }
+      }.bind(this));
+      nodeElement.addEventListener('focusout', function (event) {
+        if (event.target.closest('.node') === nodeElement) {
+          this.nodeEnterLeaveHandler(event);
+        }
+      }.bind(this));
       nodeElement.addEventListener('click', this.nodeClickHandler.bind(this));
+      nodeElement.addEventListener('keydown', function (event) {
+        const control = event.target.closest('.edge, .toggleBtn, .backToCompactSymbol, .backToLooseSymbol');
+        if (control && control.parentElement === nodeElement && (event.key === 'Enter' || event.key === ' ')) {
+          event.preventDefault();
+          control.click();
+        }
+      });
       routeNodeClick('.topEdge', this.topEdgeClickHandler);
       routeNodeClick('.bottomEdge', this.bottomEdgeClickHandler);
       routeNodeClick('.leftEdge, .rightEdge', this.hEdgeClickHandler);
@@ -3471,16 +3780,27 @@
       const hierarchyElement = getElement(hierarchyEl);
       const nodeElement = getElement(nodeEl);
       const isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
+      const isCompactLayout = usesCompactLayout(data, opts, level);
       let nodesLayerElement;
 
       if (!hierarchyElement) {
         return;
       }
 
-      if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
+      data.children.flat().forEach(function (child) {
+        if (data.hybrid || data.vertical) {
+          child.vertical = true;
+        } else if (data.compact && child.children) {
+          child.compact = true;
+        } else if (data.compact) {
+          child.associatedCompact = true;
+        }
+      });
+
+      if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid || data.vertical) {
         nodesLayerElement = getDocument().createElement('ul');
         nodesLayerElement.className = 'nodes';
-        if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
+        if (isHidden) {
           nodesLayerElement.classList.add('hidden');
         }
         if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
@@ -3488,10 +3808,16 @@
             nodesLayerElement.classList.add('vertical');
         }
         hierarchyElement.appendChild(nodesLayerElement);
-      } else if (data.compact) {
+      } else if (isCompactLayout) {
         if (nodeElement && nodeElement.classList) {
           nodeElement.classList.add('compact');
         }
+        if (Array.isArray(data.children[0])) {
+          nodesLayerElement = getDocument().createElement('ul');
+          nodesLayerElement.className = 'nodes compact-family hidden';
+          nodesLayerElement.style.setProperty('--compact-columns', Math.ceil(Math.sqrt(data.children.length)));
+          hierarchyElement.appendChild(nodesLayerElement);
+        }
       } else {
         nodesLayerElement = getDocument().createElement('ul');
         nodesLayerElement.className = isHidden ? 'nodes hidden' : 'nodes';
@@ -3500,16 +3826,20 @@
         }
         hierarchyElement.appendChild(nodesLayerElement);
       }
+      if (nodesLayerElement) {
+        const parentNode = nodeElement || hierarchyElement.querySelector(':scope > .node');
+        setState(nodesLayerElement, 'parentData', parentNode ? getState(parentNode, 'sourceData') || data : data);
+      }
       // recurse through children nodes
       if (Array.isArray(data.children[0])) {
         forEachValue(data.children, function() {
-          this.level = level + 1;
+          forEachValue(this, function () { this.level = level + 1; });
         });
         this.buildHierarchy(nodesLayerElement, data.children); // 构造子一层的夫妻组合（每个组合可能有多妻多夫情况）
       } else {
         forEachValue(data.children, function () {
           this.level = level + 1;
-          if (data.compact) {
+          if (isCompactLayout) {
             orgChart.buildHierarchy(nodeElement, this);
           } else {
             const nodeCellElement = getDocument().createElement('li');
@@ -3533,8 +3863,8 @@
         return;
       }
 
-      if (data.level || data[0]?.level) {
-        level = data.level;
+      if (data.level || data[0]?.level || data[0]?.[0]?.level) {
+        level = data.level || data[0]?.level || data[0]?.[0]?.level;
       } else {
         let currentAncestorElement = hierarchyElement.parentElement;
 
@@ -3545,6 +3875,7 @@
           currentAncestorElement = currentAncestorElement.parentElement;
         }
         if (Array.isArray(data) && Array.isArray(data[0])) {
+          level = Math.max(level, 1);
           forEachValue(data, function () {
             forEachValue(this, function () {
               this.level = level;
@@ -3566,7 +3897,7 @@
             // if there are only two persons in a marriage, two single nodes will appear in a hierarchy
             if (familyNodes.length === 2 && i === 1) {
               spouseNodeElement = Array.from(hierarchyElement.querySelectorAll('.node')).find(function (candidateNodeEl) {
-                return candidateNodeEl.id === familyNodes[0].id;
+                return getState(candidateNodeEl, 'sourceData') === familyNodes[0];
               }) || null;
               if (spouseNodeElement && spouseNodeElement.parentElement) {
                 spouseNodeElement.after(nodeElement);
@@ -3600,7 +3931,7 @@
           });
         });
       } else {
-        if (Object.keys(data).length > 2) { // TODO: 应该用更好的方式来判断是否是供父一级节点创建的信息
+        if (Object.keys(data).some(function (key) { return key !== 'children' && key !== 'level'; })) {
           nodeElement = this.createNode(data);
           hierarchyElement.appendChild(nodeElement);
         }
@@ -3639,35 +3970,26 @@
     // exposed method
     addChildren: function (nodeEl, data) {
       const nodeElement = getElement(nodeEl);
-      let titleElement;
-      let bottomEdgeElement;
 
       if (!nodeElement) {
         return;
       }
-
-      this.buildChildNode(nodeElement.closest('.hierarchy'), data);
-      if (!nodeElement.querySelector('.parentNodeSymbol')) {
-        titleElement = Array.from(nodeElement.children || []).find(function (childEl) {
-          return childEl.classList && childEl.classList.contains('title');
-        }) || null;
-        if (titleElement) {
-          titleElement.insertAdjacentHTML('afterbegin', `<i class="${this.options.icons.theme} ${this.options.icons.parentNode} parentNodeSymbol"></i>`);
+      const nodeData = getState(nodeElement, 'sourceData');
+      if (nodeData) {
+        const datasource = getState(this.chart, 'datasource');
+        const isGrouped = Array.isArray(datasource) || (nodeData.children && Array.isArray(nodeData.children[0]));
+        if (!nodeData.children) {
+          nodeData.children = [];
         }
-      }
-      if (nodeElement.closest('.nodes.vertical')) {
-        if (!nodeElement.querySelector(':scope > .toggleBtn')) {
-          nodeElement.insertAdjacentHTML('beforeend', `<i class="toggleBtn ${this.options.icons.theme}"></i>`);
+        Array.prototype.push.apply(nodeData.children, isGrouped ? data.map(function (item) { return Array.isArray(item) ? item : [item]; }) : data);
+        if (isGrouped || this.chart.querySelector('.node.compact') || this.options.compact) {
+          rebuildFromData(this, nodeData);
+          return;
         }
-      } else if (!nodeElement.querySelector(':scope > .bottomEdge')) {
-        nodeElement.insertAdjacentHTML('beforeend', `<i class="edge verticalEdge bottomEdge ${this.options.icons.theme}"></i>`);
-      }
-      if (this.isInAction(nodeElement)) {
-        bottomEdgeElement = Array.from(nodeElement.children || []).find(function (childEl) {
-          return childEl.classList && childEl.classList.contains('bottomEdge');
-        }) || null;
-        this.switchVerticalArrow(bottomEdgeElement);
       }
+
+      this.buildChildNode(nodeElement.closest('.hierarchy'), data);
+      this.refreshNodeControls(nodeElement);
     },
     // build the parent node of specific node
     buildParentNode: function (currentRootEl, data) {
@@ -3683,7 +4005,6 @@
         return;
       }
 
-      data.relationship = data.relationship || '001';
       currentRootListElement = currentRootElement.closest('ul');
       currentRootHierarchyElement = currentRootElement.closest('.hierarchy');
       parentHierarchyElement = currentRootListElement ? currentRootListElement.closest('.hierarchy') : null;
@@ -3714,28 +4035,51 @@
     // exposed method
     addParent: function (currentRootEl, data) {
       const currentRootElement = getElement(currentRootEl);
-      let titleElement;
-      let topEdgeElement;
 
       if (!currentRootElement) {
         return;
       }
+      const currentData = getState(currentRootElement, 'sourceData');
+      const datasource = getState(this.chart, 'datasource');
+      if (currentData && (Array.isArray(datasource) || this.chart.querySelector('.node.compact') || this.options.compact)) {
+        const parentElement = this.getParent(currentRootElement);
+        const parentData = parentElement ? getState(parentElement, 'sourceData') : null;
+        const newParentData = mergeObjects({}, data, { children: Array.isArray(datasource) ? [[currentData]] : [currentData] });
+        const location = findDataLocation(datasource, currentData);
+        if (Array.isArray(datasource) && location && location.list) {
+          location.list.splice(location.index, 1, newParentData);
+          rebuildFromData(this, newParentData);
+          return;
+        }
+        if (parentData && parentData.children) {
+          const index = parentData.children.indexOf(currentData);
+          if (index === -1) {
+            return;
+          }
+          parentData.children.splice(index, 1, newParentData);
+          rebuildFromData(this, newParentData);
+        } else {
+          rebuildFromData(this, newParentData, newParentData);
+        }
+        return;
+      }
 
+      const currentLocation = currentData ? findDataLocation(datasource, currentData) : null;
       this.buildParentNode(currentRootElement, data);
-      if (!currentRootElement.querySelector(':scope > .topEdge')) {
-        titleElement = Array.from(currentRootElement.children || []).find(function (childEl) {
-          return childEl.classList && childEl.classList.contains('title');
-        }) || null;
-        if (titleElement) {
-          titleElement.insertAdjacentHTML('afterend', `<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
+      if (currentData) {
+        data.children = [currentData];
+        if (currentLocation && currentLocation.list) {
+          currentLocation.list.splice(currentLocation.index, 1, data);
+        } else {
+          setState(this.chart, 'datasource', data);
+          this.options.data = data;
+          this.opts.data = data;
         }
+        currentData.parentId = data[this.options.nodeId];
+        getState(currentRootElement, 'nodeData').parentId = currentData.parentId;
+        currentRootElement.setAttribute('data-parent', currentData.parentId);
       }
-      if (this.isInAction(currentRootElement)) {
-        topEdgeElement = Array.from(currentRootElement.children || []).find(function (childEl) {
-          return childEl.classList && childEl.classList.contains('topEdge');
-        }) || null;
-        this.switchVerticalArrow(topEdgeElement);
-      }
+      this.refreshNodeControls(this.getParent(currentRootElement));
     },
     // build the sibling nodes of specific node
     buildSiblingNode: function (nodeChartEl, data) {
@@ -3836,49 +4180,88 @@
     addSiblings: function (nodeEl, data) {
       const nodeElement = getElement(nodeEl);
       let nodesContainerElement;
-      let topEdgeElement;
 
       if (!nodeElement) {
         return;
       }
+      const nodeData = getState(nodeElement, 'sourceData');
+      const datasource = getState(this.chart, 'datasource');
+      if (nodeData && (Array.isArray(datasource) || this.chart.querySelector('.node.compact') || this.options.compact)) {
+        const parentElement = this.getParent(nodeElement);
+        const parentData = parentElement ? getState(parentElement, 'sourceData') : null;
+        const newSiblings = Array.isArray(data) ? data : data.children;
+        if (parentData && parentData.children) {
+          const siblings = Array.isArray(datasource) ? (newSiblings || []).map(function (item) { return Array.isArray(item) ? item : [item]; }) : newSiblings || [];
+          Array.prototype.push.apply(parentData.children, siblings);
+          rebuildFromData(this, parentData);
+        } else if (Array.isArray(datasource) && Array.isArray(data)) {
+          Array.prototype.push.apply(datasource, data.map(function (item) { return Array.isArray(item) ? item : [item]; }));
+          rebuildFromData(this);
+        } else if (!Array.isArray(data)) {
+          const children = (newSiblings || []).slice();
+          const insertPosition = Math.floor((children.length + 1) / 2 - 1) + 1;
+          children.splice(Math.max(insertPosition, 0), 0, nodeData);
+          const newParentData = mergeObjects({}, data, { children: children });
+          rebuildFromData(this, newParentData, newParentData);
+        }
+        return;
+      }
 
+      const oldParent = this.getParent(nodeElement);
+      const oldParentData = oldParent ? getState(oldParent, 'sourceData') : null;
       this.buildSiblingNode(nodeElement.closest('.hierarchy'), data);
+      if (nodeData && oldParentData && oldParentData.children && Array.isArray(data)) {
+        Array.prototype.push.apply(oldParentData.children, data);
+      } else if (nodeData && !oldParentData && !Array.isArray(data) && data.children) {
+        const insertPosition = Math.floor((data.children.length + 1) / 2 - 1) + 1;
+        data.children.splice(Math.max(insertPosition, 0), 0, nodeData);
+        setState(this.chart, 'datasource', data);
+        this.options.data = data;
+        this.opts.data = data;
+      }
       nodesContainerElement = nodeElement.closest('.nodes');
       if (nodesContainerElement) {
         setState(nodesContainerElement, 'siblingsLoaded', true);
       }
-      if (!Array.from(nodeElement.children || []).some(function (childEl) {
-        return childEl.classList && childEl.classList.contains('leftEdge');
-      })) {
-        topEdgeElement = Array.from(nodeElement.children || []).find(function (childEl) {
-          return childEl.classList && childEl.classList.contains('topEdge');
-        }) || null;
-        if (topEdgeElement) {
-          topEdgeElement.insertAdjacentHTML('afterend', `<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
-        }
-      }
-      if (this.isInAction(nodeElement)) {
-        this.switchHorizontalArrow(nodeElement);
-        topEdgeElement = Array.from(nodeElement.children || []).find(function (childEl) {
-          return childEl.classList && childEl.classList.contains('topEdge');
-        }) || null;
-        if (topEdgeElement && topEdgeElement.classList) {
-          topEdgeElement.classList.remove(this.options.icons.expandToUp);
-          topEdgeElement.classList.add(this.options.icons.collapseToDown);
-        }
-      }
+      this.refreshNodeControls(this.getParent(nodeElement));
     },
     // remove node and its descendent nodes
     removeNodes: function (nodeEl) {
       const nodeElement = getElement(nodeEl);
       let hierarchyElement;
       let wrapperElement;
-      let remainingNodeElement;
-      let parentNodeElement;
 
       if (!nodeElement) {
         return;
       }
+      const parentElement = this.getParent(nodeElement);
+      const parentData = parentElement ? getState(parentElement, 'sourceData') : null;
+      const nodeData = getState(nodeElement, 'sourceData');
+      const datasource = getState(this.chart, 'datasource');
+      if (Array.isArray(datasource) && nodeData) {
+        const location = findDataLocation(datasource, nodeData);
+        if (location && location.list) {
+          location.list.splice(location.index, 1);
+          if (!location.list.length && location.outerList) {
+            location.outerList.splice(location.outerIndex, 1);
+          }
+          if (location.parent && location.parent.children && !location.parent.children.length) {
+            delete location.parent.children;
+          }
+          rebuildFromData(this);
+          return;
+        }
+      }
+      if (parentData && parentData.children && parentData.children.indexOf(nodeData) !== -1) {
+        parentData.children.splice(parentData.children.indexOf(nodeData), 1);
+        if (!parentData.children.length) {
+          delete parentData.children;
+        }
+        if (this.chart.querySelector('.node.compact') || this.options.compact) {
+          rebuildFromData(this);
+          return;
+        }
+      }
 
       hierarchyElement = nodeElement.closest('.hierarchy');
       wrapperElement = hierarchyElement ? hierarchyElement.parentElement : null;
@@ -3890,23 +4273,10 @@
       if (wrapperElement.parentElement && wrapperElement.parentElement.classList && wrapperElement.parentElement.classList.contains('hierarchy')) {
         if (this.getNodeState(nodeElement, 'siblings').exist) {
           hierarchyElement.remove();
-          if (wrapperElement.children.length === 1) {
-            remainingNodeElement = wrapperElement.querySelector('.node');
-            if (remainingNodeElement) {
-              Array.from(remainingNodeElement.querySelectorAll('.horizontalEdge')).forEach(function (edgeEl) {
-                edgeEl.remove();
-              });
-            }
-          }
         } else {
-          parentNodeElement = wrapperElement.parentElement.querySelector(':scope > .node');
-          if (parentNodeElement) {
-            Array.from(parentNodeElement.querySelectorAll('.bottomEdge, .parentNodeSymbol')).forEach(function (edgeEl) {
-              edgeEl.remove();
-            });
-          }
           wrapperElement.remove();
         }
+        this.refreshNodeControls(parentElement);
       } else { // if $node is root node
         const chartElement = wrapperElement.closest('.orgchart');
         if (chartElement) {
@@ -3998,7 +4368,6 @@
       const isEdge = navigatorObject.appName === 'Microsoft Internet Explorer' || (navigatorObject.appName === 'Netscape' && navigatorObject.appVersion.indexOf('Edge') > -1);
       const chartContainerElement = this.chartContainer;
       let downloadButtonClassName;
-      let downloadSelector;
       let downloadAnchorElement;
 
       if (!chartContainerElement) {
@@ -4009,8 +4378,12 @@
         getWindow().navigator.msSaveBlob(canvas.msToBlob(), exportFilename + '.png');
       } else {
         downloadButtonClassName = 'download-btn' + (this.options.chartClass !== '' ? ' ' + this.options.chartClass : '');
-        downloadSelector = '.download-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '');
-        downloadAnchorElement = chartContainerElement.querySelector(downloadSelector);
+        const chartClassNames = this.options.chartClass.split(/\s+/).filter(Boolean);
+        downloadAnchorElement = Array.from(chartContainerElement.querySelectorAll('a.download-btn')).find(function (anchorElement) {
+          return chartClassNames.every(function (className) {
+            return anchorElement.classList.contains(className);
+          });
+        });
 
         if (!downloadAnchorElement) {
           downloadAnchorElement = getDocument().createElement('a');