diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx index eb1a430..5ebcfbd 100644 --- a/app/src/components/footer/Footer.tsx +++ b/app/src/components/footer/Footer.tsx @@ -4,7 +4,7 @@ import { useLogger } from "../ui/log/LoggerContext"; import { GetLogIcon } from "./getLogIcons"; import { CurserLeftIcon, CurserMiddleIcon, CurserRightIcon } from "../icons/LogIcons"; import ShortcutHelper from "./shortcutHelper"; -import useVersionHistoryVisibleStore, { useShortcutStore } from "../../store/builder/store"; +import { useShortcutStore } from "../../store/builder/store"; import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore"; import useModuleStore, { useSubModuleStore } from "../../store/ui/useModuleStore"; import { mouseActionHelper } from "../../utils/mouseUtils/mouseHelper"; @@ -12,123 +12,118 @@ import { useMouseNoteStore } from "../../store/ui/useUIToggleStore"; import { useSceneContext } from "../../modules/scene/sceneContext"; const Footer: React.FC = () => { - const { logs, setIsLogListVisible } = useLogger(); - const lastLog = logs[logs.length - 1] || null; + const { logs, setIsLogListVisible } = useLogger(); + const lastLog = logs[logs.length - 1] || null; - const { setActiveModule } = useModuleStore(); - const { setSubModule } = useSubModuleStore(); - const { setVersionHistoryVisible } = useVersionHistoryVisibleStore(); - const { isPlaying } = usePlayButtonStore(); - const { showShortcuts, setShowShortcuts } = useShortcutStore(); - const { versionStore } = useSceneContext(); - const { selectedVersion } = versionStore(); + const { setActiveModule } = useModuleStore(); + const { setSubModule } = useSubModuleStore(); + const { isPlaying } = usePlayButtonStore(); + const { showShortcuts, setShowShortcuts } = useShortcutStore(); + const { versionStore } = useSceneContext(); + const { selectedVersion, setVersionHistoryVisible } = versionStore(); - const { Leftnote, Middlenote, Rightnote } = useMouseNoteStore(); - const [isOnline, setIsOnline] = useState(navigator.onLine); + const { Leftnote, Middlenote, Rightnote } = useMouseNoteStore(); + const [isOnline, setIsOnline] = useState(navigator.onLine); - // -------------------- Online/Offline Handlers -------------------- - const handleOnline = useCallback(() => { - echo.success("You are back Online"); - setIsOnline(true); - }, []); + // -------------------- Online/Offline Handlers -------------------- + const handleOnline = useCallback(() => { + echo.success("You are back Online"); + setIsOnline(true); + }, []); - const handleOffline = useCallback(() => { - echo.warn("Changes made now might not be saved"); - echo.error("You are now Offline."); - setIsOnline(false); - }, []); + const handleOffline = useCallback(() => { + echo.warn("Changes made now might not be saved"); + echo.error("You are now Offline."); + setIsOnline(false); + }, []); - useEffect(() => { - window.addEventListener("online", handleOnline); - window.addEventListener("offline", handleOffline); - return () => { - window.removeEventListener("online", handleOnline); - window.removeEventListener("offline", handleOffline); - }; - }, [handleOnline, handleOffline]); + useEffect(() => { + window.addEventListener("online", handleOnline); + window.addEventListener("offline", handleOffline); + return () => { + window.removeEventListener("online", handleOnline); + window.removeEventListener("offline", handleOffline); + }; + }, [handleOnline, handleOffline]); - // -------------------- Mouse Buttons -------------------- - const mouseButtons = useMemo( - () => [ - { icon: , label: Leftnote || "Pan", mouse: "left" }, - { icon: , label: Middlenote || "Scroll Zoom", mouse: "middle" }, - { icon: , label: Rightnote || "Orbit / Cancel action", mouse: "right" }, - ], - [Leftnote, Middlenote, Rightnote] - ); + // -------------------- Mouse Buttons -------------------- + const mouseButtons = useMemo( + () => [ + { icon: , label: Leftnote || "Pan", mouse: "left" }, + { icon: , label: Middlenote || "Scroll Zoom", mouse: "middle" }, + { icon: , label: Rightnote || "Orbit / Cancel action", mouse: "right" }, + ], + [Leftnote, Middlenote, Rightnote] + ); - // -------------------- Mouse Helper -------------------- - useEffect(() => { - const cleanup = mouseActionHelper(); - return () => cleanup(); - }, []); + // -------------------- Mouse Helper -------------------- + useEffect(() => { + const cleanup = mouseActionHelper(); + return () => cleanup(); + }, []); - return ( -
-
- {/* Mouse Button Info */} -
- {mouseButtons.map(({ icon, label, mouse }) => ( -
-
{icon}
-
{label}
+ return ( +
+
+ {/* Mouse Button Info */} +
+ {mouseButtons.map(({ icon, label, mouse }) => ( +
+
{icon}
+
{label}
+
+ ))} +
+ + {/* Logs and Version */} +
+
+
+ +
+ +
+ +
{ + setVersionHistoryVisible(true); + setSubModule("properties"); + setActiveModule("builder"); + }} + > + {selectedVersion?.version ?? "v 0.0.0"} +
+ +
+
+ +
+
+ +
+
{isOnline ? "Online" : "Offline"}
+
+
- ))} + + {/* Shortcut Helper */} + {!isPlaying && showShortcuts && ( +
+ +
+ )}
- - {/* Logs and Version */} -
-
-
- -
- -
- -
{ - setVersionHistoryVisible(true); - setSubModule("properties"); - setActiveModule("builder"); - }} - > - {selectedVersion?.version ?? "v 0.0.0"} -
- -
-
- -
-
- -
-
{isOnline ? "Online" : "Offline"}
-
-
-
- - {/* Shortcut Helper */} - {!isPlaying && showShortcuts && ( -
- -
- )} -
- ); + ); }; export default Footer; diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index ef9f1a2..66dd729 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -1,13 +1,13 @@ import React, { useEffect, useState } from "react"; import Header from "./Header"; import useModuleStore, { useSubModuleStore } from "../../../store/ui/useModuleStore"; -import { AnalysisIcon, FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon, } from "../../icons/SimulationIcons"; +import { AnalysisIcon, FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon } from "../../icons/SimulationIcons"; import { useToggleStore } from "../../../store/ui/useUIToggleStore"; import Visualization from "./visualization/Visualization"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; -import useVersionHistoryVisibleStore, { useIsComparing, useToolMode } from "../../../store/builder/store"; -import { useSelectedEventData, useSelectedEventSphere, } from "../../../store/simulation/useSimulationStore"; +import { useIsComparing, useToolMode } from "../../../store/builder/store"; +import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore"; import { useBuilderStore } from "../../../store/builder/useBuilderStore"; import GlobalProperties from "./properties/GlobalProperties"; import AssetProperties from "./properties/AssetProperties"; @@ -22,6 +22,7 @@ import SelectedFloorProperties from "./properties/SelectedFloorProperties"; import SelectedDecalProperties from "./properties/SelectedDecalProperties"; import SelectedAisleProperties from "./properties/SelectedAisleProperties"; import ResourceManagement from "./resourceManagement/ResourceManagement"; +import { useSceneContext } from "../../../modules/scene/sceneContext"; type DisplayComponent = | "versionHistory" @@ -51,7 +52,8 @@ const SideBarRight: React.FC = () => { const { selectedWall, selectedFloor, selectedAisle, selectedFloorAsset } = useBuilderStore(); const { selectedEventData } = useSelectedEventData(); const { selectedEventSphere } = useSelectedEventSphere(); - const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore(); + const { versionStore } = useSceneContext(); + const { viewVersionHistory, setVersionHistoryVisible } = versionStore(); const { isComparing } = useIsComparing(); const [displayComponent, setDisplayComponent] = useState("none"); @@ -207,8 +209,7 @@ const SideBarRight: React.FC = () => { <> - )} + {(activeModule === "builder" || activeModule === "simulation") && ( + + )}
)} diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx index 14e862f..cd5b400 100644 --- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx +++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx @@ -2,7 +2,6 @@ import { useParams } from "react-router-dom"; import { AddIcon, ArrowIcon, CloseIcon, KebabIcon, LocationIcon } from "../../../icons/ExportCommonIcons"; import { useSubModuleStore } from "../../../../store/ui/useModuleStore"; import { useSceneContext } from "../../../../modules/scene/sceneContext"; -import useVersionHistoryVisibleStore from "../../../../store/builder/store"; import RenameInput from "../../../ui/inputs/RenameInput"; import { getVersionDataApi } from "../../../../services/factoryBuilder/versionControl/getVersionDataApi"; @@ -10,8 +9,7 @@ import { getVersionDataApi } from "../../../../services/factoryBuilder/versionCo const VersionHistory = () => { const { setSubModule } = useSubModuleStore(); const { versionStore } = useSceneContext(); - const { setVersionHistoryVisible } = useVersionHistoryVisibleStore(); - const { versionHistory, setCreateNewVersion, selectedVersion, setSelectedVersion } = versionStore(); + const { versionHistory, setCreateNewVersion, selectedVersion, setSelectedVersion, setVersionHistoryVisible } = versionStore(); const { projectId } = useParams(); const addNewVersion = () => { @@ -21,16 +19,16 @@ const VersionHistory = () => { const handleSelectVersion = (version: Version) => { if (!projectId) return; - getVersionDataApi(projectId, version.versionId).then((versionData) => { - setSelectedVersion(version); - }).catch((err) => { - echo.error(err); - }) + getVersionDataApi(projectId, version.versionId) + .then((versionData) => { + setSelectedVersion(version); + }) + .catch((err) => { + echo.error(err); + }); }; - const handleVersionNameChange = (newName: string, versionId: string) => { - - }; + const handleVersionNameChange = (newName: string, versionId: string) => {}; return (
@@ -38,11 +36,7 @@ const VersionHistory = () => {
Version History
-
@@ -64,9 +58,7 @@ const VersionHistory = () => { {/* Shortcut Info */}
i
-
- Press Ctrl + Alt + S to add to version history while editing -
+
Press Ctrl + Alt + S to add to version history while editing
{/* Current Version Display */} @@ -76,12 +68,8 @@ const VersionHistory = () => {
-
- Current Version ({selectedVersion.version}) -
-
- {versionHistory.length} Saved History -
+
Current Version ({selectedVersion.version})
+
{versionHistory.length} Saved History
)} @@ -93,16 +81,8 @@ const VersionHistory = () => { ) : ( versionHistory.map((version) => { const key = `version-${version.versionId}`; - return ( - - ); + return ; }) - )}
@@ -119,22 +99,14 @@ type VersionHistoryItemProps = { const VersionHistoryItem: React.FC = ({ version, onSelect, onRename }) => { return ( - + + +
-
Builder
- - - - -
- ); + ); }; export default ModuleToggle; diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx index babb9eb..bc3e0cd 100644 --- a/app/src/components/ui/menu/menu.tsx +++ b/app/src/components/ui/menu/menu.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import { ArrowIcon } from "../../icons/ExportCommonIcons"; import { toggleTheme } from "../../../utils/theme"; -import useVersionHistoryVisibleStore, { useShortcutStore } from "../../../store/builder/store"; +import { useShortcutStore } from "../../../store/builder/store"; import useModuleStore, { useSubModuleStore } from "../../../store/ui/useModuleStore"; import { useSceneContext } from "../../../modules/scene/sceneContext"; @@ -25,8 +25,7 @@ const MenuBar: React.FC = ({ setOpenMenu }) => { const [selectedItems, setSelectedItems] = useState>({}); const { versionStore } = useSceneContext(); - const { setCreateNewVersion } = versionStore(); - const { setVersionHistoryVisible } = useVersionHistoryVisibleStore(); + const { setCreateNewVersion, setVersionHistoryVisible } = versionStore(); const { setActiveModule } = useModuleStore(); const { setSubModule } = useSubModuleStore(); const { showShortcuts, setShowShortcuts } = useShortcutStore(); @@ -79,7 +78,16 @@ const MenuBar: React.FC = ({ setOpenMenu }) => { { label: "Import" }, { label: "Close File" }, ], - Edit: [{ label: "Undo", shortcut: "Ctrl + Z" }, { label: "Redo", shortcut: "Ctrl + Shift + Z" }, { label: "Undo History" }, { label: "Redo History" }, { label: "Find", shortcut: "Ctrl + F" }, { label: "Delete" }, { label: "Select by..." }, { label: "Keymap" }], + Edit: [ + { label: "Undo", shortcut: "Ctrl + Z" }, + { label: "Redo", shortcut: "Ctrl + Shift + Z" }, + { label: "Undo History" }, + { label: "Redo History" }, + { label: "Find", shortcut: "Ctrl + F" }, + { label: "Delete" }, + { label: "Select by..." }, + { label: "Keymap" }, + ], View: [ { label: "Grid" }, { @@ -172,7 +180,13 @@ const MenuBar: React.FC = ({ setOpenMenu }) => {
{items.map((item) => item.submenu ? ( -