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

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

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