🐁 마우스 상대위치 계산은 이상해

마우스를 따라다니는 말풍선을 만들자!

• 의도

  • 위 디자인과 같이, svg 패스에 마우스를 호버하면, 관련된 안내 메시지가 말풍선에 나타나게 만들고자 했다!
  • 패스끼리 서로 겹칠 수 있기 때문에, 패스 위의 고정된 위치에 메시지를 표현하는 것보다,
    메시지가 마우스를 따라다니도록 해서 상대적으로 자유롭게 확인할 수 있도록 디자인한 케이스이다.

• 접근

  • onMouseEnter와 onMouseLeave로 마우스 호버를 인식해 상태로 관리하기로 했다.
  • 마우스 위치를 상태로 보관하고 onMouseEvent를 통해 마우스 위치를 갱신하기로 했다.

MouseEvent의 마우스 위치 정보들

• MouseEvent는 정말 다양한 마우스 위치 정보를 제공한다.
  • event.clientX, Y : 현재 브라우저에 표시되고 있는 화면을 기준으로 한 좌표를 제공한다
  • event.offsetX, Y : event.target을 기준으로 한 좌표를 제공한다.
  • event.pageX, Y : 전체 페이지(document)를 기준으로 한 좌표를 제공한다.
  • event.screenX, Y : 사용자의 모니터를 기준으로 한 좌표를 제공한다.

• 이렇게 다양한 위치정보를 제공하는데, 모두 특정한 엘리먼트를 기준으로 한 상대값을 쉽게 구하기에는 미묘한 특성을 가지고 있다.

문제: offsetX, Y의 동작이 이상하다!

• 직관적으로 가장 간단한 구현방법은 offsetX, Y를 사용하는 것으로 보여 바로 실행했다.
• 호버의 대상이 되는 패스들이 DOM구조상 최하위에 위치하기 때문에 target 오인으로 인한 버그도 없을 것이라고 예상했다.
• 단, React에서는 offsetX, Y에 조금 특이하게 접근한다.
  • 다른 마우스 위치 프로퍼티들과 달리 event.offsetX가 아니라 event.nativeEvent.offsetX로 접근해야 한다.

  const onMouseLeave = (event: React.MouseEvent): void => {
    setIsHovered(false);
  };
  const onMouseEnter = (event: React.MouseEvent): void => {
    setMousePos(() => ({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY }));
    console.log(event.target);
    console.log({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
    setIsHovered(true);
  };
  const onMouseMove = (event: React.MouseEvent): void => {
    if (isHovered) {
      setMousePos(() => ({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY }));
      console.log(event.target);
      console.log({ x: event.nativeEvent.offsetX, y: event.nativeEvent.offsetY });
    }
  };

• 문제: 이렇게 구현을 하더라도... onMouseEnter시에 잡히는 값과 onMouseMove시에 잡히는 값이 다르다....

  

  • 위와 같은 문제가 발생한다!
  • event.target은 분명 동일한데, onMouseEnter와 onMouseMove시에 잡히는 offsetX,Y값이 다르게 나타나고,
    이게 반영되어 말풍선이 부자연스럽게 움직이는 현상이 일어난다.

해결: getElementBoundingBox를 사용하자

• ref에 wrapper 엘리먼트를 저장한다.
• clientX, Y를 받아온다.
• getBoundingClientRect()를 이용해 wrapper 엘리먼트의 위치만큼을 빼서 직접 계산한다.

  const onMouseLeave = (event: React.MouseEvent): void => {
    setIsHovered(false);
  };
  const onMouseEnter = (event: React.MouseEvent): void => {
    setMousePos(() => ({
      x: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
      y: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
    }));
    setIsHovered(true);
  };
  const onMouseMove = (event: React.MouseEvent): void => {
    if (isHovered) {
      setMousePos(() => ({
        x: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
        y: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
      }));
    }
  };

• 해결! 이렇게 하고나니 부드럽게 말풍선이 잘 렌더되었다.
  • https://github.com/facebook/react/issues/4431 구현을 하다 참고하며 읽은 이 글에서는 offsetX, Y는 getBoundingClientRect로 계산하는 것과 동일한 동작을 한다고 하는데, 왜 이런 문제가 발생하는 지는 미지수이다...
  • target 엘리먼트가 다르게 인식되는 것이 문제인가 싶었으나, 실제로 로그에 찍히는 타겟은 완전히 동일했다.
  • 아직 원인을 명확히 알 수 없으나, 앞으로 마우스 상대위치를 구할 일이 있다면 항상 이런 문제가 있을 수 있음을 염두에 두면 좋을 것 같다.