feat: Added penMode for palm rejection (#4657)

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
zsviczian 2022-02-02 14:31:38 +01:00 committed by GitHub
parent edfbac9d7d
commit 4486fbc2c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 305 additions and 4 deletions

View file

@ -467,6 +467,7 @@ class App extends React.Component<AppProps, AppState> {
elements={this.scene.getElements()}
onCollabButtonClick={onCollabButtonClick}
onLockToggle={this.toggleLock}
onPenModeToggle={this.togglePenMode}
onInsertElements={(elements) =>
this.addElementsFromPasteOrLibrary({
elements,
@ -1501,6 +1502,14 @@ class App extends React.Component<AppProps, AppState> {
});
};
togglePenMode = () => {
this.setState((prevState) => {
return {
penMode: !prevState.penMode,
};
});
};
toggleZenMode = () => {
this.actionManager.executeAction(actionToggleZenMode);
};
@ -2324,7 +2333,10 @@ class App extends React.Component<AppProps, AppState> {
gesture.lastCenter = center;
const distance = getDistance(Array.from(gesture.pointers.values()));
const scaleFactor = distance / gesture.initialDistance;
const scaleFactor =
this.state.elementType === "freedraw" && this.state.penMode
? 1
: distance / gesture.initialDistance;
const nextZoom = scaleFactor
? getNormalizedZoom(initialScale * scaleFactor)
@ -2586,6 +2598,17 @@ class App extends React.Component<AppProps, AppState> {
this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event);
this.maybeCleanupAfterMissingPointerUp(event);
//fires only once, if pen is detected, penMode is enabled
//the user can disable this by toggling the penMode button
if (!this.state.penDetected && event.pointerType === "pen") {
this.setState((prevState) => {
return {
penMode: true,
penDetected: true,
};
});
}
if (isPanning) {
return;
}
@ -2630,6 +2653,17 @@ class App extends React.Component<AppProps, AppState> {
return;
}
const allowOnPointerDown =
!this.state.penMode ||
event.pointerType !== "touch" ||
this.state.elementType === "selection" ||
this.state.elementType === "text" ||
this.state.elementType === "image";
if (!allowOnPointerDown) {
return;
}
if (this.state.elementType === "text") {
this.handleTextOnPointerDown(event, pointerDownState);
return;