diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx index 31dccfd2b6..b25909aac5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx @@ -11,7 +11,10 @@ import { useSelector } from 'react-redux'; const ChakraCanvas = chakra.canvas; -const PADDING = 4; +const PADDING = 2; + +const CONTAINER_WIDTH = 36; // this is size 12 in our theme - need it in px for the canvas +const CONTAINER_WIDTH_PX = `${CONTAINER_WIDTH}px`; export const CanvasEntityPreviewImage = memo(() => { const entityIdentifier = useEntityIdentifierContext(); @@ -31,11 +34,10 @@ export const CanvasEntityPreviewImage = memo(() => { [entityIdentifier] ); const maskColor = useSelector(selectMaskColor); - const containerRef = useRef(null); const canvasRef = useRef(null); const cache = useStore(adapter.renderer.$canvasCache); useEffect(() => { - if (!cache || !canvasRef.current || !containerRef.current) { + if (!cache || !canvasRef.current) { return; } const ctx = canvasRef.current.getContext('2d'); @@ -49,7 +51,7 @@ export const CanvasEntityPreviewImage = memo(() => { canvasRef.current.width = rect.width; canvasRef.current.height = rect.height; - const scale = containerRef.current.offsetWidth / rect.width; + const scale = CONTAINER_WIDTH / rect.width; const sx = rect.x; const sy = rect.y; @@ -72,11 +74,10 @@ export const CanvasEntityPreviewImage = memo(() => { return (