diff --git a/app/src/components/footer/shortcutHelper.tsx b/app/src/components/footer/shortcutHelper.tsx index aa927c5..405963e 100644 --- a/app/src/components/footer/shortcutHelper.tsx +++ b/app/src/components/footer/shortcutHelper.tsx @@ -30,7 +30,7 @@ import { DuplicateInstanceIcon, PlayIcon, } from "../icons/ShortcutIcons"; -import { CloseIcon } from "../icons/ExportCommonIcons"; +import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons"; interface ShortcutItem { keys: string[]; @@ -52,6 +52,7 @@ const ShortcutHelper: React.FC = ({ setShowShortcuts, }) => { const shortcuts: ShortcutGroup[] = [ + // Essential { category: "Essential", items: [ @@ -86,13 +87,20 @@ const ShortcutHelper: React.FC = ({ icon: , }, { - keys: ["CTRL", "+", "?"], + keys: ["CTRL", "+", "SHIFT", "+", "?"], name: "Info", description: "Show Shortcut Info", icon: , }, + { + keys: ["L"], + name: "Log", + description: "Show Log list", + icon: , + }, ], }, + // Tools { category: "Tools", items: [ @@ -158,6 +166,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // View & Navigation { category: "View & Navigation", items: [ @@ -193,6 +202,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // Module Switching { category: "Module Switching", items: [ @@ -222,6 +232,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // Selection { category: "Selection", items: [ @@ -251,6 +262,7 @@ const ShortcutHelper: React.FC = ({ }, ], }, + // Simulation { category: "Simulation", items: [ @@ -260,6 +272,12 @@ const ShortcutHelper: React.FC = ({ description: "Play Simulation", icon: , }, + { + keys: ["H"], + name: "Hide Player", + description: "Hide Simulation Player", + icon: , + }, ], }, ]; diff --git a/app/src/components/layout/controls/ControlsPlayer.tsx b/app/src/components/layout/controls/ControlsPlayer.tsx index 724c3bb..484cd35 100644 --- a/app/src/components/layout/controls/ControlsPlayer.tsx +++ b/app/src/components/layout/controls/ControlsPlayer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import useCameraModeStore, { usePlayButtonStore, } from "../../../store/usePlayButtonStore"; @@ -8,12 +8,13 @@ import InputToggle from "../../ui/inputs/InputToggle"; import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons"; import { ExitIcon } from "../../icons/SimulationIcons"; import { useCamMode } from "../../../store/builder/store"; +import { usePlayerStore } from "../../../store/useUIToggleStore"; const ControlsPlayer: React.FC = () => { const { setIsPlaying } = usePlayButtonStore(); const { activeModule } = useModuleStore(); const { walkMode, toggleWalkMode } = useCameraModeStore(); - const [hidePlayer, setHidePlayer] = useState(false); + const { hidePlayer, setHidePlayer } = usePlayerStore(); const { camMode } = useCamMode(); const changeCamMode = () => { diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index 45df499..c2c1bff 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -2,7 +2,7 @@ import React from "react"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import { LogoIcon } from "../../icons/Logo"; import FileMenu from "../../ui/FileMenu"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import useModuleStore from "../../../store/useModuleStore"; const Header: React.FC = () => { diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index e50c76e..4a15466 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import ToggleHeader from "../../ui/inputs/ToggleHeader"; import Outline from "./Outline"; import Header from "./Header"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import Assets from "./Assets"; import useModuleStore from "../../../store/useModuleStore"; import Widgets from "./visualization/widgets/Widgets"; diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index 2673671..c806074 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -5,7 +5,7 @@ import { ActiveUser } from "../../../types/users"; import CollaborationPopup from "../../templates/CollaborationPopup"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; import { useSelectedUserStore } from "../../../store/useCollabStore"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import useModuleStore from "../../../store/useModuleStore"; diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index a5d4629..9ad3606 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -9,7 +9,7 @@ import { PropertiesIcon, SimulationIcon, } from "../../icons/SimulationIcons"; -import useToggleStore from "../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../store/useUIToggleStore"; import Visualization from "./visualization/Visualization"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index b215728..316269c 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -28,7 +28,7 @@ import { useSaveVersion, } from "../../../../store/builder/store"; import CompareLayOut from "../../../ui/compareVersion/CompareLayOut"; -import useToggleStore from "../../../../store/useUIToggleStore"; +import {useToggleStore} from "../../../../store/useUIToggleStore"; interface Event { modelName: string; diff --git a/app/src/components/ui/ModuleToggle.tsx b/app/src/components/ui/ModuleToggle.tsx index 456cfec..070e143 100644 --- a/app/src/components/ui/ModuleToggle.tsx +++ b/app/src/components/ui/ModuleToggle.tsx @@ -6,7 +6,7 @@ import { SimulationIcon, VisualizationIcon, } from "../icons/ExportModuleIcons"; -import useToggleStore from "../../store/useUIToggleStore"; +import {useToggleStore} from "../../store/useUIToggleStore"; import useVersionHistoryStore from "../../store/builder/store"; const ModuleToggle: React.FC = () => { diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index bb99cc8..fcc40b8 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -32,7 +32,7 @@ import { useActiveSubTool, useShortcutStore, } from "../../store/builder/store"; -import useToggleStore from "../../store/useUIToggleStore"; +import {useToggleStore} from "../../store/useUIToggleStore"; import { use3DWidget, useFloatingWidget, diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 0a0efc7..2825014 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -23,6 +23,7 @@ import { useSubModuleStore } from "../../../store/useModuleStore"; import ProductionCapacity from "../analysis/ThroughputSummary"; import ThroughputSummary from "../analysis/ProductionCapacity"; import ROISummary from "../analysis/ROISummary"; +import { usePlayerStore } from "../../../store/useUIToggleStore"; const SimulationPlayer: React.FC = () => { const MAX_SPEED = 4; // Maximum speed @@ -31,7 +32,7 @@ const SimulationPlayer: React.FC = () => { const sliderRef = useRef(null); const [expand, setExpand] = useState(true); const [playSimulation, setPlaySimulation] = useState(false); - const [hidePlayer, setHidePlayer] = useState(false); + const { hidePlayer, setHidePlayer } = usePlayerStore(); const { speed, setSpeed } = useAnimationPlaySpeed(); const { setIsPlaying } = usePlayButtonStore(); @@ -111,22 +112,9 @@ const SimulationPlayer: React.FC = () => { const hourlySimulation = 25; const dailyProduction = 75; const monthlyROI = 50; - const { processBar, setProcessBar } = useProcessBar(); - // const process = [ - // { name: "process 1", completed: 0 }, // 0% completed - // { name: "process 2", completed: 20 }, // 20% completed - // { name: "process 3", completed: 40 }, // 40% completed - // { name: "process 4", completed: 60 }, // 60% completed - // { name: "process 5", completed: 80 }, // 80% completed - // { name: "process 6", completed: 100 }, // 100% completed - // { name: "process 7", completed: 0 }, // 0% completed - // { name: "process 8", completed: 50 }, // 50% completed - // { name: "process 9", completed: 90 }, // 90% completed - // { name: "process 10", completed: 30 }, // 30% completed - // ]; + const { processBar } = useProcessBar(); useEffect(() => { - // console.log('processBar: ', processBar); }, [processBar]) const intervals = [50, 20, 30, 40, 50, 60]; // in minutes diff --git a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx index 6568e1f..ce5a280 100644 --- a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx +++ b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react' import * as THREE from "three"; +import { useThree } from "@react-three/fiber"; import IKInstance from '../ikInstance/ikInstance'; import RoboticArmAnimator from '../animator/roboticArmAnimator'; import MaterialAnimator from '../animator/materialAnimator'; @@ -18,6 +19,7 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) { const [currentPhase, setCurrentPhase] = useState<(string)>("init"); const [path, setPath] = useState<[number, number, number][]>([]); const [ikSolver, setIkSolver] = useState(null); + const { scene } = useThree(); const restPosition = new THREE.Vector3(0, 1.75, -1.6); const targetBone = "Target"; const groupRef = useRef(null); @@ -271,6 +273,10 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) { useEffect(() => { + const targetMesh = scene?.getObjectByProperty("uuid", armBot.modelUuid); + if (targetMesh) { + targetMesh.visible = (!isPlaying) + } const targetBones = ikSolver?.mesh.skeleton.bones.find((b: any) => b.name === targetBone); if (!isReset && isPlaying) { //Moving armBot from initial point to rest position. diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 8419e13..d40a831 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -34,7 +34,7 @@ import Footer from "../components/footer/Footer"; import SelectFloorPlan from "../components/temporary/SelectFloorPlan"; import ControlsPlayer from "../components/layout/controls/ControlsPlayer"; import CompareLayOut from "../components/ui/compareVersion/CompareLayOut"; -import useToggleStore from "../store/useUIToggleStore"; +import {useToggleStore} from "../store/useUIToggleStore"; import RegularDropDown from "../components/ui/inputs/RegularDropDown"; import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved"; import SimulationPlayer from "../components/ui/simulation/simulationPlayer"; diff --git a/app/src/store/useUIToggleStore.ts b/app/src/store/useUIToggleStore.ts index 9f5f583..1afef0e 100644 --- a/app/src/store/useUIToggleStore.ts +++ b/app/src/store/useUIToggleStore.ts @@ -6,7 +6,7 @@ interface ToggleState { setToggleUI: (value1: boolean, value2: boolean) => void; } -const useToggleStore = create((set) => ({ +export const useToggleStore = create((set) => ({ toggleUILeft: true, toggleUIRight: false, setToggleUI: (value1: boolean, value2: boolean) => { @@ -14,4 +14,13 @@ const useToggleStore = create((set) => ({ }, })); -export default useToggleStore; +interface PlayerState { + hidePlayer: boolean; + setHidePlayer: (hide: boolean) => void; +} + +// Create the Zustand store +export const usePlayerStore = create((set) => ({ + hidePlayer: false, // initial state + setHidePlayer: (hide) => set({ hidePlayer: hide }), // state updater +})); diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index df27712..eb0e3c3 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import useModuleStore, { useThreeDStore } from "../../store/useModuleStore"; -import useToggleStore from "../../store/useUIToggleStore"; +import { usePlayerStore, useToggleStore } from "../../store/useUIToggleStore"; import { useActiveSubTool, useActiveTool, @@ -17,6 +17,7 @@ import useCameraModeStore, { } from "../../store/usePlayButtonStore"; import { detectModifierKeys } from "./detectModifierKeys"; import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; +import { useLogger } from "../../components/ui/log/LoggerContext"; const KeyPressListener: React.FC = () => { const { activeModule, setActiveModule } = useModuleStore(); @@ -34,6 +35,8 @@ const KeyPressListener: React.FC = () => { const { showShortcuts, setShowShortcuts } = useShortcutStore(); const { setWalkMode } = useCameraModeStore(); const { setIsVersionSaved } = useSaveVersion(); + const { isLogListVisible, setIsLogListVisible } = useLogger(); + const { hidePlayer, setHidePlayer } = usePlayerStore(); const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || @@ -175,6 +178,14 @@ const KeyPressListener: React.FC = () => { setIsPlaying(true); } + if (keyCombination === "L") { + setIsLogListVisible(!isLogListVisible); + } + + if (keyCombination === "H") { + setHidePlayer(!hidePlayer); + } + if (keyCombination === "ESCAPE") { setWalkMode(false); setActiveTool("cursor"); @@ -183,6 +194,7 @@ const KeyPressListener: React.FC = () => { clearSelectedZone(); setShowShortcuts(false); setIsVersionSaved(false); + setIsLogListVisible(false); } if (keyCombination === "Ctrl+Shift+?") { @@ -191,7 +203,7 @@ const KeyPressListener: React.FC = () => { // Placeholder for future implementation if ( - ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+H", "Ctrl+F"].includes( + ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes( keyCombination ) ) { @@ -210,6 +222,8 @@ const KeyPressListener: React.FC = () => { toggleView, showShortcuts, isPlaying, + isLogListVisible, + hidePlayer ]); return null;