Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): layer preview image sometimes not rendering

Browse Source 
The canvas size was dynamic based on the container div's size. When the div was hidden (e.g. when selecting another tab), the container's effective size is 0. This resulted in the preview image canvas being drawn at a scale of 0.

Fixed by using an absolute size for the canvas container.
This commit is contained in:
psychedelicious 2024-08-28 08:59:38 +10:00
parent e8723b7cd3
commit 263a0ef5b4
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx
View File

@ -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<HTMLDivElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(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 (
<Flex
position="relative"
ref={containerRef}
alignItems="center"
justifyContent="center"
w={12}
h={12}
w={CONTAINER_WIDTH_PX}
h={CONTAINER_WIDTH_PX}
borderRadius="sm"
borderWidth={1}
bg="base.900"