feat: close mobile canvas menu on canvas pointerdown

src/components/App.tsx

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