From 24dbb65ebb78ad463c3edbb9a276fd75b1ae8e55 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Apr 2024 10:41:59 +1000
Subject: [PATCH] perf(ui): add brush spacing

Only add point to line if the next point is 10 or more px from the last point
---
 .../features/regionalPrompts/hooks/mouseEventHooks.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts
index 7ce11ccf28..33bcd57523 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts
+++ b/invokeai/frontend/web/src/features/regionalPrompts/hooks/mouseEventHooks.ts
@@ -12,7 +12,7 @@ import {
 } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 const getIsFocused = (stage: Konva.Stage) => {
   return stage.container().contains(document.activeElement);
@@ -48,6 +48,7 @@ export const useMouseEvents = () => {
   const dispatch = useAppDispatch();
   const selectedLayerId = useAppSelector((s) => s.regionalPrompts.present.selectedLayerId);
   const tool = useStore($tool);
+  const lastCursorPosRef = useRef<[number, number] | null>(null);
 
   const onMouseDown = useCallback(
     (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
@@ -117,7 +118,13 @@ export const useMouseEvents = () => {
         return;
       }
       if (getIsFocused(stage) && $isMouseOver.get() && $isMouseDown.get() && (tool === 'brush' || tool === 'eraser')) {
-        dispatch(maskLayerPointsAdded({ layerId: selectedLayerId, point: [Math.floor(pos.x), Math.floor(pos.y)] }));
+        if (lastCursorPosRef.current) {
+          if (Math.hypot(lastCursorPosRef.current[0] - pos.x, lastCursorPosRef.current[1] - pos.y) < 10) {
+            return;
+          }
+        }
+        lastCursorPosRef.current = [Math.floor(pos.x), Math.floor(pos.y)];
+        dispatch(maskLayerPointsAdded({ layerId: selectedLayerId, point: lastCursorPosRef.current }));
       }
     },
     [dispatch, selectedLayerId, tool]