From eedf81dcc5d8cd21fcb56fe336b14634851e4425 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 27 Aug 2024 16:16:02 +1000
Subject: [PATCH] fix(ui): canvas entity opacity scale

---
 .../components/common/CanvasEntityOpacity.tsx          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityOpacity.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityOpacity.tsx
index 35b7aae823..682add1411 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityOpacity.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityOpacity.tsx
@@ -64,17 +64,17 @@ const snapCandidates = marks.slice(1, marks.length - 1);
 const selectOpacity = createSelector(selectCanvasSlice, (canvas) => {
   const selectedEntityIdentifier = canvas.selectedEntityIdentifier;
   if (!selectedEntityIdentifier) {
-    return 100; // fallback to 100% opacity
+    return 1; // fallback to 100% opacity
   }
   const selectedEntity = selectEntity(canvas, selectedEntityIdentifier);
   if (!selectedEntity) {
-    return 100; // fallback to 100% opacity
+    return 1; // fallback to 100% opacity
   }
   if (!isDrawableEntity(selectedEntity)) {
-    return 100; // fallback to 100% opacity
+    return 1; // fallback to 100% opacity
   }
   // Opacity is a float from 0-1, but we want to display it as a percentage
-  return selectedEntity.opacity * 100;
+  return selectedEntity.opacity;
 });
 
 export const CanvasEntityOpacity = memo(() => {
@@ -83,7 +83,7 @@ export const CanvasEntityOpacity = memo(() => {
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
   const opacity = useAppSelector(selectOpacity);
 
-  const [localOpacity, setLocalOpacity] = useState(opacity);
+  const [localOpacity, setLocalOpacity] = useState(opacity * 100);
 
   const onChangeSlider = useCallback(
     (opacity: number) => {