add func for stairlike links rendering (#250)

* add func for stairlike links rendering

* Flip the ternary for fix orientation of links

* rename type of path function from Stair to Step

* fix typo

Author: m0rtyn

src/Link/index.js

@@ -32,6 +32,15 @@ export default class Link extends React.PureComponent {
     }
   }
 
+  drawStepPath(linkData, orientation) {
+    const { source, target } = linkData;
+    const deltaY = target.y - source.y;
+
+    return orientation === 'horizontal'
+      ? `M${source.y},${source.x} H${source.y + deltaY / 2} V${target.x} H${target.y}`
+      : `M${source.x},${source.y} V${source.y + deltaY / 2} H${target.x} V${target.y}`;
+  }
+
   drawDiagonalPath(linkData, orientation) {
     const diagonal = svg
       .diagonal()
@@ -82,6 +91,10 @@ export default class Link extends React.PureComponent {
       return this.drawStraightPath(linkData, orientation);
     }
 
+    if (pathFunc === 'step') {
+      return this.drawStepPath(linkData, orientation);
+    }
+
     return this.drawDiagonalPath(linkData, orientation);
   }
 
@@ -124,7 +137,7 @@ Link.defaultProps = {
 Link.propTypes = {
   linkData: T.object.isRequired,
   orientation: T.oneOf(['horizontal', 'vertical']).isRequired,
-  pathFunc: T.oneOfType([T.oneOf(['diagonal', 'elbow', 'straight']), T.func]).isRequired,
+  pathFunc: T.oneOfType([T.oneOf(['diagonal', 'elbow', 'straight', 'step']), T.func]).isRequired,
   transitionDuration: T.number.isRequired,
   onClick: T.func.isRequired,
   onMouseOver: T.func.isRequired,

src/Link/tests/index.test.js

@@ -36,6 +36,7 @@ describe('<Link />', () => {
   jest.spyOn(Link.prototype, 'drawDiagonalPath');
   jest.spyOn(Link.prototype, 'drawElbowPath');
   jest.spyOn(Link.prototype, 'drawStraightPath');
+  jest.spyOn(Link.prototype, 'drawStepPath');
   jest.spyOn(Link.prototype, 'applyOpacity');
   jest.spyOn(pathFuncs, 'testPathFunc');
 
@@ -70,13 +71,15 @@ describe('<Link />', () => {
     const diagonalComponent = shallow(<Link {...mockProps} />);
     const elbowComponent = shallow(<Link {...mockProps} pathFunc="elbow" />);
     const straightComponent = shallow(<Link {...mockProps} pathFunc="straight" />);
+    const stepComponent = shallow(<Link {...mockProps} pathFunc="step" />);
     shallow(<Link {...mockProps} pathFunc={pathFuncs.testPathFunc} />);
 
     expect(diagonalComponent.instance().drawDiagonalPath).toHaveBeenCalled();
     expect(elbowComponent.instance().drawElbowPath).toHaveBeenCalled();
     expect(straightComponent.instance().drawStraightPath).toHaveBeenCalled();
+    expect(stepComponent.instance().drawStepPath).toHaveBeenCalled();
     expect(pathFuncs.testPathFunc).toHaveBeenCalled();
-    expect(Link.prototype.drawPath).toHaveBeenCalledTimes(4);
+    expect(Link.prototype.drawPath).toHaveBeenCalledTimes(5);
   });
 
   it('returns an appropriate elbowPath according to `props.orientation`', () => {
@@ -111,6 +114,18 @@ describe('<Link />', () => {
     );
   });
 
+  it('return an appropriate stepPath according to `props.orientation`', () => {
+    const { source, target } = linkData;
+    const deltaY = target.y - source.y;
+
+    expect(Link.prototype.drawStepPath(linkData, 'horizontal')).toBe(
+      `M${source.y},${source.x} H${source.y + deltaY / 2} V${target.x} H${target.y}`,
+    );
+    expect(Link.prototype.drawStepPath(linkData, 'vertical')).toBe(
+      `M${source.x},${source.y} V${source.y + deltaY / 2} H${target.x} V${target.y}`,
+    );
+  });
+
   it('fades in once it has been mounted', () => {
     const fixture = 1;
     const renderedComponent = mount(<Link {...mockProps} />);