divlook / text-picker Goto Github PK

AS-IS

DOM 선택을 좀 더 정확하게 하고자 상하위 관계 연결 로직을 변경하였는데
#2 작업으로인해 텍스트 추출에 문제가 생겼음

TO-BE

• 하위 blockNode가 DOM 트리 내에서 하위 요소인지 검사가 필요함
• DOM 트리 내에서 하위 요소가 아니라면 별도로 텍스트 추출이 필요

관련 이슈

• #2

AS-IS

특정 UI를 구현하기 위해 DOM 구조가 흐름에 맞지 않게 된 경우 영역이 이상하게 잡히고 있음.
현재 DOM 파싱 구조는 계산을 최소화하기 위해 DOM 노드의 부모-자식 관계를 체크하는데
레이어가 복잡하게 만들어진 경우 부모 노드와 자식 노드의 위치가 완전 다를 수 있음.

TO-BE

계산이 올바르게 되려면 노드의 부모-자식 관계 대신 노드의 영역을 기준으로 계산해야 된다.
더 큰 영역을 가진 노드가 상위 노드가 되고 그 영역 안에 있는 노드가 하위 노드로 연결되게 구현한다.

예상 되는 문제점

• 계산이 너무 많아서 화면이 멈추거나 오래 걸릴 수 있음
  • 알고리즘을 잘 짜면 해결될 것 같기도한데, 안되면 로딩바 추가

막아야될 이벤트 목록

• click
• blur
• mousedown
• mouseup
• keypress
• keydown
• keyup