fix(brush): stop painting after pointer release

view/canvas/useCanvasInput.ts

@@ -30,6 +30,7 @@ export function useCanvasInput(
 ): CanvasInputState {
   const [isPanning, setIsPanning] = useState(false);
   const brushSession = useRef<BrushSession>();
+  const brushSessionId = useRef(0);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -64,6 +65,7 @@ export function useCanvasInput(
       const state = store.getState();
       const brush = beginBrushSession(state.document, state.editor, viewportPointToDocumentPoint(inputEvent.position, state.editor.viewport));
       if (brush) {
+        brushSessionId.current += 1;
         brushSession.current = brush;
         canvas.setPointerCapture(event.pointerId);
         event.preventDefault();
@@ -99,9 +101,10 @@ export function useCanvasInput(
     const handlePointerMove = (event: PointerEvent) => {
       const inputEvent = pointerInputEventFromPointerEvent(event);
       if (brushSession.current) {
+        const activeSessionId = brushSessionId.current;
         const point = viewportPointToDocumentPoint(inputEvent.position, store.getState().editor.viewport);
         void updateBrushSession({ store, session: brushSession.current, point }).then((nextSession) => {
-          brushSession.current = nextSession;
+          if (brushSessionId.current === activeSessionId) brushSession.current = nextSession;
         });
         event.preventDefault();
         return;
@@ -120,6 +123,7 @@ export function useCanvasInput(
     const handlePointerUp = (event: PointerEvent) => {
       const inputEvent = pointerInputEventFromPointerEvent(event);
       if (brushSession.current) {
+        brushSessionId.current += 1;
         brushSession.current = undefined;
         event.preventDefault();
         return;