라이브러리 선택기준

• 자유도가 높아 우리가 많이 커스텀해서 사용할 수 있는 정도의 라이브러리
• 개별 요소들에 대한 이벤트 관리를 API로 지원해줄 수 있는 정도의 라이브러리
• 사용자가 경험하기에 마인드맵 관리가 편한 것들

라이브러리 후보

1. PixiJS

   • 장점
     • 어느정도 공식문서가 잘 되어있다
     • 자유도가 높다
     • 이벤트를 지원한다
   • 단점
     • 하지만 레퍼런스가 많이 없고, 있더라도 영어가 많다
     • 리액트 18까지 지원하지만 v8까지는 지원하지 않는다

2. three.js

   • 장점
     • 유명한 라이브러리인 만큼 공식 문서와 레퍼런스가 충분하다
     • 3D 컨텐츠로 조금 더 깔쌈하다
   • 단점
     • 하지만 유저가 보기에 마인드맵이 굳이 3d로..?
     • camera까지 조정하는 기능이 우리에게는 굳이 필요하지 않은 것 같다.

3. p5.js

   • 장점
     • 한국어 공식문서를 지원한다
     • 야무진 예시들이 많다
     • 이벤트 API를 지원한다
     • 자유도가 높다
     • p5 Element를 통해 개별 요소의 조작이 가능하다
   • 하지만 react와의 호환이 잘 안 되는듯하다
     • setState랑 혼용이 안 된다고 함 + 패키지 지원 안 함

4. fabric.js

• https://medium.com/@seohyoda/fabric-js-입문-part-1-78dd390536cf
• 장점
  • 도형 생성이 간단하다.
  • 생성하면 드래그앤드랍 속성이 들어있음 ( 안되게 할 수도 있음 )

1. konva.js

   https://konvajs.org/docs/sandbox/Scroll_By_Edge_Drag.html

   https://konvajs.org/docs/sandbox/Canvas_Scrolling.html

   https://konvajs.org/docs/sandbox/Connected_Objects.html

   • 장점
     • npm 인기가 대단하다(weekly download 30만)
     • React 지원이 가능하다
     • 어느정도의 레퍼런스가 있다

채택!!!

konva letsgo