From 2fcc7d9b369fe9c8b3d1b1e5017faf3aa45796c4 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 22 Nov 2022 17:46:33 +1300
Subject: [PATCH] Isolate Cursor Pos debug text on canvas to prevent rerenders

---
 .../canvas/components/IAICanvasStatusText.tsx | 11 ++-----
 .../IAICanvasStatusTextCursorPos.tsx          | 31 +++++++++++++++++++
 2 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

diff --git a/frontend/src/features/canvas/components/IAICanvasStatusText.tsx b/frontend/src/features/canvas/components/IAICanvasStatusText.tsx
index 9ad9539463..baaee49a85 100644
--- a/frontend/src/features/canvas/components/IAICanvasStatusText.tsx
+++ b/frontend/src/features/canvas/components/IAICanvasStatusText.tsx
@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store';
 import _ from 'lodash';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';
 
 const roundToHundreth = (val: number): number => {
   return Math.round(val * 100) / 100;
@@ -15,16 +16,11 @@ const selector = createSelector(
       stageCoordinates: { x: stageX, y: stageY },
       boundingBoxDimensions: { width: boxWidth, height: boxHeight },
       boundingBoxCoordinates: { x: boxX, y: boxY },
-      cursorPosition,
       stageScale,
       shouldShowCanvasDebugInfo,
       layer,
     } = canvas;
 
-    const { cursorX, cursorY } = cursorPosition
-      ? { cursorX: cursorPosition.x, cursorY: cursorPosition.y }
-      : { cursorX: -1, cursorY: -1 };
-
     return {
       activeLayerColor:
         layer === 'mask' ? 'var(--status-working-color)' : 'inherit',
@@ -42,7 +38,6 @@ const selector = createSelector(
       )}`,
       canvasDimensionsString: `${stageWidth}×${stageHeight}`,
       canvasScaleString: Math.round(stageScale * 100),
-      cursorCoordinatesString: `(${cursorX}, ${cursorY})`,
       shouldShowCanvasDebugInfo,
     };
   },
@@ -52,6 +47,7 @@ const selector = createSelector(
     },
   }
 );
+
 const IAICanvasStatusText = () => {
   const {
     activeLayerColor,
@@ -62,7 +58,6 @@ const IAICanvasStatusText = () => {
     canvasCoordinatesString,
     canvasDimensionsString,
     canvasScaleString,
-    cursorCoordinatesString,
     shouldShowCanvasDebugInfo,
   } = useAppSelector(selector);
 
@@ -84,7 +79,7 @@ const IAICanvasStatusText = () => {
           <div>{`Bounding Box Position: ${boundingBoxCoordinatesString}`}</div>
           <div>{`Canvas Dimensions: ${canvasDimensionsString}`}</div>
           <div>{`Canvas Position: ${canvasCoordinatesString}`}</div>
-          <div>{`Cursor Position: ${cursorCoordinatesString}`}</div>
+          <IAICanvasStatusTextCursorPos />
         </>
       )}
     </div>
diff --git a/frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
new file mode 100644
index 0000000000..5d383cf38d
--- /dev/null
+++ b/frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
@@ -0,0 +1,31 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import React from 'react';
+import _ from 'lodash';
+
+const cursorPositionSelector = createSelector(
+  [canvasSelector],
+  (canvas) => {
+    const { cursorPosition } = canvas;
+
+    const { cursorX, cursorY } = cursorPosition
+      ? { cursorX: cursorPosition.x, cursorY: cursorPosition.y }
+      : { cursorX: -1, cursorY: -1 };
+
+    return {
+      cursorCoordinatesString: `(${cursorX}, ${cursorY})`,
+    };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);
+
+export default function IAICanvasStatusTextCursorPos() {
+  const { cursorCoordinatesString } = useAppSelector(cursorPositionSelector);
+
+  return <div>{`Cursor Position: ${cursorCoordinatesString}`}</div>;
+}