snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)
Some checks failed
Tests / test (push) Failing after 15s
Some checks failed
Tests / test (push) Failing after 15s
This commit is contained in:
upstream-mirror
376
packages/excalidraw/components/MobileToolbar.tsx
Normal file
376
packages/excalidraw/components/MobileToolbar.tsx
Normal file
@@ -0,0 +1,376 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { KEYS, capitalizeString } from "@excalidraw/common";
|
||||
|
||||
import { t } from "../i18n";
|
||||
|
||||
import { useTunnels } from "../context/tunnels";
|
||||
|
||||
import DropdownMenu from "./dropdownMenu/DropdownMenu";
|
||||
import { ToolPopover } from "./ToolPopover";
|
||||
import {
|
||||
EraserToolButton,
|
||||
FrameToolButton,
|
||||
FreedrawToolPopover,
|
||||
getToolShortcut,
|
||||
HandToolButton,
|
||||
ImageToolButton,
|
||||
isToolButtonDisabled,
|
||||
SelectionToolPopover,
|
||||
TextToolButton,
|
||||
TOOLS,
|
||||
} from "./Tools";
|
||||
|
||||
import {
|
||||
TextIcon,
|
||||
ImageIcon,
|
||||
DotsIcon,
|
||||
frameToolIcon,
|
||||
EmbedIcon,
|
||||
laserPointerToolIcon,
|
||||
drawShapeToolIcon,
|
||||
bucketFillIcon,
|
||||
mermaidLogoIcon,
|
||||
MagicIcon,
|
||||
stickyNoteToolIcon,
|
||||
} from "./icons";
|
||||
|
||||
import "./ToolIcon.scss";
|
||||
import "./MobileToolbar.scss";
|
||||
|
||||
import type { AppClassProperties, UIAppState } from "../types";
|
||||
|
||||
type MobileToolbarProps = {
|
||||
app: AppClassProperties;
|
||||
setAppState: React.Component<any, UIAppState>["setState"];
|
||||
};
|
||||
|
||||
export const MobileToolbar = ({ app, setAppState }: MobileToolbarProps) => {
|
||||
const activeTool = app.state.activeTool;
|
||||
const [isOtherShapesMenuOpen, setIsOtherShapesMenuOpen] = useState(false);
|
||||
const [lastActiveGenericShape, setLastActiveGenericShape] = useState<
|
||||
"rectangle" | "diamond" | "ellipse"
|
||||
>("rectangle");
|
||||
const [lastActiveLinearElement, setLastActiveLinearElement] = useState<
|
||||
"arrow" | "line"
|
||||
>("arrow");
|
||||
|
||||
// keep lastActiveGenericShape in sync with active tool if user switches via other UI
|
||||
useEffect(() => {
|
||||
if (
|
||||
activeTool.type === "rectangle" ||
|
||||
activeTool.type === "diamond" ||
|
||||
activeTool.type === "ellipse"
|
||||
) {
|
||||
setLastActiveGenericShape(activeTool.type);
|
||||
}
|
||||
}, [activeTool.type]);
|
||||
|
||||
// keep lastActiveLinearElement in sync with active tool if user switches via other UI
|
||||
useEffect(() => {
|
||||
if (activeTool.type === "arrow" || activeTool.type === "line") {
|
||||
setLastActiveLinearElement(activeTool.type);
|
||||
}
|
||||
}, [activeTool.type]);
|
||||
|
||||
const frameToolSelected = activeTool.type === "frame";
|
||||
const drawShapeToolSelected = activeTool.type === "autoshape";
|
||||
const laserToolSelected = activeTool.type === "laser";
|
||||
const embeddableToolSelected = activeTool.type === "embeddable";
|
||||
const bucketFillToolSelected = activeTool.type === "bucketfill";
|
||||
const stickyNoteToolSelected = activeTool.type === "stickynote";
|
||||
|
||||
const { TTDDialogTriggerTunnel } = useTunnels();
|
||||
|
||||
const SHAPE_TOOLS = (["rectangle", "diamond", "ellipse"] as const).map(
|
||||
(type) => ({
|
||||
type,
|
||||
icon: TOOLS[type].icon,
|
||||
title: capitalizeString(t(`toolBar.${type}`)),
|
||||
fillable: TOOLS[type].fillable,
|
||||
}),
|
||||
);
|
||||
|
||||
const LINEAR_ELEMENT_TOOLS = (["arrow", "line"] as const).map((type) => ({
|
||||
type,
|
||||
icon: TOOLS[type].icon,
|
||||
title: capitalizeString(t(`toolBar.${type}`)),
|
||||
fillable: TOOLS[type].fillable,
|
||||
}));
|
||||
|
||||
const [toolbarWidth, setToolbarWidth] = useState(0);
|
||||
|
||||
const WIDTH = 36;
|
||||
const GAP = 4;
|
||||
|
||||
// hand, selection, freedraw, eraser, rectangle, arrow, others
|
||||
const MIN_TOOLS = 7;
|
||||
const MIN_WIDTH = MIN_TOOLS * WIDTH + (MIN_TOOLS - 1) * GAP;
|
||||
const ADDITIONAL_WIDTH = WIDTH + GAP;
|
||||
|
||||
const showTextToolOutside = toolbarWidth >= MIN_WIDTH + 1 * ADDITIONAL_WIDTH;
|
||||
const showImageToolOutside = toolbarWidth >= MIN_WIDTH + 2 * ADDITIONAL_WIDTH;
|
||||
const showFrameToolOutside = toolbarWidth >= MIN_WIDTH + 3 * ADDITIONAL_WIDTH;
|
||||
|
||||
const extraTools: readonly typeof activeTool.type[] = (
|
||||
[
|
||||
"text",
|
||||
"stickynote",
|
||||
"frame",
|
||||
"embeddable",
|
||||
"laser",
|
||||
"bucketfill",
|
||||
"magicframe",
|
||||
] as const
|
||||
).filter((tool) => {
|
||||
if (showTextToolOutside && tool === "text") {
|
||||
return false;
|
||||
}
|
||||
if (showFrameToolOutside && tool === "frame") {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const extraToolSelected = extraTools.includes(activeTool.type);
|
||||
const extraIcon = extraToolSelected
|
||||
? activeTool.type === "text"
|
||||
? TextIcon
|
||||
: activeTool.type === "image"
|
||||
? ImageIcon
|
||||
: activeTool.type === "frame"
|
||||
? frameToolIcon
|
||||
: activeTool.type === "stickynote"
|
||||
? stickyNoteToolIcon
|
||||
: activeTool.type === "embeddable"
|
||||
? EmbedIcon
|
||||
: activeTool.type === "laser"
|
||||
? laserPointerToolIcon
|
||||
: activeTool.type === "bucketfill"
|
||||
? bucketFillIcon
|
||||
: activeTool.type === "magicframe"
|
||||
? MagicIcon
|
||||
: DotsIcon
|
||||
: DotsIcon;
|
||||
|
||||
const toolProps = { app, activeTool };
|
||||
|
||||
return (
|
||||
<div
|
||||
className="mobile-toolbar"
|
||||
ref={(div) => {
|
||||
if (div) {
|
||||
setToolbarWidth(div.getBoundingClientRect().width);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Hand Tool */}
|
||||
<HandToolButton {...toolProps} hideKeyBinding />
|
||||
|
||||
{/* Selection Tool */}
|
||||
<SelectionToolPopover {...toolProps} setAppState={setAppState} />
|
||||
|
||||
{/* Free Draw */}
|
||||
<FreedrawToolPopover {...toolProps} />
|
||||
|
||||
{/* Eraser */}
|
||||
<EraserToolButton {...toolProps} hideShortcut />
|
||||
|
||||
{/* Rectangle/Diamond/Ellipse */}
|
||||
<ToolPopover
|
||||
app={app}
|
||||
options={SHAPE_TOOLS}
|
||||
activeTool={activeTool}
|
||||
defaultOption={lastActiveGenericShape}
|
||||
data-testid="toolbar-rectangle"
|
||||
onToolChange={(type: string) => {
|
||||
if (
|
||||
type === "rectangle" ||
|
||||
type === "diamond" ||
|
||||
type === "ellipse"
|
||||
) {
|
||||
setLastActiveGenericShape(type);
|
||||
app.setActiveTool({ type });
|
||||
}
|
||||
}}
|
||||
displayedOption={
|
||||
SHAPE_TOOLS.find((tool) => tool.type === lastActiveGenericShape) ||
|
||||
SHAPE_TOOLS[0]
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Arrow/Line */}
|
||||
<ToolPopover
|
||||
app={app}
|
||||
options={LINEAR_ELEMENT_TOOLS}
|
||||
activeTool={activeTool}
|
||||
defaultOption={lastActiveLinearElement}
|
||||
data-testid="toolbar-arrow"
|
||||
onToolChange={(type: string) => {
|
||||
if (type === "arrow" || type === "line") {
|
||||
setLastActiveLinearElement(type);
|
||||
app.setActiveTool({ type });
|
||||
}
|
||||
}}
|
||||
displayedOption={
|
||||
LINEAR_ELEMENT_TOOLS.find(
|
||||
(tool) => tool.type === lastActiveLinearElement,
|
||||
) || LINEAR_ELEMENT_TOOLS[0]
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Text Tool */}
|
||||
{showTextToolOutside && <TextToolButton {...toolProps} hideShortcut />}
|
||||
|
||||
{/* Image */}
|
||||
{showImageToolOutside && <ImageToolButton {...toolProps} hideShortcut />}
|
||||
|
||||
{/* Frame Tool */}
|
||||
{showFrameToolOutside && <FrameToolButton {...toolProps} hideShortcut />}
|
||||
|
||||
{/* Other Shapes */}
|
||||
<DropdownMenu open={isOtherShapesMenuOpen}>
|
||||
<DropdownMenu.Trigger
|
||||
className={clsx(
|
||||
"App-toolbar__extra-tools-trigger App-toolbar__extra-tools-trigger--mobile",
|
||||
{
|
||||
"App-toolbar__extra-tools-trigger--selected":
|
||||
extraToolSelected || isOtherShapesMenuOpen,
|
||||
},
|
||||
)}
|
||||
onToggle={() => {
|
||||
setIsOtherShapesMenuOpen(!isOtherShapesMenuOpen);
|
||||
setAppState({ openMenu: null, openPopup: null });
|
||||
}}
|
||||
title={t("toolBar.extraTools")}
|
||||
style={{
|
||||
width: WIDTH,
|
||||
height: WIDTH,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{extraIcon}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
onClickOutside={() => setIsOtherShapesMenuOpen(false)}
|
||||
onSelect={() => setIsOtherShapesMenuOpen(false)}
|
||||
className="App-toolbar__extra-tools-dropdown"
|
||||
align="start"
|
||||
>
|
||||
{!showTextToolOutside && (
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "text" })}
|
||||
icon={TextIcon}
|
||||
shortcut={KEYS.T.toLocaleUpperCase()}
|
||||
data-testid="toolbar-text"
|
||||
selected={activeTool.type === "text"}
|
||||
disabled={isToolButtonDisabled(app, "text")}
|
||||
>
|
||||
{t("toolBar.text")}
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
|
||||
{!showImageToolOutside && (
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "image" })}
|
||||
icon={ImageIcon}
|
||||
data-testid="toolbar-image"
|
||||
selected={activeTool.type === "image"}
|
||||
disabled={isToolButtonDisabled(app, "image")}
|
||||
>
|
||||
{t("toolBar.image")}
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "stickynote" })}
|
||||
icon={stickyNoteToolIcon}
|
||||
shortcut={KEYS.N.toLocaleUpperCase()}
|
||||
data-testid="toolbar-stickynote"
|
||||
selected={stickyNoteToolSelected}
|
||||
disabled={isToolButtonDisabled(app, "stickynote")}
|
||||
>
|
||||
{t("toolBar.stickynote")}
|
||||
</DropdownMenu.Item>
|
||||
|
||||
{!showFrameToolOutside && (
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "frame" })}
|
||||
icon={frameToolIcon}
|
||||
shortcut={KEYS.F.toLocaleUpperCase()}
|
||||
data-testid="toolbar-frame"
|
||||
selected={frameToolSelected}
|
||||
disabled={isToolButtonDisabled(app, "frame")}
|
||||
>
|
||||
{t("toolBar.frame")}
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "embeddable" })}
|
||||
icon={EmbedIcon}
|
||||
data-testid="toolbar-embeddable"
|
||||
selected={embeddableToolSelected}
|
||||
disabled={isToolButtonDisabled(app, "embeddable")}
|
||||
>
|
||||
{t("toolBar.embeddable")}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "autoshape" })}
|
||||
icon={drawShapeToolIcon}
|
||||
shortcut={getToolShortcut("autoshape")}
|
||||
data-testid="toolbar-autoshape"
|
||||
selected={drawShapeToolSelected}
|
||||
disabled={isToolButtonDisabled(app, "autoshape")}
|
||||
>
|
||||
{t("toolBar.autoshape")}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "laser" })}
|
||||
icon={laserPointerToolIcon}
|
||||
data-testid="toolbar-laser"
|
||||
selected={laserToolSelected}
|
||||
shortcut={KEYS.K.toLocaleUpperCase()}
|
||||
disabled={isToolButtonDisabled(app, "laser")}
|
||||
>
|
||||
{t("toolBar.laser")}
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setActiveTool({ type: "bucketfill" })}
|
||||
icon={bucketFillIcon}
|
||||
data-testid="toolbar-bucketfill"
|
||||
selected={bucketFillToolSelected}
|
||||
shortcut={KEYS.B.toLocaleUpperCase()}
|
||||
disabled={isToolButtonDisabled(app, "bucketfill")}
|
||||
>
|
||||
{t("toolBar.bucketfill")}
|
||||
</DropdownMenu.Item>
|
||||
<div style={{ margin: "6px 0", fontSize: 14, fontWeight: 600 }}>
|
||||
Generate
|
||||
</div>
|
||||
{app.props.aiEnabled !== false && <TTDDialogTriggerTunnel.Out />}
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.setOpenDialog({ name: "ttd", tab: "mermaid" })}
|
||||
icon={mermaidLogoIcon}
|
||||
data-testid="toolbar-embeddable"
|
||||
>
|
||||
{t("toolBar.mermaidToExcalidraw")}
|
||||
</DropdownMenu.Item>
|
||||
{app.props.aiEnabled !== false && app.plugins.diagramToCode && (
|
||||
<>
|
||||
<DropdownMenu.Item
|
||||
onSelect={() => app.onMagicframeToolSelect()}
|
||||
icon={MagicIcon}
|
||||
data-testid="toolbar-magicframe"
|
||||
badge={<DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>}
|
||||
disabled={isToolButtonDisabled(app, "magicframe")}
|
||||
>
|
||||
{t("toolBar.magicframe")}
|
||||
</DropdownMenu.Item>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user