Feat(UI): Add linear and radial gradient tools to canvas

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

@@ -2433,10 +2433,16 @@
             "horizontal": "Horizontal",
             "diagonal": "Diagonal"
         },
+        "gradient": {
+            "linear": "Linear",
+            "radial": "Radial",
+            "clip": "Clip Gradient"
+        },
         "tool": {
             "brush": "Brush",
             "eraser": "Eraser",
             "rectangle": "Rectangle",
+            "gradient": "Gradient",
             "bbox": "Bbox",
             "move": "Move",
             "view": "View",

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

@@ -0,0 +1,81 @@
+import { Box } from '@invoke-ai/ui-library';
+import { memo, useId } from 'react';
+
+export const GradientToolIcon = memo(() => {
+  const id = useId();
+  const gradientId = `${id}-gradient-tool-horizontal`;
+  return (
+    <Box as="svg" viewBox="0 0 24 24" boxSize={6} aria-hidden focusable={false} display="block">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0.5" x2="1" y2="0.5">
+          <stop offset="0%" stopColor="currentColor" stopOpacity="0.0" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
+        </linearGradient>
+      </defs>
+      <rect
+        x="3"
+        y="6"
+        width="18"
+        height="12"
+        rx="2"
+        fill={`url(#${gradientId})`}
+        stroke="currentColor"
+        strokeOpacity="0.9"
+        strokeWidth="1"
+      />
+    </Box>
+  );
+});
+GradientToolIcon.displayName = 'GradientToolIcon';
+
+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">
+      <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"
+        width="16"
+        height="16"
+        rx="2"
+        fill={`url(#${gradientId})`}
+        stroke="currentColor"
+        strokeOpacity="0.9"
+        strokeWidth="1"
+      />
+    </Box>
+  );
+});
+GradientLinearIcon.displayName = 'GradientLinearIcon';
+
+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">
+      <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"
+        r="8"
+        fill={`url(#${gradientId})`}
+        stroke="currentColor"
+        strokeOpacity="0.9"
+        strokeWidth="1"
+      />
+    </Box>
+  );
+});
+GradientRadialIcon.displayName = 'GradientRadialIcon';

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

@@ -2,6 +2,7 @@ import { ButtonGroup } from '@invoke-ai/ui-library';
 import { ToolBboxButton } from 'features/controlLayers/components/Tool/ToolBboxButton';
 import { ToolBrushButton } from 'features/controlLayers/components/Tool/ToolBrushButton';
 import { ToolColorPickerButton } from 'features/controlLayers/components/Tool/ToolColorPickerButton';
+import { ToolGradientButton } from 'features/controlLayers/components/Tool/ToolGradientButton';
 import { ToolMoveButton } from 'features/controlLayers/components/Tool/ToolMoveButton';
 import { ToolRectButton } from 'features/controlLayers/components/Tool/ToolRectButton';
 import React from 'react';
