Rysowanie odcinka react

Question

Napisałem komponent, który powinien rysować odcinek między dwoma punktami. Nie wiem jednak czemu program się sypie dla minusowych kątów -0deg do -90deg. Dla dodatnich wygląda to ładnie.
Wydaje mi się, że problemem może być 

        transformOrigin: `${degrees > 0 ? '0% 0%' : '100% 100%'}`

jednak nie potrafię dobrze wyczuć jak dokładnie działa ta właściwość w moim przypadku..

"Punkty" mają wielkość 150px, dlatego w kodzie są wyśrodkowania typu left: (x1 + 75).toString() + 'px'
Funkcja rysująca odcinki wygląda tak:

  useEffect(() => {
    let x1 = spider1.y;
    let y1 = spider1.x;
    let x2 = spider2.y;
    let y2 = spider2.x;

    if (x1 > x2) {
      let xTmp = x1;
      let yTmp = y1;
      x1 = x2;
      y1 = y2;
      x2 = xTmp;
      y2 = yTmp;
    }
    if (x1 === x2) {
      const height = Math.abs(y2 - y1).toString();
      setStyle({
        width: '5px',
        left: (x1 + 75).toString() + 'px',
        top: `${Math.min(y1, y2) + 75}px`,
        height: `${height}px`,
        transform: 'rotate(0deg)'
      });
    } else {
      const a = (y2 - y1) / (x2 - x1);
      const radians = Math.atan(a);
      const degrees = radians * (180 / Math.PI);

      setStyle({
        width: `${Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))}px`,
        left: (x1 + 75).toString() + 'px',
        top: `${Math.min(y1, y2) + 75}px`,
        height: `5px`,
        transform: `rotate(${degrees}deg)`,
        transformOrigin: `${degrees > 0 ? '0% 0%' : '100% 100%'}`
      });
    }
  }, [spider1, spider2]);

  return <div className='net' style={style} ref={myRef}></div>;

 

Dla dopełnienia w klasie net mam:
 

.net {
  position: absolute;
  background-color: red;
  z-index: 90;
}

 

Comments

Co konkretnie się źle wyświetla dla tych minusowych wartości? Możesz pokazać screena dla dodatniego i ujemnego kąta?

W devtoolsach przeglądarki możesz się pobawić property transform-origin i jeśli problem będzie ten sam, to to nie jest problem Reacta (czy JS-a), ale CSS-a.

---

Podświetlony w konsoli jest odcinek najbardziej na prawo, który powinien łączyć te 2 divy po prawej stronie.
I dla porównania przesunąłem jednego diva, tak aby było dobrze i po tej operacji ten sam odcinek wskakuje na odpowiedni miejsce:

Słabo widać cokolwiek na tych screenach więc wrzuciłem je na imgbb.com 
https://ibb.co/GRmnWGj
https://ibb.co/nm1X8Dh

Answer 1

Problem leżał w linii 32

top: `${Math.min(y1, y2) + 75}px`,

powinno być:

top: `${y1 + 75}px`,

i wartość transform-origin musi zawsze wynosić 

'0% 0%'

Dodatkowo zamiast liczyć wartość kąta funkcją atan() zdecydowałem się na atan2()

const degrees = ((Math.atan2(x1 - x2, y2 - y1) + Math.PI / 2.0) * 180) / Math.PI;

Link do tematu, który stworzyłem na stacku : https://stackoverflow.com/questions/68073911/drawing-a-path-between-points-in-javascript-react-css/68076922#68076922