Merge pull request #194 from techniq/master

Add support for step, curve, and line links.  Issue #174

packages/vx-shape/src/index.js

@@ -3,9 +3,18 @@ export { default as Pie } from './shapes/Pie';
 export { default as Line } from './shapes/Line';
 export { default as LinePath } from './shapes/LinePath';
 export { default as LineRadial } from './shapes/LineRadial';
-export { default as LinkHorizontal } from './shapes/LinkHorizontal';
-export { default as LinkVertical } from './shapes/LinkVertical';
-export { default as LinkRadial } from './shapes/LinkRadial';
+export { default as LinkHorizontal } from './shapes/link/diagonal/LinkHorizontal';
+export { default as LinkVertical } from './shapes/link/diagonal/LinkVertical';
+export { default as LinkRadial } from './shapes/link/diagonal/LinkRadial';
+export { default as LinkHorizontalCurve } from './shapes/link/curve/LinkHorizontalCurve';
+export { default as LinkVerticalCurve } from './shapes/link/curve/LinkVerticalCurve';
+export { default as LinkRadialCurve } from './shapes/link/curve/LinkRadialCurve';
+export { default as LinkHorizontalLine } from './shapes/link/line/LinkHorizontalLine';
+export { default as LinkVerticalLine } from './shapes/link/line/LinkVerticalLine';
+export { default as LinkRadialLine } from './shapes/link/line/LinkRadialLine';
+export { default as LinkHorizontalStep } from './shapes/link/step/LinkHorizontalStep';
+export { default as LinkVerticalStep } from './shapes/link/step/LinkVerticalStep';
+export { default as LinkRadialStep } from './shapes/link/step/LinkRadialStep';
 export { default as Area } from './shapes/Area';
 export { default as AreaClosed } from './shapes/AreaClosed';
 export { default as AreaStack } from './shapes/AreaStack';

packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { pointRadial } from 'd3-shape';
+import additionalProps from '../../../util/additionalProps';
+
+LinkHorizontalCurve.propTypes = {
+  innerRef: PropTypes.func
+};
+
+export default function LinkHorizontalCurve({
+  className,
+  innerRef,
+  data,
+  x = d => d.y,
+  y = d => d.x,
+  ...restProps
+}) {
+
+  const curve = (source, target) => {
+    const sx = x(source);
+    const sy = y(source);
+    const tx = x(target);
+    const ty = y(target);
+
+    const dx = tx - sx;
+    const dy = ty - sy;
+    const ix = 0.2 * (dx + dy);
+    const iy = 0.2 * (dy - dx);
+
+    return `M${sx},${sy}
+      C${sx + ix},${sy + iy}
+      ${tx + iy},${ty - ix}
+      ${tx},${ty}
+    `;
+  };
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={curve(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}

packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { pointRadial } from 'd3-shape';
+import additionalProps from '../../../util/additionalProps';
+
+LinkRadialCurve.propTypes = {
+  innerRef: PropTypes.func
+};
+
+export default function LinkRadialCurve({
+  className,
+  innerRef,
+  data,
+  x = d => d.x,
+  y = d => d.y,
+  ...restProps
+}) {
+
+  const curve = (source, target) => {
+    const sa = x(source) - Math.PI / 2;
+    const sr = y(source);
+    const ta = x(target) - Math.PI / 2;
+    const tr = y(target);
+
+    const sc = Math.cos(sa);
+    const ss = Math.sin(sa);
+    const tc = Math.cos(ta);
+    const ts = Math.sin(ta);
+
+    const sx = sr * sc;
+    const sy = sr * ss;
+    const tx = tr * tc;
+    const ty = tr * ts;
+
+    const dx = tx - sx;
+    const dy = ty - sy;
+    const ix = 0.2 * (dx + dy);
+    const iy = 0.2 * (dy - dx);
+
+    return `M${sx},${sy}
+      C${sx + ix},${sy + iy}
+      ${tx + iy},${ty - ix}
+      ${tx},${ty}
+    `;
+  };
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={curve(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}

packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { pointRadial } from 'd3-shape';
+import additionalProps from '../../../util/additionalProps';
+
+LinkVerticalCurve.propTypes = {
+  innerRef: PropTypes.func
+};
+
+export default function LinkVerticalCurve({
+  className,
+  innerRef,
+  data,
+  x = d => d.x,
+  y = d => d.y,
+  ...restProps
+}) {
+
+  const curve = (source, target) => {
+    const sx = x(source);
+    const sy = y(source);
+    const tx = x(target);
+    const ty = y(target);
+
+    const dx = tx - sx;
+    const dy = ty - sy;
+    const ix = 0.2 * (dx + dy);
+    const iy = 0.2 * (dy - dx);
+
+    return `M${sx},${sy}
+      C${sx + ix},${sy + iy}
+      ${tx + iy},${ty - ix}
+      ${tx},${ty}
+    `;    
+  };
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={curve(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}

packages/vx-shape/src/shapes/LinkHorizontal.js → packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { linkHorizontal } from 'd3-shape';
-import additionalProps from '../util/additionalProps';
+import additionalProps from '../../../util/additionalProps';
 
 LinkHorizontal.propTypes = {
   innerRef: PropTypes.func,

packages/vx-shape/src/shapes/LinkRadial.js → packages/vx-shape/src/shapes/link/diagonal/LinkRadial.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { linkRadial } from 'd3-shape';
-import additionalProps from '../util/additionalProps';
+import additionalProps from '../../../util/additionalProps';
+
+LinkRadial.propTypes = {
+  innerRef: PropTypes.func,
+};
 
 export default function LinkRadial({
   className,
+  innerRef,
   data,
   angle = d => d.x,
   radius = d => d.y,
@@ -15,6 +21,7 @@ export default function LinkRadial({
   link.radius(radius);
   return (
     <path
+      ref={innerRef}
       className={cx('vx-link-radius', className)}
       d={link(data)}
       {...additionalProps(restProps, data)}

packages/vx-shape/src/shapes/LinkVertical.js → packages/vx-shape/src/shapes/link/diagonal/LinkVertical.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { linkVertical } from 'd3-shape';
-import additionalProps from '../util/additionalProps';
+import additionalProps from '../../../util/additionalProps';
 
 LinkVertical.propTypes = {
   innerRef: PropTypes.func,

packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import additionalProps from '../../../util/additionalProps';
+
+LinkHorizontalLine.propTypes = {
+  innerRef: PropTypes.func
+};
+
+export default function LinkHorizontalLine({
+  className,
+  innerRef,
+  data,
+  x = d => d.y,
+  y = d => d.x,
+  ...restProps
+}) {
+  const line = (source, target) => `
+    M${x(source)},${y(source)}
+    L${x(target)},${y(target)}
+  `;
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={line(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}

packages/vx-shape/src/shapes/link/line/LinkRadialLine.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { pointRadial } from 'd3-shape';
+import additionalProps from '../../../util/additionalProps';
+
+LinkRadialStep.propTypes = {
+  innerRef: PropTypes.func
+};
+
+export default function LinkRadialStep({
+  className,
+  innerRef,
+  data,
+  x = d => d.x,
+  y = d => d.y,
+  ...restProps
+}) {
+
+  const line = (source, target) => {
+    const sa = x(source) - Math.PI / 2;
+    const sr = y(source);
+    const ta = x(target) - Math.PI / 2;
+    const tr = y(target);
+
+    const sc = Math.cos(sa);
+    const ss = Math.sin(sa);
+    const tc = Math.cos(ta);
+    const ts = Math.sin(ta);
+
+    return `
+      M${sr * sc},${sr * ss}
+      L${tr * tc},${tr * ts}
+    `;
+  };
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={line(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}

packages/vx-shape/src/shapes/link/line/LinkVerticalLine.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import additionalProps from '../../../util/additionalProps';
+
+LinkVerticalLine.propTypes = {
+  innerRef: PropTypes.func
+};
+
+export default function LinkVerticalLine({
+  className,
+  innerRef,
+  data,
+  x = d => d.x,
+  y = d => d.y,
+  ...restProps
+}) {
+  const line = (source, target) => `
+    M${x(source)},${y(source)}
+    L${x(target)},${y(target)}
+  `;
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={line(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}

packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import additionalProps from '../../../util/additionalProps';
+
+LinkHorizontalStep.propTypes = {
+  innerRef: PropTypes.func,
+  percent: PropTypes.number
+};
+
+export default function LinkHorizontalStep({
+  className,
+  innerRef,
+  data,
+  percent = 0.5,
+  x = d => d.y,
+  y = d => d.x,
+  ...restProps
+}) {
+  const line = (source, target) => `
+    M${x(source)},${y(source)}
+    H${x(source) + (x(target) - x(source)) * percent}
+    V${y(target)}
+    H${x(target)}
+  `;
+
+  return (
+    <path
+      ref={innerRef}
+      className={cx('vx-link', className)}
+      d={line(data.source, data.target)}
+      {...restProps}
+    />
+  );
+}