fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-02 18:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

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-11 22:55:03 -07:00
committed by GitHub
co-authored by Keavon Chambers
parent a924cdd3e2
commit 2a47ac1e85
2 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.svelte
+1
View File
@@ -276,6 +276,7 @@
textInput.focus(); textInput.focus();
textInput.click(); 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 })); window.dispatchEvent(new CustomEvent("modifyinputfield", { detail: textInput }));
} }
frontend/src/io-managers/input.ts
+15 -11
View File
@@ -21,13 +21,9 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
app?.focus(); app?.focus();
let viewportPointerInteractionOngoing = false; let viewportPointerInteractionOngoing = false;
let textInput = undefined as undefined | HTMLDivElement; let textToolInteractiveInputElement = undefined as undefined | HTMLDivElement;
let canvasFocused = true; let canvasFocused = true;
function blurApp(): void {
canvasFocused = false;
}
// Event listeners // Event listeners
// eslint-disable-next-line @typescript-eslint/no-explicit-any // 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: "wheel", action: (e: WheelEvent) => onWheelScroll(e), options: { passive: false } },
{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent) => onModifyInputField(e) }, { target: window, eventName: "modifyinputfield", action: (e: CustomEvent) => onModifyInputField(e) },
{ target: window, eventName: "focusout", action: () => (canvasFocused = false) }, { 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, eventName: "fullscreenchange", action: () => fullscreen.fullscreenModeChanged() },
{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent) => onPaste(e) }, { 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 { target } = e;
const isTargetingCanvas = target instanceof Element && target.closest("[data-canvas]"); const isTargetingCanvas = target instanceof Element && target.closest("[data-canvas]");
const inDialog = target instanceof Element && target.closest("[data-dialog-modal] [data-floating-menu-content]"); 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) { if (get(dialog).visible && !inDialog) {
dialog.dismissDialog(); dialog.dismissDialog();
@@ -163,7 +159,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
} }
if (!inTextInput) { if (!inTextInput) {
if (textInput) editor.instance.onChangeText(textInputCleanup(textInput.innerText)); if (textToolInteractiveInputElement) editor.instance.onChangeText(textInputCleanup(textToolInteractiveInputElement.innerText));
else viewportPointerInteractionOngoing = isTargetingCanvas instanceof Element; else viewportPointerInteractionOngoing = isTargetingCanvas instanceof Element;
} }
@@ -179,7 +175,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document
function onPointerUp(e: PointerEvent): void { function onPointerUp(e: PointerEvent): void {
if (!e.buttons) viewportPointerInteractionOngoing = false; if (!e.buttons) viewportPointerInteractionOngoing = false;
if (!textInput) { if (!textToolInteractiveInputElement) {
const modifiers = makeKeyboardModifiersBitfield(e); const modifiers = makeKeyboardModifiersBitfield(e);
editor.instance.onMouseUp(e.clientX, e.clientY, e.buttons, modifiers); 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 { function onDoubleClick(e: PointerEvent): void {
if (!e.buttons) viewportPointerInteractionOngoing = false; if (!e.buttons) viewportPointerInteractionOngoing = false;
if (!textInput) { if (!textToolInteractiveInputElement) {
const modifiers = makeKeyboardModifiersBitfield(e); const modifiers = makeKeyboardModifiersBitfield(e);
editor.instance.onDoubleClick(e.clientX, e.clientY, e.buttons, modifiers); 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 { function onModifyInputField(e: CustomEvent): void {
textInput = e.detail; textToolInteractiveInputElement = e.detail;
} }
// Window events // Window events