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

Merge 19abf76834 into ab89d4c16f

Browse source
This commit is contained in:
ColemanDunn 2025-03-26 04:57:30 +00:00 • committed by GitHub
commit b0cc253634
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6449,7 +6449,7 @@ class App extends React.Component<AppProps, AppState> {
// we must exit before we set `cursorButton` state and `savePointer` // we must exit before we set `cursorButton` state and `savePointer`
// else it will send pointer state & laser pointer events in collab when // else it will send pointer state & laser pointer events in collab when
// panning // panning
if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) { if (this.handleCanvasPan(event)) {
return; return;
} }
@ -6772,14 +6772,16 @@ class App extends React.Component<AppProps, AppState> {
}; };
// Returns whether the event is a panning // Returns whether the event is a panning
public handleCanvasPanUsingWheelOrSpaceDrag = ( public handleCanvasPan = (
event: React.PointerEvent<HTMLElement> | MouseEvent, event: React.PointerEvent<HTMLElement> | MouseEvent,
): boolean => { ): boolean => {
const isRightClicked = 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) ||
isRightClicked ||
isHandToolActive(this.state) || isHandToolActive(this.state) ||
this.state.viewModeEnabled) this.state.viewModeEnabled)
) )
@ -6807,9 +6809,16 @@ class App extends React.Component<AppProps, AppState> {
? false ? false
: /Linux/.test(window.navigator.platform); : /Linux/.test(window.navigator.platform);
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING); if (!isRightClicked) {
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 (isRightClicked && !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;
@ -6873,6 +6882,11 @@ class App extends React.Component<AppProps, AppState> {
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();
if (!hasDragged && isRightClicked) {
this.handleCanvasContextMenu(
event as React.MouseEvent<HTMLElement | HTMLCanvasElement>,
);
}
}), }),
); );
window.addEventListener(EVENT.BLUR, teardown); window.addEventListener(EVENT.BLUR, teardown);
@ -9953,7 +9967,7 @@ class App extends React.Component<AppProps, AppState> {
}; };
/** updates image cache, refreshing updated elements and/or setting status /** 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 ( private updateImageCache = async (
elements: readonly InitializedExcalidrawImageElement[], elements: readonly InitializedExcalidrawImageElement[],
files = this.files, files = this.files,
@ -10335,6 +10349,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/element/textWysiwyg.tsx
View file

@ -648,7 +648,7 @@ export const textWysiwyg = ({
// trying to pan by clicking inside text area itself -> handle here // trying to pan by clicking inside text area itself -> handle here
if (target instanceof HTMLTextAreaElement) { if (target instanceof HTMLTextAreaElement) {
event.preventDefault(); event.preventDefault();
app.handleCanvasPanUsingWheelOrSpaceDrag(event); app.handleCanvasPan(event);
} }
temporarilyDisableSubmit(); temporarilyDisableSubmit();
return; return;

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

@ -320,7 +320,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",