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

WIP - Lightbox Fixes

Browse Source 
Still need to fix the images not being centered on load when the image res changes
This commit is contained in:
blessedcoolant 2022-11-20 04:11:57 +13:00
parent 9950790f4c
commit 0c3ae232af
2 changed files with 68 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/features/lightbox/components/Lightbox.scss
View File

@ -46,11 +46,9 @@
.lightbox-preview-wrapper { .lightbox-preview-wrapper {
overflow: hidden; overflow: hidden;
background-color: red;
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
display: grid; display: grid;
grid-template-columns: auto max-content; grid-template-columns: auto max-content;
place-items: center; place-items: center;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;

146
frontend/src/features/lightbox/components/ReactPanZoom.tsx
View File

@ -47,89 +47,79 @@ export default function ReactPanZoom({
}; };
return ( return (
<> <TransformWrapper centerOnInit minScale={0.1}>
<TransformWrapper {({ zoomIn, zoomOut, resetTransform, centerView }) => (
initialScale={1} <>
initialPositionX={200} <div className="lightbox-image-options">
initialPositionY={100} <IAIIconButton
> icon={<BiZoomIn />}
{({ zoomIn, zoomOut, resetTransform }) => ( aria-label="Zoom In"
<> tooltip="Zoom In"
<div className="lightbox-image-options"> onClick={() => zoomIn()}
<IAIIconButton fontSize={20}
icon={<BiZoomIn />} />
aria-label="Zoom In"
tooltip="Zoom In"
onClick={() => zoomIn()}
fontSize={20}
/>
<IAIIconButton <IAIIconButton
icon={<BiZoomOut />} icon={<BiZoomOut />}
aria-label="Zoom Out" aria-label="Zoom Out"
tooltip="Zoom Out" tooltip="Zoom Out"
onClick={() => zoomOut()} onClick={() => zoomOut()}
fontSize={20} fontSize={20}
/> />
<IAIIconButton <IAIIconButton
icon={<BiRotateLeft />} icon={<BiRotateLeft />}
aria-label="Rotate Left" aria-label="Rotate Left"
tooltip="Rotate Left" tooltip="Rotate Left"
onClick={rotateLeft} onClick={rotateLeft}
fontSize={20} fontSize={20}
/> />
<IAIIconButton <IAIIconButton
icon={<BiRotateRight />} icon={<BiRotateRight />}
aria-label="Rotate Right" aria-label="Rotate Right"
tooltip="Rotate Right" tooltip="Rotate Right"
onClick={rotateRight} onClick={rotateRight}
fontSize={20} fontSize={20}
/> />
<IAIIconButton <IAIIconButton
icon={<MdFlip />} icon={<MdFlip />}
aria-label="Flip Image" aria-label="Flip Image"
tooltip="Flip Image" tooltip="Flip Image"
onClick={flipImage} onClick={flipImage}
fontSize={20} fontSize={20}
/> />
<IAIIconButton <IAIIconButton
icon={<BiReset />} icon={<BiReset />}
aria-label="Reset" aria-label="Reset"
tooltip="Reset" tooltip="Reset"
onClick={() => { onClick={() => {
resetTransform(); resetTransform();
setRotation(0); setRotation(0);
setFlip(false); setFlip(false);
}} }}
fontSize={20} fontSize={20}
/> />
</div> </div>
<TransformComponent <TransformComponent wrapperStyle={{ width: '100%', height: '100%' }}>
wrapperStyle={{ width: '100%', height: '100%' }} <img
> style={{
<div> transform: `rotate(${rotation * 90}deg) scaleX(${
<img flip ? -1 : 1
style={{ })`,
transform: `rotate(${rotation * 90}deg) scaleX(${ width: '100%',
flip ? -1 : 1 }}
})`, src={image}
width: '100%', alt={alt}
}} ref={ref}
src={image} className={styleClass ? styleClass : ''}
alt={alt} />
ref={ref} </TransformComponent>
className={styleClass ? styleClass : ''} </>
/> )}
</div> </TransformWrapper>
</TransformComponent>
</>
)}
</TransformWrapper>
</>
); );
} }