No guarantee for event order will be exactly: pointerDown -> pointerMove -> pointerUp

[pobch]

Example cases:

1. Line tool
2. Click & Hold a mouse inside <canvas/>
3. Move the cursor out of the viewport (still holding click)
4. Release click outside the viewport
5. Move the cursor back to the viewport
6. Click Undo
7. Unhandled errors occur while moving the cursor

The order in this case:
pointerDown (canvas)
-> pointerMove (inside to outside canvas)
-> pointerMove (back to canvas)
-> onClick (undo button)
-> pointerMove (canvas)
-> pointerDown (canvas)
-> pointerUp (canvas)

line.mp4

pencil.mp4

rect.mp4

Possible Solutions

We should combine multiple techniques together.

Technique 1

• Excalidraw calls onPointerUp handler when the mouse is moved out of canvas in the middle of drawing. How? maybe they use onPointerOut, onPointerLeave ??

Technique 2

• Excalidraw: they set pointer-events: none to all floating buttons, e.g. undo button, while the user starts dragging an element in the canvas.

Technique 3

• In every event handler, first check for an expected state before proceed any actions. For unexpected/uninterested state, do nothing. (i.e. Finite state machine)
  • pointerDown (canvas): expected none state, proceed changing to drawing state
    -> pointerMove (inside to outside canvas): expected drawing state, proceed logic
    -> release a pointer outside canvas
    -> pointerMove (back to canvas): expected drawing state, proceed logic
    -> pointerDown (canvas): unexpected drawing state, do nothing
    -> pointerMove (canvas): expected drawing state, proceed logic
    -> pointerUp (canvas): expected drawing state, proceed changing to none state
• Other than previous state name, also beware of data that comes from previous state. Don't assume any previous data. Instead, always check if data is valid, e.g. check if id of element we are editing is valid. (i.e. Make sure every event handler is stateless and independent from any previous event handlers)

[pobch]

Another example case

pointerDown -> pointerUp (without passing through pointerMove)