Collaborative Editing

[동시 협업 툴-6] tldraw과 yjs를 사용한 multiplayer drawing app 예제 (TBU)

아직개구리 2023. 3. 12. 22:29

1. https://github.com/tldraw/tldraw/tree/main/apps/www : yjs가 아닌 liveblocks을 사용

2. https://github.com/nimeshnayaju/yjs-tldraw : yjs + tldraw 합쳐서 multiplayer drawing 가능 

3. https://github.com/yjs/y-websocket/blob/master/bin/server.js : 기본 yjs server -> 이용해서 어떻게 wss server만드는지 알아보기.

4. tldraw -> react native로: 필요한 기능을 어떻게 rendering할지 tldraw 코드 살펴보기. 

- 살펴봐야할 코드: https://github.com/tldraw/tldraw/tree/main/packages/core (tldraw/core rendering 관련)

   tldraw패키지는 editor component를 제공하고, 그 editor component는 jsx element를 리턴하는데, 이때 그 안에서 사용되는 renderer는 core패키지에서 가져온다. 

  • packages/tldraw contains the source for the @tldraw/tldraw package. This is an editor as a React component named <Tldraw>. You can use this package to embed the tldraw editor in any React application.
  • packages/core contains the source for the @tldraw/core package. This is a renderer for React components in a canvas-style UI. It is used by @tldraw/tldraw as well as several other projects.

 

 

- https://reactjsexample.com/the-tldraw-core-renderer-and-utilities/

- https://news.hada.io/topic?id=5401 (geeknews에서 나온 부분)