feat: add a text layout engine, the bb with text wrapping and h/v adj…

[PlkMarudny]

What does this PR do?

Text layout engine (that's a bold term) has been added. Now the text bounding box can be set with the fixed font size, and the text inside can be justified in both directions. Technically, it is a word-wrap feature, with the possibility to adjust text horizontally and vertically within the textbox (or a bounding box, whatever terminology is preferred).

Such a feature allows setting a kind of a "templated project" (it will be a separated PR) delivering text content that will be reasonably placed within a composition. I guess for an agent it will be also easy to produce a predictable output, like with a prompt like "take a video clip clipname , set a title to "Orange of course" and the text content to "Orange cat usual behaviour", where "text content" refers to the predefined textbox with a fixed font size.

Closes #

Type of change

• Bug fix
• New feature (text layout)
• Docs
• Refactor / internal

How was it verified?

• node --check server.js && node --check app.js && node --check mcp-server.js passes
• Opened the editor and confirmed the change in preview
• Confirmed the change in an export (fast or realtime), if it affects rendering
• Updated CLAUDE.md / README.md if the schema, props, or API changed

Checklist

• No new runtime dependencies added
• Preview and export render identically (single compositor)
• Commits are focused and messages are descriptive

Summary by CodeRabbit

• New Features

  • Added resizable text boxes with width/height controls, vertical alignment, and “justify” horizontal alignment.
  • Added optional “Scale to fit” text shrinking within the box (with max-size behavior when a box is set).
  • Extended canvas corner dragging with a dedicated box resize mode, including Shift aspect-lock and Ctrl/Cmd center resizing.

• Documentation

  • Updated text documentation with detailed layout guidance for box sizing, fitting, and alignment.

[coderabbitai]

Warning

Review limit reached

@PlkMarudny, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 24 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4c2c10e1-3b72-4538-bce2-05a83dfd3e60

📥 Commits

Reviewing files that changed from the base of the PR and between 4947a9d and 1917cf8.

📒 Files selected for processing (3)

• CLAUDE.md
• README.md
• app.js

📝 Walkthrough

Walkthrough

Text clips now support resizable boxes, horizontal and vertical alignment, wrapping, scale-to-fit sizing, box-aware rendering, and justified word-animation spacing. The inspector, canvas interactions, default properties, documentation, and rendering pipeline are updated accordingly.

Changes

Text box layout

Layer / File(s)	Summary
Text box properties and inspector app.js, CLAUDE.md, README.md	Text clip defaults, inspector controls, alignment options, and documentation now cover box dimensions, scale-to-fit behavior, justification, and vertical alignment.
Canvas text-box resizing app.js	Text selection handles initialize and resize text boxes with pinned corners, aspect locking, centered resizing, minimum dimensions, and updated positioning.
Box-aware rendering and animation app.js	Text measurement, wrapping, fitting, clipping, positioning, justification, and word-animation spacing use the text-box layout model.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Canvas
  participant TextClip
  participant drawText
  User->>Canvas: drag text selection corner
  Canvas->>TextClip: update boxW, boxH, x, y
  TextClip->>drawText: provide box and alignment properties
  drawText->>Canvas: render wrapped and positioned text

Loading

Possibly related PRs

• ronak-create/FableCut#25: Both changes modify app.js text layout and word-animation codepaths.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the main change: a text layout engine with wrapping and horizontal/vertical alignment.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app.js`:
- Around line 3190-3234: Declare or compute the font weight within drawText
before the font-cut branch uses it, reusing the same weight value expected by
setTextFont. Ensure the font-cut path no longer references setTextFont’s local
weight and cannot throw a ReferenceError.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d2516fe8-de33-4990-83bb-1bf7b1184cfd

📥 Commits

Reviewing files that changed from the base of the PR and between d0780a5 and e7b42d4.

📒 Files selected for processing (3)

• CLAUDE.md
• README.md
• app.js