[메모 트리 프로젝트] 5. UI 구현 - 2

프로젝트 글 목차

2021.03.13 - [메모 트리 프로젝트] 1. 기획

2021.03.13 - [메모 트리 프로젝트] 2. 설계 - 와이어프레임, 요구 사항

2021.03.14 - [메모 트리 프로젝트] 3. 설계 - 객체 모델링

2021.03.18 - [메모 트리 프로젝트] 4. UI 구현 - 1

2021.03.19 - [메모 트리 프로젝트] 5. UI 구현 - 2

2021.03.20 - [메모 트리 프로젝트] 6. 나머지 프론트엔드 작업

2021.03.20 - [메모 트리 프로젝트] 7. 배포 및 후기

---

 

선을 그려주는 부분에서 많은 고민을 했다.

처음에는 가상 선택자를 고려하였으나, 굳이 css 영역에서 제어하는 가상 선택자를 수정하기 위해서는 style을 덮어씌우거나 편하게 구현된 jQuery로 접근하면 되긴하는데... 결과적으로는 자주 쓰던 jQuery보다는 canvas가 낫다고 판단했다.

canvas로 그리면서 고려할 사항은 두 가지였다.

 

1. 상위에 위치한 노드의 요소 추가로 인해 기존 노드의 위치가 변경되면 선의 상태도 변경해야 한다.

g의 상위에 위치한 c 노드에 하위 요소가 추가 되었다. g와 a를 연결한 선의 위치도 변경해야 한다.

사실 이 부분은 가상 선택자를 쓰던, 별도의 라인 태그로 그려주던 똑같이 고려해야하는 부분이다.

이 때, 렌더링이 필요한 노드를 검사하는 방향보다 모든 노드의 선을 새로 그려주는게 당연하게도 구현이 더 쉬운 부분이었고, 노드에 대한 정보를 배열로 저장하고 있기 때문에 불필요한 DOM 탐색이 없으니 적합하다고 판단하여 생각한대로 구현했다.

선의 위치는 소수점 단위의 픽셀까지 정확해야 틀어짐 없이 깔끔하게 보이므로 getBoundingClientRect()를 사용하여 각 태그의 시작 지점과 종료 지점을 class의 프로퍼티로 업데이트 하는 함수를 추가했다.

setPosition() {
  const thisPosition = this.node.firstElementChild.getBoundingClientRect();
  this.startX = thisPosition.x;
  this.endX = thisPosition.x + thisPosition.width;
  this.y = thisPosition.y - thisPosition.height / 2;
}

아쉽게도 header영역, 패딩 등 getBoundingClientRect()로 확인할 수 없는 다른 요소들에 대한 보정은 현재 하드 코딩으로 처리해둔 상황이며, 요소의 추가는 이벤트가 발생하지 않기 때문에 아쉽게도 이벤트 객체에서 값을 찾아오는 방법을 쓸 수 없다. 결과적으로 header, padding에 대한 크기를 고정시킨 값을 상수로 저장해두는 방향이 맞을듯.

ctx.moveTo(endX - 48, y - 80);
item.childs.forEach(v => {
  ctx.lineTo(v.startX - 48, v.y - 80);
  ctx.moveTo(endX - 48, y - 80);
});

최대한 빨리 수정이 필요한 부분이다..

 

진행 상황

• item
  • 렌더링: 현재 상하위 요소간 라인 연결 미구현
  • 하위 요소 추가
  • 내용 변경
  • 이름 변경
  • 삭제: contentmenu의 삭제와 연계
  • toObject (로컬스토리지 및 mongoDB 저장을 위함)
• contentview
  • 렌더링
  • 닫기
  • 텍스트 불러오기
  • 상태 토글
  • 수정: item 내용 변경과 연계
• contentmenu
  • 렌더링
  • 타입에 따라 다른 선택지 제공
  • 폴더 생성
  • 파일 생성
  • 글자 색상변경
  • 배경 색상변경
  • 테투리 색상변경
  • 삭제: item의 삭제와 연계
• 캐시, localStorage
  • 저장
  • 불러오기
  • 기본 값 설정

결과적으로 미구현이었던 부분은 전부 처리가 된 상태이며, 현재 heroku로 일차적인 배포가 끝난 상황이다.

문제는 추가 기능 구현! 기본 기능 구현에 급급하여 코드가 상당히 지저분한 상태이기도 하니 차후 리팩토링을 하면서 추가 기능을 함께 구현하면 될 거 같다.

 

 

gif가 끊기는 경우 이미지를 클릭하면 정상적으로 확인이 가능합니다.