github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-01-15 06:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): persist sizes of all 4 prompt boxes

Browse Source
This commit is contained in:
psychedelicious
2025-05-30 12:31:34 +10:00
parent 4835c344b3
commit e121bf1f62
4 changed files with 37 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { usePersistedTextAreaSize } from 'common/hooks/usePersistedTextareaSize';
import { negativePromptChanged, selectNegativePrompt } from 'features/controlLayers/store/paramsSlice';
import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@@ -15,12 +16,20 @@ import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useListStylePresetsQuery } from 'services/api/endpoints/stylePresets';
const persistOptions: Parameters<typeof usePersistedTextAreaSize>[2] = {
trackWidth: false,
trackHeight: true,
};
export const ParamNegativePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector(selectNegativePrompt);
const viewMode = useAppSelector(selectStylePresetViewMode);
const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
const textareaRef = useRef<HTMLTextAreaElement>(null);
usePersistedTextAreaSize('negative_prompt', textareaRef, persistOptions);
const { activeStylePreset } = useListStylePresetsQuery(undefined, {
selectFromResult: ({ data }) => {
let activeStylePreset = null;
@@ -31,7 +40,6 @@ export const ParamNegativePrompt = memo(() => {
},
});
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { t } = useTranslation();
const _onChange = useCallback(
(v: string) => {

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

@@ -1,5 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { usePersistedTextAreaSize } from 'common/hooks/usePersistedTextareaSize';
import { positivePromptChanged, selectBase, selectPositivePrompt } from 'features/controlLayers/store/paramsSlice';
import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton';
import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel';
@@ -14,20 +15,26 @@ import {
selectStylePresetViewMode,
} from 'features/stylePresets/store/stylePresetSlice';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
import { positivePromptBoxHeightChanged, selectPositivePromptBoxHeight } from 'features/ui/store/uiSlice';
import { debounce } from 'lodash-es';
import { memo, useCallback, useEffect, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import type { HotkeyCallback } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { useListStylePresetsQuery } from 'services/api/endpoints/stylePresets';
const persistOptions: Parameters<typeof usePersistedTextAreaSize>[2] = {
trackWidth: false,
trackHeight: true,
initialHeight: 120,
};
export const ParamPositivePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector(selectPositivePrompt);
const baseModel = useAppSelector(selectBase);
const viewMode = useAppSelector(selectStylePresetViewMode);
const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
const positivePromptBoxHeight = useAppSelector(selectPositivePromptBoxHeight);
const textareaRef = useRef<HTMLTextAreaElement>(null);
usePersistedTextAreaSize('positive_prompt', textareaRef, persistOptions);
const { activeStylePreset } = useListStylePresetsQuery(undefined, {
selectFromResult: ({ data }) => {
@@ -39,7 +46,6 @@ export const ParamPositivePrompt = memo(() => {
},
});
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { t } = useTranslation();
const handleChange = useCallback(
(v: string) => {
@@ -53,45 +59,6 @@ export const ParamPositivePrompt = memo(() => {
onChange: handleChange,
});
// Add debounced resize observer to detect height changes
useEffect(() => {
const textarea = textareaRef.current;
if (!textarea) {
return;
}
let currentHeight = textarea.offsetHeight;
const debouncedHeightUpdate = debounce((newHeight: number) => {
dispatch(positivePromptBoxHeightChanged(newHeight));
}, 150);
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const newHeight = (entry.target as HTMLTextAreaElement).offsetHeight;
if (newHeight !== currentHeight) {
currentHeight = newHeight;
debouncedHeightUpdate(newHeight);
}
}
});
resizeObserver.observe(textarea);
return () => {
resizeObserver.disconnect();
debouncedHeightUpdate.cancel();
};
}, [dispatch]);
useEffect(() => {
const textarea = textareaRef.current;
if (!textarea) {
return;
}
textarea.style.height = `${positivePromptBoxHeight}px`;
}, [positivePromptBoxHeight]);
const focus: HotkeyCallback = useCallback(
(e) => {
onFocus();
@@ -125,6 +92,7 @@ export const ParamPositivePrompt = memo(() => {
paddingTop={0}
paddingBottom={3}
resize="vertical"
minH={28}
/>
<PromptOverlayButtonWrapper>
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />

8
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
View File

@@ -1,5 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { usePersistedTextAreaSize } from 'common/hooks/usePersistedTextareaSize';
import { negativePrompt2Changed, selectNegativePrompt2 } from 'features/controlLayers/store/paramsSlice';
import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@@ -9,10 +10,17 @@ import { usePrompt } from 'features/prompt/usePrompt';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
const persistOptions: Parameters<typeof usePersistedTextAreaSize>[2] = {
trackWidth: false,
trackHeight: true,
};
export const ParamSDXLNegativeStylePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector(selectNegativePrompt2);
const textareaRef = useRef<HTMLTextAreaElement>(null);
usePersistedTextAreaSize('negative_style_prompt', textareaRef, persistOptions);
const { t } = useTranslation();
const handleChange = useCallback(
(v: string) => {

8
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
View File

@@ -1,5 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { usePersistedTextAreaSize } from 'common/hooks/usePersistedTextareaSize';
import { positivePrompt2Changed, selectPositivePrompt2 } from 'features/controlLayers/store/paramsSlice';
import { PromptLabel } from 'features/parameters/components/Prompts/PromptLabel';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@@ -9,10 +10,17 @@ import { usePrompt } from 'features/prompt/usePrompt';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
const persistOptions: Parameters<typeof usePersistedTextAreaSize>[2] = {
trackWidth: false,
trackHeight: true,
};
export const ParamSDXLPositiveStylePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector(selectPositivePrompt2);
const textareaRef = useRef<HTMLTextAreaElement>(null);
usePersistedTextAreaSize('positive_style_prompt', textareaRef, persistOptions);
const { t } = useTranslation();
const handleChange = useCallback(
(v: string) => {