RFC-0004 / Annotation Drawer Event Handling improvement

[LTakhyunKim]

📝 Description

AnnotationDrawer 에서 사용하는 이벤트 핸들링 방식에 대한 개선안 공유합니다.

AnnotationDrawer Event 개선 RFC

위 링크를 통해 문서 확인 부탁드립니다.

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟢	Statements	93.6%	278/297
🟢	Branches	88.28%	128/145
🟢	Functions	90.16%	55/61
🟢	Lines	94.6%	263/278

Test suite run success

109 tests passing in 31 suites.

Report generated by 🧪jest coverage report action from b5462aa752d9600850d642ba427d6a3cc6bd1514

[deminoth]

가장 근본적인 문제인 Layer 가 겹쳐서 이벤트가 발생하지 않는 문제를 해결하려고 합니다. AnnotationViewer, AnnotationDrawer Layer 를 하나로 통일하여, 해당 레이어에서 이벤트 등록을 진행하고자 합니다.

이 경우 EnabledElement 사용시와는 달리 Annotation Overlay가 항상 overlay 중 z-index 최상단에 있어야 하는게 맞을까요?

[LTakhyunKim]

이 경우 EnabledElement 사용시와는 달리 Annotation Overlay가 항상 overlay 중 z-index 최상단에 있어야 하는게 맞을까요?

넵 맞습니다. 최상단에 위치해서 유저 이벤트를 받고자 합니다.

[deminoth]

넵 맞습니다. 최상단에 위치해서 유저 이벤트를 받고자 합니다.

사실 여러 오버레이가 겹쳐졌을 때 하나만 이벤트를 받을 수 있는 문제 때문에 EnabledElement를 쓰는 것인데, Annotation 외의 다른 오버레이가 이벤트를 받을 수 있어야 하는 시나리오가 딱히 떠오르지는 않네요. 문서화만 잘 한다면 이대로 가도 괜찮을 것 같습니다.

[deminoth]

<svg onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
      {/** 기존 AnnotationDrawer 에 Annotation Viewer 를 추가 */}
      <AnnotationViewer onClick={onClickAnnotation} />

Annotation을 클릭했을때에도 부모의 onMouseDown 이벤트가 발생할 것 같은데, 따로 버블링을 막는 등 처리가 필요할지도 모르겠습니다.

[LTakhyunKim]

사실 여러 오버레이가 겹쳐졌을 때 하나만 이벤트를 받을 수 있는 문제 때문에 EnabledElement를 쓰는 것인데, Annotation 외의 다른 오버레이가 이벤트를 받을 수 있어야 하는 시나리오가 딱히 떠오르지는 않네요. 문서화만 잘 한다면 이대로 가도 괜찮을 것 같습니다.

넵 저 역시도 해당 방안을 고려할 때 말씀하신 AnnotationOverlay 외에 별도의 Overlay 에서 이벤트를 받아야하는 시나리오를 생각했지만, 딱히 없을 듯하여 위와 같이 진행하고자 합니다.

문서화 부분은 RFC 문서를 비롯하여 dev-docs, 외부 공개 docs 등에 위 내용을 작성하는 방향으로 진행하겠습니다.

[LTakhyunKim]

Annotation을 클릭했을때에도 부모의 onMouseDown 이벤트가 발생할 것 같은데, 따로 버블링을 막는 등 처리가 필요할지도 모르겠습니다.

넵, 요건 처리가 필요할 것 같네요 RFC 문서에도 위 내용 작성했습니다. 14caaac

[LTakhyunKim]

이벤트 등록 대상 DOM 은 AnnotationDrawer 가 아닌 EnabledElement 에 하고 있음에도 불구하고 AnnotationDrawer 에서 하고 있다는 것 역시, 관심사 분리라는 측면에서 좋은 구조가 아닙니다.

요 문장은 한번 수정해보세요.

아래와 같이 수정했습니다. b5462aa

실제 이벤트 등록 대상 Dom 은 `EnabledElement` 로 코드 파악에 부정적 영향을 주며
`EnabledElement` 에 대한 로직을 `AnnotationDrawer` 에서 다룬다는 점에서 관심사 분리 측면에서 좋은 구조가 아니라고 생각합니다.