문제 상황

• Depth가 깊은 요소 선택 시 Layer Panel이 한번에 펼쳐지지 않는 문제

원인

• LayerTreeStore에서 constructor 에서 등록된 reaction에 있는 expand가 모두 실행 되어도,

• TreeView > TreeNodeView > SubTreeView 로 전달되는 LayerTreeStore 의 데이터에는 3depth 이후부터는 모두 False로 되어있음

  

  expand가 실행되다가 중단되는 모습

📝 실행 순서 및 “증상” 해결 방법

ProjectEditorLayout.tsx : 175 에서

layer = LayerTreeStore 생성

• ( 생성될 때 selectedNodes에 reaction 함수가 달림) 및 context provider에 layer 제공

➡️ TreeView → SubTreeView로 layer 전달

➡️ LayerTreeNodeStore : 154 에서 expand 실행

➡️ 다시 TreeView

➡️ SubTreeView ( 이 때 expanded 가 중간에 false로 렌더링됨..

⬅️ 여기에서 expand를 requestIdleCallback에 넣어주면 증상이 해결됨

해결 방법

requestIdleCallback(() => {
  nodes.get(id)?.expand();
});

🤔 고민이 되는 부분

• expand는 가장 자식 노드부터 상위로 올라가면서 expanded 를 true로 만들어줌
• 렌더 되는 것은 반대로 가장 상위 노드와 그 아래 노드만 expanded === true 되어있음

<aside> ❓

의문

• expand가 다 적용되기 전에 렌더가 시작된 것이라면
  • 가장 하위 노드의 expanded가 true 되어있어야 함
  • expand의 실행 시점을 늦췄을 때 증상이 해결되면 안됨 </aside>

배운 점

1. mobX는 transformer라는 함수를 이용해서 input에 대한 output이 관측되는 동안 동일한 인풋에 대해 동일한 아웃풋을 리턴하도록 만들어준다.
2. 우리의 레이어 트리는 이러한 transformer의 결과물임.
3. 하지만 이 레이어트리를 관측(observe) 하는 것은 레이어 트리의 렌더링된 컴포넌트들