orgchart 5.0.0 → 6.0.0

package/test/cypress/e2e/demo-interactions.cy.js

@@ -0,0 +1,91 @@
+describe('Demo Interactions', () => {
+
+  it('loads the ajax datasource after showing its loading state', () => {
+    cy.visit('demo/ajax-datasource.html');
+    cy.get('#chart-container .spinner').should('exist');
+    cy.get('#chart-container .node .title', { timeout: 6000 }).should('contain.text', 'Lao Lao');
+    cy.get('#chart-container .spinner').should('not.exist');
+  });
+
+  it('centers the selected node', () => {
+    cy.visit('demo/center-on-selected-node.html');
+    cy.get('#chart-container .orgchart').invoke('css', 'transform').then((beforeTransform) => {
+      cy.contains('#chart-container .node .title', 'Su Miao').closest('.node').click();
+      cy.get('#chart-container .orgchart').should('not.have.css', 'transform', beforeTransform);
+    });
+  });
+
+  it('starts configured branches collapsed and expands them', () => {
+    cy.visit('demo/default-collapsed.html');
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').then(($node) => {
+      expect($node[0].nextElementSibling).to.have.class('hidden');
+    });
+
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').find('.bottomEdge').click();
+    cy.contains('#chart-container .node .title', 'Dan Dan').should('be.visible');
+  });
+
+  it('adds a sibling in the editable hybrid chart', () => {
+    cy.visit('demo/edit-hybrid-chart.html');
+    cy.contains('#chart-container .node .title', 'Football').closest('.node').click();
+    cy.get('#new-nodelist .new-node').type('Futsal');
+    cy.get('#rd-sibling').click();
+    cy.get('#btn-add-nodes').click();
+    cy.contains('#chart-container .node .title', 'Futsal').should('exist');
+  });
+
+  it('expands a selected branch to the configured depth', () => {
+    cy.visit('demo/expand-to-given-depth.html');
+    cy.contains('#chart-container .node .title', 'Su Miao').closest('.node').find('.bottomEdge').click();
+    cy.contains('#chart-container .node .title', 'Dan Zai').should('be.visible');
+    cy.contains('#chart-container .node .title', 'Er Dan Zai').should('not.be.visible');
+    cy.contains('#chart-container .node .title', 'AAA').should('not.be.visible');
+  });
+
+  it('filters matching nodes and clears the filter result', () => {
+    cy.visit('demo/filter-node.html');
+    cy.get('#key-word').type('dan');
+    cy.get('#btn-filter-node').click();
+    cy.get('#chart-container .node.matched').should('have.length.at.least', 1);
+    cy.get('#chart-container .orgchart').should('have.class', 'noncollapsable');
+    cy.get('#btn-cancel').click();
+    cy.get('#chart-container .node.matched').should('not.exist');
+    cy.get('#chart-container .orgchart').should('not.have.class', 'noncollapsable');
+  });
+
+  it('exports the current unordered-list hierarchy as JSON', () => {
+    cy.visit('demo/get-hierarchy.html');
+    cy.get('#btn-export-hier').click();
+    cy.get('pre').should('contain.text', 'n1').and('contain.text', 'n7');
+  });
+
+  it('highlights and clears related nodes on hover', () => {
+    cy.visit('demo/get-related-nodes.html');
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').trigger('mouseenter');
+    cy.get('#chart-container .highlight-parent').should('exist');
+    cy.get('#chart-container .highlight-siblings').should('exist');
+    cy.get('#chart-container .highlight-children').should('exist');
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').trigger('mouseleave');
+    cy.get('#chart-container .highlight-parent, #chart-container .highlight-siblings, #chart-container .highlight-children').should('not.exist');
+  });
+
+  it('toggles the custom secondary menu created for each node', () => {
+    cy.visit('demo/option-createNode.html');
+    cy.contains('#chart-container .node .title', 'Lao Lao').closest('.node').find('.second-menu-icon').click({ force: true });
+    cy.contains('#chart-container .node .title', 'Lao Lao').closest('.node').find('.second-menu').should('have.css', 'display', 'block');
+  });
+
+  it('switches to a hybrid layout on a narrow viewport', () => {
+    cy.viewport(500, 720);
+    cy.visit('demo/responsive-design.html');
+    cy.window().trigger('resize');
+    cy.get('#chart-container .verticalNodes, #chart-container .toggleBtn').should('exist');
+  });
+
+  it('renders all 10,000 generated nodes', () => {
+    cy.visit('demo/10000-nodes.html');
+    cy.get('#status', { timeout: 30000 }).should('contain.text', 'Initialization completed');
+    cy.get('#chart-container .node').should('have.length', 10000);
+  });
+
+});

