feat(ui): regional control canvas feedback

invokeai/frontend/web/package.json

@@ -51,6 +51,7 @@
     }
   },
   "dependencies": {
+    "@chakra-ui/react-use-size": "^2.1.0",
     "@dagrejs/dagre": "^1.1.1",
     "@dagrejs/graphlib": "^2.2.1",
     "@dnd-kit/core": "^6.1.0",

invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx → invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioCanvasPreview.tsx

@@ -2,12 +2,12 @@ import { Flex } from '@invoke-ai/ui-library';
 import { StageComponent } from 'features/regionalPrompts/components/StageComponent';
 import { memo } from 'react';
 
-export const AspectRatioPreview = memo(() => {
+export const AspectRatioCanvasPreview = memo(() => {
   return (
     <Flex w="full" h="full" alignItems="center" justifyContent="center" position="relative">
       <StageComponent asPreview />
     </Flex>
   );
 });
 
-AspectRatioPreview.displayName = 'AspectRatioPreview';
+AspectRatioCanvasPreview.displayName = 'AspectRatioCanvasPreview';

invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioIconPreview.tsx

@@ -0,0 +1,75 @@
+import { useSize } from '@chakra-ui/react-use-size';
+import { Flex, Icon } from '@invoke-ai/ui-library';
+import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
+import { AnimatePresence, motion } from 'framer-motion';
+import { memo, useMemo, useRef } from 'react';
+import { PiFrameCorners } from 'react-icons/pi';
+
+import {
+  BOX_SIZE_CSS_CALC,
+  ICON_CONTAINER_STYLES,
+  ICON_HIGH_CUTOFF,
+  ICON_LOW_CUTOFF,
+  MOTION_ICON_ANIMATE,
+  MOTION_ICON_EXIT,
+  MOTION_ICON_INITIAL,
+} from './constants';
+
+export const AspectRatioIconPreview = memo(() => {
+  const ctx = useImageSizeContext();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerSize = useSize(containerRef);
+
+  const shouldShowIcon = useMemo(
+    () => ctx.aspectRatioState.value < ICON_HIGH_CUTOFF && ctx.aspectRatioState.value > ICON_LOW_CUTOFF,
+    [ctx.aspectRatioState.value]
+  );
+
+  const { width, height } = useMemo(() => {
+    if (!containerSize) {
+      return { width: 0, height: 0 };
+    }
+
+    let width = ctx.width;
+    let height = ctx.height;
+
+    if (ctx.width > ctx.height) {
+      width = containerSize.width;
+      height = width / ctx.aspectRatioState.value;
+    } else {
+      height = containerSize.height;
+      width = height * ctx.aspectRatioState.value;
+    }
+
+    return { width, height };
+  }, [containerSize, ctx.width, ctx.height, ctx.aspectRatioState.value]);
+
+  return (
+    <Flex w="full" h="full" alignItems="center" justifyContent="center" ref={containerRef}>
+      <Flex
+        bg="blackAlpha.400"
+        borderRadius="base"
+        width={`${width}px`}
+        height={`${height}px`}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <AnimatePresence>
+          {shouldShowIcon && (
+            <Flex
+              as={motion.div}
+              initial={MOTION_ICON_INITIAL}
+              animate={MOTION_ICON_ANIMATE}
+              exit={MOTION_ICON_EXIT}
+              style={ICON_CONTAINER_STYLES}
+            >
+              <Icon as={PiFrameCorners} color="base.700" boxSize={BOX_SIZE_CSS_CALC} />
+            </Flex>
+          )}
+        </AnimatePresence>
+      </Flex>
+    </Flex>
+  );
+});
+
+AspectRatioIconPreview.displayName = 'AspectRatioIconPreview';

invokeai/frontend/web/src/features/parameters/components/ImageSize/ImageSize.tsx

@@ -1,6 +1,5 @@
 import type { FormLabelProps } from '@invoke-ai/ui-library';
 import { Flex, FormControlGroup } from '@invoke-ai/ui-library';
-import { AspectRatioPreview } from 'features/parameters/components/ImageSize/AspectRatioPreview';
 import { AspectRatioSelect } from 'features/parameters/components/ImageSize/AspectRatioSelect';
 import type { ImageSizeContextInnerValue } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { ImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
@@ -13,10 +12,11 @@ import { memo } from 'react';
 type ImageSizeProps = ImageSizeContextInnerValue & {
   widthComponent: ReactNode;
   heightComponent: ReactNode;
+  previewComponent: ReactNode;
 };
 
 export const ImageSize = memo((props: ImageSizeProps) => {
-  const { widthComponent, heightComponent, ...ctx } = props;
+  const { widthComponent, heightComponent, previewComponent, ...ctx } = props;
   return (
     <ImageSizeContext.Provider value={ctx}>
       <Flex gap={4} alignItems="center">
@@ -33,7 +33,7 @@ export const ImageSize = memo((props: ImageSizeProps) => {
           </FormControlGroup>
         </Flex>
         <Flex w="108px" h="108px" flexShrink={0} flexGrow={0}>
-          <AspectRatioPreview />
+          {previewComponent}
         </Flex>
       </Flex>
     </ImageSizeContext.Provider>

invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts

@@ -1,7 +1,29 @@
 import type { ComboboxOption } from '@invoke-ai/ui-library';
 
 import type { AspectRatioID, AspectRatioState } from './types';
-
+// When the aspect ratio is between these two values, we show the icon (experimentally determined)
+export const ICON_LOW_CUTOFF = 0.23;
+export const ICON_HIGH_CUTOFF = 1 / ICON_LOW_CUTOFF;
+const ICON_SIZE_PX = 64;
+const ICON_PADDING_PX = 16;
+export const BOX_SIZE_CSS_CALC = `min(${ICON_SIZE_PX}px, calc(100% - ${ICON_PADDING_PX}px))`;
+export const MOTION_ICON_INITIAL = {
+  opacity: 0,
+};
+export const MOTION_ICON_ANIMATE = {
+  opacity: 1,
+  transition: { duration: 0.1 },
+};
+export const MOTION_ICON_EXIT = {
+  opacity: 0,
+  transition: { duration: 0.1 },
+};
+export const ICON_CONTAINER_STYLES = {
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
 export const ASPECT_RATIO_OPTIONS: ComboboxOption[] = [
   { label: 'Free' as const, value: 'Free' },
   { label: '16:9' as const, value: '16:9' },

invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx

@@ -75,7 +75,7 @@ export const RPLayerListItem = memo(({ layerId }: Props) => {
           <RPLayerSettingsPopover layerId={layerId} />
           <RPLayerMenu layerId={layerId} />
         </Flex>
-        <AddPromptButtons layerId={layerId} />
+        {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
         {hasPositivePrompt && <RPLayerPositivePrompt layerId={layerId} />}
         {hasNegativePrompt && <RPLayerNegativePrompt layerId={layerId} />}
         {hasIPAdapters && <RPLayerIPAdapterList layerId={layerId} />}

invokeai/frontend/web/src/features/regionalPrompts/components/StageComponent.tsx

@@ -6,6 +6,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useMouseEvents } from 'features/regionalPrompts/hooks/mouseEventHooks';
 import {
   $cursorPosition,
+  $isMouseOver,
   $lastMouseDownPos,
   $tool,
   isVectorMaskLayer,
@@ -14,7 +15,7 @@ import {
   layerTranslated,
   selectRegionalPromptsSlice,
 } from 'features/regionalPrompts/store/regionalPromptsSlice';
-import { renderers } from 'features/regionalPrompts/util/renderers';
+import { debouncedRenderers, renderers as normalRenderers } from 'features/regionalPrompts/util/renderers';
 import Konva from 'konva';
 import type { IRect } from 'konva/lib/types';
 import type { MutableRefObject } from 'react';
@@ -49,18 +50,10 @@ const useStageRenderer = (
   const { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave, onMouseWheel } = useMouseEvents();
   const cursorPosition = useStore($cursorPosition);
   const lastMouseDownPos = useStore($lastMouseDownPos);
+  const isMouseOver = useStore($isMouseOver);
   const selectedLayerIdColor = useAppSelector(selectSelectedLayerColor);
-
-  const renderLayers = useMemo(() => (asPreview ? renderers.layersDebounced : renderers.layers), [asPreview]);
-  const renderToolPreview = useMemo(
-    () => (asPreview ? renderers.toolPreviewDebounced : renderers.toolPreview),
-    [asPreview]
-  );
-  const renderBbox = useMemo(() => (asPreview ? renderers.bboxDebounced : renderers.bbox), [asPreview]);
-  const renderBackground = useMemo(
-    () => (asPreview ? renderers.backgroundDebounced : renderers.background),
-    [asPreview]
-  );
+  const layerIds = useMemo(() => state.layers.map((l) => l.id), [state.layers]);
+  const renderers = useMemo(() => (asPreview ? debouncedRenderers : normalRenderers), [asPreview]);
 
   const onLayerPosChanged = useCallback(
     (layerId: string, x: number, y: number) => {
@@ -147,17 +140,19 @@ const useStageRenderer = (
   }, [stageRef, width, height, wrapper]);
 
   useLayoutEffect(() => {
-    log.trace('Rendering brush preview');
+    log.trace('Rendering tool preview');
     if (asPreview) {
+      // Preview should not display tool
       return;
     }
-    renderToolPreview(
+    renderers.renderToolPreview(
       stageRef.current,
       tool,
       selectedLayerIdColor,
       state.globalMaskLayerOpacity,
       cursorPosition,
       lastMouseDownPos,
+      isMouseOver,
       state.brushSize
     );
   }, [
@@ -168,30 +163,38 @@ const useStageRenderer = (
     state.globalMaskLayerOpacity,
     cursorPosition,
     lastMouseDownPos,
+    isMouseOver,
     state.brushSize,
-    renderToolPreview,
+    renderers,
   ]);
 
   useLayoutEffect(() => {
     log.trace('Rendering layers');
-    renderLayers(stageRef.current, state.layers, state.globalMaskLayerOpacity, tool, onLayerPosChanged);
-  }, [stageRef, state.layers, state.globalMaskLayerOpacity, tool, onLayerPosChanged, renderLayers]);
+    renderers.renderLayers(stageRef.current, state.layers, state.globalMaskLayerOpacity, tool, onLayerPosChanged);
+  }, [stageRef, state.layers, state.globalMaskLayerOpacity, tool, onLayerPosChanged, renderers]);
 
   useLayoutEffect(() => {
     log.trace('Rendering bbox');
     if (asPreview) {
+      // Preview should not display bboxes
       return;
     }
-    renderBbox(stageRef.current, state.layers, state.selectedLayerId, tool, onBboxChanged, onBboxMouseDown);
-  }, [stageRef, asPreview, state.layers, state.selectedLayerId, tool, onBboxChanged, onBboxMouseDown, renderBbox]);
+    renderers.renderBbox(stageRef.current, state.layers, state.selectedLayerId, tool, onBboxChanged, onBboxMouseDown);
+  }, [stageRef, asPreview, state.layers, state.selectedLayerId, tool, onBboxChanged, onBboxMouseDown, renderers]);
 
   useLayoutEffect(() => {
     log.trace('Rendering background');
     if (asPreview) {
+      // The preview should not have a background
       return;
     }
-    renderBackground(stageRef.current, width, height);
-  }, [stageRef, asPreview, width, height, renderBackground]);
+    renderers.renderBackground(stageRef.current, width, height);
+  }, [stageRef, asPreview, width, height, renderers]);
+
+  useLayoutEffect(() => {
+    log.trace('Arranging layers');
+    renderers.arrangeLayers(stageRef.current, layerIds);
+  }, [stageRef, layerIds, renderers]);
 };
 
 type Props = {