feat: Added penMode for palm rejection (#4657)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -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;

src/components/LayerUI.tsx

@@ -36,6 +36,7 @@ import { LibraryMenu } from "./LibraryMenu";
 
 import "./LayerUI.scss";
 import "./Toolbar.scss";
+import { PenModeButton } from "./PenModeButton";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -46,6 +47,7 @@ interface LayerUIProps {
   elements: readonly NonDeletedExcalidrawElement[];
   onCollabButtonClick?: () => void;
   onLockToggle: () => void;
+  onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   zenModeEnabled: boolean;
   showExitZenModeBtn: boolean;
@@ -76,6 +78,7 @@ const LayerUI = ({
   elements,
   onCollabButtonClick,
   onLockToggle,
+  onPenModeToggle,
   onInsertElements,
   zenModeEnabled,
   showExitZenModeBtn,
@@ -313,6 +316,13 @@ const LayerUI = ({
                       "zen-mode": zenModeEnabled,
                     })}
                   >
+                    <PenModeButton
+                      zenModeEnabled={zenModeEnabled}
+                      checked={appState.penMode}
+                      onChange={onPenModeToggle}
+                      title={t("toolBar.penMode")}
+                      penDetected={appState.penDetected}
+                    />
                     <LockButton
                       zenModeEnabled={zenModeEnabled}
                       checked={appState.elementLocked}
@@ -498,6 +508,7 @@ const LayerUI = ({
         setAppState={setAppState}
         onCollabButtonClick={onCollabButtonClick}
         onLockToggle={onLockToggle}
+        onPenModeToggle={onPenModeToggle}
         canvas={canvas}
         isCollaborating={isCollaborating}
         renderCustomFooter={renderCustomFooter}

src/components/MobileMenu.tsx

@@ -17,6 +17,7 @@ import { LockButton } from "./LockButton";
 import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
+import { PenModeButton } from "./PenModeButton";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -28,6 +29,7 @@ type MobileMenuProps = {
   libraryMenu: JSX.Element | null;
   onCollabButtonClick?: () => void;
   onLockToggle: () => void;
+  onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
   renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
@@ -50,6 +52,7 @@ export const MobileMenu = ({
   setAppState,
   onCollabButtonClick,
   onLockToggle,
+  onPenModeToggle,
   canvas,
   isCollaborating,
   renderCustomFooter,
@@ -92,6 +95,13 @@ export const MobileMenu = ({
                   setAppState={setAppState}
                   isMobile
                 />
+                <PenModeButton
+                  checked={appState.penMode}
+                  onChange={onPenModeToggle}
+                  title={t("toolBar.penMode")}
+                  isMobile
+                  penDetected={appState.penDetected}
+                />
               </Stack.Row>
               {libraryMenu}
             </Stack.Col>

src/components/PenModeButton.tsx

@@ -0,0 +1,91 @@
+import "./ToolIcon.scss";
+
+import clsx from "clsx";
+import { ToolButtonSize } from "./ToolButton";
+
+type PenModeIconProps = {
+  title?: string;
+  name?: string;
+  checked: boolean;
+  onChange?(): void;
+  zenModeEnabled?: boolean;
+  isMobile?: boolean;
+  penDetected: boolean;
+};
+
+const DEFAULT_SIZE: ToolButtonSize = "medium";
+
+const ICONS = {
+  CHECKED: (
+    <svg
+      width="205"
+      height="205"
+      viewBox="0 0 205 205"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="m35 195-25-29.17V50h50v115l-25 30" />
+      <path d="M10 40V10h50v30H10" />
+      <path d="M125 145h70v50h-70" />
+      <path d="M190 145v-30l-10-20h-40l-10 20v30h15v-30l5-5h20l5 5v30h15" />
+    </svg>
+  ),
+  UNCHECKED: (
+    <svg
+      width="205"
+      height="205"
+      viewBox="0 0 205 205"
+      xmlns="http://www.w3.org/2000/svg"
+      className="unlocked-icon rtl-mirror"
+    >
+      <path d="m35 195-25-29.17V50h50v115l-25 30" />
+      <path d="M10 40V10h50v30H10" />
+      <path d="M125 145h70v50h-70" />
+      <path d="M145 145v-30l-10-20H95l-10 20v30h15v-30l5-5h20l5 5v30h15" />
+    </svg>
+  ),
+};
+
+export const PenModeButton = (props: PenModeIconProps) => {
+  if (!props.penDetected) {
+    if (props.isMobile) {
+      return null;
+    }
+    return (
+      <label
+        className={clsx(
+          "ToolIcon ToolIcon__penMode ToolIcon_type_floating",
+          `ToolIcon_size_${DEFAULT_SIZE}`,
+          {
+            "is-mobile": props.isMobile,
+          },
+        )}
+      >
+        <div className="ToolIcon__icon ToolIcon__hidden" />
+      </label>
+    );
+  }
+  return (
+    <label
+      className={clsx(
+        "ToolIcon ToolIcon__penMode ToolIcon_type_floating",
+        `ToolIcon_size_${DEFAULT_SIZE}`,
+        {
+          "is-mobile": props.isMobile,
+        },
+      )}
+      title={`${props.title}`}
+    >
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name={props.name}
+        onChange={props.onChange}
+        checked={props.checked}
+        aria-label={props.title}
+      />
+      <div className="ToolIcon__icon">
+        {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}
+      </div>
+    </label>
+  );
+};

src/components/ToolIcon.scss

@@ -219,6 +219,10 @@
       margin-inline-end: 0;
       top: 60px;
     }
+    .ToolIcon.ToolIcon__penMode {
+      margin-inline-end: 0;
+      top: 140px;
+    }
   }
 
   .unlocked-icon {

src/components/Toolbar.scss

@@ -46,6 +46,10 @@
       }
     }
 
+    .ToolIcon__hidden {
+      box-shadow: none !important;
+    }
+
     .ToolIcon.ToolIcon__lock {
       margin-inline-end: var(--space-factor);
       &.ToolIcon_type_floating {