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

Hides staging area outline on mouseover prev/next

Browse Source
This commit is contained in:
psychedelicious 2022-11-14 12:28:59 +11:00 committed by blessedcoolant
parent 0e7b735611
commit 82f6402d04
1 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/features/canvas/IAICanvasStagingArea.tsx
View File

@ -7,7 +7,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import _ from 'lodash'; import _ from 'lodash';
import { emotionCache } from 'main'; import { emotionCache } from 'main';
import { useState } from 'react'; import { useCallback, useState } from 'react';
import { import {
FaArrowLeft, FaArrowLeft,
FaArrowRight, FaArrowRight,
@ -61,6 +61,17 @@ const IAICanvasStagingArea = (props: Props) => {
const [shouldShowStagedImage, setShouldShowStagedImage] = const [shouldShowStagedImage, setShouldShowStagedImage] =
useState<boolean>(true); useState<boolean>(true);
const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] =
useState<boolean>(true);
const handleMouseOver = useCallback(() => {
setShouldShowStagingAreaOutline(false);
}, []);
const handleMouseOut = useCallback(() => {
setShouldShowStagingAreaOutline(true);
}, []);
if (!currentStagingAreaImage) return null; if (!currentStagingAreaImage) return null;
const { const {
@ -71,29 +82,30 @@ const IAICanvasStagingArea = (props: Props) => {
return ( return (
<Group {...rest}> <Group {...rest}>
<Group> {shouldShowStagedImage && <IAICanvasImage url={url} x={x} y={y} />}
{shouldShowStagedImage && <IAICanvasImage url={url} x={x} y={y} />} {shouldShowStagingAreaOutline && (
<Group>
<Rect <Rect
x={x} x={x}
y={y} y={y}
width={width} width={width}
height={height} height={height}
strokeWidth={1} strokeWidth={1}
stroke={'black'} stroke={'black'}
strokeScaleEnabled={false} strokeScaleEnabled={false}
/> />
<Rect <Rect
x={x} x={x}
y={y} y={y}
width={width} width={width}
height={height} height={height}
dash={[4, 4]} dash={[4, 4]}
strokeWidth={1} strokeWidth={1}
stroke={'white'} stroke={'white'}
strokeScaleEnabled={false} strokeScaleEnabled={false}
/> />
</Group> </Group>
)}
<Html> <Html>
<CacheProvider value={emotionCache}> <CacheProvider value={emotionCache}>
<ChakraProvider> <ChakraProvider>
@ -113,6 +125,8 @@ const IAICanvasStagingArea = (props: Props) => {
aria-label="Previous" aria-label="Previous"
icon={<FaArrowLeft />} icon={<FaArrowLeft />}
onClick={() => dispatch(prevStagingAreaImage())} onClick={() => dispatch(prevStagingAreaImage())}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
data-selected={true} data-selected={true}
isDisabled={isOnFirstImage} isDisabled={isOnFirstImage}
/> />
@ -122,6 +136,8 @@ const IAICanvasStagingArea = (props: Props) => {
aria-label="Next" aria-label="Next"
icon={<FaArrowRight />} icon={<FaArrowRight />}
onClick={() => dispatch(nextStagingAreaImage())} onClick={() => dispatch(nextStagingAreaImage())}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
data-selected={true} data-selected={true}
isDisabled={isOnLastImage} isDisabled={isOnLastImage}
/> />