package/test/cypress/e2e/demo-rendering.cy.js

@@ -0,0 +1,100 @@
+describe('Demo Rendering and Configuration', () => {
+
+  const visitChartDemo = (page) => {
+    cy.visit('demo/' + page);
+    cy.get('#chart-container .orgchart').should('exist');
+  };
+
+  it('renders the bottom-to-top chart', () => {
+    visitChartDemo('bottom2top.html', 'Bottom to Top Demo');
+    cy.get('#chart-container .orgchart').should('have.class', 'b2t');
+  });
+
+  it('renders color-coded node levels', () => {
+    visitChartDemo('color-coded.html', 'Color Coded Demo');
+    cy.get('#chart-container .node').filter('.middle-level, .product-dept, .rd-dept').should('exist');
+  });
+
+  it('renders custom control icons', () => {
+    visitChartDemo('custom-icons.html', 'Custom Icons Demo');
+    cy.get('#chart-container .node .toggleBtn').should('have.class', 'fa-solid');
+  });
+
+  it('renders the custom node template', () => {
+    visitChartDemo('custom-template.html', 'Custom Template Demo');
+    cy.get('#chart-container .node .office').should('exist');
+  });
+
+  it('renders compact nodes from node data', () => {
+    visitChartDemo('data-prop-compact.html', 'Compact Nodes Demo');
+    cy.get('#chart-container .node.compact').should('exist');
+  });
+
+  it('renders hybrid nodes from node data', () => {
+    visitChartDemo('data-prop-hybrid.html', 'Hybrid Nodes Demo');
+    cy.get('#chart-container .verticalNodes, #chart-container .toggleBtn').should('exist');
+  });
+
+  it('renders the PNG export control', () => {
+    visitChartDemo('export-chart.html', 'Export Chart Demo');
+    cy.get('.oc-export-btn').should('be.visible');
+  });
+
+  it('renders the PDF export control', () => {
+    visitChartDemo('export-chart-pdf.html', 'Export PDF Demo');
+    cy.get('.oc-export-btn').should('be.visible');
+  });
+
+  it('renders the picture export control and avatars', () => {
+    visitChartDemo('export-chart-with-pictures.html', 'Export Chart with Pictures Demo');
+    cy.get('.oc-export-btn').should('be.visible');
+    cy.get('#chart-container .avatar').should('exist');
+  });
+
+  it('renders the family-tree relationship layout', () => {
+    visitChartDemo('family-tree.html', 'Family Tree Demo');
+    cy.get('#chart-container .node').should('have.length.at.least', 3);
+  });
+
+  it('renders family-tree custom properties', () => {
+    visitChartDemo('familytree-custom-properties.html', 'Family Tree Custom Properties Demo');
+    cy.get('#chart-container .node').should('have.length.at.least', 3);
+  });
+
+  it('renders the left-to-right chart', () => {
+    visitChartDemo('left2right.html', 'Left to Right Demo');
+    cy.get('#chart-container .orgchart').should('have.class', 'l2r');
+  });
+
+  it('renders link nodes', () => {
+    visitChartDemo('link-node.html', 'Link Nodes Demo');
+    cy.get('#chart-container .node').should('have.length.at.least', 2);
+  });
+
+  it('renders nodes with different widths', () => {
+    visitChartDemo('nodes-of-different-widths.html', 'Nodes of Different Widths Demo');
+    cy.get('#chart-container .node').then(($nodes) => {
+      const widths = Array.from($nodes, (node) => node.getBoundingClientRect().width);
+
+      expect(new Set(widths).size).to.be.greaterThan(1);
+    });
+  });
+
+  it('renders the right-to-left chart', () => {
+    visitChartDemo('right2left.html', 'Right to Left Demo');
+    cy.get('#chart-container .orgchart').should('have.class', 'r2l');
+  });
+
+  it('parses the unordered-list datasource', () => {
+    visitChartDemo('ul-datasource.html', 'UL Datasource Demo');
+    cy.contains('#chart-container .node .title', 'Lao Lao').should('exist');
+  });
+
+  it('renders the map integration page shell without requiring map tiles', () => {
+    cy.visit('demo/integrate-map.html');
+    cy.contains('h1', 'Map Integration Demo').should('be.visible');
+    cy.get('#map').should('exist');
+    cy.get('#chart-container').should('exist');
+  });
+
+});

