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): fix field sorting

Browse Source 
closes #4934
This commit is contained in:
psychedelicious 2023-10-18 14:19:06 +11:00
parent 67a343b3e4
commit 024aa5eb90
4 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import {
POLYMORPHIC_TYPES, POLYMORPHIC_TYPES,
TYPES_WITH_INPUT_COMPONENTS, TYPES_WITH_INPUT_COMPONENTS,
} from '../types/constants'; } from '../types/constants';
import { getSortedFilteredFieldNames } from '../util/getSortedFilteredFieldNames';
export const useAnyOrDirectInputFieldNames = (nodeId: string) => { export const useAnyOrDirectInputFieldNames = (nodeId: string) => {
const selector = useMemo( const selector = useMemo(
@ -24,17 +25,13 @@ export const useAnyOrDirectInputFieldNames = (nodeId: string) => {
if (!nodeTemplate) { if (!nodeTemplate) {
return []; return [];
} }
return map(nodeTemplate.inputs) const fields = map(nodeTemplate.inputs).filter(
.filter( (field) =>
(field) => (['any', 'direct'].includes(field.input) ||
(['any', 'direct'].includes(field.input) || POLYMORPHIC_TYPES.includes(field.type)) &&
POLYMORPHIC_TYPES.includes(field.type)) && TYPES_WITH_INPUT_COMPONENTS.includes(field.type)
TYPES_WITH_INPUT_COMPONENTS.includes(field.type) );
) return getSortedFilteredFieldNames(fields);
.filter((field) => !field.ui_hidden)
.sort((a, b) => (a.ui_order ?? 0) - (b.ui_order ?? 0))
.map((field) => field.name)
.filter((fieldName) => fieldName !== 'is_intermediate');
}, },
defaultSelectorOptions defaultSelectorOptions
), ),

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

@ -9,6 +9,7 @@ import {
TYPES_WITH_INPUT_COMPONENTS, TYPES_WITH_INPUT_COMPONENTS,
} from '../types/constants'; } from '../types/constants';
import { isInvocationNode } from '../types/types'; import { isInvocationNode } from '../types/types';
import { getSortedFilteredFieldNames } from '../util/getSortedFilteredFieldNames';
export const useConnectionInputFieldNames = (nodeId: string) => { export const useConnectionInputFieldNames = (nodeId: string) => {
const selector = useMemo( const selector = useMemo(
@ -24,17 +25,16 @@ export const useConnectionInputFieldNames = (nodeId: string) => {
if (!nodeTemplate) { if (!nodeTemplate) {
return []; return [];
} }
return map(nodeTemplate.inputs)
.filter( // get the visible fields
(field) => const fields = map(nodeTemplate.inputs).filter(
(field.input === 'connection' && (field) =>
!POLYMORPHIC_TYPES.includes(field.type)) || (field.input === 'connection' &&
!TYPES_WITH_INPUT_COMPONENTS.includes(field.type) !POLYMORPHIC_TYPES.includes(field.type)) ||
) !TYPES_WITH_INPUT_COMPONENTS.includes(field.type)
.filter((field) => !field.ui_hidden) );
.sort((a, b) => (a.ui_order ?? 0) - (b.ui_order ?? 0))
.map((field) => field.name) return getSortedFilteredFieldNames(fields);
.filter((fieldName) => fieldName !== 'is_intermediate');
}, },
defaultSelectorOptions defaultSelectorOptions
), ),

8
invokeai/frontend/web/src/features/nodes/hooks/useOutputFieldNames.ts
View File

@ -5,6 +5,7 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { map } from 'lodash-es'; import { map } from 'lodash-es';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { isInvocationNode } from '../types/types'; import { isInvocationNode } from '../types/types';
import { getSortedFilteredFieldNames } from '../util/getSortedFilteredFieldNames';
export const useOutputFieldNames = (nodeId: string) => { export const useOutputFieldNames = (nodeId: string) => {
const selector = useMemo( const selector = useMemo(
@ -20,11 +21,8 @@ export const useOutputFieldNames = (nodeId: string) => {
if (!nodeTemplate) { if (!nodeTemplate) {
return []; return [];
} }
return map(nodeTemplate.outputs)
.filter((field) => !field.ui_hidden) return getSortedFilteredFieldNames(map(nodeTemplate.outputs));
.sort((a, b) => (a.ui_order ?? 0) - (b.ui_order ?? 0))
.map((field) => field.name)
.filter((fieldName) => fieldName !== 'is_intermediate');
}, },
defaultSelectorOptions defaultSelectorOptions
), ),

20
invokeai/frontend/web/src/features/nodes/util/getSortedFilteredFieldNames.ts Normal file
View File

@ -0,0 +1,20 @@
import { isNil } from 'lodash-es';
import { InputFieldTemplate, OutputFieldTemplate } from '../types/types';
export const getSortedFilteredFieldNames = (
fields: InputFieldTemplate[] | OutputFieldTemplate[]
): string[] => {
const visibleFields = fields.filter((field) => !field.ui_hidden);
// we want explicitly ordered fields to be before unordered fields; split the list
const orderedFields = visibleFields
.filter((f) => !isNil(f.ui_order))
.sort((a, b) => (a.ui_order ?? 0) - (b.ui_order ?? 0));
const unorderedFields = visibleFields.filter((f) => isNil(f.ui_order));
// concat the lists, and return the field names, skipping `is_intermediate`
return orderedFields
.concat(unorderedFields)
.map((f) => f.name)
.filter((fieldName) => fieldName !== 'is_intermediate');
};