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

chore(ui): "useInputFieldTemplate" -> "useInputFieldTemplateOrThrow"

Browse Source
This commit is contained in:
psychedelicious
2025-03-21 09:18:27 +10:00
parent 21f346717a
commit 166d2f0e39
12 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx
View File

@@ -7,7 +7,7 @@ import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/componen
import { useNodeFieldDnd } from 'features/nodes/components/sidePanel/builder/dnd-hooks'; import { useNodeFieldDnd } from 'features/nodes/components/sidePanel/builder/dnd-hooks';
import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected'; import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected';
import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid'; import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { NO_DRAG_CLASS } from 'features/nodes/types/constants'; import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
import type { FieldInputTemplate } from 'features/nodes/types/field'; import type { FieldInputTemplate } from 'features/nodes/types/field';
import { memo, useRef } from 'react'; import { memo, useRef } from 'react';
@@ -22,7 +22,7 @@ interface Props {
} }
export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => { export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => {
const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName);
const isInvalid = useInputFieldIsInvalid(nodeId, fieldName); const isInvalid = useInputFieldIsInvalid(nodeId, fieldName);
const isConnected = useInputFieldIsConnected(nodeId, fieldName); const isConnected = useInputFieldIsConnected(nodeId, fieldName);

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx
View File

@@ -7,7 +7,7 @@ import {
useIsConnectionInProgress, useIsConnectionInProgress,
useIsConnectionStartField, useIsConnectionStartField,
} from 'features/nodes/hooks/useFieldConnectionState'; } from 'features/nodes/hooks/useFieldConnectionState';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType'; import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants'; import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
import type { FieldInputTemplate } from 'features/nodes/types/field'; import type { FieldInputTemplate } from 'features/nodes/types/field';
@@ -62,7 +62,7 @@ const handleStyles = {
} satisfies CSSProperties; } satisfies CSSProperties;
export const InputFieldHandle = memo(({ nodeId, fieldName }: Props) => { export const InputFieldHandle = memo(({ nodeId, fieldName }: Props) => {
const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName);
const fieldTypeName = useFieldTypeName(fieldTemplate.type); const fieldTypeName = useFieldTypeName(fieldTemplate.type);
const fieldColor = useMemo(() => getFieldColor(fieldTemplate.type), [fieldTemplate.type]); const fieldColor = useMemo(() => getFieldColor(fieldTemplate.type), [fieldTemplate.type]);
const isModelField = useMemo(() => isModelFieldType(fieldTemplate.type), [fieldTemplate.type]); const isModelField = useMemo(() => isModelFieldType(fieldTemplate.type), [fieldTemplate.type]);

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
View File

@@ -16,7 +16,7 @@ import { IntegerFieldSlider } from 'features/nodes/components/flow/nodes/Invocat
import { StringFieldInput } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput'; import { StringFieldInput } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldInput';
import { StringFieldTextarea } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea'; import { StringFieldTextarea } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea';
import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance'; import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { import {
isBoardFieldInputInstance, isBoardFieldInputInstance,
isBoardFieldInputTemplate, isBoardFieldInputTemplate,
@@ -135,7 +135,7 @@ type Props = {
export const InputFieldRenderer = memo(({ nodeId, fieldName, settings }: Props) => { export const InputFieldRenderer = memo(({ nodeId, fieldName, settings }: Props) => {
const field = useInputFieldInstance(nodeId, fieldName); const field = useInputFieldInstance(nodeId, fieldName);
const template = useInputFieldTemplate(nodeId, fieldName); const template = useInputFieldTemplateOrThrow(nodeId, fieldName);
// When deciding which component to render, first we check the type of the template, which is more efficient than the // When deciding which component to render, first we check the type of the template, which is more efficient than the
// instance type check. The instance type check uses zod and is slower. // instance type check. The instance type check uses zod and is slower.

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltipContent.tsx
View File

@@ -1,7 +1,7 @@
import { Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; import { Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
import { useInputFieldErrors } from 'features/nodes/hooks/useInputFieldErrors'; import { useInputFieldErrors } from 'features/nodes/hooks/useInputFieldErrors';
import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance'; import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType'; import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
import { startCase } from 'lodash-es'; import { startCase } from 'lodash-es';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
@@ -16,7 +16,7 @@ export const InputFieldTooltipContent = memo(({ nodeId, fieldName }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const fieldInstance = useInputFieldInstance(nodeId, fieldName); const fieldInstance = useInputFieldInstance(nodeId, fieldName);
const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName);
const fieldTypeName = useFieldTypeName(fieldTemplate.type); const fieldTypeName = useFieldTypeName(fieldTemplate.type);
const fieldErrors = useInputFieldErrors(nodeId, fieldName); const fieldErrors = useInputFieldErrors(nodeId, fieldName);

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementDescriptionEditable.tsx
View File

@@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { linkifyOptions, linkifySx } from 'common/components/linkify'; import { linkifyOptions, linkifySx } from 'common/components/linkify';
import { useEditable } from 'common/hooks/useEditable'; import { useEditable } from 'common/hooks/useEditable';
import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription'; import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { fieldDescriptionChanged } from 'features/nodes/store/nodesSlice'; import { fieldDescriptionChanged } from 'features/nodes/store/nodesSlice';
import type { NodeFieldElement } from 'features/nodes/types/workflow'; import type { NodeFieldElement } from 'features/nodes/types/workflow';
import Linkify from 'linkify-react'; import Linkify from 'linkify-react';
@@ -14,7 +14,7 @@ export const NodeFieldElementDescriptionEditable = memo(({ el }: { el: NodeField
const { fieldIdentifier } = data; const { fieldIdentifier } = data;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const description = useInputFieldDescription(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const description = useInputFieldDescription(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const onChange = useCallback( const onChange = useCallback(

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabel.tsx
View File

@@ -1,7 +1,7 @@
import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library'; import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library';
import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton'; import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel'; import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import type { NodeFieldElement } from 'features/nodes/types/workflow'; import type { NodeFieldElement } from 'features/nodes/types/workflow';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
@@ -9,7 +9,7 @@ export const NodeFieldElementLabel = memo(({ el }: { el: NodeFieldElement }) =>
const { data } = el; const { data } = el;
const { fieldIdentifier } = data; const { fieldIdentifier } = data;
const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const _label = useMemo(() => label || fieldTemplate.title, [label, fieldTemplate.title]); const _label = useMemo(() => label || fieldTemplate.title, [label, fieldTemplate.title]);

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabelEditable.tsx
View File

@@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { useEditable } from 'common/hooks/useEditable'; import { useEditable } from 'common/hooks/useEditable';
import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton'; import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel'; import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { fieldLabelChanged } from 'features/nodes/store/nodesSlice'; import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
import type { NodeFieldElement } from 'features/nodes/types/workflow'; import type { NodeFieldElement } from 'features/nodes/types/workflow';
import { memo, useCallback, useRef } from 'react'; import { memo, useCallback, useRef } from 'react';
@@ -13,7 +13,7 @@ export const NodeFieldElementLabelEditable = memo(({ el }: { el: NodeFieldElemen
const { fieldIdentifier } = data; const { fieldIdentifier } = data;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const onChange = useCallback( const onChange = useCallback(

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx
View File

@@ -15,7 +15,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { NodeFieldElementFloatSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementFloatSettings'; import { NodeFieldElementFloatSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementFloatSettings';
import { NodeFieldElementIntegerSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementIntegerSettings'; import { NodeFieldElementIntegerSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementIntegerSettings';
import { NodeFieldElementStringSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementStringSettings'; import { NodeFieldElementStringSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementStringSettings';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSlice'; import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSlice';
import { import {
isFloatFieldInputTemplate, isFloatFieldInputTemplate,
@@ -36,7 +36,7 @@ export const NodeFieldElementSettings = memo(({ element }: { element: NodeFieldE
const { id, data } = element; const { id, data } = element;
const { showDescription, fieldIdentifier } = data; const { showDescription, fieldIdentifier } = data;
const { nodeId, fieldName } = fieldIdentifier; const { nodeId, fieldName } = fieldIdentifier;
const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName);
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx
View File

@@ -5,7 +5,7 @@ import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocat
import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts'; import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
import { NodeFieldElementLabel } from 'features/nodes/components/sidePanel/builder/NodeFieldElementLabel'; import { NodeFieldElementLabel } from 'features/nodes/components/sidePanel/builder/NodeFieldElementLabel';
import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription'; import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import type { NodeFieldElement } from 'features/nodes/types/workflow'; import type { NodeFieldElement } from 'features/nodes/types/workflow';
import { NODE_FIELD_CLASS_NAME } from 'features/nodes/types/workflow'; import { NODE_FIELD_CLASS_NAME } from 'features/nodes/types/workflow';
import Linkify from 'linkify-react'; import Linkify from 'linkify-react';
@@ -29,7 +29,7 @@ export const NodeFieldElementViewMode = memo(({ el }: { el: NodeFieldElement })
const { id, data } = el; const { id, data } = el;
const { fieldIdentifier, showDescription } = data; const { fieldIdentifier, showDescription } = data;
const description = useInputFieldDescription(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const description = useInputFieldDescription(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName);
const containerCtx = useContainerContext(); const containerCtx = useContainerContext();
const _description = useMemo( const _description = useMemo(

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts
View File

@@ -1,6 +1,6 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance'; import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { formElementAdded, selectFormRootElementId } from 'features/nodes/store/workflowSlice'; import { formElementAdded, selectFormRootElementId } from 'features/nodes/store/workflowSlice';
import { buildNodeFieldElement } from 'features/nodes/types/workflow'; import { buildNodeFieldElement } from 'features/nodes/types/workflow';
import { useCallback } from 'react'; import { useCallback } from 'react';
@@ -8,7 +8,7 @@ import { useCallback } from 'react';
export const useAddNodeFieldToRoot = (nodeId: string, fieldName: string) => { export const useAddNodeFieldToRoot = (nodeId: string, fieldName: string) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const rootElementId = useAppSelector(selectFormRootElementId); const rootElementId = useAppSelector(selectFormRootElementId);
const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName);
const field = useInputFieldInstance(nodeId, fieldName); const field = useInputFieldInstance(nodeId, fieldName);
const addNodeFieldToRoot = useCallback(() => { const addNodeFieldToRoot = useCallback(() => {

4
invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts
View File

@@ -1,6 +1,6 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
import { fieldValueReset } from 'features/nodes/store/nodesSlice'; import { fieldValueReset } from 'features/nodes/store/nodesSlice';
import { selectNodesSlice } from 'features/nodes/store/selectors'; import { selectNodesSlice } from 'features/nodes/store/selectors';
import { isInvocationNode } from 'features/nodes/types/invocation'; import { isInvocationNode } from 'features/nodes/types/invocation';
@@ -10,7 +10,7 @@ import { useCallback, useMemo } from 'react';
export const useInputFieldDefaultValue = (nodeId: string, fieldName: string) => { export const useInputFieldDefaultValue = (nodeId: string, fieldName: string) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName);
const selectIsChanged = useMemo( const selectIsChanged = useMemo(
() => () =>
createSelector(selectNodesSlice, (nodes) => { createSelector(selectNodesSlice, (nodes) => {

2
invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts → invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateOrThrow.ts
View File

@@ -12,7 +12,7 @@ import { assert } from 'tsafe';
* @param fieldName - The name of the input field. * @param fieldName - The name of the input field.
* @throws Will throw an error if the template for the input field is not found. * @throws Will throw an error if the template for the input field is not found.
*/ */
export const useInputFieldTemplate = (nodeId: string, fieldName: string): FieldInputTemplate => { export const useInputFieldTemplateOrThrow = (nodeId: string, fieldName: string): FieldInputTemplate => {
const template = useNodeTemplate(nodeId); const template = useNodeTemplate(nodeId);
const fieldTemplate = useMemo(() => { const fieldTemplate = useMemo(() => {
const _fieldTemplate = template.inputs[fieldName]; const _fieldTemplate = template.inputs[fieldName];