feat(ui): hold shift to make nodes draggable from anywhere

invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx

@@ -53,14 +53,14 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
         description={template.description}
       />
       <Flex
-        className="nopan"
+        className={'nopan'}
         sx={{
+          cursor: 'auto',
           flexDirection: 'column',
           borderBottomRadius: 'md',
           py: 2,
           bg: 'base.200',
           _dark: { bg: 'base.800' },
-          cursor: 'auto',
         }}
       >
         <IAINodeOutputs nodeId={nodeId} outputs={outputs} template={template} />

invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx

@@ -2,6 +2,8 @@ import { Box, useToken } from '@chakra-ui/react';
 import { NODE_MIN_WIDTH } from 'app/constants';
 
 import { PropsWithChildren } from 'react';
+import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation';
+import { useAppSelector } from 'app/store/storeHooks';
 
 type NodeWrapperProps = PropsWithChildren & {
   selected: boolean;
@@ -13,8 +15,11 @@ const NodeWrapper = (props: NodeWrapperProps) => {
     'dark-lg',
   ]);
 
+  const shift = useAppSelector((state) => state.hotkeys.shift);
+
   return (
     <Box
+      className={shift ? DRAG_HANDLE_CLASSNAME : 'nopan'}
       sx={{
         position: 'relative',
         borderRadius: 'md',

invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx

@@ -23,7 +23,6 @@ const ProgressImageNode = (props: NodeProps<InvocationValue>) => {
       <Flex
         className="nopan"
         sx={{
-          cursor: 'auto',
           flexDirection: 'column',
           borderBottomRadius: 'md',
           p: 2,