Vertically oriented SteppedLineTo does not align correctly

[kenneho]

Hi.

I'm building a folder structure using SteppedLineTo, and see that when I use orientation="v" the lines connected to the children (i.e. sub-folders) does not actually align with the children. Sample code:

return React.Children.map(children, (child, child_index) => {
      return (
        <SteppedLineTo
          from={parentClassName}
          to={child.props.className}
          delay={2000}
          fromAnchor="bottom right"
          toAnchor="center left"
          orientation="v"
        />
      )

However, if I run the exact same code using orientation="h" things align perfectly and the line goes from the parent to it's children as expected. In case it's relevant, the parent is connecting to children inside a collapse component that is default expanded.

Are there any known issues with the vertical orientation that may explain this sort of issue?

[kdeloach]

Hard to tell without a screenshot. I'm guessing the parent and child elements are offset which causes an alignment issue. The elements need to be the same width and use the same anchors to reliably draw a straight line between them. See the demo app for reference.

[kenneho]

Thanks for getting back to me.

Just to illustrate, here's a version using the horizontal orientation: As you can see, the line from the parent to its children is drawn correctly.

Using the vertical orientation, things don't line up properly:

Few of the elements have the same width though, so if this is a necessity for getting the vertical orientation correctly it guess this won't work. If you happen to think of a workaround for the vertical orientation I'd appreciate a hint. In any case, thanks for this great project!

[kdeloach]

You may need to set the component borderWidth property so the line positions are calculated correctly. It isn't automatically detected from CSS.

However, the problem with using stepped line for this use case is that the midpoint "elbow" isn't configurable so it'll always display as a "zig zag". If I had time, I would update this component to make the elbow configurable, in order to draw L-shape lines.

[kenneho]

Thanks for the info.