tldraw
Version:
A tiny little drawing editor.
68 lines (67 loc) • 3.23 kB
JavaScript
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { usePassThroughWheelEvents } from "@tldraw/editor";
import { memo, useCallback, useRef } from "react";
import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
import { unwrapLabel, useActions } from "../../context/actions.mjs";
import { useBreakpoint } from "../../context/breakpoints.mjs";
import { useTldrawUiComponents } from "../../context/components.mjs";
import { useLocalStorageState } from "../../hooks/useLocalStorageState.mjs";
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
import { kbdStr } from "../../kbd-utils.mjs";
import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
const DefaultNavigationPanel = memo(function DefaultNavigationPanel2() {
const actions = useActions();
const msg = useTranslation();
const breakpoint = useBreakpoint();
const ref = useRef(null);
usePassThroughWheelEvents(ref);
const [collapsed, setCollapsed] = useLocalStorageState("minimap", true);
const toggleMinimap = useCallback(() => {
setCollapsed((s) => !s);
}, [setCollapsed]);
const { ZoomMenu, Minimap } = useTldrawUiComponents();
if (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) {
return null;
}
return /* @__PURE__ */ jsxs("div", { ref, className: "tlui-navigation-panel", children: [
/* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "horizontal", label: msg("navigation-zone.title"), children: ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? /* @__PURE__ */ jsx(ZoomMenu, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
!collapsed && /* @__PURE__ */ jsx(
TldrawUiToolbarButton,
{
type: "icon",
"data-testid": "minimap.zoom-out",
title: `${msg(unwrapLabel(actions["zoom-out"].label))} ${kbdStr(actions["zoom-out"].kbd)}`,
onClick: () => actions["zoom-out"].onSelect("navigation-zone"),
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { small: true, icon: "minus" })
}
),
ZoomMenu && /* @__PURE__ */ jsx(ZoomMenu, {}, "zoom-menu"),
!collapsed && /* @__PURE__ */ jsx(
TldrawUiToolbarButton,
{
type: "icon",
"data-testid": "minimap.zoom-in",
title: `${msg(unwrapLabel(actions["zoom-in"].label))} ${kbdStr(actions["zoom-in"].kbd)}`,
onClick: () => actions["zoom-in"].onSelect("navigation-zone"),
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { small: true, icon: "plus" })
}
),
Minimap && /* @__PURE__ */ jsx(
TldrawUiToolbarButton,
{
type: "icon",
"data-testid": "minimap.toggle-button",
title: msg("navigation-zone.toggle-minimap"),
onClick: toggleMinimap,
children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { small: true, icon: collapsed ? "chevron-right" : "chevron-left" })
}
)
] }) }),
Minimap && breakpoint >= PORTRAIT_BREAKPOINT.TABLET && !collapsed && /* @__PURE__ */ jsx(Minimap, {})
] });
});
export {
DefaultNavigationPanel
};
//# sourceMappingURL=DefaultNavigationPanel.mjs.map