refactored dndsortable to be its own component

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) {

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);

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,
   };
 

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

@@ -1,14 +1,14 @@
-import { DndContext } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
-import { arrayMove, SortableContext } 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,8 +43,7 @@ const WorkflowLinearTab = () => {
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
-        <DndContext onDragEnd={handleDragEnd}>
+        <DndSortable onDragEnd={handleDragEnd} items={fields.map((field) => `${field.nodeId}.${field.fieldName}`)}>
-          <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} />
@@ -57,8 +55,7 @@ const WorkflowLinearTab = () => {
               <IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
             )}
           </Flex>
-          </SortableContext>
+        </DndSortable>
-        </DndContext>
       </ScrollableContent>
     </Box>
   );