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..e983f9a 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"; @@ -36,9 +36,7 @@ const SideBarLeft: React.FC = () => { return (
diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index 77d5807..3d6ffe4 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/collaboration/useCollabStore"; -import useToggleStore from "../../../store/useUIToggleStore"; +import { useToggleStore } from "../../../store/useUIToggleStore"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import useModuleStore from "../../../store/useModuleStore"; @@ -62,9 +62,8 @@ const Header: React.FC = () => {
+
+ ); +}; + +export default CommentThreads; 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/pages/Project.tsx b/app/src/pages/Project.tsx index 943323b..59e8b04 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -34,10 +34,11 @@ 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"; +import CommentThreads from "../components/ui/collaboration/CommentThreads"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -180,6 +181,7 @@ const Project: React.FC = () => { )} +
); }; 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/styles/main.scss b/app/src/styles/main.scss index 0e284e6..4ba72c7 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -1,48 +1,48 @@ // abstracts -@use 'abstracts/variables'; -@use 'abstracts/mixins'; -@use 'abstracts/functions'; +@use "abstracts/variables"; +@use "abstracts/mixins"; +@use "abstracts/functions"; // base -@use 'base/reset'; -@use 'base/typography'; -@use 'base/global'; -@use 'base/base'; +@use "base/reset"; +@use "base/typography"; +@use "base/global"; +@use "base/base"; // components -@use 'components/button'; -@use 'components/form'; -@use 'components/input'; -@use 'components/lists'; -@use 'components/moduleToggle'; -@use 'components/templates'; -@use 'components/tools'; -@use 'components/visualization/floating/energyConsumed'; -@use 'components/visualization/ui/styledWidgets'; -@use 'components/visualization/floating/common'; -@use 'components/marketPlace/marketPlace'; -@use 'components/menu/menu'; -@use 'components/confirmationPopUp'; -@use 'components/simulation/simulation'; -@use 'components/simulation/analysis'; -@use 'components/logs/logs'; -@use 'components/footer/footer.scss'; +@use "components/button"; +@use "components/form"; +@use "components/input"; +@use "components/lists"; +@use "components/moduleToggle"; +@use "components/templates"; +@use "components/tools"; +@use "components/visualization/floating/energyConsumed"; +@use "components/visualization/ui/styledWidgets"; +@use "components/visualization/floating/common"; +@use "components/marketPlace/marketPlace"; +@use "components/menu/menu"; +@use "components/confirmationPopUp"; +@use "components/simulation/simulation"; +@use "components/simulation/analysis"; +@use "components/logs/logs"; +@use "components/footer/footer.scss"; // layout -@use 'layout/loading'; -@use 'layout/sidebar'; -@use 'layout/popup'; -@use 'layout/toast'; -@use 'layout/skeleton'; -@use 'layout/compareLayoutPopUp'; -@use 'layout/compareLayout'; - +@use "layout/loading"; +@use "layout/sidebar"; +@use "layout/popup"; +@use "layout/toast"; +@use "layout/skeleton"; +@use "layout/compareLayoutPopUp"; +@use "layout/compareLayout"; // pages -@use 'pages/dashboard'; -@use 'pages/home'; -@use 'pages/realTimeViz'; -@use 'pages/userAuth'; +@use "pages/dashboard"; +@use "pages/home"; +@use "pages/realTimeViz"; +@use "pages/userAuth"; -// -@use './scene/scene' \ No newline at end of file +// +@use "./scene/scene"; +@use "./scene/comments"; diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss new file mode 100644 index 0000000..af3bc99 --- /dev/null +++ b/app/src/styles/scene/comments.scss @@ -0,0 +1,72 @@ +@use "../abstracts/variables" as *; +@use "../abstracts/mixins" as *; + +.comments-threads-wrapper { + position: fixed; + top: 50%; + left: 50%; + padding: 4px; + background: var(--background-color); + border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large} + 0; + backdrop-filter: blur(12px); + z-index: 1000; + transform: translateY(-100%); + outline: 1px solid var(--border-color); + transition: all 0.2s ease-out; + .comments-threads-container { + display: flex; + align-items: start; + flex-direction: column; + .users-commented { + @include flex-center; + .users { + height: 24px; + line-height: 24px; + width: 24px; + text-transform: uppercase; + border-radius: 50%; + } + } + .last-comment-details { + display: flex; + align-items: start; + flex-direction: column; + padding-top: 0; + height: 0; + width: 0; + overflow: hidden; + transition: all 0.2s; + .header { + @include flex-center; + gap: 10px; + .user-name { + text-transform: capitalize; + } + .time { + font-size: var(--font-size-small); + color: var(--input-text-color); + } + } + .message { + margin-top: 10px; + } + .replies { + margin-top: 10px; + font-size: var(--font-size-small); + color: var(--input-text-color); + } + } + .expand { + min-width: 200px; + max-width: 260px; + padding: 12px; + height: 100%; + } + } + .open { + .users-commented { + padding: 12px; + } + } +} 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;