Let’s chat about bests practices for the drawing apps. In particular let’s start with how to optimally do the stroking part of multiplayer drawing.
What is the stroking phase (up for a better phrase)?
When creating a stroke of a pen/pencil like tool, developers implement the following
- When a pen/pencil tool is selected and user clicks/presses and drags their pointer/touches a new stroke is started
- As they drag a stroke is drawn in their app
- Other users should be seeing this in progress stroke
- If they cancel by for example pressing the escape key, the stroke should be removed from the board and not show up in the undo/redo history
- When they release the pointer or raise their finger they stop drawing and commit the stroke to undo/redo history
Goals
- Users should be able to cancel an in progress stroke
- Undoing/Redoing should be stroke level, not per pointer update
- Users should see the in progress sketching of others with as low latency as possible
There are multiple ways to implement the above. One way is to use the awareness API to send all of the points each time you add a point, but the recommended way from Kevin is I believe the following.
Append To Y.Array
There is an optimization where no unnecessary meta data is created if you use a Y.Array and append a single JS Object for each point, for instance {x:100, y: 100} or [100,100].
// Pseudo code
const stroke = new Y.Array(); stroke.push([100,100]);