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

refactored dndsortable to be its own component

Browse Source
This commit is contained in:
Jennifer Player 2024-02-14 14:47:28 -05:00
parent 2071972a8c
commit a948bd1310
4 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
View File

@ -32,7 +32,6 @@ const AppDndContext = (props: PropsWithChildren) => {
const handleDragEnd = useCallback(
(event: DragEndEvent) => {
console.log('handling drag end', event.active.data.current);
log.trace({ dragData: parseify(event.active.data.current) }, 'Drag ended');
const overData = event.over?.data.current;
if (!activeDragData || !overData) {

32
invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx Normal file
View File

@ -0,0 +1,32 @@
import type { DragEndEvent } from '@dnd-kit/core';
import { MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext } from '@dnd-kit/sortable';
import type { PropsWithChildren } from 'react';
import { memo } from 'react';
import { DndContextTypesafe } from './DndContextTypesafe';
type Props = PropsWithChildren & {
items: string[];
onDragEnd(event: DragEndEvent): void;
};
const DndSortable = (props: Props) => {
const mouseSensor = useSensor(MouseSensor, {
activationConstraint: { distance: 10 },
});
const touchSensor = useSensor(TouchSensor, {
activationConstraint: { distance: 10 },
});
const sensors = useSensors(mouseSensor, touchSensor);
return (
<DndContextTypesafe sensors={sensors}>
<SortableContext items={props.items}>{props.children}</SortableContext>
</DndContextTypesafe>
);
};
export default memo(DndSortable);

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

@ -31,7 +31,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: `${nodeId}.${fieldName}` });
const style = {
transform: CSS.Transform.toString(transform),
transform: CSS.Translate.toString(transform),
transition,
};

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

@ -1,14 +1,14 @@
import { DndContext } from '@dnd-kit/core';
import { arrayMove, SortableContext } from '@dnd-kit/sortable';
import { arrayMove } from '@dnd-kit/sortable';
import { Box, Flex } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import DndSortable from 'features/dnd/components/DndSortable';
import type { DragEndEvent } from 'features/dnd/types';
import LinearViewField from 'features/nodes/components/flow/nodes/Invocation/fields/LinearViewField';
import { selectWorkflowSlice, workflowExposedFieldsReordered } from 'features/nodes/store/workflowSlice';
import { FieldIdentifier } from 'features/nodes/types/field';
import type { FieldIdentifier } from 'features/nodes/types/field';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
@ -24,7 +24,6 @@ const WorkflowLinearTab = () => {
const handleDragEnd = useCallback(
(event: DragEndEvent) => {
const { active, over } = event;
console.log({ active, over });
const fieldsStrings = fields.map((field) => `${field.nodeId}.${field.fieldName}`);
if (over && active.id !== over.id) {
@ -44,21 +43,19 @@ const WorkflowLinearTab = () => {
return (
<Box position="relative" w="full" h="full">
<ScrollableContent>
<DndContext onDragEnd={handleDragEnd}>
<SortableContext items={fields.map((field) => `${field.nodeId}.${field.fieldName}`)}>
<Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
{isLoading ? (
<IAINoContentFallback label={t('nodes.loadingNodes')} icon={null} />
) : fields.length ? (
fields.map(({ nodeId, fieldName }) => (
<LinearViewField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
))
) : (
<IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
)}
</Flex>
</SortableContext>
</DndContext>
<DndSortable onDragEnd={handleDragEnd} items={fields.map((field) => `${field.nodeId}.${field.fieldName}`)}>
<Flex position="relative" flexDir="column" alignItems="flex-start" p={1} gap={2} h="full" w="full">
{isLoading ? (
<IAINoContentFallback label={t('nodes.loadingNodes')} icon={null} />
) : fields.length ? (
fields.map(({ nodeId, fieldName }) => (
<LinearViewField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
))
) : (
<IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
)}
</Flex>
</DndSortable>
</ScrollableContent>
</Box>
);