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 Lightbox Issues

Browse Source
This commit is contained in:
blessedcoolant 2022-11-20 03:19:15 +13:00
parent 1071a12777
commit d55b1e169c
3 changed files with 90 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -33,11 +33,11 @@
"react-dropzone": "^14.2.2",
"react-hotkeys-hook": "4.0.2",
"react-icons": "^4.4.0",
"react-image-pan-zoom-rotate": "^1.6.0",
"react-konva": "^18.2.3",
"react-konva-utils": "^0.3.0",
"react-redux": "^8.0.2",
"react-transition-group": "^4.4.5",
"react-zoom-pan-pinch": "^2.1.3",
"redux-deep-persist": "^1.0.6",
"redux-persist": "^6.0.0",
"socket.io": "^4.5.2",

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

@ -8,7 +8,7 @@ import {
BiZoomOut,
} from 'react-icons/bi';
import { MdFlip } from 'react-icons/md';
import { PanViewer } from 'react-image-pan-zoom-rotate';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
type ReactPanZoomProps = {
image: string;
@ -23,29 +23,9 @@ export default function ReactPanZoom({
ref,
styleClass,
}: ReactPanZoomProps) {
const [dx, setDx] = React.useState(0);
const [dy, setDy] = React.useState(0);
const [zoom, setZoom] = React.useState(1);
const [rotation, setRotation] = React.useState(0);
const [flip, setFlip] = React.useState(false);
const resetAll = () => {
setDx(0);
setDy(0);
setZoom(1);
setRotation(0);
setFlip(false);
};
const zoomIn = () => {
setZoom(zoom + 0.2);
};
const zoomOut = () => {
if (zoom >= 0.5) {
setZoom(zoom - 0.2);
}
};
const rotateLeft = () => {
if (rotation === -3) {
setRotation(0);
@ -66,90 +46,90 @@ export default function ReactPanZoom({
setFlip(!flip);
};
const onPan = (dx: number, dy: number) => {
setDx(dx);
setDy(dy);
};
return (
<div>
<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={<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={<MdFlip />}
aria-label="Flip Image"
tooltip="Flip Image"
onClick={flipImage}
fontSize={20}
/>
<IAIIconButton
icon={<BiReset />}
aria-label="Reset"
tooltip="Reset"
onClick={resetAll}
fontSize={20}
/>
</div>
<PanViewer
style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1,
}}
zoom={zoom}
setZoom={setZoom}
pandx={dx}
pandy={dy}
onPan={onPan}
rotation={rotation}
key={dx}
<>
<TransformWrapper
initialScale={1}
initialPositionX={200}
initialPositionY={100}
>
<img
style={{
transform: `rotate(${rotation * 90}deg) scaleX(${flip ? -1 : 1})`,
width: '100%',
}}
src={image}
alt={alt}
ref={ref}
className={styleClass ? styleClass : ''}
/>
</PanViewer>
</div>
{({ zoomIn, zoomOut, resetTransform }) => (
<>
<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={<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={<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>
<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>
</>
);
}

10
frontend/yarn.lock
View File

@ -3405,11 +3405,6 @@ react-icons@^4.4.0:
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.6.0.tgz#f83eda179af5d02c047449a20b702c858653d397"
integrity sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==
react-image-pan-zoom-rotate@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/react-image-pan-zoom-rotate/-/react-image-pan-zoom-rotate-1.6.0.tgz#4b79dd5a160e61e1ec8d5481541e37ade4c28c6f"
integrity sha512-YpuMjhA9TlcyuC1vcKeTGnECAial0uEsjXUHcCk3GTeznwtnfpgLfMDhejCrilUud/hxueXrr9SJiQiycWjYVA==
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -3500,6 +3495,11 @@ react-transition-group@^4.4.5:
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-zoom-pan-pinch@^2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.1.3.tgz#3b84594200343136c0d4397c33fec38dc0ee06ad"
integrity sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==
react@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"