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;

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

@ -47,13 +47,8 @@ export default function ReactPanZoom({
}; };
return ( return (
<> <TransformWrapper centerOnInit minScale={0.1}>
<TransformWrapper {({ zoomIn, zoomOut, resetTransform, centerView }) => (
initialScale={1}
initialPositionX={200}
initialPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform }) => (
<> <>
<div className="lightbox-image-options"> <div className="lightbox-image-options">
<IAIIconButton <IAIIconButton
@ -109,10 +104,7 @@ export default function ReactPanZoom({
/> />
</div> </div>
<TransformComponent <TransformComponent wrapperStyle={{ width: '100%', height: '100%' }}>
wrapperStyle={{ width: '100%', height: '100%' }}
>
<div>
<img <img
style={{ style={{
transform: `rotate(${rotation * 90}deg) scaleX(${ transform: `rotate(${rotation * 90}deg) scaleX(${
@ -125,11 +117,9 @@ export default function ReactPanZoom({
ref={ref} ref={ref}
className={styleClass ? styleClass : ''} className={styleClass ? styleClass : ''}
/> />
</div>
</TransformComponent> </TransformComponent>
</> </>
)} )}
</TransformWrapper> </TransformWrapper>
</>
); );
} }