Add sizing gizmos to the Text tool's text area (#2176)

* Fix abortion while dragging

* Create function for text bounding box

* Reorder arms of text tool FSM

* add transform cage to textbox pt.1

* add transform cage pt.2

* Fix minor issue after merge

* Get bounding box working in place without action keys

* Add max_height and disable pivot drag

* Cleanup code and write doco for new utility function

* Minor change due to merge

* Add bottom overlay

* Get modifier keys to work pt.1

* Code cleanup

* cleanup

* Fix transform

* Minor improvements

* Undo debug statement!

* Add comments and keep original layer transformation

* Alt from centre

* Fix merge conflict

* Minor code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: hypercube <0hypercube@gmail.com>
Co-authored-by: James Lindsay <78500760+0HyperCube@users.noreply.github.com>
This commit is contained in:
Nitish Choudhary 2025-03-12 15:37:10 +05:30 committed by GitHub
parent a696aae044
commit c0d3eb8072
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 321 additions and 65 deletions

View file

@ -319,10 +319,14 @@
if (displayEditableTextbox.text === "") textInput.textContent = "";
else textInput.textContent = `${displayEditableTextbox.text}\n`;
// Make it so `maxHeight` is a multiple of `lineHeight`
const lineHeight = displayEditableTextbox.lineHeightRatio * displayEditableTextbox.fontSize;
let height = displayEditableTextbox.maxHeight === undefined ? "auto" : `${Math.floor(displayEditableTextbox.maxHeight / lineHeight) * lineHeight}px`;
textInput.contentEditable = "true";
textInput.style.transformOrigin = "0 0";
textInput.style.width = displayEditableTextbox.maxWidth ? `${displayEditableTextbox.maxWidth}px` : "max-content";
textInput.style.height = displayEditableTextbox.maxHeight ? `${displayEditableTextbox.maxHeight}px` : "auto";
textInput.style.height = height;
textInput.style.lineHeight = `${displayEditableTextbox.lineHeightRatio}`;
textInput.style.fontSize = `${displayEditableTextbox.fontSize}px`;
textInput.style.color = displayEditableTextbox.color.toHexOptionalAlpha() || "transparent";