feat: node editor

squashed rebase on main after backendd refactor

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -6,10 +6,6 @@ import {
   useColorMode,
   useColorModeValue,
 } from '@chakra-ui/react';
-import {
-  TypesafeDraggableData,
-  TypesafeDroppableData,
-} from 'app/components/ImageDnd/typesafeDnd';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {
   IAILoadingImageFallback,
@@ -17,6 +13,10 @@ import {
 } from 'common/components/IAIImageFallback';
 import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
+import {
+  TypesafeDraggableData,
+  TypesafeDroppableData,
+} from 'features/dnd/types';
 import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
 import {
   MouseEvent,
@@ -157,11 +157,10 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                     <IAILoadingImageFallback image={imageDTO} />
                   )
                 }
-                width={imageDTO.width}
-                height={imageDTO.height}
                 onError={onError}
                 draggable={false}
                 sx={{
+                  w: imageDTO.width,
                   objectFit: 'contain',
                   maxW: 'full',
                   maxH: 'full',
@@ -213,13 +212,6 @@ const IAIDndImage = (props: IAIDndImageProps) => {
               onClick={onClick}
             />
           )}
-          {!isDropDisabled && (
-            <IAIDroppable
-              data={droppableData}
-              disabled={isDropDisabled}
-              dropLabel={dropLabel}
-            />
-          )}
           {onClickReset && withResetIcon && imageDTO && (
             <IAIIconButton
               onClick={onClickReset}
@@ -244,6 +236,13 @@ const IAIDndImage = (props: IAIDndImageProps) => {
               }}
             />
           )}
+          {!isDropDisabled && (
+            <IAIDroppable
+              data={droppableData}
+              disabled={isDropDisabled}
+              dropLabel={dropLabel}
+            />
+          )}
         </Flex>
       )}
     </ImageContextMenu>

invokeai/frontend/web/src/common/components/IAIDraggable.tsx

@@ -1,22 +1,19 @@
-import { Box } from '@chakra-ui/react';
-import {
-  TypesafeDraggableData,
-  useDraggable,
-} from 'app/components/ImageDnd/typesafeDnd';
-import { MouseEvent, memo, useRef } from 'react';
+import { Box, BoxProps } from '@chakra-ui/react';
+import { useDraggableTypesafe } from 'features/dnd/hooks/typesafeHooks';
+import { TypesafeDraggableData } from 'features/dnd/types';
+import { memo, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
-type IAIDraggableProps = {
+type IAIDraggableProps = BoxProps & {
   disabled?: boolean;
   data?: TypesafeDraggableData;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 };
 
 const IAIDraggable = (props: IAIDraggableProps) => {
-  const { data, disabled, onClick } = props;
+  const { data, disabled, ...rest } = props;
   const dndId = useRef(uuidv4());
 
-  const { attributes, listeners, setNodeRef } = useDraggable({
+  const { attributes, listeners, setNodeRef } = useDraggableTypesafe({
     id: dndId.current,
     disabled,
     data,
@@ -24,7 +21,6 @@ const IAIDraggable = (props: IAIDraggableProps) => {
 
   return (
     <Box
-      onClick={onClick}
       ref={setNodeRef}
       position="absolute"
       w="full"
@@ -33,6 +29,7 @@ const IAIDraggable = (props: IAIDraggableProps) => {
       insetInlineStart={0}
       {...attributes}
       {...listeners}
+      {...rest}
     />
   );
 };

invokeai/frontend/web/src/common/components/IAIDroppable.tsx

@@ -1,9 +1,7 @@
 import { Box } from '@chakra-ui/react';
-import {
-  TypesafeDroppableData,
-  isValidDrop,
-  useDroppable,
-} from 'app/components/ImageDnd/typesafeDnd';
+import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
+import { TypesafeDroppableData } from 'features/dnd/types';
+import { isValidDrop } from 'features/dnd/util/isValidDrop';
 import { AnimatePresence } from 'framer-motion';
 import { ReactNode, memo, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -19,7 +17,7 @@ const IAIDroppable = (props: IAIDroppableProps) => {
   const { dropLabel, data, disabled } = props;
   const dndId = useRef(uuidv4());
 
-  const { isOver, setNodeRef, active } = useDroppable({
+  const { isOver, setNodeRef, active } = useDroppableTypesafe({
     id: dndId.current,
     disabled,
     data,

invokeai/frontend/web/src/common/components/IAIImageFallback.tsx

@@ -49,7 +49,7 @@ export const IAILoadingImageFallback = (props: Props) => {
 
 type IAINoImageFallbackProps = {
   label?: string;
-  icon?: As;
+  icon?: As | null;
   boxSize?: StyleProps['boxSize'];
   sx?: ChakraProps['sx'];
 };
@@ -76,7 +76,7 @@ export const IAINoContentFallback = (props: IAINoImageFallbackProps) => {
         ...props.sx,
       }}
     >
-      <Icon as={icon} boxSize={boxSize} opacity={0.7} />
+      {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
       {props.label && <Text textAlign="center">{props.label}</Text>}
     </Flex>
   );

invokeai/frontend/web/src/common/components/IAISwitch.tsx

@@ -1,10 +1,13 @@
 import {
+  Flex,
   FormControl,
   FormControlProps,
+  FormHelperText,
   FormLabel,
   FormLabelProps,
   Switch,
   SwitchProps,
+  Text,
   Tooltip,
 } from '@chakra-ui/react';
 import { memo } from 'react';
@@ -15,6 +18,7 @@ export interface IAISwitchProps extends SwitchProps {
   formControlProps?: FormControlProps;
   formLabelProps?: FormLabelProps;
   tooltip?: string;
+  helperText?: string;
 }
 
 /**
@@ -28,6 +32,7 @@ const IAISwitch = (props: IAISwitchProps) => {
     formControlProps,
     formLabelProps,
     tooltip,
+    helperText,
     ...rest
   } = props;
   return (
@@ -35,25 +40,33 @@ const IAISwitch = (props: IAISwitchProps) => {
       <FormControl
         isDisabled={isDisabled}
         width={width}
-        display="flex"
         alignItems="center"
         {...formControlProps}
       >
-        {label && (
-          <FormLabel
-            my={1}
-            flexGrow={1}
-            sx={{
-              cursor: isDisabled ? 'not-allowed' : 'pointer',
-              ...formLabelProps?.sx,
-              pe: 4,
-            }}
-            {...formLabelProps}
-          >
-            {label}
-          </FormLabel>
-        )}
-        <Switch {...rest} />
+        <Flex sx={{ flexDir: 'column', w: 'full' }}>
+          <Flex sx={{ alignItems: 'center', w: 'full' }}>
+            {label && (
+              <FormLabel
+                my={1}
+                flexGrow={1}
+                sx={{
+                  cursor: isDisabled ? 'not-allowed' : 'pointer',
+                  ...formLabelProps?.sx,
+                  pe: 4,
+                }}
+                {...formLabelProps}
+              >
+                {label}
+              </FormLabel>
+            )}
+            <Switch {...rest} />
+          </Flex>
+          {helperText && (
+            <FormHelperText>
+              <Text variant="subtext">{helperText}</Text>
+            </FormHelperText>
+          )}
+        </Flex>
       </FormControl>
     </Tooltip>
   );