[KaTeX Playground] Drag and Resize in React

React에서 드래그로 요소 크기 조절하기

KaTeX Playground에서 저장된 수식이 길면 사이드바를 넘어 안 보이는 경우가 있습니다.

잘린 수식

 

드래그를 통해 사이드 바의 크기를 조절할 수 있는 기능을 추가했습니다. 

드래그 기능 추가

 

작동 원리

먼저 드래그할 부분에 실제로 드래그할 요소를 생성합니다. 이 요소를 엣지라고 부르겠습니다. 엣지를 클릭하면 드래그가 시작되고 드래그에 따라 사이드바의 너비를 변경해 줄 겁니다.

엣지의 `mouseDown` 이벤트는 드래그의 시작을 알립니다.

드래그가 시작되면 페이지 어디서나 마우스가 움직이면 사이드바를 resize 하도록 document의 `mouseMove`이벤트에 resize 이벤트 리스너를 추가합니다. 마우스가 움직이면 `mouseMove`이벤트가 발생하고 사이드바가 resize 됩니다.

드래그를 끝내는 `mouseUp`이벤트가 페이지 어디에서든 발생하면 `mouseMove`이벤트에 등록된 resize를 지워 더 이상 사이드바가 마우스 움직임에 resize 되지 않도록 합니다.

1. 엣지에서 `mouseDown`이벤트 발생(드래그 시작)
   • document의 `mouseMove`이벤트에 resize 이벤트 리스너 추가(이후 마우스 움직이면 사이드바 resize)
   • document의 `mouseUp`이벤트에 resize 지우는 이벤트 리스너 추가
2. document에서 `mouseUp`이벤트 발생(드래그 종료)
   • document의 resize 이벤트 리스너 제거
   • `mouseUp`이벤트 리스너 제거(once: true)

 

구현

먼저 엣지를 만들어 사이드바의 직계 자식 노드로 넣어줍니다.

<div className='absolute top-0 bottom-0 w-2 cursor-col-resize left-0' onMouseDown={dragHandler} />

const dragHandler: MouseEventHandler<HTMLDivElement> = (e) => {
  const target = e.currentTarget.parentElement;
  if (!target) return;

  const resize: EventListener = (e) => {
    const right = target.getBoundingClientRect().left + target.getBoundingClientRect().width;
    const left = (e as MouseEvent).clientX;
    const width = Math.max(MIN_WIDTH, right - left);
    target.style.width = `${width}px`;
  };

  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', () => document.removeEventListener('mousemove', resize), { once: true });
};

엣지를 누르면 `dragHandler`가 실행됩니다.

`target`은 엣지의 부모노드로 사이드바입니다.