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): do not rearrange fields when connection/disconnecting

Browse Source
This commit is contained in:
psychedelicious 2024-05-18 08:16:51 +10:00
parent 07feb5ba07
commit 6b7b0b3777
2 changed files with 20 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
invokeai/frontend/web/src/features/nodes/hooks/useAnyOrDirectInputFieldNames.ts
View File

@ -1,7 +1,5 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate'; import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames'; import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate'; import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate';
import { keys, map } from 'lodash-es'; import { keys, map } from 'lodash-es';
@ -9,31 +7,20 @@ import { useMemo } from 'react';
export const useAnyOrDirectInputFieldNames = (nodeId: string): string[] => { export const useAnyOrDirectInputFieldNames = (nodeId: string): string[] => {
const template = useNodeTemplate(nodeId); const template = useNodeTemplate(nodeId);
const selectConnectedFieldNames = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodesSlice) =>
nodesSlice.edges
.filter((e) => e.target === nodeId)
.map((e) => e.targetHandle)
.filter(Boolean)
),
[nodeId]
);
const connectedFieldNames = useAppSelector(selectConnectedFieldNames);
const fieldNames = useMemo(() => { const fieldNames = useMemo(() => {
const fields = map(template.inputs).filter((field) => { const fields = map(template.inputs).filter((field) => {
if (connectedFieldNames.includes(field.name)) {
return false;
}
return ( return (
(['any', 'direct'].includes(field.input) || field.type.isCollectionOrScalar) && (['any', 'direct'].includes(field.input) || field.type.isCollectionOrScalar) &&
keys(TEMPLATE_BUILDER_MAP).includes(field.type.name) keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
); );
}); });
return getSortedFilteredFieldNames(fields); const _fieldNames = getSortedFilteredFieldNames(fields);
}, [connectedFieldNames, template.inputs]); if (_fieldNames.length === 0) {
return EMPTY_ARRAY;
}
return _fieldNames;
}, [template.inputs]);
return fieldNames; return fieldNames;
}; };

35
invokeai/frontend/web/src/features/nodes/hooks/useConnectionInputFieldNames.ts
View File

@ -1,7 +1,5 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate'; import { useNodeTemplate } from 'features/nodes/hooks/useNodeTemplate';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames'; import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate'; import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate';
import { keys, map } from 'lodash-es'; import { keys, map } from 'lodash-es';
@ -9,31 +7,22 @@ import { useMemo } from 'react';
export const useConnectionInputFieldNames = (nodeId: string): string[] => { export const useConnectionInputFieldNames = (nodeId: string): string[] => {
const template = useNodeTemplate(nodeId); const template = useNodeTemplate(nodeId);
const selectConnectedFieldNames = useMemo(
() =>
createMemoizedSelector(selectNodesSlice, (nodesSlice) =>
nodesSlice.edges
.filter((e) => e.target === nodeId)
.map((e) => e.targetHandle)
.filter(Boolean)
),
[nodeId]
);
const connectedFieldNames = useAppSelector(selectConnectedFieldNames);
const fieldNames = useMemo(() => { const fieldNames = useMemo(() => {
// get the visible fields // get the visible fields
const fields = map(template.inputs).filter((field) => { const fields = map(template.inputs).filter(
if (connectedFieldNames.includes(field.name)) { (field) =>
return true;
}
return (
(field.input === 'connection' && !field.type.isCollectionOrScalar) || (field.input === 'connection' && !field.type.isCollectionOrScalar) ||
!keys(TEMPLATE_BUILDER_MAP).includes(field.type.name) !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
); );
});
return getSortedFilteredFieldNames(fields); const _fieldNames = getSortedFilteredFieldNames(fields);
}, [connectedFieldNames, template.inputs]);
if (_fieldNames.length === 0) {
return EMPTY_ARRAY;
}
return _fieldNames;
}, [template.inputs]);
return fieldNames; return fieldNames;
}; };