orgchart 5.0.0 → 7.0.0

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/toggle-sibs-resp.cy.js

@@ -13,19 +13,19 @@ describe('Toggle sibling nodes respectively', () => {
   });
 
   it('toggle the left side sibling nodes of sumiao', () => {
-    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.leftEdge').click();
     cy.get(bomiao).get(renwu).get(lixin).should('not.be.visible');
 
-    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.leftEdge').click();
     cy.get(bomiao).should('be.visible');
     cy.get(renwu).get(lixin).should('not.be.visible');
   });
 
   it('toggle the right side sibling nodes of sumiao', () => {
-    cy.get(sumiao).find('.rightEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.rightEdge').click();
     cy.get(hongmiao).get(xingan).get(yidian).should('not.be.visible');
 
-    cy.get(sumiao).find('.rightEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.rightEdge').click();
     cy.get(hongmiao).should('be.visible');
     cy.get(xingan).get(yidian).should('not.be.visible');
   });

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

@@ -15,22 +15,24 @@ 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).trigger('mouseenter').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).trigger('mouseenter').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).trigger('mouseenter').find('.toggleBtn').click({ force: true });
     cy.get(pangpang).get(dandan).should('be.visible');
   });
 
   it('toggle the vertical nodes by cicking horizontal nodes', () => {
-    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(tiehua).get(heihei).get(pangpang).get(dandan).should('be.visible');
 
-    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(tiehua).get(heihei).should('be.visible');
     cy.get(pangpang).get(dandan).should('not.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;
      *  }