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

[techniq]

🚀 Enhancements

Adds new Step, Curve, and Line links for cartesian (vertical and horizontal) and radial/polar, while retaining the original links ("diagonal") as is (no renaming).

See this codesandbox for examples. We could also update our tree example to allow switching types or possibly create a few new examples. See issue #174 for possible inspirations as well.

I plan to still implement an Elbow type as well (see this example and the elbow example of react-annotation) but it probably won't be soon-ish.

[hshoff]

should the 0.2 be configurable here?

[techniq]

I played around with this but I didn't see much benefit as this is being built using cubic bezier curves (C path command) that I ported from Vega. We would probably need to expose both of these 0.2 separately, but I wasn't sure what to call them, etc.

I took a quick stab at using a simpler quadratic curve (Q path command) where a single "midpoint" would define the curve but I was having trouble creating the same curve.

I've kicked around the idea in my head a bit and part of me thinks exposing <HorizontalLink curve={curve} />, <VerticalLink curve={curve} /> and <RadialLink curve={curve} /> and allow passing the curve function similar to show d3-shape does this. This is basically what my line functions are doing, such as...

const step = (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 sf = Math.abs(ta - sa) > Math.PI ? ta <= sa : ta > sa;
    
    return `
      M${sr * sc},${sr * ss}
      A${sr},${sr} 0 0,${sf ? 1 : 0}
      ${sr * tc},${sr * ts}
      L${tr * tc},${tr * ts}
    `;
  };

I haven't looked to much into the details on how to implement this (looks like you you're supposed to use the custom curves api). This might also be overkill for 2 points...

I still think exposing the simple LinkHorizontalStep is the way to go, this is more for the customization beyond the defaults...

[hshoff]

Will probably need to export ./shapes/link/diagonal/{LinkHorizontal, LinkVertical, LinkRadial} from ./shapes/{LinkHorizontal, LinkVertical, LinkRadial} else it's a breaking change for folks deep linking to the components

[techniq]

I tried to fix this but was running into problems (I don't know if it was from Lerna or something else).

For example, I recreated src/shapes/LinkHorizontal.js and added export * from './link/diagonal/LinkHorizontal'; to re-export from this location, but when I tried up update the reference in vx-demo tree.js from

import { LinkHorizontal } from '@vx/shape';

to

import LinkHorizontal from '@vx/shape/shapes/LinkHorizontal'

I'm getting a dependency error.

I tried running npm run build within vx-shape and restarting npm run dev on `vx-demo.

Any ideas?

[hshoff]

does this work?

// src/shapes/LinkHorizontal.js
export { default as LinkHorizontal } from './shapes/link/diagonal/LinkHorizontal';

then run npm run build in vx-shape again

[techniq]

It does not.

After that change, I also tried importing using

import LinkHorizontal from '@vx/shape/shapes/LinkHorizontal'

and

import LinkHorizontal from '@vx/shape/LinkHorizontal'

[hshoff]

No worries, i'll take a look after merging.