Skip to content

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

Open
DustyShoe wants to merge 17 commits intoinvoke-ai:mainfrom
DustyShoe:Feat(Canvas)/Replace-Rectangle-tool-with-Shapes-tool
Open

Feat(canvas): Replace Rectangle tool with new Shapes tool#9082
DustyShoe wants to merge 17 commits intoinvoke-ai:mainfrom
DustyShoe:Feat(Canvas)/Replace-Rectangle-tool-with-Shapes-tool

Conversation

@DustyShoe
Copy link
Copy Markdown
Collaborator

@DustyShoe DustyShoe commented Apr 21, 2026

Summary

This PR replaces the existing Rectangle tool with a new Shapes tool in the canvas toolbar.

It introduces a single Shapes tool with multiple modes in the top toolbar:

  • Rect
  • Oval
  • Polygon
  • Freehand

The tool supports live preview while drawing, uses the active fill color including alpha, and supports subtractive drawing with Ctrl / Cmd, including a dedicated subtract cursor. Rect and oval support modifier-based drawing behavior, polygon supports start-point close/highlight behavior and snapping, and drawing continues correctly even when the pointer leaves the canvas.

There is some intentional overlap with Lasso, because Shapes can also be used on an active Inpaint Mask layer. That said, Lasso still provides broader mask-oriented behavior: it can create a new mask layer automatically when none exists, and it remains a distinct tool with its own hotkey and dedicated masking workflow. In that sense, the overlap is acceptable: Shapes adds general-purpose filled-shape drawing across raster targets, while Lasso remains the more specialized mask-construction tool.

canvasSettingsSlice and canvasSlice are both covered by existing schema-based persistence migrations. The new shapeType field has a default value, and the canvas object schema change is additive/backward-compatible, so no separate manual migration was needed.

QA Instructions

  • Open the canvas and select the Shapes tool. Confirm the old Rectangle button is replaced by a Shapes button, and the top toolbar shows Rect, Oval, Polygon, and Freehand.
  • UI sanity check: top toolbar icons should render at a consistent size, and the custom gradient icons should not look undersized next to the other toolbar icons.
  • On a raster layer, set the active color to a semi-transparent value and draw each shape type. Confirm the committed fill uses the active color and respects its alpha.
  • Hold Ctrl / Cmd while drawing each shape type. Confirm the operation becomes subtractive, fully clears pixels regardless of active color alpha, and shows the minus-badge crosshair cursor.
  • Rect: drag from corner to corner, confirm live preview and commit on pointer release. Hold Alt to draw from center. Start the drag inside the canvas, move outside the canvas bounds, and confirm preview/commit still works. Press Esc mid-draw and confirm cancel.
  • Oval: verify live preview and commit on release. Hold Shift to constrain to a circle. Hold Alt to draw from center. Also verify outside-canvas drag continuation and Esc cancel.
  • Polygon: click to place vertices, confirm the pending edge previews to the current pointer position, and confirm the start vertex grows/highlights when the pointer is close enough to close the shape. Click the start vertex to close and commit. Hold Shift and verify snapping to horizontal, vertical, and 45-degree directions. Press Esc to cancel.
  • Freehand: click-drag-release to create a filled freehand contour. Confirm live preview while dragging, correct commit on release, and correct behavior if release happens outside the canvas.
  • On subtractive polygon and freehand shapes, confirm no visible contour/outline remains after commit.
  • Repeat core Shapes flows on an active Inpaint Mask layer. Confirm Shapes draws into the currently active mask layer.

Merge Plan

Simple merge.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions Bot added the frontend PRs that change frontend files label Apr 21, 2026
@DustyShoe DustyShoe changed the title Feat(canvas)/replace rectangle tool with shapes tool Feat(canvas): Replace Rectangle tool with new Shapes tool Apr 21, 2026
@DustyShoe DustyShoe marked this pull request as ready for review April 22, 2026 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend PRs that change frontend files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant