github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): better editable title

Browse Source
This commit is contained in:
psychedelicious
2024-08-20 12:21:36 +10:00
parent ac1132b5bc
commit afa2da3d2d
7 changed files with 35 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
View File

@@ -53,7 +53,7 @@ export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => {
return (
<ContextMenu renderMenu={renderMenu}>
{(ref) => (
<Flex ref={ref} gap={2} alignItems="center" p={2} {...rest} cursor="text">
<Flex ref={ref} gap={2} alignItems="center" p={2} {...rest}>
{children}
</Flex>
)}

5
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitle.tsx
View File

@@ -1,16 +1,17 @@
import type { TextProps } from '@invoke-ai/ui-library';
import { Text } from '@invoke-ai/ui-library';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { useEntityIsSelected } from 'features/controlLayers/hooks/useEntityIsSelected';
import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
import { memo } from 'react';
export const CanvasEntityTitle = memo(() => {
export const CanvasEntityTitle = memo((props: TextProps) => {
const entityIdentifier = useEntityIdentifierContext();
const isSelected = useEntityIsSelected(entityIdentifier);
const title = useEntityTitle(entityIdentifier);
return (
<Text size="sm" fontWeight="semibold" userSelect="none" color={isSelected ? 'base.100' : 'base.300'}>
<Text size="sm" fontWeight="semibold" userSelect="none" color={isSelected ? 'base.100' : 'base.300'} {...props}>
{title}
</Text>
);

33
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitleEdit.tsx
View File

@@ -1,21 +1,20 @@
import { Input } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { useBoolean } from 'common/hooks/useBoolean';
import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
import { entityNameChanged } from 'features/controlLayers/store/canvasV2Slice';
import type { ChangeEvent, KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
type Props = {
onStopEditing: () => void;
};
export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
export const CanvasEntityEditableTitle = memo(() => {
const dispatch = useAppDispatch();
const ref = useRef<HTMLInputElement>(null);
const entityIdentifier = useEntityIdentifierContext();
const title = useEntityTitle(entityIdentifier);
const isEditing = useBoolean(false);
const [localTitle, setLocalTitle] = useState(title);
const ref = useRef<HTMLInputElement>(null);
const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
setLocalTitle(e.target.value);
@@ -28,8 +27,8 @@ export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
} else if (trimmedTitle !== title) {
dispatch(entityNameChanged({ entityIdentifier, name: trimmedTitle }));
}
onStopEditing();
}, [dispatch, entityIdentifier, localTitle, onStopEditing, title]);
isEditing.setFalse();
}, [dispatch, entityIdentifier, isEditing, localTitle, title]);
const onKeyDown = useCallback(
(e: KeyboardEvent<HTMLInputElement>) => {
@@ -37,16 +36,22 @@ export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
onBlur();
} else if (e.key === 'Escape') {
setLocalTitle(title);
onStopEditing();
isEditing.setFalse();
}
},
[onBlur, onStopEditing, title]
[isEditing, onBlur, title]
);
useEffect(() => {
ref.current?.focus();
ref.current?.select();
}, []);
if (isEditing.isTrue) {
ref.current?.focus();
ref.current?.select();
}
}, [isEditing.isTrue]);
if (!isEditing.isTrue) {
return <CanvasEntityTitle cursor="text" onDoubleClick={isEditing.setTrue} />;
}
return (
<Input
@@ -61,4 +66,4 @@ export const CanvasEntityTitleEdit = memo(({ onStopEditing }: Props) => {
);
});
CanvasEntityTitleEdit.displayName = 'CanvasEntityTitleEdit';
CanvasEntityEditableTitle.displayName = 'CanvasEntityTitleEdit';