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

focus on prompt textarea when exiting view mode by clicking

Browse Source
This commit is contained in:
Mary Hipp 2024-08-08 14:38:50 -04:00
parent 4952eada87
commit 587f59b25b
4 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
View File

@ -24,18 +24,25 @@ export const ParamNegativePrompt = memo(() => {
},
[dispatch]
);
const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown } = usePrompt({
const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown, onFocusCursorAtEnd } = usePrompt({
prompt,
textareaRef,
onChange: _onChange,
});
const handleFocus = useCallback(() => {
setTimeout(() => {
onFocusCursorAtEnd();
}, 500);
}, [onFocusCursorAtEnd]);
if (viewMode) {
return (
<ViewModePrompt
prompt={prompt}
presetPrompt={activeStylePreset?.preset_data.negative_prompt || ''}
height={DEFAULT_HEIGHT}
onExit={handleFocus}
/>
);
}

9
invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
View File

@ -30,12 +30,18 @@ export const ParamPositivePrompt = memo(() => {
},
[dispatch]
);
const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown, onFocus } = usePrompt({
const { onChange, isOpen, onClose, onOpen, onSelect, onKeyDown, onFocus, onFocusCursorAtEnd } = usePrompt({
prompt,
textareaRef: textareaRef,
onChange: handleChange,
});
const handleFocus = useCallback(() => {
setTimeout(() => {
onFocusCursorAtEnd();
}, 500);
}, [onFocusCursorAtEnd]);
const focus: HotkeyCallback = useCallback(
(e) => {
onFocus();
@ -52,6 +58,7 @@ export const ParamPositivePrompt = memo(() => {
prompt={prompt}
presetPrompt={activeStylePreset?.preset_data.positive_prompt || ''}
height={DEFAULT_HEIGHT}
onExit={handleFocus}
/>
);
}

7
invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
View File

@ -10,10 +10,12 @@ export const ViewModePrompt = ({
presetPrompt,
prompt,
height,
onExit,
}: {
presetPrompt: string;
prompt: string;
height: number;
onExit: () => void;
}) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -24,7 +26,8 @@ export const ViewModePrompt = ({
const handleExitViewMode = useCallback(() => {
dispatch(viewModeChanged(false));
}, [dispatch]);
onExit();
}, [dispatch, onExit]);
return (
<Flex
@ -42,7 +45,7 @@ export const ViewModePrompt = ({
{presetChunks.map((chunk, index) => {
return (
chunk && (
<Text as="span" color={index === 1 ? 'white' : 'base.300'}>
<Text as="span" color={index === 1 ? 'white' : 'base.300'} key={index}>
{chunk.trim()}{' '}
</Text>
)

8
invokeai/frontend/web/src/features/prompt/usePrompt.ts
View File

@ -58,6 +58,13 @@ export const usePrompt = ({ prompt, textareaRef, onChange: _onChange }: UseInser
textareaRef.current?.focus();
}, [textareaRef]);
const onFocusCursorAtEnd = useCallback(() => {
onFocus();
if (textareaRef.current) {
textareaRef.current.setSelectionRange(prompt.length, prompt.length);
}
}, [onFocus, textareaRef, prompt]);
const handleClosePopover = useCallback(() => {
onClose();
onFocus();
@ -89,5 +96,6 @@ export const usePrompt = ({ prompt, textareaRef, onChange: _onChange }: UseInser
onSelect,
onKeyDown,
onFocus,
onFocusCursorAtEnd,
};
};