smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added right click/POINTER_BUTTON.SECONDARY logic. Mimicked context menu functionality and pointer icon of other popular apps that have this functionality.

Browse source
This commit is contained in:
ColemanDunn 2025-01-09 17:41:18 -07:00
parent c92f3bebf5
commit 74786de5ec
No known key found for this signature in database
2 changed files with 21 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/excalidraw/components/App.tsx
View file

@ -6712,11 +6712,13 @@ class App extends React.Component<AppProps, AppState> {
public handleCanvasPanUsingWheelOrSpaceDrag = ( public handleCanvasPanUsingWheelOrSpaceDrag = (
event: React.PointerEvent<HTMLElement> | MouseEvent, event: React.PointerEvent<HTMLElement> | MouseEvent,
): boolean => { ): boolean => {
const isRightClickDragging = event.button === POINTER_BUTTON.SECONDARY;
if ( if (
!( !(
gesture.pointers.size <= 1 && gesture.pointers.size <= 1 &&
(event.button === POINTER_BUTTON.WHEEL || (event.button === POINTER_BUTTON.WHEEL ||
(event.button === POINTER_BUTTON.MAIN && isHoldingSpace) || (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
isRightClickDragging ||
isHandToolActive(this.state) || isHandToolActive(this.state) ||
this.state.viewModeEnabled) this.state.viewModeEnabled)
) )
@ -6744,9 +6746,16 @@ class App extends React.Component<AppProps, AppState> {
? false ? false
: /Linux/.test(window.navigator.platform); : /Linux/.test(window.navigator.platform);
if (!isRightClickDragging) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING); setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
}
let { clientX: lastX, clientY: lastY } = event; let { clientX: lastX, clientY: lastY } = event;
let hasDragged = false;
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => { const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
if (isRightClickDragging && !hasDragged) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
}
hasDragged = true;
const deltaX = lastX - event.clientX; const deltaX = lastX - event.clientX;
const deltaY = lastY - event.clientY; const deltaY = lastY - event.clientY;
lastX = event.clientX; lastX = event.clientX;
@ -6807,6 +6816,11 @@ class App extends React.Component<AppProps, AppState> {
}); });
this.savePointer(event.clientX, event.clientY, "up"); this.savePointer(event.clientX, event.clientY, "up");
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove); window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
if (!hasDragged && isRightClickDragging) {
this.handleCanvasContextMenu(
event as React.MouseEvent<HTMLElement | HTMLCanvasElement>,
);
}
window.removeEventListener(EVENT.POINTER_UP, teardown); window.removeEventListener(EVENT.POINTER_UP, teardown);
window.removeEventListener(EVENT.BLUR, teardown); window.removeEventListener(EVENT.BLUR, teardown);
onPointerMove.flush(); onPointerMove.flush();
@ -10211,6 +10225,10 @@ class App extends React.Component<AppProps, AppState> {
return; return;
} }
if (isPanning) {
return;
}
const { x, y } = viewportCoordsToSceneCoords(event, this.state); const { x, y } = viewportCoordsToSceneCoords(event, this.state);
const element = this.getElementAtPosition(x, y, { const element = this.getElementAtPosition(x, y, {
preferSelected: true, preferSelected: true,

2
packages/excalidraw/locales/en.json
View file

@ -319,7 +319,7 @@
}, },
"hints": { "hints": {
"dismissSearch": "Escape to dismiss search", "dismissSearch": "Escape to dismiss search",
"canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool", "canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging, drag with right click, or use the hand tool",
"linearElement": "Click to start multiple points, drag for single line", "linearElement": "Click to start multiple points, drag for single line",
"arrowTool": "Click to start multiple points, drag for single line. Press {{arrowShortcut}} again to change arrow type.", "arrowTool": "Click to start multiple points, drag for single line. Press {{arrowShortcut}} again to change arrow type.",
"freeDraw": "Click and drag, release when you're finished", "freeDraw": "Click and drag, release when you're finished",