From 7d4189c624d81c6956408e3b8c49d1dffa966a81 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Fri, 15 Apr 2022 12:20:51 +0200
Subject: [PATCH] fix: Add image button not working on iPad (#5038)

---
 src/components/Actions.tsx | 126 ++++++++++++++++---------------------
 1 file changed, 53 insertions(+), 73 deletions(-)

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 8806fe31..e18fb9c8 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -15,12 +15,7 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import {
-  capitalizeString,
-  isTransparent,
-  setCursorForShape,
-  withBatchedUpdates,
-} from "../utils";
+import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
@@ -201,73 +196,58 @@ export const ShapesSwitcher = ({
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
-}) => {
-  const onChange = withBatchedUpdates(
-    ({
-      activeToolType,
-      pointerType,
-    }: {
-      activeToolType: typeof SHAPES[number]["value"];
-      pointerType: PointerType | null;
-    }) => {
-      if (appState.activeTool.type !== activeToolType) {
-        trackEvent("toolbar", activeToolType, "ui");
-      }
-      if (!appState.penDetected && pointerType === "pen") {
-        setAppState({
-          penDetected: true,
-          penMode: true,
-        });
-      }
-      const nextActiveTool = { ...activeTool, type: activeToolType };
-      setAppState({
-        activeTool: nextActiveTool,
-        multiElement: null,
-        selectedElementIds: {},
-      });
-      setCursorForShape(canvas, {
-        ...appState,
-        activeTool: nextActiveTool,
-      });
-      if (activeToolType === "image") {
-        onImageAction({ pointerType });
-      }
-    },
-  );
-
-  return (
-    <>
-      {SHAPES.map(({ value, icon, key }, index) => {
-        const label = t(`toolBar.${value}`);
-        const letter = key && (typeof key === "string" ? key : key[0]);
-        const shortcut = letter
-          ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${index + 1}`
-          : `${index + 1}`;
-        return (
-          <ToolButton
-            className="Shape"
-            key={value}
-            type="radio"
-            icon={icon}
-            checked={activeTool.type === value}
-            name="editor-current-shape"
-            title={`${capitalizeString(label)} — ${shortcut}`}
-            keyBindingLabel={`${index + 1}`}
-            aria-label={capitalizeString(label)}
-            aria-keyshortcuts={shortcut}
-            data-testid={value}
-            onPointerDown={({ pointerType }) => {
-              onChange({ activeToolType: value, pointerType });
-            }}
-            onChange={({ pointerType }) => {
-              onChange({ activeToolType: value, pointerType });
-            }}
-          />
-        );
-      })}
-    </>
-  );
-};
+}) => (
+  <>
+    {SHAPES.map(({ value, icon, key }, index) => {
+      const label = t(`toolBar.${value}`);
+      const letter = key && (typeof key === "string" ? key : key[0]);
+      const shortcut = letter
+        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${index + 1}`
+        : `${index + 1}`;
+      return (
+        <ToolButton
+          className="Shape"
+          key={value}
+          type="radio"
+          icon={icon}
+          checked={activeTool.type === value}
+          name="editor-current-shape"
+          title={`${capitalizeString(label)} — ${shortcut}`}
+          keyBindingLabel={`${index + 1}`}
+          aria-label={capitalizeString(label)}
+          aria-keyshortcuts={shortcut}
+          data-testid={value}
+          onPointerDown={({ pointerType }) => {
+            if (!appState.penDetected && pointerType === "pen") {
+              setAppState({
+                penDetected: true,
+                penMode: true,
+              });
+            }
+          }}
+          onChange={({ pointerType }) => {
+            if (appState.activeTool.type !== value) {
+              trackEvent("toolbar", value, "ui");
+            }
+            const nextActiveTool = { ...activeTool, type: value };
+            setAppState({
+              activeTool: nextActiveTool,
+              multiElement: null,
+              selectedElementIds: {},
+            });
+            setCursorForShape(canvas, {
+              ...appState,
+              activeTool: nextActiveTool,
+            });
+            if (value === "image") {
+              onImageAction({ pointerType });
+            }
+          }}
+        />
+      );
+    })}
+  </>
+);
 
 export const ZoomActions = ({
   renderAction,