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 {
overflow: hidden;
background-color: red;
background-color: var(--background-color-secondary);
display: grid;
grid-template-columns: auto max-content;
place-items: center;
width: 100vw;
height: 100vh;

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

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