From a948bd131075c555fa2ab0abecff6ae92111de9e Mon Sep 17 00:00:00 2001
From: Jennifer Player <chainchompa@gmail.com>
Date: Wed, 14 Feb 2024 14:47:28 -0500
Subject: [PATCH] refactored dndsortable to be its own component

---
 .../features/dnd/components/AppDndContext.tsx |  1 -
 .../features/dnd/components/DndSortable.tsx   | 32 +++++++++++++++++
 .../Invocation/fields/LinearViewField.tsx     |  2 +-
 .../sidePanel/workflow/WorkflowLinearTab.tsx  | 35 +++++++++----------
 4 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx

diff --git a/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx b/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
index a28b865366..799fa7135c 100644
--- a/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/AppDndContext.tsx
@@ -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) {
diff --git a/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx b/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx
new file mode 100644
index 0000000000..0e2f5d537a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx
@@ -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);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
index c4fbbb2cd7..2aad446ddf 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@@ -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,
   };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
index 3c7dae463c..fa1767138e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@@ -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>
   );