diff --git a/app/src/assets/floor/concreteFloorWorn001Diff2k.jpg b/app/src/assets/floor/concreteFloorWorn001Diff2k.jpg deleted file mode 100644 index f8ffbd3..0000000 Binary files a/app/src/assets/floor/concreteFloorWorn001Diff2k.jpg and /dev/null differ diff --git a/app/src/assets/floor/concreteFloorWorn001NorGl2k.jpg b/app/src/assets/floor/concreteFloorWorn001NorGl2k.jpg deleted file mode 100644 index 896b67f..0000000 Binary files a/app/src/assets/floor/concreteFloorWorn001NorGl2k.jpg and /dev/null differ diff --git a/app/src/assets/gltf-glb/arch.glb b/app/src/assets/gltf-glb/arch.glb deleted file mode 100644 index 52f44ef..0000000 Binary files a/app/src/assets/gltf-glb/arch.glb and /dev/null differ diff --git a/app/src/assets/gltf-glb/box.glb b/app/src/assets/gltf-glb/box.glb deleted file mode 100644 index 92ef9d8..0000000 Binary files a/app/src/assets/gltf-glb/box.glb and /dev/null differ diff --git a/app/src/assets/gltf-glb/crate_box.glb b/app/src/assets/gltf-glb/crate_box.glb deleted file mode 100644 index df4175b..0000000 Binary files a/app/src/assets/gltf-glb/crate_box.glb and /dev/null differ diff --git a/app/src/assets/gltf-glb/door.glb b/app/src/assets/gltf-glb/door.glb deleted file mode 100644 index f2a73e1..0000000 Binary files a/app/src/assets/gltf-glb/door.glb and /dev/null differ diff --git a/app/src/assets/gltf-glb/default.glb b/app/src/assets/gltf-glb/materials/default.glb similarity index 100% rename from app/src/assets/gltf-glb/default.glb rename to app/src/assets/gltf-glb/materials/default.glb diff --git a/app/src/assets/gltf-glb/material1.glb b/app/src/assets/gltf-glb/materials/material1.glb similarity index 100% rename from app/src/assets/gltf-glb/material1.glb rename to app/src/assets/gltf-glb/materials/material1.glb diff --git a/app/src/assets/gltf-glb/material2.glb b/app/src/assets/gltf-glb/materials/material2.glb similarity index 100% rename from app/src/assets/gltf-glb/material2.glb rename to app/src/assets/gltf-glb/materials/material2.glb diff --git a/app/src/assets/gltf-glb/material3.glb b/app/src/assets/gltf-glb/materials/material3.glb similarity index 100% rename from app/src/assets/gltf-glb/material3.glb rename to app/src/assets/gltf-glb/materials/material3.glb diff --git a/app/src/assets/gltf-glb/arm_ui_drop.glb b/app/src/assets/gltf-glb/ui/arm_ui_drop.glb similarity index 100% rename from app/src/assets/gltf-glb/arm_ui_drop.glb rename to app/src/assets/gltf-glb/ui/arm_ui_drop.glb diff --git a/app/src/assets/gltf-glb/arm_ui_pick.glb b/app/src/assets/gltf-glb/ui/arm_ui_pick.glb similarity index 100% rename from app/src/assets/gltf-glb/arm_ui_pick.glb rename to app/src/assets/gltf-glb/ui/arm_ui_pick.glb diff --git a/app/src/assets/gltf-glb/arrow_green.glb b/app/src/assets/gltf-glb/ui/arrow_green.glb similarity index 100% rename from app/src/assets/gltf-glb/arrow_green.glb rename to app/src/assets/gltf-glb/ui/arrow_green.glb diff --git a/app/src/assets/gltf-glb/arrow_red.glb b/app/src/assets/gltf-glb/ui/arrow_red.glb similarity index 100% rename from app/src/assets/gltf-glb/arrow_red.glb rename to app/src/assets/gltf-glb/ui/arrow_red.glb diff --git a/app/src/assets/gltf-glb/window.glb b/app/src/assets/gltf-glb/window.glb deleted file mode 100644 index 27ea80e..0000000 Binary files a/app/src/assets/gltf-glb/window.glb and /dev/null differ diff --git a/app/src/assets/hdr/mudroadpuresky2k.hdr b/app/src/assets/hdr/mudroadpuresky2k.hdr deleted file mode 100644 index 0a03764..0000000 Binary files a/app/src/assets/hdr/mudroadpuresky2k.hdr and /dev/null differ diff --git a/app/src/assets/orgTemp.png b/app/src/assets/image/orgTemp.png similarity index 100% rename from app/src/assets/orgTemp.png rename to app/src/assets/image/orgTemp.png diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index c7c3070..9bfa4df 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import orgImg from "../../../assets/orgTemp.png"; +import orgImg from "../../../assets/image/orgTemp.png"; import { useActiveUsers, useCamMode } from "../../../store/store"; import { ActiveUser } from "../../../types/users"; import CollaborationPopup from "../../templates/CollaborationPopup"; diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index c90edcf..b9d98f4 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -38,450 +38,360 @@ import { useFloatingWidget, } from "../../store/visualization/useDroppedObjectsStore"; -const Tools: React.FC = () => { - const { templates } = useTemplateStore(); - const { activeSubTool, setActiveSubTool } = useActiveSubTool(); - const { toggleThreeD, setToggleThreeD } = useThreeDStore(); - const { setToggleUI } = useToggleStore(); +// Utility component +const ToolButton = ({ icon: Icon, active, onClick, tooltip }: any) => ( + +); - const dropdownRef = useRef(null); - const [openDrop, setOpenDrop] = useState(false); - const { visualizationSocket } = useSocketStore(); +const Tools: React.FC = () => { const { activeModule } = useModuleStore(); + const { toggleThreeD, setToggleThreeD } = useThreeDStore(); const { isPlaying, setIsPlaying } = usePlayButtonStore(); - const { addTemplate } = useTemplateStore(); + + const { + activeTool, + setActiveTool, + setToolMode, + setAddAction, + setDeleteTool, + setDeletePointOrLine, + setTransformMode, + } = useStoreHooks(); + + const { setActiveSubTool, activeSubTool } = useActiveSubTool(); + const { setSelectedWallItem } = useSelectedWallItem(); + const { setRefTextUpdate } = useRefTextUpdate(); + const { setToggleUI } = useToggleStore(); + const { setToggleView, toggleView } = useToggleView(); + + const { addTemplate, templates } = useTemplateStore(); const { selectedZone } = useSelectedZoneStore(); const { floatingWidget } = useFloatingWidget(); - const { widgets3D } = use3DWidget(); + const { visualizationSocket } = useSocketStore(); - // wall options - const { toggleView, setToggleView } = useToggleView(); - const { setDeleteTool } = useDeleteTool(); - const { setAddAction } = useAddAction(); - const { setSelectedWallItem } = useSelectedWallItem(); + const dropdownRef = useRef(null); + const [openDrop, setOpenDrop] = useState(false); - const { setTransformMode } = useTransformMode(); - const { setDeletePointOrLine } = useDeletePointOrLine(); - const { setToolMode } = useToolMode(); - const { activeTool, setActiveTool } = useActiveTool(); - const { setRefTextUpdate } = useRefTextUpdate(); - - // Reset activeTool whenever activeModule changes + // 1. Set UI toggles on initial render useEffect(() => { setToggleUI( - localStorage.getItem("navBarUiLeft") - ? localStorage.getItem("navBarUiLeft") === "true" - : true, - localStorage.getItem("navBarUiRight") - ? localStorage.getItem("navBarUiRight") === "true" - : true + localStorage.getItem("navBarUiLeft") !== "false", + localStorage.getItem("navBarUiRight") !== "false" ); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + // 2. Update tool based on subtool and module useEffect(() => { setActiveTool(activeSubTool); setActiveSubTool(activeSubTool); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeModule]); - const toggleSwitch = () => { - if (toggleThreeD) { - setSelectedWallItem(null); - setDeleteTool(false); - setAddAction(null); - setToggleView(true); - // localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD)); - } else { - setToggleView(false); - } - setToggleUI( - localStorage.getItem("navBarUiLeft") - ? localStorage.getItem("navBarUiLeft") === "true" - : true, - localStorage.getItem("navBarUiRight") - ? localStorage.getItem("navBarUiRight") === "true" - : true - ); - setToggleThreeD(!toggleThreeD); - setActiveSubTool("cursor"); - setActiveTool("cursor"); - }; - + // 3. Update tools behavior based on selected tool and view mode useEffect(() => { - const handleOutsideClick = (event: MouseEvent) => { + resetTools(); + updateToolBehavior(activeTool, toggleView); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeTool, toggleView]); + + // 4. Dropdown auto-close + useEffect(() => { + const handleClickOutside = (e: MouseEvent) => { if ( dropdownRef.current && - !dropdownRef.current.contains(event.target as Node) + !dropdownRef.current.contains(e.target as Node) ) { - setOpenDrop(false); // Close the dropdown + setOpenDrop(false); } }; - document.addEventListener("mousedown", handleOutsideClick); - - return () => { - document.removeEventListener("mousedown", handleOutsideClick); - }; + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); }, []); - useEffect(() => { - if (!toggleThreeD) { - setToggleUI(false, false); - } - }, [toggleThreeD]); - useEffect(() => { + const resetTools = () => { setToolMode(null); setDeleteTool(false); setAddAction(null); setTransformMode(null); setDeletePointOrLine(false); - setRefTextUpdate((prevUpdate) => prevUpdate - 1); + setRefTextUpdate((prev) => prev - 1); + }; - switch (activeTool) { + const updateToolBehavior = (tool: string, is2D: boolean) => { + switch (tool) { case "cursor": - if (toggleView) { - setToolMode("move"); - } else { - setTransformMode("translate"); - } + is2D ? setToolMode("move") : setTransformMode("translate"); break; - case "Rotate": - if (!toggleView) { - setTransformMode("rotate"); - } + if (!is2D) setTransformMode("rotate"); break; - case "Scale": - if (!toggleView) { - setTransformMode("scale"); - } + if (!is2D) setTransformMode("scale"); break; - case "draw-wall": - if (toggleView) { - setToolMode("Wall"); - } + is2D && setToolMode("Wall"); break; - case "draw-aisle": - if (toggleView) { - setToolMode("Aisle"); - } + is2D && setToolMode("Aisle"); break; - case "draw-zone": - if (toggleView) { - setToolMode("Zone"); - } + is2D && setToolMode("Zone"); break; - case "draw-floor": - if (toggleView) { - setToolMode("Floor"); - } + is2D && setToolMode("Floor"); break; - case "measure": setToolMode("MeasurementScale"); break; - case "Add pillar": - if (!toggleView) { - setAddAction("pillar"); - } + if (!is2D) setAddAction("pillar"); break; - case "delete": - if (toggleView) { - setDeletePointOrLine(true); - } else { - setDeleteTool(true); - } - break; - - default: + is2D ? setDeletePointOrLine(true) : setDeleteTool(true); break; } + }; - setActiveTool(activeTool); - }, [activeTool, toggleView]); + const toggle2D3D = () => { + setToggleThreeD(!toggleThreeD); + setToggleUI( + localStorage.getItem("navBarUiLeft") !== "false", + localStorage.getItem("navBarUiRight") !== "false" + ); + setSelectedWallItem(null); + setActiveSubTool("cursor"); + setActiveTool("cursor"); + setToggleView(!toggleThreeD); + }; + + if (isPlaying && activeModule !== "simulation") { + return ( + + ); + } + + const renderBuilderTools = () => ( + <> + {!toggleThreeD && ( +
+ setActiveTool("draw-wall")} + /> + setActiveTool("draw-zone")} + /> + setActiveTool("draw-aisle")} + /> + setActiveTool("draw-floor")} + /> +
+ )} +
+ setActiveTool("measure")} + /> +
+ + ); + + const renderSimulationTools = () => ( +
+ setActiveTool("pen")} + /> +
+ ); + + const renderVisualizationTools = () => ( +
+ + handleSaveTemplate({ + addTemplate, + floatingWidget, + widgets3D, + selectedZone, + templates, + visualizationSocket, + }) + } + /> +
+ ); + + const renderModeSwitcher = () => ( + + ); + + const getIconByTool = (tool: string) => { + switch (tool) { + case "cursor": + return CursorIcon; + case "free-hand": + return FreeMoveIcon; + case "delete": + return DeleteIcon; + default: + return CursorIcon; + } + }; + + const getTooltipShortcut = (tool: string) => { + switch (tool) { + case "cursor": + return "v"; + case "free-hand": + return "h"; + case "delete": + return "x"; + default: + return ""; + } + }; + + const getIconComponent = (option: string) => { + switch (option) { + case "cursor": + return ; + case "free-hand": + return ; + case "delete": + return ; + default: + return null; + } + }; return ( - <> - {!isPlaying ? ( -
-
-
- {activeSubTool == "cursor" && ( -
{ - setActiveTool("cursor"); - }} - > -
cursor (v)
- -
- )} - {activeSubTool == "free-hand" && ( -
{ - setActiveTool("free-hand"); - }} - > -
free hand (h)
- -
- )} - {activeSubTool == "delete" && ( -
{ - setActiveTool("delete"); - }} - > -
delete (x)
- -
- )} - {activeModule !== "visualization" && ( -
{ - setOpenDrop(!openDrop); - }} - > - - {openDrop && ( -
-
{ - setOpenDrop(false); - setActiveTool("cursor"); - setActiveSubTool("cursor"); - }} - > -
- {activeSubTool === "cursor" && } -
- -
Cursor
-
-
{ - setOpenDrop(false); - setActiveTool("free-hand"); - setActiveSubTool("free-hand"); - }} - > -
- {activeSubTool === "free-hand" && } -
- -
Free Hand
-
-
{ - setOpenDrop(false); - setActiveTool("delete"); - setActiveSubTool("delete"); - }} - > -
- {activeSubTool === "delete" && } -
- -
Delete
-
+
+
+ {/* Tool Picker (cursor, delete, etc.) */} + {["cursor", "free-hand", "delete"].map( + (tool) => + activeSubTool === tool && ( + setActiveTool(tool)} + /> + ) + )} + {/* Dropdown Menu */} + {activeModule !== "visualization" && ( +
- )} -
-
- {!toggleThreeD && activeModule === "builder" && ( - <> -
-
-
{ - setActiveTool("draw-wall"); - }} - > -
draw wall (q)
- -
-
{ - setActiveTool("draw-zone"); - }} - > -
draw zone (e)
- -
-
{ - setActiveTool("draw-aisle"); - }} - > -
draw asile (r)
- -
-
{ - setActiveTool("draw-floor"); - }} - > -
draw floor (t)
- -
-
- - )} - {activeModule === "builder" && ( - <> -
-
-
{ - setActiveTool("measure"); - }} - > -
measure scale (m)
- -
-
- - )} - {activeModule === "simulation" && ( - <> -
-
-
{ - setActiveTool("pen"); - }} - > -
pen
- -
-
- - )} - {activeModule === "visualization" && ( - <> -
-
-
{ - handleSaveTemplate({ - addTemplate, - floatingWidget, - widgets3D, - selectedZone, - templates, - visualizationSocket, - }); - }} - > -
save template
- -
-
- - )} -
-
-
{ - setActiveTool("comment"); - }} - > -
comment
- -
- {toggleThreeD && ( -
{ - setIsPlaying(!isPlaying); - }} - > -
play (ctrl + p)
- + {getIconComponent(option)} +
{option}
+ + ))}
)} -
- {activeModule === "builder" && ( - <> -
-
-
toggle view (tab)
-
- 2d -
-
- 3d -
-
- - )} -
- ) : ( + + )} +
+ +
+ {activeModule === "builder" && renderBuilderTools()} + {activeModule === "simulation" && renderSimulationTools()} + {activeModule === "visualization" && renderVisualizationTools()} + +
+
+ setActiveTool("comment")} + /> + {toggleThreeD && ( + setIsPlaying(!isPlaying)} + /> + )} +
+ + {activeModule === "builder" && ( <> - {activeModule !== "simulation" && ( - - )} +
+ {renderModeSwitcher()} )} - +
); }; +// Extracted common store logic +const useStoreHooks = () => { + return { + ...useActiveTool(), + ...useToolMode(), + ...useDeleteTool(), + ...useAddAction(), + ...useTransformMode(), + ...useDeletePointOrLine(), + ...useRefTextUpdate(), + }; +}; + export default Tools; diff --git a/app/src/modules/builder/builder.tsx b/app/src/modules/builder/builder.tsx index dfae129..4c8b1d7 100644 --- a/app/src/modules/builder/builder.tsx +++ b/app/src/modules/builder/builder.tsx @@ -11,9 +11,9 @@ import ReferenceDistanceText from "./geomentries/lines/distanceText/referenceDis ////////// Assests Imports ////////// -import arch from "../../assets/gltf-glb/arch.glb"; -import door from "../../assets/gltf-glb/door.glb"; -import Window from "../../assets/gltf-glb/window.glb"; +// import arch from "../../assets/gltf-glb/arch.glb"; +// import door from "../../assets/gltf-glb/door.glb"; +// import Window from "../../assets/gltf-glb/window.glb"; ////////// Zustand State Imports ////////// @@ -129,30 +129,30 @@ export default function Builder() { ////////// Assest Configuration Values ////////// const AssetConfigurations: Types.AssetConfigurations = { - arch: { - modelUrl: arch, - scale: [0.75, 0.75, 0.75], - csgscale: [2, 4, 0.5], - csgposition: [0, 2, 0], - positionY: () => 0, - type: "Fixed-Move", - }, - door: { - modelUrl: door, - scale: [0.75, 0.75, 0.75], - csgscale: [2, 4, 0.5], - csgposition: [0, 2, 0], - positionY: () => 0, - type: "Fixed-Move", - }, - window: { - modelUrl: Window, - scale: [0.75, 0.75, 0.75], - csgscale: [5, 3, 0.5], - csgposition: [0, 1.5, 0], - positionY: (intersectionPoint) => intersectionPoint.point.y, - type: "Free-Move", - }, + // arch: { + // modelUrl: arch, + // scale: [0.75, 0.75, 0.75], + // csgscale: [2, 4, 0.5], + // csgposition: [0, 2, 0], + // positionY: () => 0, + // type: "Fixed-Move", + // }, + // door: { + // modelUrl: door, + // scale: [0.75, 0.75, 0.75], + // csgscale: [2, 4, 0.5], + // csgposition: [0, 2, 0], + // positionY: () => 0, + // type: "Fixed-Move", + // }, + // window: { + // modelUrl: Window, + // scale: [0.75, 0.75, 0.75], + // csgscale: [5, 3, 0.5], + // csgposition: [0, 1.5, 0], + // positionY: (intersectionPoint) => intersectionPoint.point.y, + // type: "Free-Move", + // }, }; ////////// All Toggle's ////////// diff --git a/app/src/modules/scene/setup/setup.tsx b/app/src/modules/scene/setup/setup.tsx index 34289f9..660264b 100644 --- a/app/src/modules/scene/setup/setup.tsx +++ b/app/src/modules/scene/setup/setup.tsx @@ -4,7 +4,7 @@ import PostProcessing from '../postProcessing/postProcessing' import Controls from '../controls/controls'; import { Environment } from '@react-three/drei' -import background from "../../../assets/hdr/mudroadpuresky2k.hdr"; +import background from "../../../assets/textures/hdr/mudroadpuresky2k.hdr"; function Setup() { return ( diff --git a/app/src/modules/simulation/materials/instances/material/materialModel.tsx b/app/src/modules/simulation/materials/instances/material/materialModel.tsx index 244c7bf..d8f5fe9 100644 --- a/app/src/modules/simulation/materials/instances/material/materialModel.tsx +++ b/app/src/modules/simulation/materials/instances/material/materialModel.tsx @@ -2,10 +2,10 @@ import { useGLTF } from '@react-three/drei' import { useMemo } from 'react'; import * as THREE from 'three'; -import defaultMaterial from '../../../../../assets/gltf-glb/default.glb'; -import material1 from '../../../../../assets/gltf-glb/material1.glb'; -import material2 from '../../../../../assets/gltf-glb/material2.glb'; -import material3 from '../../../../../assets/gltf-glb/material3.glb'; +import defaultMaterial from '../../../../../assets/gltf-glb/materials/default.glb'; +import material1 from '../../../../../assets/gltf-glb/materials/material1.glb'; +import material2 from '../../../../../assets/gltf-glb/materials/material2.glb'; +import material3 from '../../../../../assets/gltf-glb/materials/material3.glb'; const modelPaths: Record = { 'Default material': defaultMaterial, diff --git a/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx b/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx index 55e511a..3bc2a92 100644 --- a/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx +++ b/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx @@ -8,8 +8,8 @@ import PickDropPoints from './PickDropPoints'; import useDraggableGLTF from './useDraggableGLTF'; import * as THREE from 'three'; -import armPick from "../../../../assets/gltf-glb/arm_ui_pick.glb"; -import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb"; +import armPick from "../../../../assets/gltf-glb/ui/arm_ui_pick.glb"; +import armDrop from "../../../../assets/gltf-glb/ui/arm_ui_drop.glb"; import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi'; type Positions = { diff --git a/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx b/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx index bb690d4..300c55c 100644 --- a/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx +++ b/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx @@ -1,7 +1,5 @@ import { useEffect, useRef, useState } from "react"; import * as Types from "../../../../types/world/worldTypes"; -import startPoint from "../../../../assets/gltf-glb/arrow_green.glb"; -import startEnd from "../../../../assets/gltf-glb/arrow_red.glb"; import { useGLTF } from "@react-three/drei"; import { useFrame, useThree } from "@react-three/fiber"; import { @@ -15,6 +13,9 @@ import { useProductStore } from "../../../../store/simulation/useProductStore"; import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi"; import { DoubleSide, Group, Plane, Vector3 } from "three"; +import startPoint from "../../../../assets/gltf-glb/ui/arrow_green.glb"; +import startEnd from "../../../../assets/gltf-glb/ui/arrow_red.glb"; + const VehicleUI = () => { const { scene: startScene } = useGLTF(startPoint) as any; const { scene: endScene } = useGLTF(startEnd) as any;