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

Allow right clicking in text fields (#1207)

Browse source 
* Allow right clicking in text edit

* Cleanup

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Chase 2023-05-12 13:55:03 +08:00 • committed by Keavon Chambers
parent 4e0c673a35
commit 05f58f4ca1
2 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -276,6 +276,7 @@
textInput.focus();
textInput.click();
// Sends the text input element used for interactively editing with the text tool in a custom event
window.dispatchEvent(new CustomEvent("modifyinputfield", { detail: textInput }));
}

26
frontend/src/io-managers/input.ts
View file

@ -21,13 +21,9 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
app?.focus();
let viewportPointerInteractionOngoing = false;
let textInput = undefined as undefined | HTMLDivElement;
let textToolInteractiveInputElement = undefined as undefined | HTMLDivElement;
let canvasFocused = true;
function blurApp(): void {
canvasFocused = false;
}
// Event listeners
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -43,7 +39,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
{ target: window, eventName: "wheel", action: (e: WheelEvent) => onWheelScroll(e), options: { passive: false } },
{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent) => onModifyInputField(e) },
{ target: window, eventName: "focusout", action: () => (canvasFocused = false) },
{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent) => e.preventDefault() },
{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent) => onContextMenu(e) },
{ target: window.document, eventName: "fullscreenchange", action: () => fullscreen.fullscreenModeChanged() },
{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent) => onPaste(e) },
];
@ -154,7 +150,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
const { target } = e;
const isTargetingCanvas = target instanceof Element && target.closest("[data-canvas]");
const inDialog = target instanceof Element && target.closest("[data-dialog-modal] [data-floating-menu-content]");
const inTextInput = target === textInput;
const inTextInput = target === textToolInteractiveInputElement;
if (get(dialog).visible && !inDialog) {
dialog.dismissDialog();
@ -163,7 +159,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
}
if (!inTextInput) {
if (textInput) editor.instance.onChangeText(textInputCleanup(textInput.innerText));
if (textToolInteractiveInputElement) editor.instance.onChangeText(textInputCleanup(textToolInteractiveInputElement.innerText));
else viewportPointerInteractionOngoing = isTargetingCanvas instanceof Element;
}
@ -179,7 +175,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
function onPointerUp(e: PointerEvent): void {
if (!e.buttons) viewportPointerInteractionOngoing = false;
if (!textInput) {
if (!textToolInteractiveInputElement) {
const modifiers = makeKeyboardModifiersBitfield(e);
editor.instance.onMouseUp(e.clientX, e.clientY, e.buttons, modifiers);
}
@ -188,7 +184,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
function onDoubleClick(e: PointerEvent): void {
if (!e.buttons) viewportPointerInteractionOngoing = false;
if (!textInput) {
if (!textToolInteractiveInputElement) {
const modifiers = makeKeyboardModifiersBitfield(e);
editor.instance.onDoubleClick(e.clientX, e.clientY, e.buttons, modifiers);
}
@ -215,8 +211,16 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
}
}
function onContextMenu(e: MouseEvent): void {
if (!targetIsTextField(e.target || undefined) && e.target !== textToolInteractiveInputElement) {
e.preventDefault();
}
}
// Receives a custom event dispatched when the user begins interactively editing with the text tool.
// We keep a copy of the text input element to check against when it's active for text entry.
function onModifyInputField(e: CustomEvent): void {
textInput = e.detail;
textToolInteractiveInputElement = e.detail;
}
// Window events