Make Esc work for stop drawing

This commit is contained in:
Sanster 2022-02-06 13:50:26 +08:00
parent 31a00813e0
commit 33c893746e
2 changed files with 60 additions and 21 deletions

View File

@ -11,12 +11,7 @@ import {
TransformComponent, TransformComponent,
TransformWrapper, TransformWrapper,
} from 'react-zoom-pan-pinch' } from 'react-zoom-pan-pinch'
import { import { useWindowSize, useLocalStorage, useKey } from 'react-use'
useWindowSize,
useLocalStorage,
useKey,
useKeyPressEvent,
} from 'react-use'
import inpaint from './adapters/inpainting' import inpaint from './adapters/inpainting'
import Button from './components/Button' import Button from './components/Button'
import Slider from './components/Slider' import Slider from './components/Slider'
@ -25,7 +20,7 @@ import { downloadImage, loadImage, useImage } from './utils'
const TOOLBAR_SIZE = 200 const TOOLBAR_SIZE = 200
const BRUSH_COLOR = 'rgba(189, 255, 1, 0.75)' const BRUSH_COLOR = 'rgba(189, 255, 1, 0.75)'
const NO_COLOR = 'rgba(255,255,255,0)' // const NO_COLOR = 'rgba(255,255,255,0)'
interface EditorProps { interface EditorProps {
file: File file: File
@ -150,6 +145,16 @@ export default function Editor(props: EditorProps) {
historyLineCount, historyLineCount,
]) ])
const hadDrawSomething = () => {
return lines4Show.length !== 0 && lines4Show[0].pts.length !== 0
}
const clearDrawing = () => {
setIsDraging(false)
lines4Show.length = 0
setLines4Show([{ pts: [] } as Line])
}
const handleMultiStrokeKeyDown = () => { const handleMultiStrokeKeyDown = () => {
if (isInpaintingLoading) { if (isInpaintingLoading) {
return return
@ -166,7 +171,7 @@ export default function Editor(props: EditorProps) {
} }
setIsMultiStrokeKeyPressed(false) setIsMultiStrokeKeyPressed(false)
if (lines4Show.length !== 0 && lines4Show[0].pts.length !== 0) { if (hadDrawSomething()) {
runInpainting() runInpainting()
} }
} }
@ -174,10 +179,21 @@ export default function Editor(props: EditorProps) {
const predicate = (event: KeyboardEvent) => { const predicate = (event: KeyboardEvent) => {
return event.key === 'Control' || event.key === 'Meta' return event.key === 'Control' || event.key === 'Meta'
} }
useKey(predicate, handleMultiStrokeKeyup, { event: 'keyup' })
useKey(predicate, handleMultiStrokeKeyDown, { useKey(predicate, handleMultiStrokeKeyup, { event: 'keyup' }, [
event: 'keydown', isInpaintingLoading,
}) isMultiStrokeKeyPressed,
hadDrawSomething,
])
useKey(
predicate,
handleMultiStrokeKeyDown,
{
event: 'keydown',
},
[isInpaintingLoading]
)
// Draw once the original image is loaded // Draw once the original image is loaded
useEffect(() => { useEffect(() => {
@ -219,7 +235,25 @@ export default function Editor(props: EditorProps) {
setScale(minScale) setScale(minScale)
}, [minScale, original, windowSize]) }, [minScale, original, windowSize])
useKeyPressEvent('Escape', resetZoom) const handleEscPressed = () => {
if (isInpaintingLoading) {
return
}
if (isDraging || isMultiStrokeKeyPressed) {
clearDrawing()
} else {
resetZoom()
}
}
useKey(
'Escape',
handleEscPressed,
{
event: 'keydown',
},
[isDraging, isMultiStrokeKeyPressed]
)
const onPaint = (px: number, py: number) => { const onPaint = (px: number, py: number) => {
const currShowLine = lines4Show[lines4Show.length - 1] const currShowLine = lines4Show[lines4Show.length - 1]
@ -257,6 +291,9 @@ export default function Editor(props: EditorProps) {
if (isInpaintingLoading) { if (isInpaintingLoading) {
return return
} }
if (!isDraging) {
return
}
setIsDraging(false) setIsDraging(false)
if (isMultiStrokeKeyPressed) { if (isMultiStrokeKeyPressed) {
lines.push({ pts: [] } as Line) lines.push({ pts: [] } as Line)
@ -294,6 +331,13 @@ export default function Editor(props: EditorProps) {
} }
const undo = () => { const undo = () => {
if (!renders.length) {
return
}
if (!historyLineCount.length) {
return
}
const l = lines const l = lines
const count = historyLineCount[historyLineCount.length - 1] const count = historyLineCount[historyLineCount.length - 1]
for (let i = 0; i <= count; i += 1) { for (let i = 0; i <= count; i += 1) {
@ -311,12 +355,6 @@ export default function Editor(props: EditorProps) {
// Handle Cmd+Z // Handle Cmd+Z
const undoPredicate = (event: KeyboardEvent) => { const undoPredicate = (event: KeyboardEvent) => {
if (!renders.length) {
return false
}
if (!historyLineCount.length) {
return false
}
const isCmdZ = (event.metaKey || event.ctrlKey) && event.key === 'z' const isCmdZ = (event.metaKey || event.ctrlKey) && event.key === 'z'
if (isCmdZ) { if (isCmdZ) {
event.preventDefault() event.preventDefault()
@ -370,6 +408,7 @@ export default function Editor(props: EditorProps) {
alignmentAnimation={{ disabled: true }} alignmentAnimation={{ disabled: true }}
centerOnInit centerOnInit
limitToBounds={false} limitToBounds={false}
doubleClick={{ disabled: true }}
initialScale={minScale} initialScale={minScale}
minScale={minScale} minScale={minScale}
onZoom={ref => { onZoom={ref => {
@ -466,7 +505,7 @@ export default function Editor(props: EditorProps) {
].join(' ')} ].join(' ')}
> >
<SizeSelector <SizeSelector
value={sizeLimit!} value={sizeLimit || '1080'}
onChange={onSizeLimitChange} onChange={onSizeLimitChange}
originalWidth={original.naturalWidth} originalWidth={original.naturalWidth}
originalHeight={original.naturalHeight} originalHeight={original.naturalHeight}

View File

@ -39,7 +39,7 @@ export default function SizeSelector(props: SizeSelectorProps) {
style={{ top: '-112px' }} style={{ top: '-112px' }}
className="absolute mb-1 w-full overflow-auto text-base bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-md max-h-60 ring-opacity-50 focus:outline-none sm:text-sm" className="absolute mb-1 w-full overflow-auto text-base bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-md max-h-60 ring-opacity-50 focus:outline-none sm:text-sm"
> >
{sizes.map((size, _) => ( {sizes.map(size => (
<Listbox.Option <Listbox.Option
key={size} key={size}
className={({ active }) => className={({ active }) =>