diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts index 0f7f3856dc..3ac715cdc0 100644 --- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts +++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldDefaultValue.ts @@ -1,19 +1,29 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate'; -import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue'; import { fieldValueReset } from 'features/nodes/store/nodesSlice'; +import { selectNodesSlice } from 'features/nodes/store/selectors'; +import { isInvocationNode } from 'features/nodes/types/invocation'; import { isEqual } from 'lodash-es'; import { useCallback, useMemo } from 'react'; export const useInputFieldDefaultValue = (nodeId: string, fieldName: string) => { const dispatch = useAppDispatch(); - const value = useInputFieldValue(nodeId, fieldName); const fieldTemplate = useInputFieldTemplate(nodeId, fieldName); - - const isValueChanged = useMemo(() => { - return !isEqual(value, fieldTemplate.default); - }, [value, fieldTemplate.default]); + const selectIsChanged = useMemo( + () => + createSelector(selectNodesSlice, (nodes) => { + const node = nodes.nodes.find((node) => node.id === nodeId); + if (!isInvocationNode(node)) { + return; + } + const value = node.data.inputs[fieldName]?.value; + return !isEqual(value, fieldTemplate.default); + }), + [fieldName, fieldTemplate.default, nodeId] + ); + const isValueChanged = useAppSelector(selectIsChanged); const resetToDefaultValue = useCallback(() => { dispatch(fieldValueReset({ nodeId, fieldName, value: fieldTemplate.default })); diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialFormValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialFormValue.ts index 7195f6b466..5f990849a5 100644 --- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialFormValue.ts +++ b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldInitialFormValue.ts @@ -1,8 +1,9 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { useInputFieldValue } from 'features/nodes/hooks/useInputFieldValue'; import { fieldValueReset } from 'features/nodes/store/nodesSlice'; +import { selectNodesSlice } from 'features/nodes/store/selectors'; import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice'; +import { isInvocationNode } from 'features/nodes/types/invocation'; import { isEqual } from 'lodash-es'; import { useCallback, useMemo } from 'react'; @@ -21,11 +22,22 @@ export const useInputFieldInitialFormValue = (elementId: string, nodeId: string, [elementId] ); const initialValue = useAppSelector(selectInitialValue); - const value = useInputFieldValue(nodeId, fieldName); - const isValueChanged = useMemo( - () => initialValue !== uniqueNonexistentValue && !isEqual(value, initialValue), - [value, initialValue] + const selectIsChanged = useMemo( + () => + createSelector(selectNodesSlice, (nodes) => { + if (initialValue === uniqueNonexistentValue) { + return false; + } + const node = nodes.nodes.find((node) => node.id === nodeId); + if (!isInvocationNode(node)) { + return; + } + const value = node.data.inputs[fieldName]?.value; + return !isEqual(value, initialValue); + }), + [fieldName, initialValue, nodeId] ); + const isValueChanged = useAppSelector(selectIsChanged); const resetToInitialValue = useCallback(() => { if (initialValue === uniqueNonexistentValue) { return; diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldValue.ts b/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldValue.ts deleted file mode 100644 index 31e290cc89..0000000000 --- a/invokeai/frontend/web/src/features/nodes/hooks/useInputFieldValue.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createSelector } from '@reduxjs/toolkit'; -import { useAppSelector } from 'app/store/storeHooks'; -import { selectNodesSlice } from 'features/nodes/store/selectors'; -import { isInvocationNode } from 'features/nodes/types/invocation'; -import { useMemo } from 'react'; - -export const useInputFieldValue = (nodeId: string, fieldName: string) => { - const selector = useMemo( - () => - createSelector(selectNodesSlice, (nodes) => { - const node = nodes.nodes.find((node) => node.id === nodeId); - if (!isInvocationNode(node)) { - return; - } - return node?.data.inputs[fieldName]?.value; - }), - [fieldName, nodeId] - ); - - const value = useAppSelector(selector); - - return value; -};