From 70136fd7d39e98a38e2d5f20b08670efdc8c8d82 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Wed, 21 May 2025 17:38:42 +0530 Subject: [PATCH 1/5] Add useThree hook and update visibility logic for target mesh in RoboticArmInstance --- .../roboticArm/instances/armInstance/roboticArmInstance.tsx | 6 ++++++ 1 file changed, 6 insertions(+) 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. -- 2.49.1 From 69a7f28d71c428ff04038bec84a026f96fade169 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 17:42:40 +0530 Subject: [PATCH 2/5] refactor: update import statements for useToggleStore to named import --- app/src/components/layout/sidebarLeft/Header.tsx | 2 +- .../components/layout/sidebarLeft/SideBarLeft.tsx | 2 +- app/src/components/layout/sidebarRight/Header.tsx | 2 +- .../components/layout/sidebarRight/SideBarRight.tsx | 2 +- .../layout/sidebarRight/simulation/Simulations.tsx | 2 +- app/src/components/ui/ModuleToggle.tsx | 2 +- app/src/components/ui/Tools.tsx | 2 +- app/src/pages/Project.tsx | 2 +- app/src/store/useUIToggleStore.ts | 13 +++++++++++-- app/src/utils/shortcutkeys/handleShortcutKeys.ts | 10 +++++++++- 10 files changed, 28 insertions(+), 11 deletions(-) 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 f64a419..8464106 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/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..860519b 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 {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 isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || @@ -175,6 +178,10 @@ const KeyPressListener: React.FC = () => { setIsPlaying(true); } + if (keyCombination === "L") { + setIsLogListVisible(!isLogListVisible); + } + if (keyCombination === "ESCAPE") { setWalkMode(false); setActiveTool("cursor"); @@ -210,6 +217,7 @@ const KeyPressListener: React.FC = () => { toggleView, showShortcuts, isPlaying, + isLogListVisible ]); return null; -- 2.49.1 From fb635198530ee1bb076f2c27d0005b7643b01e86 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 17:50:15 +0530 Subject: [PATCH 3/5] refactor: replace local state with usePlayerStore for hidePlayer in ControlsPlayer, SimulationPlayer, and KeyPressListener --- .../layout/controls/ControlsPlayer.tsx | 5 +++-- .../ui/simulation/simulationPlayer.tsx | 18 +++--------------- .../utils/shortcutkeys/handleShortcutKeys.ts | 13 +++++++++---- 3 files changed, 15 insertions(+), 21 deletions(-) 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/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/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index 860519b..b52c223 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, @@ -36,7 +36,7 @@ const KeyPressListener: React.FC = () => { const { setWalkMode } = useCameraModeStore(); const { setIsVersionSaved } = useSaveVersion(); const { isLogListVisible, setIsLogListVisible } = useLogger(); - + const { hidePlayer, setHidePlayer } = usePlayerStore(); const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || @@ -182,6 +182,10 @@ const KeyPressListener: React.FC = () => { setIsLogListVisible(!isLogListVisible); } + if (keyCombination === "H") { + setHidePlayer(!hidePlayer); + } + if (keyCombination === "ESCAPE") { setWalkMode(false); setActiveTool("cursor"); @@ -198,7 +202,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 ) ) { @@ -217,7 +221,8 @@ const KeyPressListener: React.FC = () => { toggleView, showShortcuts, isPlaying, - isLogListVisible + isLogListVisible, + hidePlayer ]); return null; -- 2.49.1 From 369fad07e286936995c6bf9f3bf031c5b3a87c57 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 17:59:55 +0530 Subject: [PATCH 4/5] feat: enhance shortcut helper with new shortcuts and icons for better navigation --- app/src/components/footer/shortcutHelper.tsx | 22 ++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) 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: , + }, ], }, ]; -- 2.49.1 From 43f02efe9c2e04210d5cb36e0116309bcc442d24 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Wed, 21 May 2025 18:00:52 +0530 Subject: [PATCH 5/5] feat: update KeyPressListener to hide log list on module switch --- app/src/utils/shortcutkeys/handleShortcutKeys.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts index b52c223..eb0e3c3 100644 --- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts +++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts @@ -194,6 +194,7 @@ const KeyPressListener: React.FC = () => { clearSelectedZone(); setShowShortcuts(false); setIsVersionSaved(false); + setIsLogListVisible(false); } if (keyCombination === "Ctrl+Shift+?") { -- 2.49.1