fix(ui): add separate wrapper components for notes and current image nodes that do not need invocation node context

Author: psychedelicious

invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx

@@ -6,7 +6,7 @@ import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { DndImage } from 'features/dnd/DndImage';
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
-import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
+import NonInvocationNodeWrapper from 'features/nodes/components/flow/nodes/common/NonInvocationNodeWrapper';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
@@ -58,13 +58,14 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
   }, []);
   const { t } = useTranslation();
   return (
-    <NodeWrapper nodeId={props.nodeProps.id} selected={props.nodeProps.selected} width={384}>
+    <NonInvocationNodeWrapper nodeId={props.nodeProps.id} selected={props.nodeProps.selected} width={384}>
       <Flex
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={DRAG_HANDLE_CLASSNAME}
         position="relative"
         flexDirection="column"
+        aspectRatio="1/1"
       >
         <Flex layerStyle="nodeHeader" borderTopRadius="base" alignItems="center" justifyContent="center" h={8}>
           <Text fontSize="sm" fontWeight="semibold" color="base.200">
@@ -80,7 +81,7 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
           )}
         </Flex>
       </Flex>
-    </NodeWrapper>
+    </NonInvocationNodeWrapper>
   );
 };
 

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx

@@ -3,8 +3,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import type { Node, NodeProps } from '@xyflow/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
-import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
-import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
+import NonInvocationNodeTitle from 'features/nodes/components/flow/nodes/common/NonInvocationNodeTitle';
+import NonInvocationNodeWrapper from 'features/nodes/components/flow/nodes/common/NonInvocationNodeWrapper';
 import { notesNodeValueChanged } from 'features/nodes/store/nodesSlice';
 import { selectNodes } from 'features/nodes/store/selectors';
 import { NO_DRAG_CLASS, NO_PAN_CLASS } from 'features/nodes/types/constants';
