workflow builder iteration 2

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

@@ -902,6 +902,8 @@
         "missingNode": "Missing invocation node",
         "missingInvocationTemplate": "Missing invocation template",
         "missingFieldTemplate": "Missing field template",
+        "missingSourceOrTargetNode": "Missing source or target node",
+        "missingSourceOrTargetHandle": "Missing source or target handle",
         "nodePack": "Node pack",
         "collection": "Collection",
         "singleFieldType": "{{name}} (Single)",

invokeai/frontend/web/src/features/dnd/dnd.ts

@@ -20,7 +20,7 @@ import {
   setUpscaleInitialImage,
 } from 'features/imageActions/actions';
 import { fieldImageCollectionValueChanged } from 'features/nodes/store/nodesSlice';
-import { selectFieldInputInstance, selectNodesSlice } from 'features/nodes/store/selectors';
+import { selectFieldInputInstanceSafe, selectNodesSlice } from 'features/nodes/store/selectors';
 import { type FieldIdentifier, isImageFieldCollectionInputInstance } from 'features/nodes/types/field';
 import type { ImageDTO } from 'services/api/types';
 import type { JsonObject } from 'type-fest';
@@ -261,7 +261,7 @@ export const addImagesToNodeImageFieldCollectionDndTarget: DndTarget<
 
     const { fieldIdentifier } = targetData.payload;
 
