fix: prevent nested flicking (direction-based)

[gyutato]

Issue

https://oss.navercorp.com/egjs/work/issues/2127

Details

• flicking 컨테이너가 중첩된 경우, 특정 축(방향)의 flicking 이 시작되었을 때 다른 축 방향으로의 전파를 방지합니다.
• 본 PR에서는, 자식 요소에서 시작된 flicking 이 부모에게 전파되는 것을 방지하는 로직만 구현하였습니다.

리뷰 요청 사항

• 적절한 객체를 수정하였는지 (PanInput, InputObserver)
• 기존 구조를 잘 보존하는 방식으로, 적절한 위치에 로직이 추가되었는지 (InputObserver.change, InputObserver.release)

[CLAassistant]

All committers have signed the CLA.

[daybrush]

isSameAxis 조건이 닿는지, 닿더라도 항상 true인지 확인해보시면 좋을 것 같아요.

자식이 양방향 드래그로 설정되어 있는 경우도 고려하시면 좋을 것 같아요.

[gyutato]

@daybrush 제가 의도했던 '같은 축' 판단 조건은 다음과 같습니다:

1. 최초 flicking 방향 (primary) 이 없으면 무조건 false
2. 최초 방향이 HORIZONTAL 인 경우, 현재 input 의 input.axes 가 가로 단일 축일 때만 true
3. 최초 방향이 VERTICAL 인 경우, 현재 input 의 input.axes 가 세로 단일 축일 때만 true

isSameAxis 가 항상 true 일 것이라고는 예상하지 못했는데, 혹시 제가 놓친 지점이 있는 것인지 확인 부탁드립니다!

[daybrush]

connect(["x", y"]) // both
connect(["", "y") // vertical
connect(["x", ""]) // horizontal

아마도 PanInput에서 관련없는 방향의 offset을 0으로 만들어버릴거에요.
그리고 offset이 0이면 위에서 거르는 조건이 있을거에요.

그러다보니까 isSameAxis를 지나가는 거라면 이미 같은 방향이라고 보고 있습니다

[daybrush]

자식에서도 설저할 수 있지만 부모에서도 바로 변경이 될 수 있어서 1번만 설정할 수 있게 하시는게 좋을 것 같아요.

[gyutato]

반영했습니다 ffa2b88

[gyutato]

피드백 (d4eae16)

기존 구조 설명

• 시나리오: X축으로 드래그하다가 Y축으로 꺾는 경우
  • primaryDirection: HORIZONTAL
  • PanInput: stopPropagation 트리거가 안 됨 (prevent 조건에 의해)
• childrenAxesAlreadyChanged 등의 값은 자식 Observer가 세팅하는 관점
  • 해당 값을 사용하고 읽는 것은 부모가 함
• 전체적인 구조: 조건 판단(자신의 동작 결정) + 값 세팅(전파할 값 설정)
• PanInput: InputObserver 에게 숫자를 전달 (나(input) 에 의해 만들어진 offset 이 이렇다)
• InputObserver: 전달받은 offset (거리) 를 좌표 상의 실제 이동 (?) 으로 변환한다

수정 제안

• 기존 flag true 처리하는 로직이 아니라, return 문 부분으로 조건 이동
• PanInput 에서 처리
  • stopPropagation 중단 로직을 추가
• PrimaryDirection 설정 시, 한번 설정된 뒤로는 바꿀 수 없도록 가드 필요

Todos

• 현재 코드가 잘 동작하는지 확인 (자식 > 부모 전파 방지)
• 부모 > 자식으로 전파 막는 로직 (필요하다면) 추가
• nested flicking 데모 파일 전달받기

[daybrush]

부모도 일단 시작은 발생했기 때문에 릴리즈가 발생해야될 것 같습니다.

[coveralls]

coverage: 49.511% (-0.9%) from 50.406%
when pulling 88b5490 on gyutato:fix/nested-flicking
into d529450 on naver:master.

[gyutato]

@daybrush 리뷰 요청드립니다.

Issue

https://oss.navercorp.com/egjs/work/issues/2127

Details

• flicking 컨테이너가 중첩된 경우, 특정 축(방향)의 flicking 이 시작되었을 때 다른 축 방향으로의 전파를 방지합니다.
  • 후속 커밋을 통해, 자식에서 시작된 flicking 이 부모로 전파되는 것과, 부모에서 시작된 flicking 이 자식으로 전파되는 것 모두 방지하였습니다.
• 자식에서 부모로 flicking 이 전파되는 경우, __axesPrimaryDirection 값을 기반으로 observer.isSameAxis 메서드를 통해 수직 축 flicking 을 제한합니다.
• 부모에서 자식으로 flicking 이 전파되는 경우, 부모의 __inputStack 배열에 담긴 자식 객체들의 ignoreChange 메서드를 트리거하여 후속 change 트리거를 제한합니다.

작업 예정 사항

• 기존 테스트 통과 여부 확인
  • change 도중 stop 이벤트 발생 시 fail 해결
• 신규 테스트 추가
  • 부모 이벤트가 자식으로 전파되는 경우
  • 자식 이벤트가 부모로 전파되는 경우