refactor(ui): generalize stage event handlers

Create intermediary nanostores for values required by the event handlers. This allows the event handlers to be purely imperative, with no reactivity: instead of recreating/setting the handlers when a dependent piece of state changes, we use nanostores' imperative API to access dependent state.

For example, some handlers depend on brush size. If we used the standard declarative `useSelector` API, we'd need to recreate the event handler callback each time the brush size changed. This can be costly.

An intermediate `$brushSize` nanostore is set in a `useLayoutEffect()`, which responds to changes to the redux store. Then, in the event handler, we use the imperative API to access the brush size: `$brushSize.get()`.

This change allows the event handler logic to be shared with the pending canvas v2, and also more easily tested. It's a noticeable perf improvement, too, especially when changing brush size.

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx

@@ -4,19 +4,38 @@ import { createSelector } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useMouseEvents } from 'features/controlLayers/hooks/mouseEventHooks';
 import {
+  $brushSize,
+  $brushSpacingPx,
+  $isDrawing,
+  $lastAddedPoint,
   $lastCursorPos,
   $lastMouseDownPos,
+  $selectedLayerId,
+  $selectedLayerType,
+  $shouldInvertBrushSizeScrollDirection,
   $tool,
+  BRUSH_SPACING_PCT,
+  brushSizeChanged,
   isRegionalGuidanceLayer,
   layerBboxChanged,
   layerTranslated,
+  MAX_BRUSH_SPACING_PX,
+  MIN_BRUSH_SPACING_PX,
+  rgLayerLineAdded,
+  rgLayerPointsAdded,
+  rgLayerRectAdded,
   selectControlLayersSlice,
 } from 'features/controlLayers/store/controlLayersSlice';
-import { debouncedRenderers, renderers as normalRenderers } from 'features/controlLayers/util/renderers';
+import type { AddLineArg, AddPointToLineArg, AddRectArg } from 'features/controlLayers/store/types';
+import {
+  debouncedRenderers,
+  renderers as normalRenderers,
+  setStageEventHandlers,
+} from 'features/controlLayers/util/renderers';
 import Konva from 'konva';
 import type { IRect } from 'konva/lib/types';
+import { clamp } from 'lodash-es';
 import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { getImageDTO } from 'services/api/endpoints/images';
 import { useDevicePixelRatio } from 'use-device-pixel-ratio';
@@ -48,7 +67,6 @@ const useStageRenderer = (
   const dispatch = useAppDispatch();
   const state = useAppSelector((s) => s.controlLayers.present);
   const tool = useStore($tool);
-  const mouseEventHandlers = useMouseEvents();
   const lastCursorPos = useStore($lastCursorPos);
   const lastMouseDownPos = useStore($lastMouseDownPos);
   const selectedLayerIdColor = useAppSelector(selectSelectedLayerColor);
@@ -57,6 +75,26 @@ const useStageRenderer = (
   const layerCount = useMemo(() => state.layers.length, [state.layers]);
   const renderers = useMemo(() => (asPreview ? debouncedRenderers : normalRenderers), [asPreview]);
   const dpr = useDevicePixelRatio({ round: false });
+  const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
+  const brushSpacingPx = useMemo(
+    () => clamp(state.brushSize / BRUSH_SPACING_PCT, MIN_BRUSH_SPACING_PX, MAX_BRUSH_SPACING_PX),
+    [state.brushSize]
+  );
+
+  useLayoutEffect(() => {
+    $brushSize.set(state.brushSize);
+    $brushSpacingPx.set(brushSpacingPx);
+    $selectedLayerId.set(state.selectedLayerId);
+    $selectedLayerType.set(selectedLayerType);
+    $shouldInvertBrushSizeScrollDirection.set(shouldInvertBrushSizeScrollDirection);
+  }, [
+    brushSpacingPx,
+    selectedLayerIdColor,
+    selectedLayerType,
+    shouldInvertBrushSizeScrollDirection,
+    state.brushSize,
+    state.selectedLayerId,
+  ]);
 
   const onLayerPosChanged = useCallback(
     (layerId: string, x: number, y: number) => {
@@ -72,6 +110,31 @@ const useStageRenderer = (
     [dispatch]
   );
 
+  const onRGLayerLineAdded = useCallback(
+    (arg: AddLineArg) => {
+      dispatch(rgLayerLineAdded(arg));
+    },
+    [dispatch]
+  );
+  const onRGLayerPointAddedToLine = useCallback(
+    (arg: AddPointToLineArg) => {
+      dispatch(rgLayerPointsAdded(arg));
+    },
+    [dispatch]
+  );
+  const onRGLayerRectAdded = useCallback(
+    (arg: AddRectArg) => {
+      dispatch(rgLayerRectAdded(arg));
+    },
+    [dispatch]
+  );
+  const onBrushSizeChanged = useCallback(
+    (size: number) => {
+      dispatch(brushSizeChanged(size));
+    },
+    [dispatch]
+  );
+
   useLayoutEffect(() => {
     log.trace('Initializing stage');
     if (!container) {
@@ -89,21 +152,29 @@ const useStageRenderer = (
     if (asPreview) {
       return;
     }
-    stage.on('mousedown', mouseEventHandlers.onMouseDown);
-    stage.on('mouseup', mouseEventHandlers.onMouseUp);
-    stage.on('mousemove', mouseEventHandlers.onMouseMove);
-    stage.on('mouseleave', mouseEventHandlers.onMouseLeave);
-    stage.on('wheel', mouseEventHandlers.onMouseWheel);
+    const cleanup = setStageEventHandlers({
+      stage,
+      $tool,
+      $isDrawing,
+      $lastMouseDownPos,
+      $lastCursorPos,
+      $lastAddedPoint,
+      $brushSize,
+      $brushSpacingPx,
+      $selectedLayerId,
+      $selectedLayerType,
+      $shouldInvertBrushSizeScrollDirection,
+      onRGLayerLineAdded,
+      onRGLayerPointAddedToLine,
+      onRGLayerRectAdded,
+      onBrushSizeChanged,
+    });
 
     return () => {
-      log.trace('Cleaning up stage listeners');
-      stage.off('mousedown', mouseEventHandlers.onMouseDown);
-      stage.off('mouseup', mouseEventHandlers.onMouseUp);
-      stage.off('mousemove', mouseEventHandlers.onMouseMove);
-      stage.off('mouseleave', mouseEventHandlers.onMouseLeave);
-      stage.off('wheel', mouseEventHandlers.onMouseWheel);
+      log.trace('Removing stage listeners');
+      cleanup();
     };
-  }, [stage, asPreview, mouseEventHandlers]);
+  }, [asPreview, onBrushSizeChanged, onRGLayerLineAdded, onRGLayerPointAddedToLine, onRGLayerRectAdded, stage]);
 
   useLayoutEffect(() => {
     log.trace('Updating stage dimensions');