Merge pull request #145 from fiskbil/negate-prompt-shortcut

Add keyboard shortcut to trigger inpainting from negative prompt text box by pressing ctrl/meta+enter
This commit is contained in:
Qing 2022-11-27 09:31:10 +08:00 committed by GitHub
commit 0d2d1ab4ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,13 +1,20 @@
import React, { FormEvent, useState } from 'react' import React, { FormEvent, useState } from 'react'
import { useRecoilState } from 'recoil' import { useRecoilState, useRecoilValue } from 'recoil'
import * as PopoverPrimitive from '@radix-ui/react-popover' import * as PopoverPrimitive from '@radix-ui/react-popover'
import { useToggle } from 'react-use' import { useToggle } from 'react-use'
import { negativePropmtState, SDSampler, settingState } from '../../store/Atoms' import {
isInpaintingState,
negativePropmtState,
propmtState,
SDSampler,
settingState,
} from '../../store/Atoms'
import NumberInputSetting from '../Settings/NumberInputSetting' import NumberInputSetting from '../Settings/NumberInputSetting'
import SettingBlock from '../Settings/SettingBlock' import SettingBlock from '../Settings/SettingBlock'
import Selector from '../shared/Selector' import Selector from '../shared/Selector'
import { Switch, SwitchThumb } from '../shared/Switch' import { Switch, SwitchThumb } from '../shared/Switch'
import TextAreaInput from '../shared/Textarea' import TextAreaInput from '../shared/Textarea'
import emitter, { EVENT_PROMPT } from '../../event'
const INPUT_WIDTH = 30 const INPUT_WIDTH = 30
@ -17,6 +24,8 @@ const SidePanel = () => {
const [setting, setSettingState] = useRecoilState(settingState) const [setting, setSettingState] = useRecoilState(settingState)
const [negativePrompt, setNegativePrompt] = const [negativePrompt, setNegativePrompt] =
useRecoilState(negativePropmtState) useRecoilState(negativePropmtState)
const isInpainting = useRecoilValue(isInpaintingState)
const prompt = useRecoilValue(propmtState)
const handleOnInput = (evt: FormEvent<HTMLTextAreaElement>) => { const handleOnInput = (evt: FormEvent<HTMLTextAreaElement>) => {
evt.preventDefault() evt.preventDefault()
@ -25,6 +34,17 @@ const SidePanel = () => {
setNegativePrompt(target.value) setNegativePrompt(target.value)
} }
const onKeyUp = (e: React.KeyboardEvent) => {
if (
e.key === 'Enter' &&
(e.ctrlKey || e.metaKey) &&
prompt.length !== 0 &&
!isInpainting
) {
emitter.emit(EVENT_PROMPT)
}
}
return ( return (
<div className="side-panel"> <div className="side-panel">
<PopoverPrimitive.Root open={open}> <PopoverPrimitive.Root open={open}>
@ -203,6 +223,7 @@ const SidePanel = () => {
className="negative-prompt" className="negative-prompt"
value={negativePrompt} value={negativePrompt}
onInput={handleOnInput} onInput={handleOnInput}
onKeyUp={onKeyUp}
placeholder="" placeholder=""
/> />
} }