sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Add image button not working on iPad (#5038)

Browse Source
This commit is contained in:
zsviczian 2022-04-15 12:20:51 +02:00 committed by GitHub
parent f3e17c90d3
commit 7d4189c624
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/Actions.tsx
View File

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