package/test/cypress/e2e/drag-drop-hybrid-chart.cy.js

@@ -0,0 +1,22 @@
+describe('Hybrid Drag and Drop Chart', () => {
+
+  const sanDan = '.node:contains("San Dan")';
+  const sanYue = '.node:contains("San Yue")';
+
+  beforeEach(() => {
+    cy.visit('demo/drag-drop-hybrid-chart.html');
+  });
+
+  it('recomputes vertical relationships after moving a nested branch', () => {
+    const dataTransfer = new DataTransfer();
+
+    cy.get(sanDan).trigger('dragstart', { dataTransfer, force: true });
+    cy.get(sanYue).trigger('drop', { dataTransfer, force: true });
+
+    cy.get(sanYue).should(($node) => {
+      expect($node.siblings('.nodes').find('.node:contains("San Dan")')).to.exist;
+      expect($node.find('.toggleBtn')).to.exist;
+    });
+  });
+
+});

package/test/cypress/e2e/edit-chart.cy.js

@@ -31,6 +31,26 @@ describe('Edit Chart', () => {
     });
   });
 
+  it('add parent to a non-root node without changing its branch', () => {
+    cy.get(football).click();
+    cy.get(newNodes).eq(0).type('Indoor sports');
+    cy.get(parentRel).click();
+    cy.get(addBtn).click();
+
+    cy.get(ballgame).should(($root) => {
+      const rootChildNodes = $root[0].nextElementSibling;
+      const rootChildren = Array.from(rootChildNodes.children);
+      const localParentHierarchy = rootChildren.find((hierarchy) =>
+        hierarchy.querySelector(':scope > .node > .title').textContent === 'Indoor sports'
+      );
+
+      expect(rootChildren).to.have.length(3);
+      expect(localParentHierarchy.querySelector(':scope > .nodes > .hierarchy > .node > .title').textContent).to.equal('Football');
+      expect(rootChildren.map((hierarchy) => hierarchy.querySelector(':scope > .node > .title').textContent))
+        .to.include.members(['Indoor sports', 'Basketball', 'Volleyball']);
+    });
+  });
+
   it('add child nodes -- Futsal and Beach football', () => {
     cy.get(football).click();
     cy.get(newNodes).eq(0).type('Futsal');

package/test/cypress/e2e/level-offset.cy.js

@@ -0,0 +1,21 @@
+describe('Level Offset', () => {
+
+  beforeEach(() => {
+    cy.visit('demo/level-offset.html');
+  });
+
+  it('applies the configured offset to the node and connector variables', () => {
+    cy.contains('.node .title', 'Hong Miao')
+      .closest('.node')
+      .should('have.css', 'margin-top', '140px')
+      .then(($node) => {
+        const nodeStyle = $node[0].style;
+
+        expect(nodeStyle.getPropertyValue('--top')).to.equal('-151px');
+        expect(nodeStyle.getPropertyValue('--height')).to.equal('149px');
+        expect(nodeStyle.getPropertyValue('--top-cross-point')).to.equal('-153px');
+        expect(nodeStyle.getPropertyValue('--height-cross-point')).to.equal('151px');
+      });
+  });
+
+});

package/test/cypress/e2e/minimap.cy.js

@@ -0,0 +1,66 @@
+describe('Minimap', () => {
+
+  const chart = '.orgchart';
+  const minimap = '.orgchart-minimap';
+  const minimapViewport = '.orgchart-minimap-viewport';
+  const parseMatrixScale = (transformValue) => {
+    const matrixMatch = /matrix\(([^)]+)\)/.exec(transformValue || '');
+
+    return matrixMatch ? Number.parseFloat(matrixMatch[1].split(',')[0]) : 1;
+  };
+
+  beforeEach(() => {
+    cy.visit('demo/minimap.html');
+  });
+
+  it('renders an overview and moves the chart when its viewport is dragged', () => {
+    cy.get(minimap).should('be.visible');
+    cy.get('.orgchart-minimap-node').should('have.length.at.least', 30);
+    cy.get(minimapViewport).should('be.visible');
+
+    cy.get(chart).invoke('css', 'transform').then((beforeTransform) => {
+      cy.get(minimapViewport).then(($viewport) => {
+        const viewport = $viewport[0];
+        const rect = viewport.getBoundingClientRect();
+        const startX = rect.left + (rect.width / 2);
+        const startY = rect.top + (rect.height / 2);
+        const win = viewport.ownerDocument.defaultView;
+
+        viewport.dispatchEvent(new win.MouseEvent('mousedown', {
+          bubbles: true,
+          cancelable: true,
+          clientX: startX,
+          clientY: startY
+        }));
+        viewport.ownerDocument.dispatchEvent(new win.MouseEvent('mousemove', {
+          bubbles: true,
+          clientX: startX + 20,
+          clientY: startY + 20
+        }));
+        viewport.ownerDocument.dispatchEvent(new win.MouseEvent('mouseup', { bubbles: true }));
+      });
+
+      cy.get(chart).should('not.have.css', 'transform', beforeTransform);
+    });
+  });
+
+  it('zooms the main chart from the minimap wheel control', () => {
+    cy.get(chart).invoke('css', 'transform').then((beforeTransform) => {
+      cy.get(minimap).then(($minimap) => {
+        const minimapElement = $minimap[0];
+        const win = minimapElement.ownerDocument.defaultView;
+
+        minimapElement.dispatchEvent(new win.WheelEvent('wheel', {
+          bubbles: true,
+          cancelable: true,
+          deltaY: -1
+        }));
+      });
+
+      cy.get(chart).invoke('css', 'transform').then((afterTransform) => {
+        expect(parseMatrixScale(afterTransform)).to.be.greaterThan(parseMatrixScale(beforeTransform));
+      });
+    });
+  });
+
+});

package/test/cypress/e2e/pan-zoom.cy.js

@@ -5,6 +5,70 @@ describe('Pan & Zoom', () => {
   });
 
   const chart = '.orgchart';
+  const chartContainer = '#chart-container';
+  const pinchAnchorTolerance = 5;
+  const dispatchTouchEvent = (win, target, type, touches) => {
+    const touchLikePoints = touches.map((touch, index) => ({
+      identifier: index,
+      target,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      pageX: touch.clientX,
+      pageY: touch.clientY,
+      screenX: touch.clientX,
+      screenY: touch.clientY
+    }));
+    const touchEvent = new win.Event(type, {
+      bubbles: true,
+      cancelable: true
+    });
+
+    Object.defineProperty(touchEvent, 'touches', {
+      value: type === 'touchend' ? [] : touchLikePoints,
+      configurable: true
+    });
+    Object.defineProperty(touchEvent, 'targetTouches', {
+      value: type === 'touchend' ? [] : touchLikePoints,
+      configurable: true
+    });
+    Object.defineProperty(touchEvent, 'changedTouches', {
+      value: touchLikePoints,
+      configurable: true
+    });
+
+    target.dispatchEvent(touchEvent);
+  };
+  const parseMatrixScale = (transformValue) => {
+    const matrixMatch = /matrix\(([^)]+)\)/.exec(transformValue || '');
+
+    if (!matrixMatch) {
+      return 1;
+    }
+
+    return Number.parseFloat(matrixMatch[1].split(',')[0]);
+  };
+  const pinchAtPoint = (win, target, center, startGap, endGap) => {
+    const initialTouches = [
+      { clientX: center.x - (startGap / 2), clientY: center.y },
+      { clientX: center.x + (startGap / 2), clientY: center.y }
+    ];
+    const movedTouches = [
+      { clientX: center.x - (endGap / 2), clientY: center.y },
+      { clientX: center.x + (endGap / 2), clientY: center.y }
+    ];
+
+    dispatchTouchEvent(win, target, 'touchstart', initialTouches);
+    dispatchTouchEvent(win, win.document, 'touchmove', movedTouches);
+    dispatchTouchEvent(win, win.document, 'touchend', movedTouches);
+  };
+  const getNodeCenter = ($node) => {
+    const rect = $node[0].getBoundingClientRect();
+
+    return {
+      x: rect.left + (rect.width / 2),
+      y: rect.top + (rect.height / 2)
+    };
+  };
 
   it('drag the chart to the top', () => {
     cy.get(chart)
@@ -38,4 +102,105 @@ describe('Pan & Zoom', () => {
     .should('have.css', 'transform', 'matrix(1, 0, 0, 1, 100, 0)');
   });
 
+  it('zooms around the node under the mouse pointer', () => {
+    cy.contains('.node .title', 'Lao Lao')
+      .closest('.node')
+      .then(($node) => {
+        const beforeCenter = getNodeCenter($node);
+
+        cy.get(chartContainer).then(($container) => {
+          const wheelEvent = new $container[0].ownerDocument.defaultView.WheelEvent('wheel', {
+            deltaY: -1,
+            clientX: beforeCenter.x,
+            clientY: beforeCenter.y,
+            bubbles: true,
+            cancelable: true
+          });
+
+          $container[0].dispatchEvent(wheelEvent);
+        });
+
+        cy.contains('.node .title', 'Lao Lao')
+          .closest('.node')
+          .then(($zoomedNode) => {
+            const afterCenter = getNodeCenter($zoomedNode);
+
+            expect(Math.abs(afterCenter.x - beforeCenter.x)).to.be.lessThan(1);
+            expect(Math.abs(afterCenter.y - beforeCenter.y)).to.be.lessThan(1);
+          });
+      });
+  });
+
+  it('ignores wheel zoom when the pointer is outside the chart container bounds', () => {
+    cy.get(chart).invoke('css', 'transform').then((beforeTransform) => {
+      cy.get(chartContainer).then(($container) => {
+        const rect = $container[0].getBoundingClientRect();
+
+        cy.get(chartContainer).trigger('wheel', {
+          eventConstructor: 'WheelEvent',
+          deltaY: -1,
+          clientX: rect.left - 5,
+          clientY: rect.top + 10,
+          bubbles: true,
+          cancelable: true
+        });
+      });
+
+      cy.get(chart).should('have.css', 'transform', beforeTransform);
+    });
+  });
+
+  it('zooms in on touch pinch out', () => {
+    cy.window().then((win) => {
+      const chartContainerElement = win.document.querySelector(chartContainer);
+
+      pinchAtPoint(win, chartContainerElement, { x: 160, y: 160 }, 40, 80);
+    });
+
+    cy.get(chart)
+      .invoke('css', 'transform')
+      .then((transformValue) => {
+        expect(parseMatrixScale(transformValue)).to.be.greaterThan(1);
+      });
+  });
+
+  it('zooms out on touch pinch in', () => {
+    cy.window().then((win) => {
+      const chartContainerElement = win.document.querySelector(chartContainer);
+
+      pinchAtPoint(win, chartContainerElement, { x: 160, y: 160 }, 80, 40);
+    });
+
+    cy.get(chart)
+      .invoke('css', 'transform')
+      .then((transformValue) => {
+        expect(parseMatrixScale(transformValue)).to.be.lessThan(1);
+      });
+  });
+
+  it('keeps the pinch midpoint inside the same node during touch pinch', () => {
+    cy.contains('.node .title', 'Lao Lao')
+      .closest('.node')
+      .then(($node) => {
+        const beforeCenter = getNodeCenter($node);
+
+        cy.window().then((win) => {
+          const chartContainerElement = win.document.querySelector(chartContainer);
+
+          pinchAtPoint(win, chartContainerElement, beforeCenter, 40, 80);
+        });
+
+        cy.contains('.node .title', 'Lao Lao')
+          .closest('.node')
+          .then(($zoomedNode) => {
+            const rect = $zoomedNode[0].getBoundingClientRect();
+
+            expect(beforeCenter.x).to.be.greaterThan(rect.left - pinchAnchorTolerance);
+            expect(beforeCenter.x).to.be.lessThan(rect.right + pinchAnchorTolerance);
+            expect(beforeCenter.y).to.be.greaterThan(rect.top - pinchAnchorTolerance);
+            expect(beforeCenter.y).to.be.lessThan(rect.bottom + pinchAnchorTolerance);
+          });
+      });
+  });
+
 });

