Skip to content

Conversation

@DustyShoe
Copy link
Contributor

@DustyShoe DustyShoe commented Dec 30, 2025

Summary

Canvas Basic Text Tool!

Summary:

  • Adds a basic Text tool with overlay editing and rasterize-on-commit.
  • New text options row (font, size, bold/italic/underline/strike, alignment).
  • Handles hotkey suppression during typing, commit on Enter/tool switch.
  • Overlay positioning, tests for text helpers.
2025-12-30.13-29-23.mp4

Related Issues / Discussions

The fonts information is stored in invokeai\frontend\web\src\features\controlLayers\text\textConstants.ts
If anyone have an opinion what fonts and fallbacks should be used, please write in comments. There's 10 fonts to choose ATM and i'd like to make selection as diverse as possible.

QA Instructions

  • Activate Text tool, click canvas, type 2–3 lines, Shift+Enter adds newline, Enter commits. Esc cancels operation.
  • Verify that typing works as expected, hotkeys are suppressed while typing (only Ctrl/Cmd+C/V/Z/Y allowed).
  • Change font, size, bold/italic/underline/strike, alignment; preview matches raster after commit.
  • Click outside text box or switch tools; commit happens once, creates a raster layer above selected layer.

Merge Plan

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 frontend PRs that change frontend files docs PRs that change docs labels Dec 30, 2025
@DustyShoe DustyShoe changed the title Feature/add text tool to canvas Feature(UI): Add text tool to canvas Dec 30, 2025
@DustyShoe DustyShoe marked this pull request as ready for review December 30, 2025 12:02

let attempts = 0;
const MAX_ATTEMPTS = 5;
const tryFocus = () => {
Copy link
Contributor

@joshistoast joshistoast Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea here of counting attempts to try to focus it feels like an ungraceful band-aid solution.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would be the better solution here in your opinion?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What behavior is it fixing? If it's event bubbling, I'd probably suggest a callback ref pattern instead

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was probing, if the input field is ready and auto-enables typing mode. Changed to focus logic to a single RAF per session, preventing repeated focus attempts.

const handleCompositionStart = useCallback(() => setIsComposing(true), []);
const handleCompositionEnd = useCallback(() => setIsComposing(false), []);

const containerMetrics = useMemo(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a name like textContainerData would be more descriptive here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! Changed that.

DustyShoe and others added 3 commits December 31, 2025 00:26
…n CanvasTextOverlay.tsx

Renamed containerMetrics to textContainerData in CanvasTextOverlay.tsx
Fixed mouse cursor disapearing during typing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs PRs that change docs frontend PRs that change frontend files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants