From 82f6402d0493a4517930673107163b305dc84e28 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 14 Nov 2022 12:28:59 +1100 Subject: [PATCH] Hides staging area outline on mouseover prev/next --- .../features/canvas/IAICanvasStagingArea.tsx | 64 ++++++++++++------- 1 file changed, 40 insertions(+), 24 deletions(-) diff --git a/frontend/src/features/canvas/IAICanvasStagingArea.tsx b/frontend/src/features/canvas/IAICanvasStagingArea.tsx index fc80a26b07..55a0505204 100644 --- a/frontend/src/features/canvas/IAICanvasStagingArea.tsx +++ b/frontend/src/features/canvas/IAICanvasStagingArea.tsx @@ -7,7 +7,7 @@ import IAIIconButton from 'common/components/IAIIconButton'; import { GroupConfig } from 'konva/lib/Group'; import _ from 'lodash'; import { emotionCache } from 'main'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { FaArrowLeft, FaArrowRight, @@ -61,6 +61,17 @@ const IAICanvasStagingArea = (props: Props) => { const [shouldShowStagedImage, setShouldShowStagedImage] = useState(true); + const [shouldShowStagingAreaOutline, setShouldShowStagingAreaOutline] = + useState(true); + + const handleMouseOver = useCallback(() => { + setShouldShowStagingAreaOutline(false); + }, []); + + const handleMouseOut = useCallback(() => { + setShouldShowStagingAreaOutline(true); + }, []); + if (!currentStagingAreaImage) return null; const { @@ -71,29 +82,30 @@ const IAICanvasStagingArea = (props: Props) => { return ( - - {shouldShowStagedImage && } - - - - + {shouldShowStagedImage && } + {shouldShowStagingAreaOutline && ( + + + + + )} @@ -113,6 +125,8 @@ const IAICanvasStagingArea = (props: Props) => { aria-label="Previous" icon={} onClick={() => dispatch(prevStagingAreaImage())} + onMouseOver={handleMouseOver} + onMouseOut={handleMouseOut} data-selected={true} isDisabled={isOnFirstImage} /> @@ -122,6 +136,8 @@ const IAICanvasStagingArea = (props: Props) => { aria-label="Next" icon={} onClick={() => dispatch(nextStagingAreaImage())} + onMouseOver={handleMouseOver} + onMouseOut={handleMouseOut} data-selected={true} isDisabled={isOnLastImage} />