github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-02 22:35:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): lint

Browse Source
This commit is contained in:
psychedelicious
2024-09-06 18:42:45 +10:00
parent c64693fffd
commit b3569e5c0d
1 changed files with 0 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
invokeai/frontend/web/src/features/controlLayers/components/CanvasResizer.tsx
View File

@@ -1,145 +0,0 @@
import { Flex, Grid, GridItem, IconButton } from '@invoke-ai/ui-library';
import { memo, useCallback, useState } from 'react';
import {
PiArrowDownBold,
PiArrowDownLeftBold,
PiArrowDownRightBold,
PiArrowLeftBold,
PiArrowRightBold,
PiArrowUpBold,
PiArrowUpLeftBold,
PiArrowUpRightBold,
PiSquareBold,
} from 'react-icons/pi';
type ResizeDirection =
| 'up-left'
| 'up'
| 'up-right'
| 'left'
| 'center-out'
| 'right'
| 'down-left'
| 'down'
| 'down-right';
export const CanvasResizer = memo(() => {
const [resizeDirection, setResizeDirection] = useState<ResizeDirection>('center-out');
const setDirUpLeft = useCallback(() => {
setResizeDirection('up-left');
}, []);
const setDirUp = useCallback(() => {
setResizeDirection('up');
}, []);
const setDirUpRight = useCallback(() => {
setResizeDirection('up-right');
}, []);
const setDirLeft = useCallback(() => {
setResizeDirection('left');
}, []);
const setDirCenterOut = useCallback(() => {
setResizeDirection('center-out');
}, []);
const setDirRight = useCallback(() => {
setResizeDirection('right');
}, []);
const setDirDownLeft = useCallback(() => {
setResizeDirection('down-left');
}, []);
const setDirDown = useCallback(() => {
setResizeDirection('down');
}, []);
const setDirDownRight = useCallback(() => {
setResizeDirection('down-right');
}, []);
return (
<Flex p={2}>
<Grid gridTemplateRows="1fr 1fr 1fr" gridTemplateColumns="1fr 1fr 1fr" gap={2}>
<GridItem>
<IconButton
onClick={setDirUpLeft}
aria-label="up-left"
icon={<PiArrowUpLeftBold />}
variant={resizeDirection === 'up-left' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirUp}
aria-label="up"
icon={<PiArrowUpBold />}
variant={resizeDirection === 'up' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirUpRight}
aria-label="up-right"
icon={<PiArrowUpRightBold />}
variant={resizeDirection === 'up-right' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirLeft}
aria-label="left"
icon={<PiArrowLeftBold />}
variant={resizeDirection === 'left' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirCenterOut}
aria-label="center-out"
icon={<PiSquareBold />}
variant={resizeDirection === 'center-out' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirRight}
aria-label="right"
icon={<PiArrowRightBold />}
variant={resizeDirection === 'right' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirDownLeft}
aria-label="down-left"
icon={<PiArrowDownLeftBold />}
variant={resizeDirection === 'down-left' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirDown}
aria-label="down"
icon={<PiArrowDownBold />}
variant={resizeDirection === 'down' ? 'solid' : 'ghost'}
/>
</GridItem>
<GridItem>
<IconButton
onClick={setDirDownRight}
aria-label="down-right"
icon={<PiArrowDownRightBold />}
variant={resizeDirection === 'down-right' ? 'solid' : 'ghost'}
/>
</GridItem>
</Grid>
</Flex>
);
});
CanvasResizer.displayName = 'CanvasResizer';