From 982535eb92b554130e762222b906dc0ac14c2d79 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 19 Aug 2024 15:37:42 +1000
Subject: [PATCH] fix(ui): rerenders when changing canvas scale

---
 .../features/controlLayers/components/CanvasScale.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasScale.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasScale.tsx
index 14a579552f..1d2d16d61c 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasScale.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasScale.tsx
@@ -19,6 +19,7 @@ import { MAX_CANVAS_SCALE, MIN_CANVAS_SCALE } from 'features/controlLayers/konva
 import { snapToNearest } from 'features/controlLayers/konva/util';
 import { $stageAttrs } from 'features/controlLayers/store/canvasV2Slice';
 import { clamp, round } from 'lodash-es';
+import { computed } from 'nanostores';
 import type { KeyboardEvent } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -71,11 +72,13 @@ const sliderDefaultValue = mapScaleToSliderValue(100);
 
 const snapCandidates = marks.slice(1, marks.length - 1);
 
+const $scale = computed($stageAttrs, (attrs) => attrs.scale);
+
 export const CanvasScale = memo(() => {
   const { t } = useTranslation();
   const canvasManager = useStore($canvasManager);
-  const stageAttrs = useStore($stageAttrs);
-  const [localScale, setLocalScale] = useState(stageAttrs.scale * 100);
+  const scale = useStore($scale);
+  const [localScale, setLocalScale] = useState(scale * 100);
 
   const onChangeSlider = useCallback(
     (scale: number) => {
@@ -119,8 +122,8 @@ export const CanvasScale = memo(() => {
   );
 
   useEffect(() => {
-    setLocalScale(stageAttrs.scale * 100);
-  }, [stageAttrs.scale]);
+    setLocalScale(scale * 100);
+  }, [scale]);
 
   return (
     <Popover>