@@ -16,6 +17,7 @@ export const ToolChooser: React.FC = () => {
         <ToolBrushButton />
         <ToolEraserButton />
         <ToolRectButton />
+        <ToolGradientButton />
         <ToolMoveButton />
         <ToolViewButton />
         <ToolBboxButton />

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

@@ -0,0 +1,30 @@
+import { IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { GradientToolIcon } from 'features/controlLayers/components/Tool/GradientIcons';
+import { useSelectTool, useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const ToolGradientButton = memo(() => {
+  const { t } = useTranslation();
+  const isSelected = useToolIsSelected('gradient');
+  const selectGradient = useSelectTool('gradient');
+  // clicking selects the gradient tool; mode switching is handled in the top toolbar
+  const handleClick = useCallback(() => selectGradient(), [selectGradient]);
+
+  const gradientLabel = t('controlLayers.tool.gradient', { defaultValue: 'Gradient' });
+
+  return (
+    <Tooltip label={gradientLabel} placement="end">
+      <IconButton
+        aria-label={gradientLabel}
+        icon={<GradientToolIcon />}
+        isActive={isSelected}
+        colorScheme={isSelected ? 'invokeBlue' : 'base'}
+        variant="solid"
+        onClick={handleClick}
+      />
+    </Tooltip>
+  );
+});
+
+ToolGradientButton.displayName = 'ToolGradientButton';

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

@@ -0,0 +1,36 @@
+import { IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  selectGradientClipEnabled,
+  settingsGradientClipToggled,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiCropBold } from 'react-icons/pi';
+
+export const ToolGradientClipToggle = memo(() => {
+  const { t } = useTranslation();
+  const isEnabled = useAppSelector(selectGradientClipEnabled);
+  const dispatch = useAppDispatch();
+
+  const onClick = useCallback(() => {
+    dispatch(settingsGradientClipToggled());
+  }, [dispatch]);
+
+  const label = t('controlLayers.gradient.clip', { defaultValue: 'Clip Gradient' });
+
+  return (
+    <Tooltip label={label}>
+      <IconButton
+        aria-label={label}
+        icon={<PiCropBold size={16} />}
+        size="sm"
+        variant="solid"
+        colorScheme={isEnabled ? 'invokeBlue' : 'base'}
+        onClick={onClick}
+      />
+    </Tooltip>
+  );
+});
+
+ToolGradientClipToggle.displayName = 'ToolGradientClipToggle';

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

@@ -0,0 +1,40 @@
+import { ButtonGroup, IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { GradientLinearIcon, GradientRadialIcon } from 'features/controlLayers/components/Tool/GradientIcons';
+import { selectGradientType, settingsGradientTypeChanged } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const ToolGradientModeToggle = memo(() => {
+  const { t } = useTranslation();
+  const gradientType = useAppSelector(selectGradientType);
+  const dispatch = useAppDispatch();
+
+  const onLinearClick = useCallback(() => dispatch(settingsGradientTypeChanged('linear')), [dispatch]);
+  const onRadialClick = useCallback(() => dispatch(settingsGradientTypeChanged('radial')), [dispatch]);
+
+  return (
+    <ButtonGroup isAttached size="sm">
+      <Tooltip label={t('controlLayers.gradient.linear', { defaultValue: 'Linear' })}>
+        <IconButton
+          aria-label={t('controlLayers.gradient.linear', { defaultValue: 'Linear' })}
+          icon={<GradientLinearIcon />}
+          colorScheme={gradientType === 'linear' ? 'invokeBlue' : 'base'}
+          variant="solid"
+          onClick={onLinearClick}
+        />
+      </Tooltip>
+      <Tooltip label={t('controlLayers.gradient.radial', { defaultValue: 'Radial' })}>
+        <IconButton
+          aria-label={t('controlLayers.gradient.radial', { defaultValue: 'Radial' })}
+          icon={<GradientRadialIcon />}
+          colorScheme={gradientType === 'radial' ? 'invokeBlue' : 'base'}
+          variant="solid"
+          onClick={onRadialClick}
+        />
+      </Tooltip>
+    </ButtonGroup>
+  );
+});
+
+ToolGradientModeToggle.displayName = 'ToolGradientModeToggle';

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

@@ -1,7 +1,9 @@
-import { Divider, Flex } from '@invoke-ai/ui-library';
+import { Box, Divider, Flex } from '@invoke-ai/ui-library';
 import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
 import { useToolIsSelected } from 'features/controlLayers/components/Tool/hooks';
 import { ToolFillColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
+import { ToolGradientClipToggle } from 'features/controlLayers/components/Tool/ToolGradientClipToggle';
+import { ToolGradientModeToggle } from 'features/controlLayers/components/Tool/ToolGradientModeToggle';
 import { ToolWidthPicker } from 'features/controlLayers/components/Tool/ToolWidthPicker';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
 import { CanvasToolbarFitBboxToMasksButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton';
@@ -26,6 +28,7 @@ import { memo, useMemo } from 'react';
 export const CanvasToolbar = memo(() => {
   const isBrushSelected = useToolIsSelected('brush');
   const isEraserSelected = useToolIsSelected('eraser');
+  const isGradientSelected = useToolIsSelected('gradient');
   const showToolWithPicker = useMemo(() => {
     return isBrushSelected || isEraserSelected;
   }, [isBrushSelected, isEraserSelected]);
@@ -45,6 +48,12 @@ export const CanvasToolbar = memo(() => {
     <Flex w="full" gap={2} alignItems="center" px={2}>
       <Flex alignItems="center" h="full" flexGrow={1}>
         <ToolFillColorPicker />
+        {isGradientSelected && (
+          <Box ms={2} mt="-2px" display="flex" alignItems="center" gap={2}>
+            <ToolGradientClipToggle />
+            <ToolGradientModeToggle />
+          </Box>
+        )}
         {showToolWithPicker && <ToolWidthPicker />}
       </Flex>
       <Flex alignItems="center" h="full">

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

@@ -6,6 +6,7 @@ import { CanvasObjectBrushLine } from 'features/controlLayers/konva/CanvasObject
 import { CanvasObjectBrushLineWithPressure } from 'features/controlLayers/konva/CanvasObject/CanvasObjectBrushLineWithPressure';
 import { CanvasObjectEraserLine } from 'features/controlLayers/konva/CanvasObject/CanvasObjectEraserLine';
 import { CanvasObjectEraserLineWithPressure } from 'features/controlLayers/konva/CanvasObject/CanvasObjectEraserLineWithPressure';
+import { CanvasObjectGradient } from 'features/controlLayers/konva/CanvasObject/CanvasObjectGradient';
 import { CanvasObjectImage } from 'features/controlLayers/konva/CanvasObject/CanvasObjectImage';
 import { CanvasObjectRect } from 'features/controlLayers/konva/CanvasObject/CanvasObjectRect';
 import type { AnyObjectRenderer, AnyObjectState } from 'features/controlLayers/konva/CanvasObject/types';
@@ -151,6 +152,15 @@ 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 === 'gradient') {
+      assert(this.renderer instanceof CanvasObjectGradient || !this.renderer);
+
+      if (!this.renderer) {
+        this.renderer = new CanvasObjectGradient(this.state, this);
+        this.konva.group.add(this.renderer.konva.group);
+      }
+
       didRender = this.renderer.update(this.state, true);
     } else if (this.state.type === 'image') {
       assert(this.renderer instanceof CanvasObjectImage || !this.renderer);
@@ -237,6 +247,9 @@ export class CanvasEntityBufferObjectRenderer extends CanvasModuleBase {
         case 'rect':
           this.manager.stateApi.addRect({ entityIdentifier, rect: this.state });
           break;
+        case 'gradient':
+          this.manager.stateApi.addGradient({ entityIdentifier, gradient: this.state });
+          break;
       }
     }
 

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

@@ -8,6 +8,7 @@ import { CanvasObjectBrushLine } from 'features/controlLayers/konva/CanvasObject
 import { CanvasObjectBrushLineWithPressure } from 'features/controlLayers/konva/CanvasObject/CanvasObjectBrushLineWithPressure';
 import { CanvasObjectEraserLine } from 'features/controlLayers/konva/CanvasObject/CanvasObjectEraserLine';
 import { CanvasObjectEraserLineWithPressure } from 'features/controlLayers/konva/CanvasObject/CanvasObjectEraserLineWithPressure';
+import { CanvasObjectGradient } from 'features/controlLayers/konva/CanvasObject/CanvasObjectGradient';
 import { CanvasObjectImage } from 'features/controlLayers/konva/CanvasObject/CanvasObjectImage';
 import { CanvasObjectRect } from 'features/controlLayers/konva/CanvasObject/CanvasObjectRect';
 import type { AnyObjectRenderer, AnyObjectState } from 'features/controlLayers/konva/CanvasObject/types';
@@ -400,6 +401,16 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
         this.konva.objectGroup.add(renderer.konva.group);
       }
 
+      didRender = renderer.update(objectState, force || isFirstRender);
+    } else if (objectState.type === 'gradient') {
+      assert(renderer instanceof CanvasObjectGradient || !renderer);
+
+      if (!renderer) {
+        renderer = new CanvasObjectGradient(objectState, this);
+        this.renderers.set(renderer.id, renderer);
+        this.konva.objectGroup.add(renderer.konva.group);
+      }
+
       didRender = renderer.update(objectState, force || isFirstRender);
     } else if (objectState.type === 'image') {
       assert(renderer instanceof CanvasObjectImage || !renderer);