Skip to content

Task #661: 드래그 선택 중 커서/스크롤 튐 정정 (closes #661)#718

Open
postmelee wants to merge 6 commits intoedwardkim:develfrom
postmelee:pr-task661
Open

Task #661: 드래그 선택 중 커서/스크롤 튐 정정 (closes #661)#718
postmelee wants to merge 6 commits intoedwardkim:develfrom
postmelee:pr-task661

Conversation

@postmelee
Copy link
Copy Markdown
Contributor

Summary

  • rhwp-studio에서 텍스트 드래그 선택 중 커서와 스크롤 위치가 포인터와 무관하게 튀는 문제를 정정합니다. Closes rhwp-studio: 텍스트 드래그 선택 중 커서와 스크롤 위치가 튀는 현상 #661
  • 드래그 중에는 caret rect 기준 scrollCaretIntoView()를 호출하지 않고, 포인터가 편집 영역 상/하단 edge에 들어온 경우에만 별도 RAF 루프로 자동 스크롤합니다.
  • 드래그 중 마지막 포인터 좌표를 저장하고, 스크롤이 실제 발생한 경우 같은 포인터 좌표로 다시 hit-test하여 선택 focus를 이어갑니다.
  • 편집 영역 밖으로 포인터가 나가도 선택 드래그가 계속되도록 document-level mousemove를 드래그 동안만 등록하고 종료/dispose()에서 해제합니다.
  • 검증 중 별도로 발견한 표 셀 빈 영역 클릭 hit-test 문제는 #717로 분리 등록했습니다.

Root cause

  • 기존 드래그 선택 경로는 mousemove마다 hit-test 결과로 cursor focus를 이동한 뒤 caret 갱신 과정에서 caret rect 기준 자동 스크롤을 함께 수행했습니다.
  • 드래그 중 선택 focus가 다른 페이지/문단으로 순간 이동하면 스크롤 컨테이너가 포인터가 아니라 caret rect를 따라가면서, 사용자가 드래그 중인 위치와 문서 스크롤 위치가 함께 튀었습니다.
  • 이번 PR은 드래그 중 caret 갱신과 스크롤 책임을 분리합니다. caret은 선택 상태 표시만 갱신하고, 스크롤은 포인터 edge 감지만 담당합니다.

변경 사항

  • InputHandler.updateCaretDuringDrag() 추가
    • 일반 updateCaret()과 달리 scrollCaretIntoView()를 호출하지 않습니다.
    • 최신 devel에 없는 선행 #664의 CaretRenderer.updateLive()에 의존하지 않도록 기존 CaretRenderer.update()를 사용합니다.
  • 텍스트 선택 드래그 helper 추가
    • startTextSelectionDrag()
    • updateTextSelectionDragPointer()
    • updateTextSelectionDragFromPointer()
    • stopTextSelectionDrag()
  • 포인터 edge 자동 스크롤 추가
    • edge 폭: 48px
    • step: 2px ~ 20px
    • scrollTop 변화가 있을 때만 선택 focus 재계산
  • rhwp-studio/e2e/drag-selection-autoscroll.test.mjs 추가
    • 70줄 문서 생성
    • 첫 줄에서 하단 edge까지 드래그
    • 스크롤 증가, 선택 상태, highlight 표시, focus 문단 확장을 검증

Test plan

  • cargo test — 1254 passed, 0 failed, 3 ignored
  • cargo clippy -- -D warnings
  • cd rhwp-studio && npm run build
    • Vite chunk size warning만 발생, 빌드 성공
  • cd rhwp-studio && CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" npm run e2e:drag-autoscroll -- --mode=headless
    • scrollTop: 0 -> 1529
    • hasSelection: true
    • selection.end.paragraphIndex: 69
    • highlightCount: 70
  • git diff --check upstream/devel...HEAD

PR 구성 메모

관련 자료

edwardkim added a commit that referenced this pull request May 8, 2026
closes #658

4 commits 단계별 보존 (작업지시자 직접 결정):
- e0ce874 Task #658: Add selection rect diagnostics
- f3c7fc0 Task #658: Fix selection rect line boundaries
- 99b3a5a Task #658: Reduce selection drag DOM churn
- 5fa80bf Task #658: Finalize selection drag fix report

본질 정정:
- 선택 rect 시작/끝 위치 영역의 cursor hit bias 영역 추가 — 줄바꿈 경계 영역 영역의 같은 문자 오프셋 영역 영역 이전 줄 끝 vs 다음 줄 시작 영역 구분
- SelectionRenderer 영역의 highlight div 영역 재사용 + 동일 rect 반복 렌더링 skip 영역 (DOM churn 영역 정정)
- 드래그 영역 caret 업데이트 영역 가벼운 처리 영역 경로 추가

본 환경 검증:
- cherry-pick 충돌 0건 (orders/20260507.md 자동 머지)
- cargo test --release ALL PASS (1165 lib + issue_658 2/2)
- TypeScript 빌드 통과
- clippy clean

PR: #664
컨트리뷰터: @postmelee (Taegyu Lee)
후속 분리: #661 (드래그 시작 영역 영역 커서/스크롤 위치 튐 영역) → PR #718 영역
edwardkim added a commit that referenced this pull request May 8, 2026
PR #664 (Task #658): rhwp-studio 드래그 선택 하이라이트 오버플로우 수정
- merge commit: c6bf769 (4 commits 단계별 보존 no-ff merge — 작업지시자 직접 결정)
- 본질 정정: cursor hit bias (cursor_nav.rs +118/-53) + selection-renderer DOM churn 정정
- 본 환경 결정적 검증 1165 lib + issue_658 2/2 + TypeScript clean + clippy clean
- WASM 빌드 4,584,723 bytes
- 작업지시자 시각 판정 ★ 통과 (exam_social.hwp 드래그 선택 페이지 폭 안 정합)

컨트리뷰터: @postmelee (Taegyu Lee) — 다회 사이클 영역 (PR #663 close → #664 재제출)
후속 분리: #661 (드래그 시작 영역 영역 커서/스크롤 위치 튐 영역) → PR #718 영역

closes #658

산출물:
- mydocs/pr/archives/pr_664_review.md
- mydocs/pr/archives/pr_664_report.md
- mydocs/orders/20260508.md 갱신
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant