377 lines
12 KiB
TypeScript
377 lines
12 KiB
TypeScript
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>
|
|
);
|
|
};
|