-    const fieldInputInstance = selectFieldInputInstance(
+    const fieldInputInstance = selectFieldInputInstanceSafe(
       selectNodesSlice(getState()),
       fieldIdentifier.nodeId,
       fieldIdentifier.fieldName

invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx

@@ -44,6 +44,7 @@ import {
 } from 'features/nodes/store/selectors';
 import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
 import { selectSelectionMode, selectShouldSnapToGrid } from 'features/nodes/store/workflowSettingsSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { AnyEdge, AnyNode } from 'features/nodes/types/invocation';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import type { CSSProperties, MouseEvent } from 'react';
@@ -356,6 +357,9 @@ export const Flow = memo(() => {
       selectionMode={selectionMode}
       elevateEdgesOnSelect
       nodeDragThreshold={1}
+      noDragClassName={NO_DRAG_CLASS}
+      noWheelClassName={NO_WHEEL_CLASS}
+      noPanClassName={NO_PAN_CLASS}
     >
       <Background />
     </ReactFlow>

invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx

@@ -5,6 +5,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { buildSelectAreConnectedNodesSelected } from 'features/nodes/components/flow/edges/util/buildEdgeSelectors';
 import { selectShouldAnimateEdges } from 'features/nodes/store/workflowSettingsSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { CollapsedInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
@@ -80,7 +81,7 @@ const InvocationCollapsedEdge = ({
           <Box
             position="absolute"
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
-            className="edge-label-renderer__custom-edge nodrag nopan" // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
+            className={`edge-label-renderer__custom-edge ${NO_DRAG_CLASS} ${NO_PAN_CLASS}`} // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
             // See: https://github.com/xyflow/xyflow/issues/3658
             zIndex={1001}
           >

invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx

@@ -6,6 +6,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectShouldAnimateEdges, selectShouldShowEdgeLabels } from 'features/nodes/store/workflowSettingsSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { DefaultInvocationNodeEdge } from 'features/nodes/types/invocation';
 import { memo, useMemo } from 'react';
 
@@ -114,7 +115,7 @@ const InvocationDefaultEdge = ({
       {label && shouldShowEdgeLabels && (
         <EdgeLabelRenderer>
           <Flex
-            className="nodrag nopan"
+            className={`${NO_DRAG_CLASS} ${NO_PAN_CLASS}`}
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
             data-selected={selected}
             sx={edgeLabelWrapperSx}

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

@@ -3,6 +3,7 @@ import { Flex } from '@invoke-ai/ui-library';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
 import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
 import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon';
+import { useNodeIsInvalid } from 'features/nodes/hooks/useNodeIsInvalid';
 import { memo } from 'react';
 
 import InvocationNodeCollapsedHandles from './InvocationNodeCollapsedHandles';
@@ -25,11 +26,16 @@ const sx: SystemStyleObject = {
   '&[data-is-open="true"]': {
     borderBottomRadius: 0,
   },
+  '&[data-is-invalid="true"]': {
+    color: 'error.300',
+  },
 };
 
 const InvocationNodeHeader = ({ nodeId, isOpen }: Props) => {
+  const isInvalid = useNodeIsInvalid(nodeId);
+
   return (
-    <Flex layerStyle="nodeHeader" sx={sx} data-is-open={isOpen}>
+    <Flex layerStyle="nodeHeader" sx={sx} data-is-open={isOpen} data-is-invalid={isInvalid}>
       <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
       <InvocationNodeClassificationIcon nodeId={nodeId} />
       <NodeTitle nodeId={nodeId} />

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

@@ -3,6 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useNodeHasImageOutput } from 'features/nodes/hooks/useNodeHasImageOutput';
 import { useNodeIsIntermediate } from 'features/nodes/hooks/useNodeIsIntermediate';
 import { nodeIsIntermediateChanged } from 'features/nodes/store/nodesSlice';
+import { NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -29,7 +30,7 @@ const SaveToGalleryCheckbox = ({ nodeId }: { nodeId: string }) => {
   }
 
   return (
-    <FormControl className="nopan">
+    <FormControl className={NO_PAN_CLASS}>
       <FormLabel m={0}>{t('nodes.saveToGallery')} </FormLabel>
       <Checkbox onChange={handleChange} isChecked={!isIntermediate} />
     </FormControl>

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

@@ -2,6 +2,7 @@ import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useUseCache } from 'features/nodes/hooks/useUseCache';
 import { nodeUseCacheChanged } from 'features/nodes/store/nodesSlice';
+import { NO_FIT_ON_DOUBLE_CLICK_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,9 +23,9 @@ const UseCacheCheckbox = ({ nodeId }: { nodeId: string }) => {
   );
   const { t } = useTranslation();
   return (
-    <FormControl>
+    <FormControl className={NO_FIT_ON_DOUBLE_CLICK_CLASS}>
       <FormLabel m={0}>{t('invocationCache.useCache')}</FormLabel>
-      <Checkbox className="nopan" onChange={handleChange} isChecked={useCache} />
+      <Checkbox className={NO_PAN_CLASS} onChange={handleChange} isChecked={useCache} />
     </FormControl>
   );
 };

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

@@ -1,6 +1,7 @@
 import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -16,7 +17,7 @@ export const FloatFieldInput = memo((props: FieldComponentProps<FloatFieldInputI
       max={max}
       step={step}
       fineStep={fineStep}
-      className="nodrag"
+      className={NO_DRAG_CLASS}
       flex="1 1 0"
     />
   );

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

@@ -1,6 +1,7 @@
 import { CompositeNumberInput, CompositeSlider } from '@invoke-ai/ui-library';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -18,7 +19,7 @@ export const FloatFieldInputAndSlider = memo(
           max={max}
           step={step}
           fineStep={fineStep}
-          className="nodrag"
+          className={NO_DRAG_CLASS}
           marks
           withThumbTooltip
           flex="1 1 0"
@@ -31,7 +32,7 @@ export const FloatFieldInputAndSlider = memo(
           max={max}
           step={step}
           fineStep={fineStep}
-          className="nodrag"
+          className={NO_DRAG_CLASS}
           flex="1 1 0"
         />
       </>

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

@@ -1,6 +1,7 @@
 import { CompositeSlider } from '@invoke-ai/ui-library';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -16,7 +17,7 @@ export const FloatFieldSlider = memo((props: FieldComponentProps<FloatFieldInput
       max={max}
       step={step}
       fineStep={fineStep}
-      className="nodrag"
+      className={NO_DRAG_CLASS}
       marks
       withThumbTooltip
       flex="1 1 0"

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

@@ -10,6 +10,7 @@ import {
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
 import { fieldDescriptionChanged } from 'features/nodes/store/nodesSlice';
+import { NO_DRAG_CLASS, NO_PAN_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +60,7 @@ const Content = memo(({ nodeId, fieldName }: Props) => {
     <FormControl orientation="vertical">
       <FormLabel>{t('nodes.description')}</FormLabel>
       <Textarea
-        className="nodrag nopan nowheel"
+        className={`${NO_DRAG_CLASS} ${NO_PAN_CLASS} ${NO_WHEEL_CLASS}`}
         fontSize="sm"
         value={description ?? ''}
         onChange={onChange}

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

@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, FormControl, Spacer } from '@invoke-ai/ui-library';
+import { Flex, Spacer } from '@invoke-ai/ui-library';
 import { InputFieldDescriptionPopover } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover';
 import { InputFieldHandle } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldHandle';
 import { InputFieldResetToDefaultValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldResetToDefaultValueIconButton';
@@ -57,21 +57,23 @@ type CommonProps = {
   fieldTemplate: FieldInputTemplate;
 };
 
-const ConnectedOrConnectionField = memo(({ nodeId, fieldName, isInvalid, isConnected }: CommonProps) => {
+const ConnectedOrConnectionField = memo(({ nodeId, fieldName, isInvalid }: CommonProps) => {
   return (
     <InputFieldWrapper>
-      <FormControl isInvalid={isInvalid} isDisabled={isConnected} px={2}>
+      <Flex px={2}>
         <InputFieldTitle nodeId={nodeId} fieldName={fieldName} isInvalid={isInvalid} />
-      </FormControl>
+      </Flex>
       <InputFieldHandle nodeId={nodeId} fieldName={fieldName} />
     </InputFieldWrapper>
   );
 });
 ConnectedOrConnectionField.displayName = 'ConnectedOrConnectionField';
 
 const directFieldSx: SystemStyleObject = {
-  orientation: 'vertical',
+  w: 'full',
   px: 2,
+  flexDir: 'column',
+  gap: 1,
   '&[data-is-dragging="true"]': {
     opacity: 0.3,
   },
@@ -100,29 +102,28 @@ const DirectField = memo(({ nodeId, fieldName, isInvalid, isConnected, fieldTemp
 
   return (
     <InputFieldWrapper>
-      <FormControl
+      <Flex
         ref={draggableRef}
-        isInvalid={isInvalid}
-        isDisabled={isConnected}
         sx={directFieldSx}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         data-is-connected={isConnected}
         data-is-dragging={isDragging}
       >
-        <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-          <Flex className="nodrag" ref={dragHandleRef} gap={1}>
-            <InputFieldTitle nodeId={nodeId} fieldName={fieldName} isInvalid={isInvalid} />
-            <Spacer />
-            {isHovered && (
-              <>
-                <InputFieldDescriptionPopover nodeId={nodeId} fieldName={fieldName} />
-                <InputFieldResetToDefaultValueIconButton nodeId={nodeId} fieldName={fieldName} />
-              </>
-            )}
+        <Flex gap={1}>
+          <Flex ref={dragHandleRef}>
+            <InputFieldTitle nodeId={nodeId} fieldName={fieldName} isInvalid={isInvalid} isDragging={isDragging} />
           </Flex>
-          <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+          <Spacer />
+          {isHovered && (
+            <>
+              <InputFieldDescriptionPopover nodeId={nodeId} fieldName={fieldName} />
+              <InputFieldResetToDefaultValueIconButton nodeId={nodeId} fieldName={fieldName} />
+            </>
+          )}
         </Flex>
-      </FormControl>
-
+        <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+      </Flex>
       {fieldTemplate.input !== 'direct' && <InputFieldHandle nodeId={nodeId} fieldName={fieldName} />}
     </InputFieldWrapper>
   );

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

@@ -12,7 +12,8 @@ import { useInputFieldIsConnected } from 'features/nodes/hooks/useInputFieldIsCo
 import { useInputFieldLabel } from 'features/nodes/hooks/useInputFieldLabel';
 import { useInputFieldTemplateTitle } from 'features/nodes/hooks/useInputFieldTemplateTitle';
 import { fieldLabelChanged } from 'features/nodes/store/nodesSlice';
-import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
+import { HANDLE_TOOLTIP_OPEN_DELAY, NO_DRAG_CLASS, NO_FIT_ON_DOUBLE_CLICK_CLASS } from 'features/nodes/types/constants';
+import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -36,10 +37,11 @@ interface Props {
   nodeId: string;
   fieldName: string;
   isInvalid?: boolean;
+  isDragging?: boolean;
 }
 
 export const InputFieldTitle = memo((props: Props) => {
-  const { nodeId, fieldName, isInvalid } = props;
+  const { nodeId, fieldName, isInvalid, isDragging } = props;
   const inputRef = useRef<HTMLInputElement>(null);
   const label = useInputFieldLabel(nodeId, fieldName);
   const fieldTemplateTitle = useInputFieldTemplateTitle(nodeId, fieldName);
@@ -64,29 +66,50 @@ export const InputFieldTitle = memo((props: Props) => {
     inputRef,
   });
 
+  const isDisabled = useMemo(
+    () => (isConnectionInProgress && connectionError !== null && !isConnectionStartField) || isConnected,
+    [isConnectionInProgress, connectionError, isConnectionStartField, isConnected]
+  );
+
+  const onDoubleClick = useCallback(
+    (e: MouseEvent<HTMLParagraphElement>) => {
+      e.stopPropagation();
+      editable.startEditing();
+    },
+    [editable]
+  );
+
   if (!editable.isEditing) {
     return (
       <Tooltip
         label={<InputFieldTooltipContent nodeId={nodeId} fieldName={fieldName} />}
         openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
         placement="top"
+        isDisabled={isDragging}
       >
         <Text
+          className={`${NO_DRAG_CLASS} ${NO_FIT_ON_DOUBLE_CLICK_CLASS}`}
           sx={labelSx}
           noOfLines={1}
           data-is-invalid={isInvalid}
-          data-is-disabled={
-            (isConnectionInProgress && connectionError !== null && !isConnectionStartField) || isConnected
-          }
-          onDoubleClick={editable.startEditing}
+          data-is-disabled={isDisabled}
+          onDoubleClick={onDoubleClick}
         >
           {editable.value}
         </Text>
       </Tooltip>
     );
   }
 
-  return <Input ref={inputRef} variant="outline" {...editable.inputProps} />;
+  return (
+    <Input
+      ref={inputRef}
+      className={NO_DRAG_CLASS}
+      variant="outline"
+      {...editable.inputProps}
+      _focusVisible={{ borderRadius: 'base', h: 'unset', px: 2 }}
+    />
+  );
 });
 
 InputFieldTitle.displayName = 'InputFieldTitle';

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

@@ -1,6 +1,7 @@
 import { CompositeNumberInput } from '@invoke-ai/ui-library';
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
+import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
 import { memo } from 'react';
 
@@ -17,7 +18,7 @@ export const IntegerFieldInput = memo(
         max={max}
         step={step}
         fineStep={fineStep}
-        className="nodrag"
+        className={NO_DRAG_CLASS}
         flex="1 1 0"
       />
     );