From 0257b4a611baf312d20a92cf8b5cd5ce10c55c78 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 15 Jul 2023 00:13:45 +1000
Subject: [PATCH] fix(ui): fix mouse interactions

---
 .../components/IAINode/IAINodeHeader.tsx      |  2 ++
 .../components/IAINode/IAINodeInputs.tsx      | 27 ++++++++++---------
 .../nodes/components/InvocationComponent.tsx  | 11 +++++++-
 .../nodes/components/ProgressImageNode.tsx    |  2 ++
 .../nodes/hooks/useBuildInvocation.ts         |  8 ++++++
 5 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
index 73705769b6..226aaed7be 100644
--- a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
+++ b/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',
diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx
index 9ea383c09d..6f779e4295 100644
--- a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeInputs.tsx
+++ b/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>
     );
diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
index 12817679e2..3a08b46dde 100644
--- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
+++ b/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} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx
index 6424d4f76c..2975cd820c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx
+++ b/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,
diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useBuildInvocation.ts b/invokeai/frontend/web/src/features/nodes/hooks/useBuildInvocation.ts
index 5ed631e9fa..50a19d6b45 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useBuildInvocation.ts
+++ b/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 },