[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은 엣지의 부모노드로 사이드바입니다.