jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up text input (#506) 

* Fix firefox text input

* Fix descenders below bounding box

* Fix chromium empty text

* Descenders back below baseline

* Fix trailing newline on chromium

* Reinstate correct baseline height

* Fix highlighted new line on empty text

* Add comment for trailing new line removal

* Extract cleanupTextInput to a separate file

* Function import simplification

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube 2022-02-04 04:26:44 +00:00 committed by Keavon Chambers
parent e9116a4775
commit 2a313471d8
3 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/panels/Document.vue
View File

@ -192,9 +192,9 @@
}
}
foreignObject {
width: 10000px;
height: 10000px;
overflow: visible;
width: 1px;
height: 1px;
div {
color: black;
@ -245,6 +245,8 @@ import {
DisplayEditableTextbox,
} from "@/dispatcher/js-messages";
import { textInputCleanup } from "@/lifetime/input";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
@ -379,19 +381,22 @@ export default defineComponent({
this.canvasCursor = updateMouseCursor.cursor;
});
this.editor.dispatcher.subscribeJsMessage(TriggerTextCommit, () => {
if (this.textInput) this.editor.instance.on_change_text(this.textInput.textContent || "");
if (this.textInput) this.editor.instance.on_change_text(textInputCleanup(this.textInput.innerText));
});
this.editor.dispatcher.subscribeJsMessage(DisplayEditableTextbox, (displayEditableTextbox) => {
this.textInput = document.createElement("DIV") as HTMLDivElement;
this.textInput.id = "editable-textbox";
this.textInput.textContent = displayEditableTextbox.text;
if (displayEditableTextbox.text === "") this.textInput.textContent = "";
else this.textInput.textContent = `${displayEditableTextbox.text}\n`;
this.textInput.contentEditable = "true";
this.textInput.style.width = displayEditableTextbox.line_width ? `${displayEditableTextbox.line_width}px` : "max-content";
this.textInput.style.height = "auto";
this.textInput.style.fontSize = `${displayEditableTextbox.font_size}px`;
this.textInput.oninput = (): void => {
if (this.textInput) this.editor.instance.update_bounds(this.textInput.textContent || "");
if (this.textInput) this.editor.instance.update_bounds(textInputCleanup(this.textInput.innerText));
};
});

12
frontend/src/lifetime/input.ts
View File

@ -25,7 +25,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
{ target: window, eventName: "dblclick", action: (e: PointerEvent): void => onDoubleClick(e) },
{ target: window, eventName: "mousedown", action: (e: MouseEvent): void => onMouseDown(e) },
{ target: window, eventName: "wheel", action: (e: WheelEvent): void => onMouseScroll(e), options: { passive: false } },
{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent): void => onmodifyinputfiled(e) },
{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent): void => onModifyInputField(e) },
];
let viewportPointerInteractionOngoing = false;
@ -120,7 +120,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
}
if (textInput && !inTextInput) {
editor.instance.on_change_text(textInput.textContent || "");
editor.instance.on_change_text(textInputCleanup(textInput.innerText));
} else if (inCanvas && !inTextInput) viewportPointerInteractionOngoing = true;
if (viewportPointerInteractionOngoing) {
@ -172,7 +172,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
}
};
const onmodifyinputfiled = (e: CustomEvent): void => {
const onModifyInputField = (e: CustomEvent): void => {
textInput = e.detail;
};
@ -232,6 +232,12 @@ export function makeModifiersBitfield(e: WheelEvent | PointerEvent | KeyboardEve
return Number(e.ctrlKey) | (Number(e.shiftKey) << 1) | (Number(e.altKey) << 2);
}
// Necessary because innerText puts an extra newline character at the end when the text is more than one line.
export function textInputCleanup(text: string): string {
if (text[text.length - 1] === "\n") return text.slice(0, -1);
return text;
}
// This function is a naive, temporary solution to allow non-Latin keyboards to fall back on the physical QWERTY layout
function getLatinKey(e: KeyboardEvent): string | null {
const key = e.key.toLowerCase();

2
graphene/src/layers/text/to_kurbo.rs
View File

@ -74,7 +74,7 @@ pub fn to_kurbo(str: &str, buzz_face: rustybuzz::Face, font_size: f64, line_widt
path: BezPath::new(),
pos: Point::ZERO,
offset: Vec2::ZERO,
ascender: buzz_face.ascender() as f64,
ascender: (buzz_face.ascender() as f64 / buzz_face.height() as f64) * font_size / scale,
scale,
};