added drag icon, added vertical strategy for smoother scrolling

invokeai/frontend/web/public/locales/en.json

@@ -997,6 +997,7 @@
         "problemSettingTitle": "Problem Setting Title",
         "reloadNodeTemplates": "Reload Node Templates",
         "removeLinearView": "Remove from Linear View",
+        "reorderLinearView": "Reorder Linear View",
         "newWorkflow": "New Workflow",
         "newWorkflowDesc": "Create a new workflow?",
         "newWorkflowDesc2": "Your current workflow has unsaved changes.",

invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx

@@ -1,6 +1,6 @@
 import type { DragEndEvent } from '@dnd-kit/core';
 import { MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext } from '@dnd-kit/sortable';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 
@@ -24,7 +24,9 @@ const DndSortable = (props: Props) => {
 
   return (
     <DndContextTypesafe onDragEnd={props.onDragEnd} sensors={sensors}>
-      <SortableContext items={props.items}>{props.children}</SortableContext>
+      <SortableContext items={props.items} strategy={verticalListSortingStrategy}>
+        {props.children}
+      </SortableContext>
     </DndContextTypesafe>
   );
 };

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

@@ -8,7 +8,7 @@ import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice'
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiInfoBold, PiTrashSimpleBold, PiDotsSixVerticalBold } from 'react-icons/pi';
 
 import EditableFieldTitle from './EditableFieldTitle';
 import FieldTooltipContent from './FieldTooltipContent';
@@ -23,7 +23,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
   const { t } = useTranslation();
-  
+
   const handleRemoveField = useCallback(() => {
     dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));
   }, [dispatch, fieldName, nodeId]);
@@ -40,39 +40,49 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
       layerStyle="second"
+      alignItems="center"
       position="relative"
       borderRadius="base"
       w="full"
       p={4}
-      flexDir="column"
+      paddingLeft={0}
       ref={setNodeRef}
       style={style}
-      {...attributes}
-      {...listeners}
     >
-      <Flex>
+      <IconButton
-        <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="input" />
+        aria-label={t('nodes.reorderLinearView')}
-        <Spacer />
+        variant="ghost"
-        <Tooltip
+        icon={<PiDotsSixVerticalBold />}
-          label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" />}
+        {...listeners}
-          openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+        {...attributes}
-          placement="top"
+        mx={2}
-        >
+        height="full"
-          <Flex h="full" alignItems="center">
+      />
-            <Icon fontSize="sm" color="base.300" as={PiInfoBold} />
+      <Flex flexDir="column" w="full">
-          </Flex>
+        <Flex alignItems="center">
-        </Tooltip>
+          <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="input" />
-        <IconButton
+          <Spacer />
-          aria-label={t('nodes.removeLinearView')}
+          <Tooltip
-          tooltip={t('nodes.removeLinearView')}
+            label={<FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="input" />}
-          variant="ghost"
+            openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
-          size="sm"
+            placement="top"
-          onClick={handleRemoveField}
+          >
-          icon={<PiTrashSimpleBold />}
+            <Flex h="full" alignItems="center">
-        />
+              <Icon fontSize="sm" color="base.300" as={PiInfoBold} />
+            </Flex>
+          </Tooltip>
+          <IconButton
+            aria-label={t('nodes.removeLinearView')}
+            tooltip={t('nodes.removeLinearView')}
+            variant="ghost"
+            size="sm"
+            onClick={handleRemoveField}
+            icon={<PiTrashSimpleBold />}
+          />
+        </Flex>
+        <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+        <NodeSelectionOverlay isSelected={false} isHovered={isMouseOverNode} />
       </Flex>
-      <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
-      <NodeSelectionOverlay isSelected={false} isHovered={isMouseOverNode} />
     </Flex>
   );
 };