@playcanvas/blocks
Version:
High level abstract 3D primitives for React
41 lines • 6.77 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button } from "../components/ui/button";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
import { useMediaQuery } from "./help-dialog";
import { EllipsisVerticalIcon, DownloadIcon, MinimizeIcon, MaximizeIcon, HelpCircleIcon, Rotate3dIcon, Move3DIcon } from "lucide-react";
import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerClose } from "../components/ui/drawer";
import { useAssetViewer } from "./splat-viewer-context";
import { ToggleGroupItem } from "../components/ui/toggle-group";
import { ToggleGroup } from "../components/ui/toggle-group";
import { Card } from "../components/ui/card";
import { Switch } from "../components/ui/switch";
import { Separator } from "../components/ui/separator";
function MenuItemsDesktop({ mode, setMode, setOverlay, triggerDownload, toggleFullscreen }) {
return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Settings" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => setOverlay("help"), children: ["Help", _jsx(DropdownMenuShortcut, { children: "\u21E7F" })] }), _jsxs(DropdownMenuItem, { onClick: () => triggerDownload(), children: ["Download", _jsx(DropdownMenuShortcut, { children: "\u21E7\u2318D" })] }), _jsxs(DropdownMenuItem, { onClick: () => toggleFullscreen(), children: ["Fullscreen", _jsx(DropdownMenuShortcut, { children: "\u21E7\u2318F" })] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: ["Auto Rotate", _jsx(DropdownMenuShortcut, { children: "\u21E7\u2318R" })] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Controls" }), _jsxs(DropdownMenuRadioGroup, { value: mode, onValueChange: (value) => setMode(value), children: [_jsxs(DropdownMenuRadioItem, { value: "orbit", children: ["Orbit", _jsx(DropdownMenuShortcut, { children: "\u2318O" })] }), _jsxs(DropdownMenuRadioItem, { value: "fly", children: ["Fly", _jsx(DropdownMenuShortcut, { children: "\u2318F" })] })] })] })] }));
}
export function CameraModeToggle() {
const { mode, setMode } = useAssetViewer();
const safeSetMode = (mode) => {
if (mode === "orbit" || mode === "fly") {
setMode(mode);
}
};
return (_jsxs("div", { className: "flex items-center justify-between px-2 py-2 text-foreground", children: [_jsxs("div", { className: "flex gap-1 flex-col", children: [_jsx("span", { className: "font-medium", children: "Camera mode" }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [mode === "orbit" && _jsx("span", { children: "Great for inspecting an object." }), mode === "fly" && _jsx("span", { children: "Ideal for navigating larger scenes." })] })] }), _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: safeSetMode, className: "bg-muted p-1 rounded-lg", children: [_jsx(ToggleGroupItem, { value: "orbit", className: "px-3 py-1 rounded-md data-[state=on]:bg-background", children: _jsx(Rotate3dIcon, {}) }), _jsx(ToggleGroupItem, { value: "fly", className: "px-3 py-1 rounded-md data-[state=on]:bg-background", children: _jsx(Move3DIcon, {}) })] })] }));
}
function MenuItemsMobile({ setOverlay, triggerDownload, toggleFullscreen, isFullscreen, autoRotate, setAutoRotate }) {
return (_jsxs("div", { className: "space-y-2 text-sm", children: [_jsx(Card, { className: "m-4 px-2 py-2", children: _jsx(CameraModeToggle, {}) }), _jsx(Card, { className: "m-4 mb-8 p-4", children: _jsxs("div", { className: "flex items-center justify-between ", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "font-medium", children: "Auto rotate" }), _jsx("span", { className: "text-muted-foreground text-xs", children: autoRotate
? _jsx("span", { children: "Automatically rotate the camera around the object." })
: _jsx("span", { children: "Disable automatic rotation." }) })] }), _jsx(Switch, { id: "auto-rotate", checked: autoRotate, onCheckedChange: () => setAutoRotate(!autoRotate) })] }) }), _jsx(Separator, {}), _jsxs("div", { className: "p-2 text-sm", children: [_jsx("h4", { className: "my-2 mb-4 text-muted-foreground text-xs font-semibold px-2", children: "Settings" }), _jsxs(Button, { variant: "ghost", onClick: () => setOverlay("help"), className: "w-full justify-between", children: ["Help", _jsx(DropdownMenuShortcut, { children: _jsx(HelpCircleIcon, {}) })] }), _jsxs(Button, { variant: "ghost", className: "w-full justify-between", onClick: () => triggerDownload(), children: ["Download", _jsx(DropdownMenuShortcut, { children: _jsx(DownloadIcon, {}) })] }), _jsxs(Button, { variant: "ghost", className: "w-full justify-between", onClick: () => toggleFullscreen(), children: [isFullscreen ? "Exit Fullscreen" : "Fullscreen", _jsx(DropdownMenuShortcut, { children: isFullscreen ? _jsx(MinimizeIcon, {}) : _jsx(MaximizeIcon, {}) })] })] })] }));
}
function MenuButton() {
const isDesktop = useMediaQuery("(min-width: 768px)");
const props = useAssetViewer();
const { overlay, setOverlay } = props;
if (isDesktop) {
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "cursor-pointer pointer-events-auto", children: _jsx(EllipsisVerticalIcon, {}) }) }), _jsx(DropdownMenuContent, { side: "top", className: "w-56", children: _jsx(MenuItemsDesktop, { ...props }) })] }));
}
return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon", className: "cursor-pointer pointer-events-auto", onClick: () => setOverlay("settings"), children: _jsx(EllipsisVerticalIcon, {}) }), _jsx(Drawer, { open: overlay === "settings", onOpenChange: () => setOverlay(null), shouldScaleBackground: true, setBackgroundColorOnScale: true, children: _jsx(DrawerContent, { children: _jsxs("div", { className: "mx-auto w-full max-w-md px-4 pb-[calc(env(safe-area-inset-bottom,0px)+1rem)]", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Settings" }), _jsx(DrawerDescription, { children: "Viewer options and controls." })] }), _jsx(MenuItemsMobile, { ...props }), _jsx(DrawerFooter, { children: _jsx(DrawerClose, { asChild: true }) })] }) }) })] }));
}
export { MenuButton };
//# sourceMappingURL=menu-button.js.map