@@ -34,7 +34,7 @@ const NotesNode = (props: NodeProps<Node<NotesNodeData>>) => {
   }
 
   return (
-    <NodeWrapper nodeId={nodeId} selected={selected}>
+    <NonInvocationNodeWrapper nodeId={nodeId} selected={selected}>
       <Flex
         layerStyle="nodeHeader"
         borderTopRadius="base"
@@ -44,7 +44,7 @@ const NotesNode = (props: NodeProps<Node<NotesNodeData>>) => {
         h={8}
       >
         <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
-        <NodeTitle nodeId={nodeId} title="Notes" />
+        <NonInvocationNodeTitle nodeId={nodeId} title="Notes" />
         <Box minW={8} />
       </Flex>
       {isOpen && (
@@ -73,7 +73,7 @@ const NotesNode = (props: NodeProps<Node<NotesNodeData>>) => {
           </Flex>
         </>
       )}
-    </NodeWrapper>
+    </NonInvocationNodeWrapper>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import type { ChakraProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Box, useGlobalMenuClose } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useInvocationNodeContext } from 'features/nodes/components/flow/nodes/Invocation/context';
@@ -12,107 +12,15 @@ import { zNodeStatus } from 'features/nodes/types/invocation';
 import type { MouseEvent, PropsWithChildren } from 'react';
 import { memo, useCallback } from 'react';
 
+import { containerSx, inProgressSx, shadowsSx } from './shared';
+
 type NodeWrapperProps = PropsWithChildren & {
   nodeId: string;
   selected: boolean;
   width?: ChakraProps['w'];
   isMissingTemplate?: boolean;
 };
 
-// Certain CSS transitions are disabled as a performance optimization - they can cause massive slowdowns in large
-// workflows even when the animations are GPU-accelerated CSS.
-
-const containerSx: SystemStyleObject = {
-  h: 'full',
-  position: 'relative',
-  borderRadius: 'base',
-  transitionProperty: 'none',
-  cursor: 'grab',
-  '--border-color': 'var(--invoke-colors-base-500)',
-  '--border-color-selected': 'var(--invoke-colors-blue-300)',
-  '--header-bg-color': 'var(--invoke-colors-base-900)',
-  '&[data-status="warning"]': {
-    '--border-color': 'var(--invoke-colors-warning-500)',
-    '--border-color-selected': 'var(--invoke-colors-warning-500)',
-    '--header-bg-color': 'var(--invoke-colors-warning-700)',
-  },
-  '&[data-status="error"]': {
-    '--border-color': 'var(--invoke-colors-error-500)',
-    '--border-color-selected': 'var(--invoke-colors-error-500)',
-    '--header-bg-color': 'var(--invoke-colors-error-700)',
-  },
-  // The action buttons are hidden by default and shown on hover
-  '& .node-selection-overlay': {
-    display: 'block',
-    position: 'absolute',
-    top: 0,
-    insetInlineEnd: 0,
-    bottom: 0,
-    insetInlineStart: 0,
-    borderRadius: 'base',
-    transitionProperty: 'none',
-    pointerEvents: 'none',
-    shadow: '0 0 0 1px var(--border-color)',
-  },
-  '&[data-is-mouse-over-node="true"] .node-selection-overlay': {
-    display: 'block',
-  },
-  '&[data-is-mouse-over-form-field="true"] .node-selection-overlay': {
-    display: 'block',
-    bg: 'invokeBlueAlpha.100',
-  },
-  _hover: {
-    '& .node-selection-overlay': {
-      display: 'block',
-      shadow: '0 0 0 1px var(--border-color-selected)',
-    },
-    '&[data-is-selected="true"] .node-selection-overlay': {
-      display: 'block',
-      shadow: '0 0 0 2px var(--border-color-selected)',
-    },
-  },
-  '&[data-is-selected="true"] .node-selection-overlay': {
-    display: 'block',
-    shadow: '0 0 0 2px var(--border-color-selected)',
-  },
-  '&[data-is-editor-locked="true"]': {
-    '& *': {
-      cursor: 'not-allowed',
-      pointerEvents: 'none',
-    },
-  },
-};
-
-const shadowsSx: SystemStyleObject = {
-  position: 'absolute',
-  top: 0,
-  insetInlineEnd: 0,
-  bottom: 0,
-  insetInlineStart: 0,
-  borderRadius: 'base',
-  pointerEvents: 'none',
-  zIndex: -1,
-  shadow: 'var(--invoke-shadows-xl), var(--invoke-shadows-base), var(--invoke-shadows-base)',
-};
-
-const inProgressSx: SystemStyleObject = {
-  position: 'absolute',
-  top: 0,
-  insetInlineEnd: 0,
-  bottom: 0,
-  insetInlineStart: 0,
-  borderRadius: 'md',
-  pointerEvents: 'none',
-  transitionProperty: 'none',
-  opacity: 0.7,
-  zIndex: -1,
-  display: 'none',
-  shadow: '0 0 0 2px var(--invoke-colors-yellow-400), 0 0 20px 2px var(--invoke-colors-orange-700)',
-  '&[data-is-in-progress="true"]': {
-    display: 'block',
-  },
-};
-
 const NodeWrapper = (props: NodeWrapperProps) => {
   const { nodeId, width, children, isMissingTemplate, selected } = props;
   const ctx = useInvocationNodeContext();

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NonInvocationNodeTitle.tsx

@@ -0,0 +1,69 @@
+import { Flex, Input, Text } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useEditable } from 'common/hooks/useEditable';
+import { nodeLabelChanged } from 'features/nodes/store/nodesSlice';
+import { selectNodes } from 'features/nodes/store/selectors';
+import { NO_FIT_ON_DOUBLE_CLICK_CLASS } from 'features/nodes/types/constants';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  nodeId: string;
+  title: string;
+};
+
+const NonInvocationNodeTitle = ({ nodeId, title }: Props) => {
+  const dispatch = useAppDispatch();
+  const selectNodeLabel = useMemo(
+    () =>
+      createSelector(selectNodes, (nodes) => {
+        const node = nodes.find((n) => n.id === nodeId);
+        return node?.data?.label ?? '';
+      }),
+    [nodeId]
+  );
+  const label = useAppSelector(selectNodeLabel);
+  const { t } = useTranslation();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onChange = useCallback(
+    (label: string) => {
+      dispatch(nodeLabelChanged({ nodeId, label }));
+    },
+    [dispatch, nodeId]
+  );
+
+  const editable = useEditable({
+    value: label || title || t('nodes.problemSettingTitle'),
+    defaultValue: title || t('nodes.problemSettingTitle'),
+    onChange,
+    inputRef,
+  });
+
+  return (
+    <Flex overflow="hidden" w="full" h="full" alignItems="center" justifyContent="center">
+      {!editable.isEditing && (
+        <Text
+          className={NO_FIT_ON_DOUBLE_CLICK_CLASS}
+          fontWeight="semibold"
+          color="base.200"
+          onDoubleClick={editable.startEditing}
+          noOfLines={1}
+        >
+          {editable.value}
+        </Text>
+      )}
+      {editable.isEditing && (
+        <Input
+          ref={inputRef}
+          {...editable.inputProps}
+          variant="outline"
+          _focusVisible={{ borderRadius: 'base', h: 'unset' }}
+        />
+      )}
+    </Flex>
+  );
+};
+
+export default memo(NonInvocationNodeTitle);

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NonInvocationNodeWrapper.tsx

@@ -0,0 +1,85 @@
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Box, useGlobalMenuClose } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useIsWorkflowEditorLocked } from 'features/nodes/hooks/useIsWorkflowEditorLocked';
+import { useMouseOverFormField, useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
+import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
+import { useZoomToNode } from 'features/nodes/hooks/useZoomToNode';
+import { selectNodeOpacity } from 'features/nodes/store/workflowSettingsSlice';
+import { DRAG_HANDLE_CLASSNAME, NO_FIT_ON_DOUBLE_CLICK_CLASS, NODE_WIDTH } from 'features/nodes/types/constants';
+import { zNodeStatus } from 'features/nodes/types/invocation';
+import type { MouseEvent, PropsWithChildren } from 'react';
+import { memo, useCallback } from 'react';
+
+import { containerSx, inProgressSx, shadowsSx } from './shared';
+
+type NonInvocationNodeWrapperProps = PropsWithChildren & {
+  nodeId: string;
+  selected: boolean;
+  width?: ChakraProps['w'];
+  isMissingTemplate?: boolean;
+};
+
+const NonInvocationNodeWrapper = (props: NonInvocationNodeWrapperProps) => {
+  const { nodeId, width, children, isMissingTemplate, selected } = props;
+  // Skip needsUpdate check since we don't have invocation context
+  const mouseOverNode = useMouseOverNode(nodeId);
+  const mouseOverFormField = useMouseOverFormField(nodeId);
+  const zoomToNode = useZoomToNode(nodeId);
+  const isLocked = useIsWorkflowEditorLocked();
+
+  const executionState = useNodeExecutionState(nodeId);
+  const isInProgress = executionState?.status === zNodeStatus.enum.IN_PROGRESS;
+
+  const opacity = useAppSelector(selectNodeOpacity);
+  const globalMenu = useGlobalMenuClose();
+
+  const onDoubleClick = useCallback(
+    (e: MouseEvent) => {
+      if (!(e.target instanceof HTMLElement)) {
+        // We have to manually narrow the type here thanks to a TS quirk
+        return;
+      }
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLSelectElement ||
+        e.target instanceof HTMLButtonElement ||
+        e.target instanceof HTMLAnchorElement
+      ) {
+        // Don't fit the view if the user is editing a text field, select, button, or link
+        return;
+      }
+      if (e.target.closest(`.${NO_FIT_ON_DOUBLE_CLICK_CLASS}`) !== null) {
+        // This target is marked as not fitting the view on double click
+        return;
+      }
+      zoomToNode();
+    },
+    [zoomToNode]
+  );
+
+  return (
+    <Box
+      onClick={globalMenu.onCloseGlobal}
+      onDoubleClick={onDoubleClick}
+      onMouseOver={mouseOverNode.handleMouseOver}
+      onMouseOut={mouseOverNode.handleMouseOut}
+      className={DRAG_HANDLE_CLASSNAME}
+      sx={containerSx}
+      width={width || NODE_WIDTH}
+      opacity={opacity}
+      data-is-editor-locked={isLocked}
+      data-is-selected={selected}
+      data-is-mouse-over-form-field={mouseOverFormField.isMouseOverFormField}
+      data-status={isMissingTemplate ? 'error' : undefined}
+    >
+      <Box sx={shadowsSx} />
+      <Box sx={inProgressSx} data-is-in-progress={isInProgress} />
+      {children}
+      <Box className="node-selection-overlay" />
+    </Box>
+  );
+};
+
+export default memo(NonInvocationNodeWrapper);