From d9b5f1e2d26a1d5813e6a6cf4a72f5a49a123ebf Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 13 May 2025 16:50:50 +0530 Subject: [PATCH 1/2] Developed Ui for shortcuts preview --- app/src/components/footer/Footer.tsx | 115 ++- app/src/components/footer/shortcutHelper.tsx | 312 ++++++- .../icons/RealTimeVisulationIcons.tsx | 3 + app/src/components/icons/ShortcutIcons.tsx | 827 ++++++++++++++++++ .../versionHisory/VersionHistory.tsx | 41 +- app/src/components/ui/Tools.tsx | 67 +- app/src/components/ui/list/List.tsx | 10 +- app/src/components/ui/menu/menu.tsx | 8 +- .../floating/DroppedFloatingWidgets.tsx | 1 + .../widgets/floating/cards/SimpleCard.tsx | 4 +- .../floating/cards/TotalCardComponent.tsx | 2 + app/src/store/store.ts | 14 + app/src/styles/components/footer/footer.scss | 390 ++++++--- app/src/styles/components/lists.scss | 11 +- .../components/marketPlace/marketPlace.scss | 18 +- app/src/styles/components/tools.scss | 34 +- app/src/styles/layout/sidebar.scss | 35 +- app/src/styles/pages/realTimeViz.scss | 4 +- 18 files changed, 1658 insertions(+), 238 deletions(-) create mode 100644 app/src/components/icons/ShortcutIcons.tsx diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx index 39b1df0..ae38c3a 100644 --- a/app/src/components/footer/Footer.tsx +++ b/app/src/components/footer/Footer.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { HelpIcon } from "../icons/DashboardIcon"; import { useLogger } from "../ui/log/LoggerContext"; import { GetLogIcon } from "./getLogIcons"; @@ -7,59 +7,94 @@ import { CurserMiddleIcon, CurserRightIcon, } from "../icons/LogIcons"; +import ShortcutHelper from "./shortcutHelper"; +import { useShortcutStore } from "../../store/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 { showShortcuts, setShowShortcuts } = useShortcutStore(); + const { isPlaying } = usePlayButtonStore(); + + // Listen for Ctrl + Shift + ? + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if ( + e.ctrlKey && + e.shiftKey && + (e.key === "?" || e.key === "/") // for some keyboards ? and / share the same key + ) { + e.preventDefault(); + setShowShortcuts(!showShortcuts); // toggle visibility directly + } + }; + + window.addEventListener("keydown", handleKeyDown); + return () => window.removeEventListener("keydown", handleKeyDown); + }, [showShortcuts, setShowShortcuts]); + return ( -
-
-
-
- +
+
+
+
+
+ +
+
Selection
+
+
+
+ +
+
Rotate/Zoom
+
+
+
+ +
+
Pan/Context Menu
-
Selection
-
-
- + +
+
+
+
+
-
Rotate/Zoom
-
-
-
- +
+ V 0.01 +
+ +
-
Pan/Context Menu
-
-
-
-
- + {!isPlaying && ( +
+
-
- V 0.01 -
- -
-
-
+ )}
); }; diff --git a/app/src/components/footer/shortcutHelper.tsx b/app/src/components/footer/shortcutHelper.tsx index af6dacd..96ff8ad 100644 --- a/app/src/components/footer/shortcutHelper.tsx +++ b/app/src/components/footer/shortcutHelper.tsx @@ -1,7 +1,317 @@ 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, + BrowserIcon, +} from "../icons/ShortcutIcons"; + +interface ShortcutItem { + keys: string[]; + name?: string; + description: string; + icon: any; +} + +interface ShortcutGroup { + category: string; + items: ShortcutItem[]; +} + const ShortcutHelper = () => { - return
; + const shortcuts: ShortcutGroup[] = [ + { + category: "Essential", + items: [ + { + keys: ["CTRL", "+", "Z"], + name: "Undo", + description: "Undo Last action", + icon: , + }, + { + keys: ["CTRL", "+", "Y"], + name: "Redo", + description: "Redo Last action", + icon: , + }, + { + keys: ["ESC"], + name: "Escape", + description: "Reset to Cursor & Stop Playback", + icon: , + }, + { + keys: ["CTRL", "+", "H"], + name: "Help", + description: "Open Help", + icon: , + }, + { + keys: ["CTRL", "+", "F"], + name: "Find", + description: "Find / Search Functionality", + icon: , + }, + { + keys: ["CTRL", "+", "?"], + name: "Info", + description: "Show Shortcut Info", + icon: , + }, + ], + }, + { + category: "Tools", + items: [ + { + keys: ["V"], + name: "Cursor Tool", + description: "Activate Cursor tool", + icon: , + }, + { + keys: ["X"], + name: "Delete Tool", + description: "Activate Delete tool", + icon: , + }, + { + keys: ["H"], + name: "Freehand Tool", + description: "Activate Free-Hand tool", + icon: , + }, + { + keys: ["M"], + name: "Measurement Tool", + description: "Activate Measurement tool", + icon: , + }, + { + keys: ["Q", "OR", "6"], + name: "Wall Tool", + description: "Select Wall floor tool (2D)", + icon: , + }, + { + keys: ["E", "OR", "8"], + name: "Zone Tool", + description: "Select Draw zone tool (2D)", + icon: , + }, + { + keys: ["R", "OR", "7"], + name: "Aisle Tool", + description: "Select Aisle floor tool (2D)", + icon: , + }, + { + keys: ["T", "OR", "9"], + name: "Floor Tool", + description: "Select Draw floor tool (2D)", + icon: , + }, + { + keys: ["G"], + name: "Move Asset", + description: "Move Selected Asset", + icon: , + }, + { + keys: ["R"], + name: "Rotate Asset", + description: "Rotate Selected Asset", + icon: , + }, + ], + }, + { + category: "View & Navigation", + items: [ + { + keys: ["TAB"], + name: "Toggle View", + description: "Toggle between 2D & 3D views (Builder)", + icon: , + }, + { + keys: ["CTRL", "+", "."], + name: "Toggle UI", + description: "Toggle UI Visibility", + icon: , + }, + { + keys: ["/"], + name: "First Person View", + description: "Switch to First-person View", + icon: , + }, + ], + }, + { + category: "Module Switching", + items: [ + { + keys: ["1"], + name: "Builder", + description: "Switch to Builder module", + icon: , + }, + { + keys: ["2"], + name: "Simulation", + description: "Switch to Simulation module", + icon: , + }, + { + keys: ["3"], + name: "Visualization", + description: "Switch to Visualization module", + icon: , + }, + { + keys: ["4"], + name: "Marketplace", + description: "Switch to Marketplace module", + icon: , + }, + ], + }, + { + category: "Selection", + items: [ + { + keys: ["CTRL", "+", "C"], + name: "Copy", + description: "Copy an Asset", + icon: , + }, + { + keys: ["CTRL", "+", "V"], + name: "Paste", + description: "Paste an Asset", + icon: , + }, + { + keys: ["CTRL", "+", "D"], + name: "Duplicate", + description: "Duplicate an Asset", + icon: , + }, + { + keys: ["ALT", "+", "D"], + name: "Duplicate (Instance)", + description: "Duplicate an Instanced Asset", + icon: , + }, + ], + }, + { + category: "Simulation", + items: [ + { + keys: ["CTRL", "+", "P"], + name: "Play", + description: "Play Simulation", + icon: , + }, + ], + }, + { + category: "Miscellaneous", + items: [ + { + keys: ["F5", "F11", "F12", "CTRL", "+", "R"], + name: "Browser Defaults", + description: "Reserved for browser defaults", + icon: , + }, + ], + }, + ]; + + const [activeCategory, setActiveCategory] = + React.useState("Essential"); + + const activeShortcuts = + shortcuts.find((group) => group.category === activeCategory)?.items || []; + + return ( +
+
+
+ {shortcuts.map((group) => ( + + ))} +
Keyboard
+
+
+ +
+ {activeShortcuts.map((item) => ( +
+
+
{item.icon}
+
+
{item.name}
+
{item.description}
+
+
+
+ {item.keys.map((key, i) => ( + + {key} + + ))} +
+
+ ))} +
+
+ ); }; export default ShortcutHelper; diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index 84d8cca..c38560d 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -166,3 +166,6 @@ export function StockIncreseIcon() { ); } + + + diff --git a/app/src/components/icons/ShortcutIcons.tsx b/app/src/components/icons/ShortcutIcons.tsx new file mode 100644 index 0000000..5a7c06f --- /dev/null +++ b/app/src/components/icons/ShortcutIcons.tsx @@ -0,0 +1,827 @@ +export function UndoIcon() { + return ( + + + + ); +} + +export function RedoIcon() { + return ( + + + + ); +} + +export function ESCIcon() { + return ( + + + + + + ); +} + +export function HelpIcon() { + return ( + + + + ); +} + +export function FindIcon() { + return ( + + + + ); +} + +export function InfoIcon() { + return ( + + + + + + ); +} + +export function CurserIcon() { + return ( + + + + ); +} + +export function DeleteIcon() { + return ( + + + + ); +} + +export function FreeHandIcon() { + return ( + + + + ); +} + +export function MeasurementToolIcon() { + return ( + + + + + + ); +} + +export function WallToolIcon() { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export function ZoneToolIcon() { + return ( + + + + + + + + + + + + + + + + + + ); +} + +export function AisleToolIcon() { + return ( + + + + + + + + + ); +} + +export function FloorToolIcon() { + return ( + + + + + + + + + + ); +} + +export function MoveIcon() { + return ( + + + + ); +} + +export function RotateIcon() { + return ( + + + + + + + ); +} + +export function ToogleViewIcon() { + return ( + + + + ); +} + +export function UIVisiblityIcon() { + return ( + + + + + ); +} + +export function FirstPersonViewIcon() { + return ( + + + + + + + + + ); +} + +export function BuilderIcon() { + return ( + + + + ); +} + +export function SimulationIcon() { + return ( + + + + + + + + + + ); +} + +export function VisualizationIcon() { + return ( + + + + + + ); +} + +export function MarketplaceIcon() { + return ( + + + + + + + ); +} + +export function CopyIcon() { + return ( + + + + ); +} + +export function PasteIcon() { + return ( + + + + ); +} + +export function DublicateIcon() { + return ( + + + + ); +} + +export function DuplicateInstanceIcon() { + return ( + + + + ); +} + +export function PlayIcon() { + return ( + + + + ); +} + +export function BrowserIcon() { + return ( + + + + ); +} diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx index 9e49b48..a3cb286 100644 --- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx +++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx @@ -1,13 +1,14 @@ import React, { useState } from "react"; import { AddIcon, + ArrowIcon, CloseIcon, KebabIcon, LocationIcon, } from "../../../icons/ExportCommonIcons"; +import RenameInput from "../../../ui/inputs/RenameInput"; const VersionHistory = () => { - // Start with only v1.0 const initialVersions = [ { versionName: "v1.0", @@ -20,7 +21,6 @@ const VersionHistory = () => { const [selectedVersion, setSelectedVersion] = useState(initialVersions[0]); const userName = localStorage.getItem("userName") ?? "Anonymous"; - // Function to simulate adding a new version const addNewVersion = () => { const newVersionNumber = versions.length + 1; const newVersion = { @@ -30,7 +30,7 @@ const VersionHistory = () => { month: "long", day: "2-digit", }), - savedBy: userName, // Simulate user name + savedBy: userName, }; const updated = [newVersion, ...versions]; @@ -38,24 +38,25 @@ const VersionHistory = () => { setSelectedVersion(newVersion); }; - // Handle user selecting a version const handleSelectVersion = (version: any) => { setSelectedVersion(version); const reordered = [version, ...versions.filter((v) => v !== version)]; setVersions(reordered); }; + const handleTimestampChange = (newTimestamp: string, index: number) => { + const updatedVersions = [...versions]; + updatedVersions[index].timestamp = newTimestamp; + setVersions(updatedVersions); + }; + return (
{/* Header */}
Version History
-
@@ -95,16 +96,26 @@ const VersionHistory = () => { {versions.map((version, index) => ( ))} diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 2187fdc..c5457c4 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -31,6 +31,7 @@ import { useToolMode, useTransformMode, useActiveSubTool, + useShortcutStore, } from "../../store/store"; import useToggleStore from "../../store/useUIToggleStore"; import { @@ -133,7 +134,7 @@ const Tools: React.FC = () => { switch (activeTool) { case "cursor": if (toggleView) { - setToolMode('move'); + setToolMode("move"); } else { setTransformMode("translate"); } @@ -200,16 +201,19 @@ const Tools: React.FC = () => { setActiveTool(activeTool); }, [activeTool, toggleView]); + const { showShortcuts } = useShortcutStore(); + return ( <> {!isPlaying ? ( -
+
{activeSubTool == "cursor" && (
{ setActiveTool("cursor"); }} @@ -220,8 +224,9 @@ const Tools: React.FC = () => { )} {activeSubTool == "free-hand" && (
{ setActiveTool("free-hand"); }} @@ -232,8 +237,9 @@ const Tools: React.FC = () => { )} {activeSubTool == "delete" && (
{ setActiveTool("delete"); }} @@ -306,8 +312,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-wall"); }} @@ -316,8 +323,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-zone"); }} @@ -326,8 +334,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-aisle"); }} @@ -336,8 +345,9 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-floor"); }} @@ -353,8 +363,9 @@ const Tools: React.FC = () => {
{ setActiveTool("measure"); }} @@ -370,8 +381,9 @@ const Tools: React.FC = () => {
{ setActiveTool("pen"); }} @@ -408,8 +420,9 @@ const Tools: React.FC = () => {
{ setActiveTool("comment"); }} @@ -419,8 +432,9 @@ const Tools: React.FC = () => {
{toggleThreeD && (
{ setIsPlaying(!isPlaying); }} @@ -434,8 +448,9 @@ const Tools: React.FC = () => { <>
toggle view (tab)
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 80ecf8a..04ffbb1 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -158,13 +158,13 @@ const List: React.FC = ({ items = [], remove }) => {
    {items?.map((item) => ( -
  • +
  • handleSelectZone(item.id)} + >
    -