Feat(canvas): Replace Rectangle tool with new Shapes tool

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

@@ -714,8 +714,8 @@
                 "desc": "Select the move tool."
             },
             "selectRectTool": {
-                "title": "Rect Tool",
-                "desc": "Select the rect tool."
+                "title": "Shapes Tool",
+                "desc": "Select the shapes tool."
             },
             "selectLassoTool": {
                 "title": "Lasso Tool",
@@ -2835,9 +2835,16 @@
             "polygon": "Polygon",
             "polygonHint": "Click to add points, click the first point to close."
         },
+        "shape": {
+            "rect": "Rect",
+            "oval": "Oval",
+            "polygon": "Polygon",
+            "freehand": "Freehand"
+        },
         "tool": {
             "brush": "Brush",
             "eraser": "Eraser",
+            "shapes": "Shapes",
             "rectangle": "Rectangle",
             "lasso": "Lasso",
             "gradient": "Gradient",

invokeai/frontend/web/src/features/controlLayers/components/Tool/GradientIcons.tsx

@@ -32,23 +32,23 @@ export const GradientLinearIcon = memo(() => {
   const id = useId();
   const gradientId = `${id}-gradient-linear-diagonal`;
   return (
-    <Box as="svg" viewBox="0 0 24 24" boxSize="22px" aria-hidden focusable={false} display="block">
+    <Box as="svg" viewBox="0 0 20 20" aria-hidden focusable={false} display="block">
       <defs>
         <linearGradient id={gradientId} x1="0" y1="1" x2="1" y2="0">
           <stop offset="0%" stopColor="currentColor" stopOpacity="0.0" />
           <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
         </linearGradient>
       </defs>
       <rect
-        x="4"
-        y="4"
+        x="2"
+        y="2"
         width="16"
         height="16"
         rx="2"
         fill={`url(#${gradientId})`}
         stroke="currentColor"
         strokeOpacity="0.9"
-        strokeWidth="1"
+        strokeWidth="1.2"
       />
     </Box>
   );
@@ -59,21 +59,21 @@ export const GradientRadialIcon = memo(() => {
   const id = useId();
   const gradientId = `${id}-gradient-radial`;
   return (
-    <Box as="svg" viewBox="0 0 24 24" boxSize="22px" aria-hidden focusable={false} display="block">
+    <Box as="svg" viewBox="0 0 20 20" aria-hidden focusable={false} display="block">
       <defs>
         <radialGradient id={gradientId} cx="0.5" cy="0.5" r="0.5">
           <stop offset="0%" stopColor="currentColor" stopOpacity="0.0" />
           <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
         </radialGradient>
       </defs>
       <circle
-        cx="12"
-        cy="12"
+        cx="10"
+        cy="10"
         r="8"
         fill={`url(#${gradientId})`}
         stroke="currentColor"
         strokeOpacity="0.9"
-        strokeWidth="1"
+        strokeWidth="1.2"
       />
     </Box>
   );

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx

@@ -5,7 +5,7 @@ import { ToolColorPickerButton } from 'features/controlLayers/components/Tool/To
 import { ToolGradientButton } from 'features/controlLayers/components/Tool/ToolGradientButton';
 import { ToolLassoButton } from 'features/controlLayers/components/Tool/ToolLassoButton';
 import { ToolMoveButton } from 'features/controlLayers/components/Tool/ToolMoveButton';
-import { ToolRectButton } from 'features/controlLayers/components/Tool/ToolRectButton';
+import { ToolShapesButton } from 'features/controlLayers/components/Tool/ToolShapesButton';
 import { ToolTextButton } from 'features/controlLayers/components/Tool/ToolTextButton';
 import React from 'react';
 
@@ -18,7 +18,7 @@ export const ToolChooser: React.FC = () => {
       <ButtonGroup isAttached orientation="vertical">
         <ToolBrushButton />
         <ToolEraserButton />
-        <ToolRectButton />
+        <ToolShapesButton />
         <ToolGradientButton />
         <ToolTextButton />
         <ToolLassoButton />

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolShapeTypeToggle.tsx

@@ -0,0 +1,65 @@
+import { ButtonGroup, IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectShapeType, settingsShapeTypeChanged } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiCircleBold, PiPolygonBold, PiRectangleBold, PiScribbleLoopBold } from 'react-icons/pi';
+
+export const ToolShapeTypeToggle = memo(() => {
+  const { t } = useTranslation();
+  const shapeType = useAppSelector(selectShapeType);
+  const dispatch = useAppDispatch();
+
+  const onRectClick = useCallback(() => dispatch(settingsShapeTypeChanged('rect')), [dispatch]);
+  const onOvalClick = useCallback(() => dispatch(settingsShapeTypeChanged('oval')), [dispatch]);
+  const onPolygonClick = useCallback(() => dispatch(settingsShapeTypeChanged('polygon')), [dispatch]);
+  const onFreehandClick = useCallback(() => dispatch(settingsShapeTypeChanged('freehand')), [dispatch]);
+
+  const rectLabel = t('controlLayers.shape.rect', { defaultValue: 'Rect' });
+  const ovalLabel = t('controlLayers.shape.oval', { defaultValue: 'Oval' });
+  const polygonLabel = t('controlLayers.shape.polygon', { defaultValue: 'Polygon' });
+  const freehandLabel = t('controlLayers.shape.freehand', { defaultValue: 'Freehand' });
+
+  return (
+    <ButtonGroup isAttached size="sm">
+      <Tooltip label={rectLabel}>
+        <IconButton
+          aria-label={rectLabel}
+          icon={<PiRectangleBold />}
+          colorScheme={shapeType === 'rect' ? 'invokeBlue' : 'base'}
+          variant="solid"
+          onClick={onRectClick}
+        />
+      </Tooltip>
+      <Tooltip label={ovalLabel}>
+        <IconButton
+          aria-label={ovalLabel}
+          icon={<PiCircleBold />}
+          colorScheme={shapeType === 'oval' ? 'invokeBlue' : 'base'}
+          variant="solid"
+          onClick={onOvalClick}
+        />
+      </Tooltip>
+      <Tooltip label={polygonLabel}>
+        <IconButton
+          aria-label={polygonLabel}
+          icon={<PiPolygonBold />}
+          colorScheme={shapeType === 'polygon' ? 'invokeBlue' : 'base'}
+          variant="solid"
+          onClick={onPolygonClick}
+        />
+      </Tooltip>
+      <Tooltip label={freehandLabel}>
+        <IconButton
+          aria-label={freehandLabel}
+          icon={<PiScribbleLoopBold />}
+          colorScheme={shapeType === 'freehand' ? 'invokeBlue' : 'base'}
+          variant="solid"
+          onClick={onFreehandClick}
+        />
+      </Tooltip>
+    </ButtonGroup>
+  );
+});
+
+ToolShapeTypeToggle.displayName = 'ToolShapeTypeToggle';

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx → invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolShapesButton.tsx

@@ -3,32 +3,33 @@ import { useSelectTool, useToolIsSelected } from 'features/controlLayers/compone
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiRectangleBold } from 'react-icons/pi';
+import { PiShapesBold } from 'react-icons/pi';
 
-export const ToolRectButton = memo(() => {
+export const ToolShapesButton = memo(() => {
   const { t } = useTranslation();
   const isSelected = useToolIsSelected('rect');
-  const selectRect = useSelectTool('rect');
+  const selectShapes = useSelectTool('rect');
+  const label = t('controlLayers.tool.shapes', { defaultValue: 'Shapes' });
 
   useRegisteredHotkeys({
     id: 'selectRectTool',
     category: 'canvas',
-    callback: selectRect,
+    callback: selectShapes,
     options: { enabled: !isSelected },
-    dependencies: [isSelected, selectRect],
+    dependencies: [isSelected, selectShapes],
   });
 
   return (
-    <Tooltip label={`${t('controlLayers.tool.rectangle')} (U)`} placement="end">
+    <Tooltip label={`${label} (U)`} placement="end">
       <IconButton
-        aria-label={`${t('controlLayers.tool.rectangle')} (U)`}
-        icon={<PiRectangleBold />}
+        aria-label={`${label} (U)`}
+        icon={<PiShapesBold />}
         colorScheme={isSelected ? 'invokeBlue' : 'base'}
         variant="solid"
-        onClick={selectRect}
+        onClick={selectShapes}
       />
     </Tooltip>
   );
 });
 
-ToolRectButton.displayName = 'ToolRectButton';
+ToolShapesButton.displayName = 'ToolShapesButton';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -7,6 +7,7 @@ import { ToolGradientClipToggle } from 'features/controlLayers/components/Tool/T
 import { ToolGradientModeToggle } from 'features/controlLayers/components/Tool/ToolGradientModeToggle';
 import { ToolLassoModeToggle } from 'features/controlLayers/components/Tool/ToolLassoModeToggle';
 import { ToolOptionsRowContainer } from 'features/controlLayers/components/Tool/ToolOptionsRowContainer';
+import { ToolShapeTypeToggle } from 'features/controlLayers/components/Tool/ToolShapeTypeToggle';
 import { ToolWidthPicker } from 'features/controlLayers/components/Tool/ToolWidthPicker';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
 import { CanvasToolbarFitBboxToMasksButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton';
@@ -32,6 +33,7 @@ import { memo, useMemo } from 'react';
 export const CanvasToolbar = memo(() => {
   const isBrushSelected = useToolIsSelected('brush');
   const isEraserSelected = useToolIsSelected('eraser');
+  const isShapeSelected = useToolIsSelected('rect');
   const isTextSelected = useToolIsSelected('text');
   const isLassoSelected = useToolIsSelected('lasso');
   const isGradientSelected = useToolIsSelected('gradient');
@@ -51,9 +53,25 @@ export const CanvasToolbar = memo(() => {
   useCanvasToggleBboxHotkey();
 
   return (
-    <Flex w="full" gap={2} alignItems="center" px={2}>
+    <Flex
+      w="full"
+      gap={2}
+      alignItems="center"
+      px={2}
+      sx={{
+        '& svg': {
+          width: '16px',
+          height: '16px',
+        },
+      }}
+    >
       <ToolOptionsRowContainer gap={4} alignItems="center" h="full">
         <ToolFillColorPicker />
+        {isShapeSelected && (
+          <Box ms={2} mt="-2px" display="flex" alignItems="center" gap={2}>
+            <ToolShapeTypeToggle />
+          </Box>
+        )}
         {isGradientSelected && (
           <Box ms={2} mt="-2px" display="flex" alignItems="center" gap={2}>
             <ToolGradientClipToggle />

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer.ts

@@ -9,6 +9,8 @@ import { CanvasObjectEraserLineWithPressure } from 'features/controlLayers/konva
 import { CanvasObjectGradient } from 'features/controlLayers/konva/CanvasObject/CanvasObjectGradient';
 import { CanvasObjectImage } from 'features/controlLayers/konva/CanvasObject/CanvasObjectImage';
 import { CanvasObjectLasso } from 'features/controlLayers/konva/CanvasObject/CanvasObjectLasso';
+import { CanvasObjectOval } from 'features/controlLayers/konva/CanvasObject/CanvasObjectOval';
+import { CanvasObjectPolygon } from 'features/controlLayers/konva/CanvasObject/CanvasObjectPolygon';
 import { CanvasObjectRect } from 'features/controlLayers/konva/CanvasObject/CanvasObjectRect';
 import type { AnyObjectRenderer, AnyObjectState } from 'features/controlLayers/konva/CanvasObject/types';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
@@ -83,6 +85,20 @@ export class CanvasEntityBufferObjectRenderer extends CanvasModuleBase {
     this.subscriptions.add(
       this.manager.tool.$tool.listen(() => {
         if (this.hasBuffer() && !this.manager.$isBusy.get()) {
+          const isTemporaryShapesViewSwitch =
+            this.manager.tool.tools.rect.hasSuspendableSession() &&
+            ((this.manager.tool.$tool.get() === 'view' && this.manager.tool.$toolBuffer.get() === 'rect') ||
+              this.manager.tool.$tool.get() === 'rect');
+
+          if (isTemporaryShapesViewSwitch) {
+            return;
+          }
+
+          if (this.state?.type === 'polygon' && this.state.previewPoint) {
+            this.clearBuffer();
+            return;
+          }
+
           this.commitBuffer();
         }
       })
@@ -153,6 +169,24 @@ export class CanvasEntityBufferObjectRenderer extends CanvasModuleBase {
         this.konva.group.add(this.renderer.konva.group);
       }
 
+      didRender = this.renderer.update(this.state, true);
+    } else if (this.state.type === 'oval') {
+      assert(this.renderer instanceof CanvasObjectOval || !this.renderer);
+
+      if (!this.renderer) {
+        this.renderer = new CanvasObjectOval(this.state, this);
+        this.konva.group.add(this.renderer.konva.group);
+      }
+
+      didRender = this.renderer.update(this.state, true);
+    } else if (this.state.type === 'polygon') {
+      assert(this.renderer instanceof CanvasObjectPolygon || !this.renderer);
+
+      if (!this.renderer) {
+        this.renderer = new CanvasObjectPolygon(this.state, this);
+        this.konva.group.add(this.renderer.konva.group);
+      }
+
       didRender = this.renderer.update(this.state, true);
     } else if (this.state.type === 'lasso') {
       assert(this.renderer instanceof CanvasObjectLasso || !this.renderer);
@@ -240,28 +274,40 @@ export class CanvasEntityBufferObjectRenderer extends CanvasModuleBase {
 
     this.log.trace({ buffer: this.renderer.repr() }, 'Committing buffer');
 
+    let committedState = this.state;
+
+    // Polygon previews render an outline while they are still live in the buffer.
+    // Clear that preview state before adopting the renderer into the persistent object group.
+    if (committedState.type === 'polygon' && this.renderer instanceof CanvasObjectPolygon) {
+      committedState = { ...committedState, previewPoint: undefined };
+      this.state = null;
+      this.renderer.update(committedState, true);
+    }
+
     // Move the buffer to the persistent objects group/renderers
     this.parent.renderer.adoptObjectRenderer(this.renderer);
 
     if (pushToState) {
       const entityIdentifier = this.parent.entityIdentifier;
-      switch (this.state.type) {
+      switch (committedState.type) {
         case 'brush_line':
         case 'brush_line_with_pressure':
-          this.manager.stateApi.addBrushLine({ entityIdentifier, brushLine: this.state });
+          this.manager.stateApi.addBrushLine({ entityIdentifier, brushLine: committedState });
           break;
         case 'eraser_line':
         case 'eraser_line_with_pressure':
-          this.manager.stateApi.addEraserLine({ entityIdentifier, eraserLine: this.state });
+          this.manager.stateApi.addEraserLine({ entityIdentifier, eraserLine: committedState });
           break;
         case 'rect':
-          this.manager.stateApi.addRect({ entityIdentifier, rect: this.state });
+        case 'oval':
+        case 'polygon':
+          this.manager.stateApi.addShape({ entityIdentifier, shape: committedState });
           break;
         case 'lasso':
-          this.manager.stateApi.addLasso({ entityIdentifier, lasso: this.state });
+          this.manager.stateApi.addLasso({ entityIdentifier, lasso: committedState });
           break;
         case 'gradient':
-          this.manager.stateApi.addGradient({ entityIdentifier, gradient: this.state });
+          this.manager.stateApi.addGradient({ entityIdentifier, gradient: committedState });
           break;
       }
     }