일정 크기 변경
사용배경
구글 캘린더에 기능 중 일정 만들기를 구현하였다. 기능은 다음과 같다.
1. 일정의 크기를 조절할 수 있다. 15분 단위로 크기가 변경된다.
2. 변경된 크기에 맞게 end시간이 바뀐다.
3. 최소로 줄일 수 있는 크기는 15분이고 최대로 늘릴 수 있는 크기는 맨 끝까지 이다.
구현
이것도 일정 옮기기와 비슷하고 오히려 더 쉽다. height를 deltaY만큼 움직이면 되는 것이다.
div 아래쪽을 클릭하면 onMouseDown이벤트가 실행이 되고 클릭한 좌표를 저장해 둔다. 그리고 onMouseMove이벤트가 발생되면서 움직일 때마다 deltaY값을 구한다. 그리고 기존의 height에다가 deltaY값을 더하면 끝이다.
이것을 코드로 나타내어 보자
해당 코드는 onMouseDown 이벤트 함수이다. deltaY를 구하기 위해서 클릭한 좌표 Y값을 따로 저장해 둔다. 현재 높이도 저장해둔다.
해당 코드는 onMouseMove 이벤트 함수이다.
height = (기존 높이) - (처음 클릭 Y좌표) + (현재 Y좌표)를 하여 움직일 때마다 변경된 height값을 구한다.
변경된 height값이 50보다 작다면 리턴하라는 의미는 최소로 줄일 수 있는 크기는 30분(15분당 25px)이라고 정했다.
top + height > 1650 의미는 최대로 늘릴 수 있는 크기는 맨 끝까지라는 의미이다.
height % 25 !== 0 의미는 resize될 때 15, 30분 45분, 0분 이외에 값들은 리턴하겠다는 의미이다.
이렇게 하여 15분 단위로 사이즈를 줄이고 늘릴 수 있었다.
해당 코드는 onMouseUp 이벤트 함수이다. 이벤트를 종료하고 관련된 변수들을 초기화하는 과정이다.
그리고 일정 옮기는 것과 마찬가지로 변경된 정보들을 DB에 Update한다.
다음과 같이 DB에 변경된 내역을 저장하고 다시 가져올 때 변경된 내역을 가져올 수 있도록 하였다.
결과
발생한 문제
1. resize할 때 height % 25 !== 0 return 즉 onMouseMove할 때마다 높이가 15분 단위로 나누어 떨어지지 않는다면 리턴하는 함수이다. 쉽게 말해 15분 단위일 때만 렌더링 하겠다는 의미이다. 코드상으로는 아무 문제가 없었다. 하지만 onMouseMove 이벤트 주기가 느려서 ( height % 25 !== 0 return )이 부분을 제대로 인식하지 못했다. 디버그를 하기위해서 개발자도구를 키면 그때는 정상적으로 onMouseMove이벤트 주기가 빨라져서 제대로 작동했다. 개발자도구를 껐을 때에도 OnMouseMove 이벤트 주기를 빠르게 할 필요가 있었다.
다행이다 StackOverFlow에 비슷한 문제를 가진 사람이 있었다.
콘솔이 열린 상태에서 mousemove가 더 자주 트리거됩니까?
pointerMove함수를 사용하고 getCoalescedEvents()를 사용하면 빠르게 된다는 것이다.
getCoalescedEvents로 intra-frame 이벤트 가져오기
해결법
pointermoveHandler 함수를 변수에 저장한다. 그 이유는 removeListener할 때 함수를 참조하기 위해서이다. 그리고 pointermove 이벤트를 키고 실행 함수로는 pointermoveHandler 함수를 지정한다.
getCoalescedEvents 메서드를 사용하여 병합된 이벤트에 대한 정보를 가져온다.
이렇게 하고나니 onMouseMove이벤트가 빠르게 실행될 수 있었다.
