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

Change mouse to pointer events (#403)

Browse Source 
* Change mouse to pointer events

* Add `npm start` command

* Change all mouse to pointer events;
Fix `touch-action: none;`

* Merge with master

* Fix middle mouse click

* Remove console.log

* Delete the empty line

* Re-add middle click auto-scroll blocking

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
SonyStone
2021-12-21 03:37:58 -08:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent de7490ede0
commit 8a0dbd6310
5 changed files with 86 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lifetime/input.ts
+28 -14
View File
@@ -18,13 +18,16 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
{ target: window.document, eventName: "fullscreenchange", action: () => fullscreen.fullscreenModeChanged() },
{ target: window, eventName: "keyup", action: (e) => onKeyUp(e) },
{ target: window, eventName: "keydown", action: (e) => onKeyDown(e) },
{ target: window, eventName: "mousemove", action: (e) => onMouseMove(e) },
{ target: window, eventName: "pointermove", action: (e) => onPointerMove(e) },
{ target: window, eventName: "pointerdown", action: (e) => onPointerDown(e) },
{ target: window, eventName: "pointerup", action: (e) => onPointerUp(e) },
{ target: window, eventName: "mousedown", action: (e) => onMouseDown(e) },
{ target: window, eventName: "mouseup", action: (e) => onMouseUp(e) },
{ target: window, eventName: "wheel", action: (e) => onMouseScroll(e), options: { passive: false } },
];
let viewportMouseInteractionOngoing = false;
let viewportPointerInteractionOngoing = false;
// Keyboard events
const shouldRedirectKeyboardEventToBackend = (e: KeyboardEvent): boolean => {
// Don't redirect user input from text entry into HTML elements
@@ -81,42 +84,49 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
}
};
const onMouseMove = (e: MouseEvent) => {
if (!e.buttons) viewportMouseInteractionOngoing = false;
// Pointer events
const onPointerMove = (e: PointerEvent) => {
if (!e.buttons) viewportPointerInteractionOngoing = false;
const modifiers = makeModifiersBitfield(e);
editor.instance.on_mouse_move(e.clientX, e.clientY, e.buttons, modifiers);
};
const onMouseDown = (e: MouseEvent) => {
const onPointerDown = (e: PointerEvent) => {
const { target } = e;
const inCanvas = target instanceof Element && target.closest(".canvas");
const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content");
// Block middle mouse button auto-scroll mode
if (e.button === 1) e.preventDefault();
if (dialog.dialogIsVisible() && !inDialog) {
dialog.dismissDialog();
e.preventDefault();
e.stopPropagation();
}
if (inCanvas) viewportMouseInteractionOngoing = true;
if (inCanvas) viewportPointerInteractionOngoing = true;
if (viewportMouseInteractionOngoing) {
if (viewportPointerInteractionOngoing) {
const modifiers = makeModifiersBitfield(e);
editor.instance.on_mouse_down(e.clientX, e.clientY, e.buttons, modifiers);
}
};
const onMouseUp = (e: MouseEvent) => {
if (!e.buttons) viewportMouseInteractionOngoing = false;
const onPointerUp = (e: PointerEvent) => {
if (!e.buttons) viewportPointerInteractionOngoing = false;
const modifiers = makeModifiersBitfield(e);
editor.instance.on_mouse_up(e.clientX, e.clientY, e.buttons, modifiers);
};
// Mouse events
const onMouseDown = (e: MouseEvent) => {
// Block middle mouse button auto-scroll mode (the circlar widget that appears and allows quick scrolling by moving the cursor above or below it)
// This has to be in `mousedown`, not `pointerdown`, to avoid blocking Vue's middle click detection on HTML elements
if (e.button === 1) e.preventDefault();
};
const onMouseScroll = (e: WheelEvent) => {
const { target } = e;
const inCanvas = target instanceof Element && target.closest(".canvas");
@@ -134,6 +144,8 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
}
};
// Window events
const onWindowResize = (container: HTMLElement) => {
const viewports = Array.from(container.querySelectorAll(".canvas"));
const boundsOfViewports = viewports.map((canvas) => {
@@ -155,6 +167,8 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
}
};
// Event bindings
const addListeners = () => {
listeners.forEach(({ target, eventName, action, options }) => target.addEventListener(eventName, action, options));
};
@@ -173,6 +187,6 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
}
export type InputManager = ReturnType<typeof createInputManager>;
export function makeModifiersBitfield(e: MouseEvent | KeyboardEvent): number {
export function makeModifiersBitfield(e: WheelEvent | PointerEvent | KeyboardEvent): number {
return Number(e.ctrlKey) | (Number(e.shiftKey) << 1) | (Number(e.altKey) << 2);
}