hi @kdeloach, @jazzyarchitects
First I want to say thanks for the great Stepped line component!

In my project, I fixed some subpixel render issues of SteppedLine, if you are happy to accept a PR , I can send a PR to fix them.

The following is some snapshots of the issues :

And in the original PR of #2 we can also see similar issue, like this:

I only patched SteppedLine's renderHorizontal method, since I only used it to render a horizontal tree nodes.

The patch is the following :

renderHorizontal() {
    // begin patch
    const x0 = Math.round(this.props.x0);
    const y0 = Math.round(this.props.y0);
    const x1 = Math.round(this.props.x1);
    const y1 = Math.round(this.props.y1);

    const dy = y1 - y0;

    if (Math.abs(dy) <= 1) { // one key point 
      return <Line {...this.props} {...{ x0, y0, x1, y1: y0 }} />;
    }

    if (dy === 0) {
      return <Line {...this.props} />;
    }

    const borderWidth = this.props.borderWidth || defaultBorderWidth;
    const x2 = Math.round((x0 + x1) / 2);
    // end patch

    const yOffset = dy < 0 ? borderWidth : 0;
    const minY = Math.min(y0, y1) - yOffset;
    const maxY = Math.max(y0, y1);

    return (
      <div className="react-steppedlineto">
        <Line {...this.props} x0={x0} y0={y0} x1={x2} y1={y0} />
        <Line {...this.props} x0={x1} y0={y1} x1={x2} y1={y1} />
        <Line {...this.props} x0={x2} y0={minY} x1={x2} y1={maxY} />
      </div>
    );
  }

The key point is use Math.round to turn some subpixel(eg 100.125px) to integer number. I tested the patches on iPhone 12 pro max, it works as expected.

You may ask why we have subpixel render issues? The root cause is we use rem to do some responsive design. Eg:

html {
  /* the standard ux design is 812px width, the conversion between rem and px  is ：1rem === 100px */
  font-size: calc(100 / 812 * 100vw);
}

So the UI in standard ux design is all good, but when switched to a different device size, the subpixel render issues will bite us.

Hi,

I am trying to use this package in my ReactJS application. I took the following steps to install the package:

1. Added "react-lineto": "3.1.3" to my package.json file
2. Ran "yarn install"
3. Added some code using the SteppedLineTo feature from the library.

No lines appear on my page.

My IDE highlights the import statement (import {SteppedLineTo} from "react-lineto";) with the following message:
Could not find a declaration file for module 'react-lineto'. '/Users/bob/Sites/audience-builder-frontend/node_modules/react-lineto/dist/react-lineto.js' implicitly has an 'any' type.
Try npm install @types/react-lineto if it exists or add a new declaration (.d.ts) file containing declare module 'react-lineto';

Example: https://codesandbox.io/s/heuristic-hooks-nhiic?file=/src/App.js

I have some points and I want to hide the line and the points initially when the page loads.
However, once the user does some action (in this simplified example, when they click the "Hello" button) then the line should appear.

However, only the dots appear (the ones that the line is supposed to connect). The line itself does not appear unless I cause some other state change to occur, like if I drag the dot so that the line moves.

Is this an issue with my configuration or is there a way around this issue?

Showing the line all the time https://codesandbox.io/s/stoic-smoke-w3zk6?file=/src/App.js works if the component is rendered from the beginning

Showing the line only after some state is updated does not show line unless I force another state update:
https://codesandbox.io/s/heuristic-hooks-nhiic?file=/src/App.js (click "Hello" - only dots appear, but not line - it doesn't seem to even be appearing in the DOM)

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details

It's the usual warning for lifecycle methods either needing to be renamed to UNSAFE_* or to use equivalent hooks. Cheers!

I'm wanting to test that a line is drawn under a given scenario with React Testing Library and it seems "data-testid" is the only attribute I could use to select it. However, passing one to the <LineTo /> component doesn't seem to make it to the DOM.

It would be nice if we could forward and spread any additional props passed in to the underlying <div /> element that is the line.

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?

The line disappears after reloading the page with the LineTo component.

good day!

I have a react-leaflet-map and a react-bootstrap-table2 inside rc-tabs component. While I hover on the row in the table I want to draw a line from some point in the row to the point on map. That works fine BUT if map is zoomed too close and the point became to be in non-visible area the line goes through components and it looks bad. I tried to set zIndex of the line by 10 and other components by 11 but with no luck, it seems it doesn't affect. I also tried to use within: "class-name" but also with no luck, the behavior is strange and line hides somewhere.

Could you please provide

some tips on this?

Is it expected? cf https://github.com/kdeloach/react-lineto/blob/master/dist/react-lineto.js#L237-L266

Is it possible to draw the whole tree inverted? From the right (the 0) to the left (all the childs). @kdeloach

Path: react-lineto > prop-types > fbjs > isomorphic-fetch >-fetch

To avoid using className we could use https://reactjs.org/docs/refs-and-the-dom.html

When I place LineTo into my React app and set the to and from it will only render a horizontal line rather than rendering it from a specified location to a specified location. In addition, I am unable to change the color of the line by saying borderColor="red" inside the LineTo tag. Code below

div className="a"> <p className="date">{x.date}</p> </div> <LineTo delay={0} from="a" to="b" fromAnchor="bottom center" toAnchor="center" borderColor="red" orientation="v" /> <div className="b"> <p className="time"> <span id="time" style={{ marginRight: "0.75rem" }}> {x.time} </span> </p> </div>

I'm seeing the divs created with the react-lineto-placeholder class, but there's no visible lines. Admittedly this is in a larger application, but there's nothing to crazy going on.

