fix(ui): fix mouse interactions

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx

@@ -1,4 +1,5 @@
 import { Flex, Heading, Icon, Tooltip } from '@chakra-ui/react';
+import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/hooks/useBuildInvocation';
 import { memo } from 'react';
 import { FaInfoCircle } from 'react-icons/fa';
 
@@ -12,6 +13,7 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
   const { nodeId, title, description } = props;
   return (
     <Flex
+      className={DRAG_HANDLE_CLASSNAME}
       sx={{
         borderTopRadius: 'md',
         alignItems: 'center',

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx

@@ -1,25 +1,25 @@
-import {
-  InputFieldTemplate,
-  InputFieldValue,
-  InvocationTemplate,
-} from 'features/nodes/types/types';
-import { memo, ReactNode, useCallback } from 'react';
-import { map } from 'lodash-es';
-import { useAppSelector } from 'app/store/storeHooks';
-import { RootState } from 'app/store/store';
 import {
   Box,
+  Divider,
   Flex,
   FormControl,
   FormLabel,
   HStack,
   Tooltip,
-  Divider,
 } from '@chakra-ui/react';
-import FieldHandle from '../FieldHandle';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection';
-import InputFieldComponent from '../InputFieldComponent';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
+import {
+  InputFieldTemplate,
+  InputFieldValue,
+  InvocationTemplate,
+} from 'features/nodes/types/types';
+import { map } from 'lodash-es';
+import { ReactNode, memo, useCallback } from 'react';
+import FieldHandle from '../FieldHandle';
+import InputFieldComponent from '../InputFieldComponent';
 
 interface IAINodeInputProps {
   nodeId: string;
@@ -35,6 +35,7 @@ function IAINodeInput(props: IAINodeInputProps) {
 
   return (
     <Box
+      className="nopan"
       position="relative"
       borderColor={
         !template
@@ -136,7 +137,7 @@ const IAINodeInputs = (props: IAINodeInputsProps) => {
     });
 
     return (
-      <Flex flexDir="column" gap={2} p={2}>
+      <Flex className="nopan" flexDir="column" gap={2} p={2}>
         {IAINodeInputsToRender}
       </Flex>
     );

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

@@ -23,7 +23,14 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
   if (!template) {
     return (
       <NodeWrapper selected={selected}>
-        <Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
+        <Flex
+          className="nopan"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'auto',
+          }}
+        >
           <Icon
             as={FaExclamationCircle}
             sx={{
@@ -46,12 +53,14 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
         description={template.description}
       />
       <Flex
+        className="nopan"
         sx={{
           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/ProgressImageNode.tsx

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

invokeai/frontend/web/src/features/nodes/hooks/useBuildInvocation.ts

@@ -18,6 +18,12 @@ const templatesSelector = createSelector(
   (nodes) => nodes.invocationTemplates
 );
 
+export const DRAG_HANDLE_CLASSNAME = 'node-drag-handle';
+
+export const SHARED_NODE_PROPERTIES: Partial<Node> = {
+  dragHandle: `.${DRAG_HANDLE_CLASSNAME}`,
+};
+
 export const useBuildInvocation = () => {
   const invocationTemplates = useAppSelector(templatesSelector);
 
@@ -32,6 +38,7 @@ export const useBuildInvocation = () => {
         });
 
         const node: Node = {
+          ...SHARED_NODE_PROPERTIES,
           id: 'progress_image',
           type: 'progress_image',
           position: { x: x, y: y },
@@ -91,6 +98,7 @@ export const useBuildInvocation = () => {
       });
 
       const invocation: Node<InvocationValue> = {
+        ...SHARED_NODE_PROPERTIES,
         id: nodeId,
         type: 'invocation',
         position: { x: x, y: y },