diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx index ccc2a2fb85..5fae709440 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldEditModeNodes.tsx @@ -7,7 +7,7 @@ import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/componen import { useNodeFieldDnd } from 'features/nodes/components/sidePanel/builder/dnd-hooks'; import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsConnected'; 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 type { FieldInputTemplate } from 'features/nodes/types/field'; import { memo, useRef } from 'react'; @@ -22,7 +22,7 @@ interface Props { } export const InputFieldEditModeNodes = memo(({ nodeId, fieldName }: Props) => { - const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName); const isInvalid = useInputFieldIsInvalid(nodeId, fieldName); const isConnected = useInputFieldIsConnected(nodeId, fieldName); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx index 6fdfe7a144..2a35315e5e 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle.tsx @@ -7,7 +7,7 @@ import { useIsConnectionInProgress, useIsConnectionStartField, } 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 { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants'; import type { FieldInputTemplate } from 'features/nodes/types/field'; @@ -62,7 +62,7 @@ const handleStyles = { } satisfies CSSProperties; export const InputFieldHandle = memo(({ nodeId, fieldName }: Props) => { - const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName); const fieldTypeName = useFieldTypeName(fieldTemplate.type); const fieldColor = useMemo(() => getFieldColor(fieldTemplate.type), [fieldTemplate.type]); const isModelField = useMemo(() => isModelFieldType(fieldTemplate.type), [fieldTemplate.type]); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx index 1255f3465b..b875908d69 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx @@ -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 { StringFieldTextarea } from 'features/nodes/components/flow/nodes/Invocation/fields/StringField/StringFieldTextarea'; import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance'; -import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; +import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow'; import { isBoardFieldInputInstance, isBoardFieldInputTemplate, @@ -135,7 +135,7 @@ type Props = { export const InputFieldRenderer = memo(({ nodeId, fieldName, settings }: Props) => { 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 // instance type check. The instance type check uses zod and is slower. diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltipContent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltipContent.tsx index f83454ffd9..43ca1fc90c 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltipContent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTooltipContent.tsx @@ -1,7 +1,7 @@ import { Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; import { useInputFieldErrors } from 'features/nodes/hooks/useInputFieldErrors'; 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 { startCase } from 'lodash-es'; import { memo, useMemo } from 'react'; @@ -16,7 +16,7 @@ export const InputFieldTooltipContent = memo(({ nodeId, fieldName }: Props) => { const { t } = useTranslation(); const fieldInstance = useInputFieldInstance(nodeId, fieldName); - const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName); const fieldTypeName = useFieldTypeName(fieldTemplate.type); const fieldErrors = useInputFieldErrors(nodeId, fieldName); diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementDescriptionEditable.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementDescriptionEditable.tsx index fa49391c22..d973c6df1d 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementDescriptionEditable.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementDescriptionEditable.tsx @@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks'; import { linkifyOptions, linkifySx } from 'common/components/linkify'; import { useEditable } from 'common/hooks/useEditable'; 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 type { NodeFieldElement } from 'features/nodes/types/workflow'; import Linkify from 'linkify-react'; @@ -14,7 +14,7 @@ export const NodeFieldElementDescriptionEditable = memo(({ el }: { el: NodeField const { fieldIdentifier } = data; const dispatch = useAppDispatch(); const description = useInputFieldDescription(fieldIdentifier.nodeId, fieldIdentifier.fieldName); - const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const inputRef = useRef(null); const onChange = useCallback( diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabel.tsx index 422669c5a1..c4d3327f49 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabel.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabel.tsx @@ -1,7 +1,7 @@ import { Flex, FormLabel, Spacer } from '@invoke-ai/ui-library'; import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton'; 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 { memo, useMemo } from 'react'; @@ -9,7 +9,7 @@ export const NodeFieldElementLabel = memo(({ el }: { el: NodeFieldElement }) => const { data } = el; const { fieldIdentifier } = data; 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]); diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabelEditable.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabelEditable.tsx index c9d4438940..981b548e52 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabelEditable.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementLabelEditable.tsx @@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks'; import { useEditable } from 'common/hooks/useEditable'; import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton'; 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 type { NodeFieldElement } from 'features/nodes/types/workflow'; import { memo, useCallback, useRef } from 'react'; @@ -13,7 +13,7 @@ export const NodeFieldElementLabelEditable = memo(({ el }: { el: NodeFieldElemen const { fieldIdentifier } = data; const dispatch = useAppDispatch(); const label = useInputFieldLabel(fieldIdentifier.nodeId, fieldIdentifier.fieldName); - const fieldTemplate = useInputFieldTemplate(fieldIdentifier.nodeId, fieldIdentifier.fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(fieldIdentifier.nodeId, fieldIdentifier.fieldName); const inputRef = useRef(null); const onChange = useCallback( diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx index 1ae99862c4..351da73a00 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx @@ -15,7 +15,7 @@ import { useAppDispatch } from 'app/store/storeHooks'; import { NodeFieldElementFloatSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementFloatSettings'; import { NodeFieldElementIntegerSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementIntegerSettings'; 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 { isFloatFieldInputTemplate, @@ -36,7 +36,7 @@ export const NodeFieldElementSettings = memo(({ element }: { element: NodeFieldE const { id, data } = element; const { showDescription, fieldIdentifier } = data; const { nodeId, fieldName } = fieldIdentifier; - const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName); const { t } = useTranslation(); const dispatch = useAppDispatch(); diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx index 2e5ba21377..6a25c1d92d 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx @@ -5,7 +5,7 @@ import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocat import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts'; import { NodeFieldElementLabel } from 'features/nodes/components/sidePanel/builder/NodeFieldElementLabel'; 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 { NODE_FIELD_CLASS_NAME } from 'features/nodes/types/workflow'; import Linkify from 'linkify-react'; @@ -29,7 +29,7 @@ export const NodeFieldElementViewMode = memo(({ el }: { el: NodeFieldElement }) const { id, data } = el; const { fieldIdentifier, showDescription } = data; 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 _description = useMemo( diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts index cffe13b862..b9a306052a 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/use-add-node-field-to-root.ts @@ -1,6 +1,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; 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 { buildNodeFieldElement } from 'features/nodes/types/workflow'; import { useCallback } from 'react'; @@ -8,7 +8,7 @@ import { useCallback } from 'react'; export const useAddNodeFieldToRoot = (nodeId: string, fieldName: string) => { const dispatch = useAppDispatch(); const rootElementId = useAppSelector(selectFormRootElementId); - const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName); const field = useInputFieldInstance(nodeId, fieldName); const addNodeFieldToRoot = useCallback(() => { diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts index 3ac715cdc0..1c9c929b8c 100644 --- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts +++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts @@ -1,6 +1,6 @@ import { createSelector } from '@reduxjs/toolkit'; 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 { selectNodesSlice } from 'features/nodes/store/selectors'; import { isInvocationNode } from 'features/nodes/types/invocation'; @@ -10,7 +10,7 @@ import { useCallback, useMemo } from 'react'; export const useInputFieldDefaultValue = (nodeId: string, fieldName: string) => { const dispatch = useAppDispatch(); - const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); + const fieldTemplate = useInputFieldTemplateOrThrow(nodeId, fieldName); const selectIsChanged = useMemo( () => createSelector(selectNodesSlice, (nodes) => { diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateOrThrow.ts similarity index 89% rename from invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts rename to invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateOrThrow.ts index b405303207..50857a2a89 100644 --- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplate.ts +++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldTemplateOrThrow.ts @@ -12,7 +12,7 @@ import { assert } from 'tsafe'; * @param fieldName - The name of the input field. * @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 fieldTemplate = useMemo(() => { const _fieldTemplate = template.inputs[fieldName];