Any ideas why I don't see the lines? Using version 3.0.0.

Hi , is this supported for react native? If so , how would i install it?

I've been playing around with react-lineto and I really enjoy working with it. Thanks for putting this together!

Is there a way to add an arrow to one or both ends of the line?

See #2

There's an issue with the zIndex prop, which is set to 1 when the container sets its value to 0.

Warning: Using UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps in strict mode is not recommended

Hi team. Could you fix this warning? May be related to this issue. Thanks a lot!

There is a const x2 = (x0 + x1) / 2; and a const y2 = (y0 + y1) / 2;.
Maybe this / 2 could be an parameter (defaults to 0.5) so the user could change this to avoid overlaping with some other elements in screen.

Something like this:

const defaultPercentBreakPoint = 0.5;

...

 renderVertical() {
...
const y2 = (y0 + y1) * (percentBreak ?? this.defaultPercentBreakPoint);
...
}

renderHorizontal(){
...
const x2 = (x0 + x1) * (percentBreak ?? this.defaultPercentBreakPoint);
...
}

SteppedLine.propTypes = Object.assign({}, {
    x0: PropTypes.number.isRequired,
    y0: PropTypes.number.isRequired,
    x1: PropTypes.number.isRequired,
    y1: PropTypes.number.isRequired,
    orientation: PropTypes.oneOf(['h', 'v']),
   percentBreak: PropTypes.number,
}, optionalStyleProps);

@kdeloach

Hello, I'm using react-lineto in my app to draw lines between elements, but when a page is rendered for the first time, lines are not displaying correctly, for example, should be a vertical line between B&C, but when the page loads for the first time, this line doesn't go from "B" to "C", it goes way up from "C" and displays correctly only if I refresh the page or change screen size.
Could you please provide any tips on how to fix this?

Thank you.

I have a problem knowing what is the best way to make it responsive.

Does anybody have an idea?

Code example

Is this library only for straight line segments or can you draw bezier or splines?

Hello there, I'm encountering the following error when trying to use the component within my .tsx file:

'LineTo' cannot be used as a JSX component.
  Its instance type 'LineTo<LineToProps>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/myLocalPath").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

React v 17.0.2, Typescript 4.4.3

This might be out of support request, so you can close it, if so. I have scrolling container and lines goes out of bounds. Because it's static, and not dynamic draw, but it could be static within container, right? Is it possible to solve it? Thanks.

Hello, I am using react-lineto in my app, but when my component is rendered the first time it is not working, until I make an event and it is rendered again the connection I want to use appears.

Also when I add a new line it appears scattered, then when it returns to render the component takes its proper place.

If any of the components exported by react-lineto have a delay set, the component may schedule a call to forceUpdate after the component is unmounted:

Fix is trivial and consists into clearing the timeout in componentWillUnmount(). I'll propose a fix shortly.

The z-index works great with flat HTML, but if something like this: transform: rotateX(60deg) rotateZ(-45deg) scale(1.2); is applied, the z-index seems to not work. Not sure if this is an issue or if there's a recommended approach.

Thanks in advance.

I'm using a couple lines similar to this
<LineTo from="img" to="img2" borderColor="white" borderWidth={4} />
When rendered initially, the lines show up great, but if I move the images around say with animation or just by moving their relative position on screen by changing the size of the window, the lines stay where they were when first rendered, rather than following the images around. Am I doin' something wrong?

This error happens each time when i reload a page with Lineto import.

The library works perfect if not doing reload to the page

I'm loving the package! It's been extremely useful. I was wondering if it was possible to render some text alongside/inside the lines. So that'd it looks roughly like this:

I think I know how to customize the line so that there's spacing within but not sure how to render something inside of it.
Thanks!

Love the component by the way. It was exactly what I was looking for. I had a problem that I managed to solve, so thought I'd write a quick note here.

I was getting this error while using the <LineTo /> component. Here is the setup that produced it and how I fixed it.

I have two pages that make use of five <LineTo /> components, each one inside an instance of another component, and with that component inside a div with the same class name on both pages. This is how it's structured. <MyFirstPage> is never rendered at the same time as <MySecondPage>.

<MyFirstPage>
    <div className={"my-class"}>
//some other stuff here not found in second page
        <MyLineContainingComponent>
            <LineTo/>
            <LineTo/>
            <LineTo/>
            <LineTo/>
            <LineTo/>
          <MyLineContainingComponent />
     <div>
<MyFirstPage />

<MySecondPage>
    <div className={"my-class"}>
//some other stuff here not found in first page
        <MyLineContainingComponent>
            <LineTo/>
            <LineTo/>
            <LineTo/>
            <LineTo/>
            <LineTo/>
          <MyLineContainingComponent />
     <div>
<MySecondPage />

When I navigate to MyFirstPage, the lines display correctly. When I navigate directly to the second, the page renders but without the lines with no errors in the console. If I then navigate back to the first page directly from the second, I get the following error.

"DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

The error is produced on line 378 of react-lineto.js when this.within.removeChild(this.el) is called inside componentWillUnmount() when the second page unmounts.

Providing unique class names to the container divs doesn't solve the issue.

I fixed it by wrapping all the LineTo components in a div and providing the div with a key that is unique to each instance.

This isn't a problem unique to react-lineto, I think it's a problem that generally occurs when you manipulate the DOM directly instead of relying on React to do it. It took me a while to work out why this was happening, so I'm posting here in case someone has the same issue. Perhaps a warning about providing unique keys to the div that contains the <LineTo /> component could be added to the readme.

Any plans for a live demo? Github actions + pages would work great with that probably.