mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 21:37:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add max width/height to text layers and draggable text boxes to the Text tool (#2118)

Browse source 
* Make progress in text tool

* Add line_width to gcore and gstd

* minor fix

* Dragging sets line_width correctly

* Get draw overlay to work

* Typo fix

* Make progress in text tool

* Add line_width to gcore and gstd

* minor fix

* Dragging sets line_width correctly

* Get draw overlay to work

* Typo fix

* Improve text bounding box

* Add toggle for editing line width

* Take absolute value of drag

* Fix optional properties

* Code review

* Attempt to add box height and abort with keys

* Attempt to add key modifiers and snap manager

* Use resize for improved dragging

* Refactor typesetting configuration into a struct

* Fix missing px unit in frontend

* Remove lines on rendered text

* Fix backwards compatibility

* Refactor lenient slection as an associate function in tool data

* Add dashed quad to text nodes

* Use correct names for max height and width

* Additional renames and reorder

* ReResolve conflict

* Code review and improvements

---------

Co-authored-by: hypercube <0hypercube@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Nitish Choudhary 2025-01-01 10:20:47 +05:30 • committed by GitHub
parent f225756655
commit 66357540bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 529 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/components/panels/Document.svelte
View file

@ -296,6 +296,12 @@
canvasCursor = cursorString;
}
function preventTextEditingScroll(e: Event) {
if (!(e.target instanceof HTMLElement)) return;
e.target.scrollTop = 0;
e.target.scrollLeft = 0;
}
// Text entry
export function triggerTextCommit() {
if (!textInput) return;
@ -317,8 +323,9 @@
textInput.contentEditable = "true";
textInput.style.transformOrigin = "0 0";
textInput.style.width = displayEditableTextbox.lineWidth ? `${displayEditableTextbox.lineWidth}px` : "max-content";
textInput.style.height = "auto";
textInput.style.width = displayEditableTextbox.maxWidth ? `${displayEditableTextbox.maxWidth}px` : "max-content";
textInput.style.height = displayEditableTextbox.maxHeight ? `${displayEditableTextbox.maxHeight}px` : "auto";
textInput.style.lineHeight = `${displayEditableTextbox.lineHeightRatio}`;
textInput.style.fontSize = `${displayEditableTextbox.fontSize}px`;
textInput.style.color = displayEditableTextbox.color.toHexOptionalAlpha() || "transparent";
@ -498,7 +505,7 @@
</svg>
<div class="text-input" style:width={canvasWidthCSS} style:height={canvasHeightCSS} style:pointer-events={showTextInput ? "auto" : ""}>
{#if showTextInput}
<div bind:this={textInput} style:transform="matrix({textInputMatrix})" />
<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
{/if}
</div>
<canvas class="overlays" width={canvasWidthRoundedToEven} height={canvasHeightRoundedToEven} style:width={canvasWidthCSS} style:height={canvasHeightCSS} data-overlays-canvas>
@ -721,14 +728,21 @@
}
}
.text-input {
word-break: break-all;
}
.text-input div {
cursor: text;
background: none;
border: none;
margin: 0;
padding: 0;
overflow: visible;
overflow-x: visible;
overflow-y: hidden;
overflow-wrap: anywhere;
white-space: pre-wrap;
word-break: normal;
display: inline-block;
// Workaround to force Chrome to display the flashing text entry cursor when text is empty
padding-left: 1px;

6
frontend/src/wasm-communication/messages.ts
View file

@ -828,7 +828,7 @@ export class UpdateDocumentLayerStructureJs extends JsMessage {
export class DisplayEditableTextbox extends JsMessage {
readonly text!: string;
readonly lineWidth!: undefined | number;
readonly lineHeightRatio!: number;
readonly fontSize!: number;
@ -838,6 +838,10 @@ export class DisplayEditableTextbox extends JsMessage {
readonly url!: string;
readonly transform!: number[];
readonly maxWidth!: undefined | number;
readonly maxHeight!: undefined | number;
}
export class DisplayEditableTextboxTransform extends JsMessage {