tldraw
Version:
A tiny little drawing editor.
35 lines (34 loc) • 1.83 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useEditor, usePassThroughWheelEvents, useValue } from "@tldraw/editor";
import { memo, useRef } from "react";
import { PORTRAIT_BREAKPOINT } from "../constants.mjs";
import { useBreakpoint } from "../context/breakpoints.mjs";
import { useTldrawUiComponents } from "../context/components.mjs";
import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
import { TldrawUiToolbar } from "./primitives/TldrawUiToolbar.mjs";
import { TldrawUiRow } from "./primitives/layout.mjs";
const DefaultMenuPanel = memo(function MenuPanel() {
const breakpoint = useBreakpoint();
const msg = useTranslation();
const ref = useRef(null);
usePassThroughWheelEvents(ref);
const { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents();
const editor = useEditor();
const isSinglePageMode = useValue("isSinglePageMode", () => editor.options.maxPages <= 1, [
editor
]);
const showQuickActions = editor.options.actionShortcutsLocation === "menu" ? true : editor.options.actionShortcutsLocation === "toolbar" ? false : breakpoint >= PORTRAIT_BREAKPOINT.TABLET;
if (!MainMenu && !PageMenu && !showQuickActions) return null;
return /* @__PURE__ */ jsx("nav", { ref, className: "tlui-menu-zone", children: /* @__PURE__ */ jsxs(TldrawUiRow, { children: [
MainMenu && /* @__PURE__ */ jsx(MainMenu, {}),
PageMenu && !isSinglePageMode && /* @__PURE__ */ jsx(PageMenu, {}),
showQuickActions ? /* @__PURE__ */ jsxs(TldrawUiToolbar, { orientation: "horizontal", label: msg("actions-menu.title"), children: [
QuickActions && /* @__PURE__ */ jsx(QuickActions, {}),
ActionsMenu && /* @__PURE__ */ jsx(ActionsMenu, {})
] }) : null
] }) });
});
export {
DefaultMenuPanel
};
//# sourceMappingURL=DefaultMenuPanel.mjs.map