diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index 228cd21..1d144d6 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -107,7 +107,7 @@ export function StockIncreseIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + - - + + { const { toggleUI, setToggleUI } = useToggleStore(); + const { activeModule } = useModuleStore(); + return (
@@ -19,7 +22,7 @@ const Header: React.FC = () => {
{ - setToggleUI(!toggleUI); + if (activeModule !== "market") setToggleUI(!toggleUI); }} > diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 737271e..b361395 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useState } from "react"; import Header from "./Header"; -import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore"; +import useModuleStore, { + useSubModuleStore, +} from "../../../store/useModuleStore"; import { AnalysisIcon, MechanicsIcon, @@ -15,6 +17,7 @@ import AsstePropertiies from "./properties/AssetProperties"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; import { useSelectedActionSphere } from "../../../store/store"; +import ZoneProperties from "./properties/ZoneProperties"; const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); @@ -24,7 +27,8 @@ const SideBarRight: React.FC = () => { // Reset subModule whenever activeModule changes useEffect(() => { - setSubModule("properties"); + if (activeModule !== "simulation") setSubModule("properties"); + if (activeModule === "simulation") setSubModule("mechanics"); }, [activeModule]); return ( @@ -32,32 +36,38 @@ const SideBarRight: React.FC = () => {
{toggleUI && (
-
setSubModule("properties")} - > - -
+ onClick={() => setSubModule("properties")} + > + +
+ {/* )} */} {activeModule === "simulation" && ( <>
setSubModule("mechanics")} >
setSubModule("simulations")} >
setSubModule("analysis")} > @@ -73,6 +83,7 @@ const SideBarRight: React.FC = () => {
+ {/* */} {/* */}
@@ -82,17 +93,17 @@ const SideBarRight: React.FC = () => { {toggleUI && activeModule === "simulation" && ( <> - {(subModule === "mechanics" && selectedActionSphere) && ( + {subModule === "mechanics" && selectedActionSphere && (
)} - {(subModule === "mechanics" && !selectedActionSphere) && ( + {subModule === "mechanics" && !selectedActionSphere && (
- {/* */} +
)} diff --git a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx new file mode 100644 index 0000000..9a6389a --- /dev/null +++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import { EyeDroperIcon } from "../../../icons/ExportCommonIcons"; + +interface PositionInputProps { + onChange: (value: string) => void; // Callback for value change + header: string; + placeholder?: string; // Optional placeholder + type?: string; // Input type (e.g., text, number, email) +} + +const Vector3Input: React.FC = ({ + onChange, + header, + placeholder = "Enter value", // Default placeholder + type = "number", // Default type +}) => { + return ( +
+
+ {header}{" "} +
+ +
+
+
+
+
X :
+ onChange(e.target.value)} + placeholder={placeholder} + /> +
+
+
Y :
+ onChange(e.target.value)} + placeholder={placeholder} + min={0} + /> +
+
+
Z :
+ onChange(e.target.value)} + placeholder={placeholder} + /> +
+
+
+ ); +}; + +export default Vector3Input; diff --git a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx index 85ae67a..9a7e81b 100644 --- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx @@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput"; import { useSelectedActionSphere } from "../../../../store/store"; const MachineMechanics: React.FC = () => { - const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere(); - console.log('selectedActionSphere: ', selectedActionSphere); + const { selectedActionSphere } = useSelectedActionSphere(); + console.log("selectedActionSphere: ", selectedActionSphere); const [actionList, setActionList] = useState([]); const [triggerList, setTriggerList] = useState([]); const [selectedItem, setSelectedItem] = useState<{ @@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => { return (
-
{selectedActionSphere.path.modelName}
+
+ {selectedActionSphere?.path?.modelName || "path name not found"} +
{/*
Process:
{ {actionList.map((action, index) => (
{ {triggerList.map((trigger, index) => (
{ label="Speed" value="" activeOption=".mm" - onChange={() => { }} + onChange={() => {}} /> diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx new file mode 100644 index 0000000..3428b48 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import RenameInput from "../../../ui/inputs/RenameInput"; +import Vector3Input from "../customInput/Vector3Input"; + +const ZoneProperties = () => { + return ( +
+
+ +
+ {}} header="Target"/> + {}} header="Position"/> +
+ ); +}; + +export default ZoneProperties; diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx index 2a361ba..2a12734 100644 --- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx +++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx @@ -28,7 +28,7 @@ const DropList: React.FC = ({ val }) => { }} > {val.pathName} -
+
@@ -87,8 +87,9 @@ const Simulations: React.FC = () => { {productsList.map((action, index) => (
{ const { activeModule, setActiveModule } = useModuleStore(); + const { setToggleUI } = useToggleStore(); return (
setActiveModule("builder")} + onClick={() => { + setActiveModule("builder"); + setToggleUI(true); + }} >
@@ -23,7 +28,10 @@ const ModuleToggle: React.FC = () => {
setActiveModule("simulation")} + onClick={() => { + setActiveModule("simulation"); + setToggleUI(true); + }} >
@@ -34,7 +42,10 @@ const ModuleToggle: React.FC = () => { className={`module-list ${ activeModule === "visualization" && "active" }`} - onClick={() => setActiveModule("visualization")} + onClick={() => { + setActiveModule("visualization"); + setToggleUI(true); + }} >
@@ -42,10 +53,11 @@ const ModuleToggle: React.FC = () => {
Visualization
setActiveModule("market")} + className={`module-list ${activeModule === "market" && "active"}`} + onClick={() => { + setActiveModule("market"); + setToggleUI(false); + }} >
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 6494a6d..bccfa86 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -5,6 +5,7 @@ import AddButtons from "./AddButtons"; import { useSelectedZoneStore } from "../../../store/useZoneStore"; import DisplayZone from "./DisplayZone"; import Scene from "../../../modules/scene/scene"; +import useModuleStore from "../../../store/useModuleStore"; type Side = "top" | "bottom" | "left" | "right"; @@ -60,6 +61,7 @@ const RealTimeVisulization: React.FC = () => { }); const { isPlaying } = usePlayButtonStore(); + const { activeModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); useEffect(() => { @@ -75,33 +77,44 @@ const RealTimeVisulization: React.FC = () => { id="real-time-vis-canvas" className="realTime-viz canvas" style={{ - height: isPlaying ? "100vh" : "", - width: isPlaying ? "100%" : "", - left: isPlaying ? "0%" : "", + height: isPlaying || activeModule !== "visualization" ? "100vh" : "", + width: isPlaying || activeModule !== "visualization" ? "100vw" : "", + left: isPlaying || activeModule !== "visualization" ? "0%" : "", }} >
- + {activeModule === "visualization" && ( + <> + - {!isPlaying && ( - + {!isPlaying && ( + + )} + + + )} - -
); }; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index d05de5e..02a02b9 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -21,8 +21,8 @@ const Project: React.FC = () => { let navigate = useNavigate(); const { activeModule } = useModuleStore(); - const { userName, setUserName } = useUserName(); - const { organization, setOrganization } = useOrganization(); + const { setUserName } = useUserName(); + const { setOrganization } = useOrganization(); const { setFloorItems } = useFloorItems(); const { setWallItems } = useWallItems(); const { setZones } = useZones(); @@ -50,15 +50,13 @@ const Project: React.FC = () => { - {activeModule === "visualization" && } - + + {activeModule !== "market" && } {/* */}
- {activeModule !== "visualization" && } -
+ >
); }; diff --git a/app/src/pages/UserAuth.tsx b/app/src/pages/UserAuth.tsx index b89f34e..851ab7e 100644 --- a/app/src/pages/UserAuth.tsx +++ b/app/src/pages/UserAuth.tsx @@ -141,7 +141,7 @@ const UserAuth: React.FC = () => {
{!isSignIn && (
- +
I have read and agree to the terms of service
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 166f041..0c30a55 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -14,7 +14,7 @@ width: fit-content; transition: width 0.2s; background-color: var(--background-color); - z-index: #{$z-index-tools}; + z-index: #{$z-index-default}; .split { height: 20px; width: 2px; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index c7cd9e5..eba4ba9 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -662,16 +662,30 @@ .collapse-header-container { @include flex-space-between; padding-right: 12px; + margin-top: 8px; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + .header { + color: var(--accent-color); + } } .process-container { + padding: 0 12px; + margin: 6px 0; .value { + @include flex-space-between; .arrow-container { + height: 16px; + width: 16px; } .active { + rotate: 90deg; } } .children-drop { .value { + padding: 6px; + border-left: 1px solid var(--border-color); } } } @@ -716,12 +730,16 @@ } .global-properties-container, .analysis-main-container, - .asset-properties-container { + .asset-properties-container, + .zone-properties-container { .header { padding: 8px 12px; border-top: 1px solid var(--highlight-accent-color); border-bottom: 1px solid var(--highlight-accent-color); color: var(--accent-color); + .input-value { + color: inherit; + } } .input-container { @include flex-center; @@ -759,7 +777,11 @@ } .custom-input-container { .header { + @include flex-space-between; border: none; + .eyedrop-button { + @include flex-center; + } } .inputs-container { @include flex-space-between; diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index d8d7680..c6eb8b5 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -11,6 +11,13 @@ top: 50%; left: calc(270px + 45px); transform: translate(0, -50%); + border-radius: #{$border-radius-medium}; + transition: all 0.2s; + z-index: #{$z-index-default}; + + .scene-container { + overflow: hidden; + } .icon { display: flex; @@ -180,7 +187,6 @@ } } - &.top-panel, &.bottom-panel { left: 0; @@ -387,4 +393,4 @@ } } } -} \ No newline at end of file +}