package/test/cypress/e2e/report-path.cy.js

@@ -0,0 +1,20 @@
+describe('Report Path', () => {
+
+  const danDan = '.node:contains("Dan Dan")';
+  const selectedNode = '#selected-node';
+  const reportButton = '#btn-report-path';
+
+  beforeEach(() => {
+    cy.visit('demo/report-path.html');
+  });
+
+  it('keeps the chosen node selected after drawing its management path', () => {
+    cy.get(danDan).click();
+    cy.get(selectedNode).should('have.value', 'Dan Dan');
+
+    cy.get(reportButton).click().should('be.disabled');
+    cy.get(danDan).should('have.class', 'focused');
+    cy.get(selectedNode).should('have.value', 'Dan Dan');
+  });
+
+});

package/test/cypress/e2e/vertical-vevel.cy.js

@@ -15,14 +15,16 @@ describe('Hybrid(horizontal + vertical) Chart', () => {
   const wudan = '.node:contains("Wu Dan")';
 
   it('toggle the vertical nodes', () => {
-    cy.get(dandan).find('.toggleBtn').click();
+    cy.get(dandan).find('.toggleBtn').click({ force: true });
+    cy.get(dandan).find('.toggleBtn').should('have.class', 'oci-minus-square');
     cy.get(erdan).get(sandan).should('be.visible');
     cy.get(sidan).get(wudan).should('not.be.visible');
   
-    cy.get(heihei).find('.toggleBtn').click();
+    cy.get(heihei).find('.toggleBtn').click({ force: true });
+    cy.get(heihei).find('.toggleBtn').should('have.class', 'oci-plus-square');
     cy.get(pangpang).get(dandan).get(erdan).get(sandan).should('not.be.visible');
   
-    cy.get(heihei).find('.toggleBtn').click();
+    cy.get(heihei).find('.toggleBtn').click({ force: true });
     cy.get(pangpang).get(dandan).should('be.visible');
   });
 

package/test/e2e/local-datasource/test.js

@@ -100,7 +100,7 @@ test('horizontalEdge of heihei node works well', async t => {
   await t
     .hover(heihei)
     .click(heihei.find('.topEdge'))
-    /* take into account the transition settings in jquery.orgchart.css
+    /* take into account the transition settings in orgchart.css
      *  .orgchart .node {
      *    transition: transform 0.3s, opacity 0.3s;
      *  }