first commit
This commit is contained in:
86
app/src/components/footer/Footer.tsx
Normal file
86
app/src/components/footer/Footer.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import { HelpIcon } from "../icons/DashboardIcon";
|
||||
import { useLogger } from "../ui/log/LoggerContext";
|
||||
import { GetLogIcon } from "./getLogIcons";
|
||||
import {
|
||||
CurserLeftIcon,
|
||||
CurserMiddleIcon,
|
||||
CurserRightIcon,
|
||||
} from "../icons/LogIcons";
|
||||
import ShortcutHelper from "./shortcutHelper";
|
||||
import { useShortcutStore } from "../../store/builder/store";
|
||||
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const { logs, setIsLogListVisible } = useLogger();
|
||||
const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
|
||||
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { showShortcuts, setShowShortcuts } = useShortcutStore();
|
||||
|
||||
return (
|
||||
<div className="footer-container">
|
||||
<div className="footer-wrapper">
|
||||
<div className="selection-wrapper">
|
||||
<div className="selector-wrapper">
|
||||
<div className="icon">
|
||||
<CurserLeftIcon />
|
||||
</div>
|
||||
<div className="selector">Selection</div>
|
||||
</div>
|
||||
<div className="selector-wrapper">
|
||||
<div className="icon">
|
||||
<CurserMiddleIcon />
|
||||
</div>
|
||||
<div className="selector">Rotate/Zoom</div>
|
||||
</div>
|
||||
<div className="selector-wrapper">
|
||||
<div className="icon">
|
||||
<CurserRightIcon />
|
||||
</div>
|
||||
<div className="selector">Pan/Context Menu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="logs-wrapper">
|
||||
<div className="bg-dummy left-top"></div>
|
||||
<div className="bg-dummy right-bottom"></div>
|
||||
<div className="log-container">
|
||||
<button
|
||||
id="log-details-buttton"
|
||||
className={`logs-detail ${lastLog ? lastLog.type : ""}`}
|
||||
onClick={() => setIsLogListVisible(true)}
|
||||
>
|
||||
{lastLog ? (
|
||||
<>
|
||||
<span className="log-icon">{GetLogIcon(lastLog.type)}</span>
|
||||
<span className="log-message">{lastLog.message}</span>
|
||||
</>
|
||||
) : (
|
||||
"There are no logs to display at the moment."
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="version">
|
||||
V 0.01
|
||||
<div className="icon">
|
||||
<HelpIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isPlaying && (
|
||||
<div
|
||||
className={`shortcut-helper-overlay ${
|
||||
showShortcuts ? "visible" : ""
|
||||
}`}
|
||||
>
|
||||
<ShortcutHelper setShowShortcuts={setShowShortcuts}/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
19
app/src/components/footer/getLogIcons.tsx
Normal file
19
app/src/components/footer/getLogIcons.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { ErrorIcon, LogIcon, LogInfoIcon, SucessIcon, WarningIcon } from "../icons/LogIcons";
|
||||
import { LogType } from "../ui/log/LoggerContext";
|
||||
|
||||
export const GetLogIcon = (type: LogType): JSX.Element => {
|
||||
switch (type) {
|
||||
case "info":
|
||||
return <LogInfoIcon />;
|
||||
case "log":
|
||||
return <LogIcon />;
|
||||
case "error":
|
||||
return <ErrorIcon />;
|
||||
case "warning":
|
||||
return <WarningIcon />;
|
||||
case "success":
|
||||
return <SucessIcon />;
|
||||
default:
|
||||
return <LogIcon />;
|
||||
}
|
||||
};
|
||||
352
app/src/components/footer/shortcutHelper.tsx
Normal file
352
app/src/components/footer/shortcutHelper.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
UndoIcon,
|
||||
RedoIcon,
|
||||
ESCIcon,
|
||||
HelpIcon,
|
||||
FindIcon,
|
||||
InfoIcon,
|
||||
CurserIcon,
|
||||
DeleteIcon,
|
||||
FreeHandIcon,
|
||||
MeasurementToolIcon,
|
||||
WallToolIcon,
|
||||
ZoneToolIcon,
|
||||
AisleToolIcon,
|
||||
FloorToolIcon,
|
||||
MoveIcon,
|
||||
RotateIcon,
|
||||
ToogleViewIcon,
|
||||
UIVisiblityIcon,
|
||||
FirstPersonViewIcon,
|
||||
BuilderIcon,
|
||||
SimulationIcon,
|
||||
VisualizationIcon,
|
||||
MarketplaceIcon,
|
||||
CopyIcon,
|
||||
PasteIcon,
|
||||
DublicateIcon,
|
||||
DuplicateInstanceIcon,
|
||||
PlayIcon,
|
||||
} from "../icons/ShortcutIcons";
|
||||
import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons";
|
||||
|
||||
interface ShortcutItem {
|
||||
keys: string[];
|
||||
name?: string;
|
||||
description: string;
|
||||
icon: any;
|
||||
}
|
||||
|
||||
interface ShortcutGroup {
|
||||
category: string;
|
||||
items: ShortcutItem[];
|
||||
}
|
||||
|
||||
interface ShortcutHelperProps {
|
||||
setShowShortcuts: (value: boolean) => void;
|
||||
}
|
||||
|
||||
const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
|
||||
setShowShortcuts,
|
||||
}) => {
|
||||
const shortcuts: ShortcutGroup[] = [
|
||||
// Essential
|
||||
{
|
||||
category: "Essential",
|
||||
items: [
|
||||
{
|
||||
keys: ["CTRL", "+", "Z"],
|
||||
name: "Undo",
|
||||
description: "Undo Last action",
|
||||
icon: <UndoIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "Y"],
|
||||
name: "Redo",
|
||||
description: "Redo Last action",
|
||||
icon: <RedoIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["ESC"],
|
||||
name: "Escape",
|
||||
description: "Reset to Cursor & Stop Playback",
|
||||
icon: <ESCIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "H"],
|
||||
name: "Help",
|
||||
description: "Open Help",
|
||||
icon: <HelpIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "F"],
|
||||
name: "Find",
|
||||
description: "Find / Search Functionality",
|
||||
icon: <FindIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "SHIFT", "+", "?"],
|
||||
name: "Info",
|
||||
description: "Show Shortcut Info",
|
||||
icon: <InfoIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["L"],
|
||||
name: "Log",
|
||||
description: "Show Log list",
|
||||
icon: <InfoIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// Tools
|
||||
{
|
||||
category: "Tools",
|
||||
items: [
|
||||
{
|
||||
keys: ["V"],
|
||||
name: "Cursor Tool",
|
||||
description: "Activate Cursor tool",
|
||||
icon: <CurserIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["X"],
|
||||
name: "Delete Tool",
|
||||
description: "Activate Delete tool",
|
||||
icon: <DeleteIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["H"],
|
||||
name: "Freehand Tool",
|
||||
description: "Activate Free-Hand tool",
|
||||
icon: <FreeHandIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["M"],
|
||||
name: "Measurement Tool",
|
||||
description: "Activate Measurement tool",
|
||||
icon: <MeasurementToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["Q", "OR", "6"],
|
||||
name: "Wall Tool",
|
||||
description: "Select Wall floor tool (2D)",
|
||||
icon: <WallToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["E", "OR", "8"],
|
||||
name: "Zone Tool",
|
||||
description: "Select Draw zone tool (2D)",
|
||||
icon: <ZoneToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["R", "OR", "7"],
|
||||
name: "Aisle Tool",
|
||||
description: "Select Aisle floor tool (2D)",
|
||||
icon: <AisleToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["T", "OR", "9"],
|
||||
name: "Floor Tool",
|
||||
description: "Select Draw floor tool (2D)",
|
||||
icon: <FloorToolIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["G"],
|
||||
name: "Move Asset",
|
||||
description: "Move Selected Asset",
|
||||
icon: <MoveIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["R"],
|
||||
name: "Rotate Asset",
|
||||
description: "Rotate Selected Asset",
|
||||
icon: <RotateIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// View & Navigation
|
||||
{
|
||||
category: "View & Navigation",
|
||||
items: [
|
||||
{
|
||||
keys: ["TAB"],
|
||||
name: "Toggle View",
|
||||
description: "Toggle between 2D & 3D views (Builder)",
|
||||
icon: <ToogleViewIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "\\"],
|
||||
name: "Toggle UI",
|
||||
description: "Toggle UI Visibility",
|
||||
icon: <UIVisiblityIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "["],
|
||||
name: "Toggle UI",
|
||||
description: "Left Sidebar Visibility",
|
||||
icon: <UIVisiblityIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "]"],
|
||||
name: "Toggle UI",
|
||||
description: "Right Sidebar Visibility",
|
||||
icon: <UIVisiblityIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["/"],
|
||||
name: "First Person View",
|
||||
description: "Switch to First-person View",
|
||||
icon: <FirstPersonViewIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// Module Switching
|
||||
{
|
||||
category: "Module Switching",
|
||||
items: [
|
||||
{
|
||||
keys: ["1"],
|
||||
name: "Builder",
|
||||
description: "Switch to Builder module",
|
||||
icon: <BuilderIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["2"],
|
||||
name: "Simulation",
|
||||
description: "Switch to Simulation module",
|
||||
icon: <SimulationIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["3"],
|
||||
name: "Visualization",
|
||||
description: "Switch to Visualization module",
|
||||
icon: <VisualizationIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["4"],
|
||||
name: "Marketplace",
|
||||
description: "Switch to Marketplace module",
|
||||
icon: <MarketplaceIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// Selection
|
||||
{
|
||||
category: "Selection",
|
||||
items: [
|
||||
{
|
||||
keys: ["CTRL", "+", "C"],
|
||||
name: "Copy",
|
||||
description: "Copy an Asset",
|
||||
icon: <CopyIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "V"],
|
||||
name: "Paste",
|
||||
description: "Paste an Asset",
|
||||
icon: <PasteIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "D"],
|
||||
name: "Duplicate",
|
||||
description: "Duplicate an Asset",
|
||||
icon: <DublicateIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["ALT", "+", "D"],
|
||||
name: "Duplicate (Instance)",
|
||||
description: "Duplicate an Instanced Asset",
|
||||
icon: <DuplicateInstanceIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
// Simulation
|
||||
{
|
||||
category: "Simulation",
|
||||
items: [
|
||||
{
|
||||
keys: ["CTRL", "+", "P"],
|
||||
name: "Play",
|
||||
description: "Play Simulation",
|
||||
icon: <PlayIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["H"],
|
||||
name: "Hide Player",
|
||||
description: "Hide Simulation Player",
|
||||
icon: <EyeCloseIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const [activeCategory, setActiveCategory] =
|
||||
React.useState<string>("Essential");
|
||||
|
||||
const activeShortcuts =
|
||||
shortcuts.find((group) => group.category === activeCategory)?.items ?? [];
|
||||
|
||||
return (
|
||||
<div className="shortcut-helper-container">
|
||||
<button
|
||||
id="close-shortcuts-helper"
|
||||
className="close-button"
|
||||
title="close-btn"
|
||||
onClick={() => {
|
||||
setShowShortcuts(false);
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<div className="header">
|
||||
<div className="header-wrapper">
|
||||
{shortcuts.map((group) => (
|
||||
<button
|
||||
id={group.category}
|
||||
key={group.category}
|
||||
onClick={() => setActiveCategory(group.category)}
|
||||
className={activeCategory === group.category ? "active" : ""}
|
||||
>
|
||||
{group.category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`shortcut-wrapper ${
|
||||
activeShortcuts.length === 1 ? "single-item" : ""
|
||||
}`}
|
||||
>
|
||||
{activeShortcuts.map((item) => (
|
||||
<div
|
||||
key={`${item.name}-${item.keys.join("")}`}
|
||||
className="shortcut-item"
|
||||
>
|
||||
<div className="shortcut-intro">
|
||||
<div className="icon">{item.icon}</div>
|
||||
<div className="value-wrapper">
|
||||
<div className="name">{item.name}</div>
|
||||
<div className="description">{item.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="keys">
|
||||
{item.keys.map((key, i) => (
|
||||
<span
|
||||
key={`${key}-${i}`}
|
||||
className={`key${key === "+" || key === "OR" ? " add" : ""}`}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShortcutHelper;
|
||||
Reference in New Issue
Block a user