github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): workflow field sorting doesn't use unique identifier for fields

Browse Source
This commit is contained in:
psychedelicious
2024-11-07 19:39:32 +10:00
parent 0c9434c464
commit 5545b980af
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
View File

@@ -52,7 +52,7 @@ const LinearViewFieldInternal = ({ fieldIdentifier }: Props) => {
<Flex
ref={ref}
// This is used to trigger the post-move flash animation
data-field-name={fieldIdentifier.fieldName}
data-field-name={`${fieldIdentifier.nodeId}-${fieldIdentifier.fieldName}`}
data-is-dragging={isDragging}
onMouseEnter={handleMouseOver}
onMouseLeave={handleMouseOut}

18
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
View File

@@ -7,11 +7,13 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
import { deepClone } from 'common/util/deepClone';
import { singleWorkflowFieldDndSource } from 'features/dnd/dnd';
import { triggerPostMoveFlash } from 'features/dnd/util';
import LinearViewFieldInternal from 'features/nodes/components/flow/nodes/Invocation/fields/LinearViewField';
import { selectWorkflowSlice, workflowExposedFieldsReordered } from 'features/nodes/store/workflowSlice';
import type { FieldIdentifier } from 'features/nodes/types/field';
import { isEqual } from 'lodash-es';
import { memo, useEffect } from 'react';
import { flushSync } from 'react-dom';
import { useTranslation } from 'react-i18next';
@@ -78,11 +80,13 @@ const FieldListInnerContent = memo(({ fields }: { fields: FieldIdentifier[] }) =
return;
}
const indexOfSource = fields.findIndex(
(fieldIdentifier) => fieldIdentifier.fieldName === sourceData.payload.fieldIdentifier.fieldName
const fieldsClone = deepClone(fields);
const indexOfSource = fieldsClone.findIndex((fieldIdentifier) =>
isEqual(fieldIdentifier, sourceData.payload.fieldIdentifier)
);
const indexOfTarget = fields.findIndex(
(fieldIdentifier) => fieldIdentifier.fieldName === targetData.payload.fieldIdentifier.fieldName
const indexOfTarget = fieldsClone.findIndex((fieldIdentifier) =>
isEqual(fieldIdentifier, targetData.payload.fieldIdentifier)
);
if (indexOfTarget < 0 || indexOfSource < 0) {
@@ -113,7 +117,7 @@ const FieldListInnerContent = memo(({ fields }: { fields: FieldIdentifier[] }) =
}
const reorderedFields = reorderWithEdge({
list: fields,
list: fieldsClone,
startIndex: indexOfSource,
indexOfTarget,
closestEdgeOfTarget,
@@ -126,7 +130,9 @@ const FieldListInnerContent = memo(({ fields }: { fields: FieldIdentifier[] }) =
});
// Flash the element that was moved
const element = document.querySelector(`[data-field-name="${sourceData.payload.fieldIdentifier.fieldName}"]`);
const element = document.querySelector(
`[data-field-name="${sourceData.payload.fieldIdentifier.nodeId}-${sourceData.payload.fieldIdentifier.fieldName}"]`
);
if (element instanceof HTMLElement) {
triggerPostMoveFlash(element, colorTokenToCssVar('base.700'));
}