Add new images and update styles for visualization components
This commit is contained in:
Nalvazhuthi
@@ -163,7 +163,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
>
|
||||
|
||||
<Scene />
|
||||
|
||||
</div>
|
||||
<DroppedObjects />
|
||||
{activeModule === "visualization" && (
|
||||
|
||||
@@ -253,7 +253,8 @@ const MultiLevelDropdown = ({
|
||||
className={`dropdown-button ${open ? "open" : ""}`}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{displayLabel} <span className="icon">▾</span>
|
||||
<div className="label">{displayLabel}</div>
|
||||
<span className="icon">▾</span>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="dropdown-menu">
|
||||
|
||||
604
app/src/components/ui/menu/menu.tsx
Normal file
604
app/src/components/ui/menu/menu.tsx
Normal file
@@ -0,0 +1,604 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const MenuBar = () => {
|
||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||
const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
|
||||
|
||||
// State to track selection for all menu items
|
||||
const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
|
||||
// Function to toggle selection for a specific item
|
||||
const toggleSelection = (itemName: string) => {
|
||||
setSelectedItems((prev) => ({
|
||||
...prev,
|
||||
[itemName]: !prev[itemName], // Toggle the selection state
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="menu-bar">
|
||||
{/* Top-level menu buttons */}
|
||||
<div className="menu-buttons">
|
||||
{/* File Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("File")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
File
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* File Dropdown */}
|
||||
{activeMenu === "File" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* New File */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("New File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["New File"] && "✓ "}
|
||||
New File
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + N</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open Local File */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Open Local File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Open Local File"] && "✓ "}
|
||||
Open Local File
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + O</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Version */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Save Version")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Save Version"] && "✓ "}
|
||||
Save Version
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Make a Copy */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Make a Copy")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Make a Copy"] && "✓ "}
|
||||
Make a Copy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Share */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Share")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Share"] && "✓ "}
|
||||
Share
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rename */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Rename")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Rename"] && "✓ "}
|
||||
Rename
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Import */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Import")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Import"] && "✓ "}
|
||||
Import
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Close File */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Close File")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Close File"] && "✓ "}
|
||||
Close File
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Edit Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Edit")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Edit
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* Edit Dropdown */}
|
||||
{activeMenu === "Edit" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* Undo */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Undo")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Undo"] && "✓ "}
|
||||
Undo
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Z</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Redo */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Redo")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Redo"] && "✓ "}
|
||||
Redo
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Shift + Z</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Undo History */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Undo History")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Undo History"] && "✓ "}
|
||||
Undo History
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Redo History */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Redo History")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Redo History"] && "✓ "}
|
||||
Redo History
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
</div>
|
||||
|
||||
{/* Find */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Find")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Find"] && "✓ "}
|
||||
Find
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + F</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Delete")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Delete"] && "✓ "}
|
||||
Delete
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select by... */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Select by...")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Select by..."] && "✓ "}
|
||||
Select by...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keymap */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Keymap")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Keymap"] && "✓ "}
|
||||
Keymap
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* View Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("View")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
View
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* View Dropdown */}
|
||||
{activeMenu === "View" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* Grid */}
|
||||
<div
|
||||
className={"menu-item-container"}
|
||||
onClick={() => toggleSelection("Grid")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Grid"] && "✓ "}
|
||||
Grid
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gizmo */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
|
||||
onMouseLeave={() => setActiveSubMenu(null)}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Gizmo"] && "✓ "}
|
||||
Gizmo
|
||||
</span>
|
||||
<span className="icon">▾</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
{/* Gizmo Submenu */}
|
||||
{activeSubMenu === "View-Gizmo" && (
|
||||
<div className="submenu">
|
||||
{/* Visibility */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Visibility")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Visibility"] && "✓ "}
|
||||
Visibility
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Cube view */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Cube view")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Cube view"] && "✓ "}
|
||||
Cube view
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Sphere view */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Sphere view")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Sphere view"] && "✓ "}
|
||||
Sphere view
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Custom settings */}
|
||||
<div
|
||||
className="submenu-item"
|
||||
onClick={() => toggleSelection("Custom settings")}
|
||||
>
|
||||
<span>
|
||||
{selectedItems["Custom settings"] && "✓ "}
|
||||
Custom settings
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Zoom */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Zoom")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Zoom"] && "✓ "}
|
||||
Zoom
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Screen */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Full Screen")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Full Screen"] && "✓ "}
|
||||
Full Screen
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">F11</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Version History Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Version history")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Version history
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Export As Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Export as...")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Export as...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Apps Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Apps")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Apps
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* Apps Dropdown */}
|
||||
{activeMenu === "Apps" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* New App */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("New App")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["New App"] && "✓ "}
|
||||
New App
|
||||
</span>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Work-flow Monitor */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Work-flow Monitor")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Work-flow Monitor"] && "✓ "}
|
||||
Work-flow Monitor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Temperature Visualizer */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Temperature Visualizer")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Temperature Visualizer"] && "✓ "}
|
||||
Temperature Visualizer
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View all */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("View all")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["View all"] && "✓ "}
|
||||
View all
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Help Menu */}
|
||||
<div
|
||||
className="menu-button-container"
|
||||
onMouseEnter={() => setActiveMenu("Help")}
|
||||
onMouseLeave={() => {
|
||||
setActiveMenu(null);
|
||||
setActiveSubMenu(null);
|
||||
}}
|
||||
>
|
||||
<div className="menu-button">
|
||||
Help
|
||||
<span className="dropdown-icon">▾</span>
|
||||
</div>
|
||||
|
||||
{/* Help Dropdown */}
|
||||
{activeMenu === "Help" && (
|
||||
<div className="dropdown-menu">
|
||||
{/* Shortcuts */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Shortcuts")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Shortcuts"] && "✓ "}
|
||||
Shortcuts
|
||||
</span>
|
||||
<div className="menu-item-right">
|
||||
<span className="shortcut">Ctrl + Shift + ?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Manual */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Manual")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Manual"] && "✓ "}
|
||||
Manual
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Tutorials */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Video Tutorials")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Video Tutorials"] && "✓ "}
|
||||
Video Tutorials
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Report a bug */}
|
||||
<div
|
||||
className="menu-item-container"
|
||||
onClick={() => toggleSelection("Report a bug")}
|
||||
>
|
||||
<div className="menu-item">
|
||||
<span>
|
||||
{selectedItems["Report a bug"] && "✓ "}
|
||||
Report a bug
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuBar;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user