@playcanvas/blocks
Version:
High level abstract 3D primitives for React
60 lines • 5.88 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from "react";
import { useAssetViewer } from "./splat-viewer-context.js";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../components/ui/dialog";
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from "../components/ui/drawer";
import { Table, TableHeader, TableBody, TableCell, TableRow, TableHead } from "../components/ui/table";
import { Badge } from "../components/ui/badge";
import { TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { Tabs } from "../components/ui/tabs";
import { CameraModeToggle } from "./menu-button.js";
import { Card } from "../components/ui/card";
export function useMediaQuery(query) {
const [value, setValue] = React.useState(false);
React.useEffect(() => {
function onChange(event) {
setValue(event.matches);
}
const result = matchMedia(query);
result.addEventListener("change", onChange);
setValue(result.matches);
return () => result.removeEventListener("change", onChange);
}, [query]);
return value;
}
function CameraHelpTable() {
const { mode } = useAssetViewer();
return (_jsxs(_Fragment, { children: [_jsx(TabsContent, { value: "keyboard", children: mode === "orbit" ? (_jsx(ControlSection, { controls: [
["Orbit", "Left Mouse"],
["Pan", "Right Mouse"],
["Zoom", "Mouse Wheel"],
["Reset View", _jsx("div", { className: "flex gap-2 text-right", children: _jsx(Badge, { variant: "secondary", children: "R" }) }, "reset")],
] })) : (_jsx(ControlSection, { controls: [
["Orbit", "Left Mouse"],
["Forward / Backward", _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { variant: "secondary", children: "W" }), _jsx(Badge, { variant: "secondary", children: "S" })] }, "forward-backward")],
["Left / Right", _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { variant: "secondary", children: "A" }), _jsx(Badge, { variant: "secondary", children: "D" })] }, "left-right")],
["Up / Down", _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Q" }), _jsx(Badge, { variant: "secondary", children: "E" })] }, "up-down")],
["Reset View", _jsx("div", { className: "flex gap-2", children: _jsx(Badge, { variant: "secondary", children: "R" }) }, "reset")],
] })) }), _jsx(TabsContent, { value: "touch", children: mode === "orbit" ? (_jsx(ControlSection, { controls: [
["Orbit", "One Finger Drag"],
["Pan", "Two Finger Drag"],
["Zoom", "Pinch"],
// ["Focus", "Double Tap"],
] })) : (_jsx(ControlSection, { controls: [
["Look Around", "Touch on Right"],
["Fly", "Touch on Left"],
["Reset View", "Double Tap"],
] })) })] }));
}
function ControlSection({ controls }) {
return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Input" }), _jsx(TableHead, { className: "text-right", children: "Action" })] }) }), _jsx(TableBody, { children: controls.map(([label, key]) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: label }), _jsx(TableCell, { className: "flex justify-end text-muted-foreground", children: key })] }, label))) })] }));
}
export function HelpDialog() {
const { overlay, setOverlay } = useAssetViewer();
const isDesktop = useMediaQuery("(min-width: 768px)");
if (isDesktop) {
return (_jsx(Dialog, { open: overlay === "help", onOpenChange: () => setOverlay(null), children: _jsxs(DialogContent, { className: "max-w-md", "aria-label": "Camera Controls", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Camera Controls" }), _jsx(DialogDescription, { children: "Use these controls to navigate." })] }), _jsx(Card, { className: "p-2 my-2 opacity-90", children: _jsx(CameraModeToggle, {}) }), _jsxs(Tabs, { defaultValue: "keyboard", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "keyboard", className: "data-[state=active]:bg-background", children: "Keyboard" }), _jsx(TabsTrigger, { value: "touch", className: "data-[state=active]:bg-background", children: "Touch" })] }), _jsx(CameraHelpTable, {})] })] }) }));
}
return (_jsx(Drawer, { open: overlay === "help", onOpenChange: () => setOverlay(null), shouldScaleBackground: true, setBackgroundColorOnScale: true, children: _jsx(DrawerContent, { className: "min-h-[320px]", children: _jsxs("div", { className: "mx-auto w-full max-w-sm pb-18", children: [_jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: "Controls" }), _jsx(DrawerDescription, { children: "Use these controls to navigate." })] }), _jsx(Card, { className: "p-2 m-4 my-2 opacity-90", children: _jsx(CameraModeToggle, {}) }), _jsx("div", { className: "p-4", children: _jsxs(Tabs, { defaultValue: "keyboard", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "keyboard", className: "data-[state=active]:bg-background", children: "Keyboard" }), _jsx(TabsTrigger, { value: "touch", className: "data-[state=active]:bg-background", children: "Touch" })] }), _jsx(CameraHelpTable, {})] }) }), _jsx(DrawerFooter, { children: _jsx(DrawerClose, { asChild: true }) })] }) }) }));
}
//# sourceMappingURL=help-dialog.js.map