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;

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

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