Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): make input/outputs renderfn callback

Browse Source
This commit is contained in:
psychedelicious 2023-04-22 22:23:18 +10:00
parent 43addc1548
commit 50e1ac731d
2 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx
View File

@ -3,7 +3,7 @@ import {
InputFieldValue, InputFieldValue,
InvocationTemplate, InvocationTemplate,
} from 'features/nodes/types/types'; } from 'features/nodes/types/types';
import { memo, MutableRefObject, ReactNode } from 'react'; import { memo, ReactNode, useCallback } from 'react';
import { map } from 'lodash'; import { map } from 'lodash';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/storeHooks';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
@ -14,13 +14,11 @@ import {
FormLabel, FormLabel,
HStack, HStack,
Tooltip, Tooltip,
Icon,
Divider, Divider,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import FieldHandle from '../FieldHandle'; import FieldHandle from '../FieldHandle';
import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection'; import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection';
import InputFieldComponent from '../InputFieldComponent'; import InputFieldComponent from '../InputFieldComponent';
import { FaInfoCircle } from 'react-icons/fa';
import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants'; import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
interface IAINodeInputProps { interface IAINodeInputProps {
@ -102,11 +100,9 @@ interface IAINodeInputsProps {
const IAINodeInputs = (props: IAINodeInputsProps) => { const IAINodeInputs = (props: IAINodeInputsProps) => {
const { nodeId, template, inputs } = props; const { nodeId, template, inputs } = props;
const connectedInputs = useAppSelector( const edges = useAppSelector((state: RootState) => state.nodes.edges);
(state: RootState) => state.nodes.edges
);
const renderIAINodeInputs = () => { const renderIAINodeInputs = useCallback(() => {
const IAINodeInputsToRender: ReactNode[] = []; const IAINodeInputsToRender: ReactNode[] = [];
const inputSockets = map(inputs); const inputSockets = map(inputs);
@ -114,7 +110,7 @@ const IAINodeInputs = (props: IAINodeInputsProps) => {
const inputTemplate = template.inputs[inputSocket.name]; const inputTemplate = template.inputs[inputSocket.name];
const isConnected = Boolean( const isConnected = Boolean(
connectedInputs.filter((connectedInput) => { edges.filter((connectedInput) => {
return ( return (
connectedInput.target === nodeId && connectedInput.target === nodeId &&
connectedInput.targetHandle === inputSocket.name connectedInput.targetHandle === inputSocket.name
@ -142,7 +138,7 @@ const IAINodeInputs = (props: IAINodeInputsProps) => {
{IAINodeInputsToRender} {IAINodeInputsToRender}
</Flex> </Flex>
); );
}; }, [edges, inputs, nodeId, template.inputs]);
return renderIAINodeInputs(); return renderIAINodeInputs();
}; };

12
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeOutputs.tsx
View File

@ -3,7 +3,7 @@ import {
OutputFieldTemplate, OutputFieldTemplate,
OutputFieldValue, OutputFieldValue,
} from 'features/nodes/types/types'; } from 'features/nodes/types/types';
import { memo, MutableRefObject, ReactNode } from 'react'; import { memo, ReactNode, useCallback } from 'react';
import { map } from 'lodash'; import { map } from 'lodash';
import { useAppSelector } from 'app/storeHooks'; import { useAppSelector } from 'app/storeHooks';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
@ -59,11 +59,9 @@ interface IAINodeOutputsProps {
const IAINodeOutputs = (props: IAINodeOutputsProps) => { const IAINodeOutputs = (props: IAINodeOutputsProps) => {
const { nodeId, template, outputs } = props; const { nodeId, template, outputs } = props;
const connectedInputs = useAppSelector( const edges = useAppSelector((state: RootState) => state.nodes.edges);
(state: RootState) => state.nodes.edges
);
const renderIAINodeOutputs = () => { const renderIAINodeOutputs = useCallback(() => {
const IAINodeOutputsToRender: ReactNode[] = []; const IAINodeOutputsToRender: ReactNode[] = [];
const outputSockets = map(outputs); const outputSockets = map(outputs);
@ -71,7 +69,7 @@ const IAINodeOutputs = (props: IAINodeOutputsProps) => {
const outputTemplate = template.outputs[outputSocket.name]; const outputTemplate = template.outputs[outputSocket.name];
const isConnected = Boolean( const isConnected = Boolean(
connectedInputs.filter((connectedInput) => { edges.filter((connectedInput) => {
return ( return (
connectedInput.source === nodeId && connectedInput.source === nodeId &&
connectedInput.sourceHandle === outputSocket.name connectedInput.sourceHandle === outputSocket.name
@ -91,7 +89,7 @@ const IAINodeOutputs = (props: IAINodeOutputsProps) => {
}); });
return <Flex flexDir="column">{IAINodeOutputsToRender}</Flex>; return <Flex flexDir="column">{IAINodeOutputsToRender}</Flex>;
}; }, [edges, nodeId, outputs, template.outputs]);
return renderIAINodeOutputs(); return renderIAINodeOutputs();
}; };