Whiteboard

[ngryman]

Started to work on something almost working on the feat/whiteboard branch.

• https://tiptap.dev/guide/node-views/examples#drawing-in-the-editor
• https://github.com/ueberdosis/tiptap/blob/main/demos/src/Examples/Drawing/Vue/Component.vue
• https://github.com/tbolis/react-sketch
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
• https://observablehq.com/@d3/selection-join
• https://www.d3indepth.com/datajoins/
• https://tympanus.net/codrops/2022/03/29/building-an-interactive-sparkline-graph-with-d3/
• https://observablehq.com/@parshwamehta13/d3s-select-selectall-with-data-datum

[ngryman]

First, the very basic version is working fine. We can't even erase anything, for now, 😅 but the foundation is here.

There are lots of things we can improve:

• We should not make it interactive in the document but rather pop a floating menu to propose resizing and editing it.
• Editing goes full screen, we see the cursors of everybody else.
• Tools are missing, such as the eraser, and geometrical shapes (i.e. rectangles, ....).

It's a feature that we're going to improve little by little.

[ngryman]

Some useful links:

• Live coding a whiteboard: https://www.youtube.com/watch?v=Dkn72yYEqNk&ab_channel=YCommunity
• Live demo: https://codesandbox.io/s/yjs-multiplayer-drawing-app-q8wq5?file=/src/hooks/useLines.ts
• The library we use to give the pencil effect: https://github.com/steveruizok/perfect-freehand