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

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

@ -6712,11 +6712,13 @@ class App extends React.Component<AppProps, AppState> {
public handleCanvasPanUsingWheelOrSpaceDrag = (
event: React.PointerEvent<HTMLElement> | MouseEvent,
): boolean => {
const isRightClickDragging = event.button === POINTER_BUTTON.SECONDARY;
if (
!(
gesture.pointers.size <= 1 &&
(event.button === POINTER_BUTTON.WHEEL ||
(event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
isRightClickDragging ||
isHandToolActive(this.state) ||
this.state.viewModeEnabled)
)
@ -6744,9 +6746,16 @@ class App extends React.Component<AppProps, AppState> {
? false
: /Linux/.test(window.navigator.platform);
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
if (!isRightClickDragging) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
}
let { clientX: lastX, clientY: lastY } = event;
let hasDragged = false;
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
if (isRightClickDragging && !hasDragged) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING);
}
hasDragged = true;
const deltaX = lastX - event.clientX;
const deltaY = lastY - event.clientY;
lastX = event.clientX;
@ -6807,6 +6816,11 @@ class App extends React.Component<AppProps, AppState> {
});
this.savePointer(event.clientX, event.clientY, "up");
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.BLUR, teardown);
onPointerMove.flush();
@ -9835,7 +9849,7 @@ class App extends React.Component<AppProps, AppState> {
};
/** updates image cache, refreshing updated elements and/or setting status
to error for images that fail during <img> element creation */
to error for images that fail during <img> element creation */
private updateImageCache = async (
elements: readonly InitializedExcalidrawImageElement[],
files = this.files,
@ -10211,6 +10225,10 @@ class App extends React.Component<AppProps, AppState> {
return;
}
if (isPanning) {
return;
}
const { x, y } = viewportCoordsToSceneCoords(event, this.state);
const element = this.getElementAtPosition(x, y, {
preferSelected: true,

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

@ -319,7 +319,7 @@
},
"hints": {
"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",
"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",