foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: close mobile canvas menu on canvas pointerdown

Browse Source
This commit is contained in:
dwelle 2021-05-25 22:31:59 +02:00
parent 790c9fd02e
commit c96b0404ba
1 changed files with 93 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/components/App.tsx
View File

@ -2280,115 +2280,119 @@ class App extends React.Component<AppProps, AppState> {
invalidateContextMenu = true; invalidateContextMenu = true;
}; };
private handleCanvasPointerDown = ( private handleCanvasPointerDown = withBatchedUpdates(
event: React.PointerEvent<HTMLCanvasElement>, (event: React.PointerEvent<HTMLCanvasElement>) => {
) => { event.persist();
event.persist();
// remove any active selection when we start to interact with canvas if (this.state.openMenu === "canvas") {
// (mainly, we care about removing selection outside the component which this.setState({ openMenu: null });
// would prevent our copy handling otherwise) }
const selection = document.getSelection();
if (selection?.anchorNode) {
selection.removeAllRanges();
}
this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event); // remove any active selection when we start to interact with canvas
this.maybeCleanupAfterMissingPointerUp(event); // (mainly, we care about removing selection outside the component which
// would prevent our copy handling otherwise)
const selection = document.getSelection();
if (selection?.anchorNode) {
selection.removeAllRanges();
}
if (isPanning) { this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event);
return; this.maybeCleanupAfterMissingPointerUp(event);
}
this.setState({ if (isPanning) {
lastPointerDownWith: event.pointerType, return;
cursorButton: "down", }
});
this.savePointer(event.clientX, event.clientY, "down");
if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) { this.setState({
return; lastPointerDownWith: event.pointerType,
} cursorButton: "down",
});
this.savePointer(event.clientX, event.clientY, "down");
// only handle left mouse button or touch if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
if ( return;
event.button !== POINTER_BUTTON.MAIN && }
event.button !== POINTER_BUTTON.TOUCH
) {
return;
}
this.updateGestureOnPointerDown(event); // only handle left mouse button or touch
if (
event.button !== POINTER_BUTTON.MAIN &&
event.button !== POINTER_BUTTON.TOUCH
) {
return;
}
// don't select while panning this.updateGestureOnPointerDown(event);
if (gesture.pointers.size > 1) {
return;
}
// State for the duration of a pointer interaction, which starts with a // don't select while panning
// pointerDown event, ends with a pointerUp event (or another pointerDown) if (gesture.pointers.size > 1) {
const pointerDownState = this.initialPointerDownState(event); return;
}
if (this.handleDraggingScrollBar(event, pointerDownState)) { // State for the duration of a pointer interaction, which starts with a
return; // pointerDown event, ends with a pointerUp event (or another pointerDown)
} const pointerDownState = this.initialPointerDownState(event);
this.clearSelectionIfNotUsingSelection(); if (this.handleDraggingScrollBar(event, pointerDownState)) {
this.updateBindingEnabledOnPointerMove(event); return;
}
if (this.handleSelectionOnPointerDown(event, pointerDownState)) { this.clearSelectionIfNotUsingSelection();
return; this.updateBindingEnabledOnPointerMove(event);
}
if (this.state.elementType === "text") { if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
this.handleTextOnPointerDown(event, pointerDownState); return;
return; }
} else if (
this.state.elementType === "arrow" || if (this.state.elementType === "text") {
this.state.elementType === "line" this.handleTextOnPointerDown(event, pointerDownState);
) { return;
this.handleLinearElementOnPointerDown( } else if (
event, this.state.elementType === "arrow" ||
this.state.elementType, this.state.elementType === "line"
) {
this.handleLinearElementOnPointerDown(
event,
this.state.elementType,
pointerDownState,
);
} else if (this.state.elementType === "freedraw") {
this.handleFreeDrawElementOnPointerDown(
event,
this.state.elementType,
pointerDownState,
);
} else {
this.createGenericElementOnPointerDown(
this.state.elementType,
pointerDownState,
);
}
const onPointerMove = this.onPointerMoveFromPointerDownHandler(
pointerDownState, pointerDownState,
); );
} else if (this.state.elementType === "freedraw") {
this.handleFreeDrawElementOnPointerDown( const onPointerUp = this.onPointerUpFromPointerDownHandler(
event,
this.state.elementType,
pointerDownState, pointerDownState,
); );
} else {
this.createGenericElementOnPointerDown(
this.state.elementType,
pointerDownState,
);
}
const onPointerMove = this.onPointerMoveFromPointerDownHandler( const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
pointerDownState, const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
);
const onPointerUp = this.onPointerUpFromPointerDownHandler( lastPointerUp = onPointerUp;
pointerDownState,
);
const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState); if (!this.state.viewModeEnabled) {
const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState); window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.addEventListener(EVENT.POINTER_UP, onPointerUp);
lastPointerUp = onPointerUp; window.addEventListener(EVENT.KEYDOWN, onKeyDown);
window.addEventListener(EVENT.KEYUP, onKeyUp);
if (!this.state.viewModeEnabled) { pointerDownState.eventListeners.onMove = onPointerMove;
window.addEventListener(EVENT.POINTER_MOVE, onPointerMove); pointerDownState.eventListeners.onUp = onPointerUp;
window.addEventListener(EVENT.POINTER_UP, onPointerUp); pointerDownState.eventListeners.onKeyUp = onKeyUp;
window.addEventListener(EVENT.KEYDOWN, onKeyDown); pointerDownState.eventListeners.onKeyDown = onKeyDown;
window.addEventListener(EVENT.KEYUP, onKeyUp); }
pointerDownState.eventListeners.onMove = onPointerMove; },
pointerDownState.eventListeners.onUp = onPointerUp; );
pointerDownState.eventListeners.onKeyUp = onKeyUp;
pointerDownState.eventListeners.onKeyDown = onKeyDown;
}
};
private maybeOpenContextMenuAfterPointerDownOnTouchDevices = ( private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
event: React.PointerEvent<HTMLCanvasElement>, event: React.PointerEvent<HTMLCanvasElement>,