diff --git a/app/src/assets/textures/floor/black.png b/app/src/assets/textures/floor/black.png new file mode 100644 index 0000000..5562e8a Binary files /dev/null and b/app/src/assets/textures/floor/black.png differ diff --git a/app/src/assets/textures/floor/factory wall texture.jpg b/app/src/assets/textures/floor/factory wall texture.jpg new file mode 100644 index 0000000..65e39c3 Binary files /dev/null and b/app/src/assets/textures/floor/factory wall texture.jpg differ diff --git a/app/src/assets/textures/floor/wall-tex.png b/app/src/assets/textures/floor/wall-tex.png new file mode 100644 index 0000000..d1a09a8 Binary files /dev/null and b/app/src/assets/textures/floor/wall-tex.png differ diff --git a/app/src/assets/textures/floor/white.png b/app/src/assets/textures/floor/white.png new file mode 100644 index 0000000..efc1ea4 Binary files /dev/null and b/app/src/assets/textures/floor/white.png differ diff --git a/app/src/components/ui/FileMenu.tsx b/app/src/components/ui/FileMenu.tsx index 9997ee4..4ad40c5 100644 --- a/app/src/components/ui/FileMenu.tsx +++ b/app/src/components/ui/FileMenu.tsx @@ -32,7 +32,7 @@ const FileMenu: React.FC = () => { }, []); // project - const [projectName, setProjectName] = useState("project 1"); + const [projectName, setProjectName] = useState("Demo Project"); // Load project name from localStorage on mount useEffect(() => { diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index 82116cf..8abdf22 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -5,7 +5,7 @@ import SkeletonUI from "../../templates/SkeletonUI"; const ProductionCapacity = ({ progressPercent = 50, - avgProcessTime = "28.4 Secs/unit", + avgProcessTime = "28.4", machineUtilization = "78%", throughputValue = 128, timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" }, @@ -34,7 +34,7 @@ const ProductionCapacity = ({ <>
- {throughputValue} Units/hour + {avgProcessTime} secs/unit
{/* Dynamic Progress Bar */} @@ -56,8 +56,8 @@ const ProductionCapacity = ({
- Avg. Process Time - {avgProcessTime} + Units/hour + {throughputValue} avg.
Machine Utilization diff --git a/app/src/modules/builder/geomentries/floors/addFloorToScene.ts b/app/src/modules/builder/geomentries/floors/addFloorToScene.ts index c951ba0..7ee2ceb 100644 --- a/app/src/modules/builder/geomentries/floors/addFloorToScene.ts +++ b/app/src/modules/builder/geomentries/floors/addFloorToScene.ts @@ -2,8 +2,8 @@ import * as THREE from 'three'; import * as Types from "../../../../types/world/worldTypes"; import * as CONSTANTS from "../../../../types/world/worldConstants"; -import texturePath from "../../../../assets/textures/floor/concreteFloorWorn001Diff2k.jpg"; -import normalPath from "../../../../assets/textures/floor/concreteFloorWorn001NorGl2k.jpg"; +import texturePath from "../../../../assets/textures/floor/white.png"; +import texturePathDark from "../../../../assets/textures/floor/black.png"; // Cache for materials const materialCache = new Map(); @@ -14,6 +14,8 @@ export default function addFloorToScene( floorGroup: Types.RefGroup, userData: any, ) { + const savedTheme: string | null = localStorage.getItem('theme'); + const textureLoader = new THREE.TextureLoader(); const textureScale = CONSTANTS.floorConfig.textureScale; @@ -24,20 +26,17 @@ export default function addFloorToScene( if (materialCache.has(materialKey)) { material = materialCache.get(materialKey) as THREE.Material; + // } else { } else { - const floorTexture = textureLoader.load(texturePath); - const normalMap = textureLoader.load(normalPath); + const floorTexture = textureLoader.load(savedTheme === "dark" ? texturePathDark : texturePath); + // const floorTexture = textureLoader.load(texturePath); floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set(textureScale, textureScale); floorTexture.colorSpace = THREE.SRGBColorSpace; - normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; - normalMap.repeat.set(textureScale, textureScale); - material = new THREE.MeshStandardMaterial({ map: floorTexture, - normalMap: normalMap, side: THREE.DoubleSide, }); diff --git a/app/src/modules/builder/groups/floorItemsGroup.tsx b/app/src/modules/builder/groups/floorItemsGroup.tsx index 1ab9d59..206d00d 100644 --- a/app/src/modules/builder/groups/floorItemsGroup.tsx +++ b/app/src/modules/builder/groups/floorItemsGroup.tsx @@ -1,7 +1,6 @@ import { useFrame, useThree } from "@react-three/fiber"; import { useActiveTool, - useAsset3dWidget, useCamMode, useDeletableFloorItem, useDeleteTool, @@ -14,7 +13,6 @@ import { useToggleView, useTransformMode, } from "../../../store/store"; -import assetVisibility from "../geomentries/assets/assetVisibility"; import { useEffect } from "react"; import * as THREE from "three"; import * as Types from "../../../types/world/worldTypes"; @@ -29,7 +27,6 @@ import loadInitialFloorItems from "../IntialLoad/loadInitialFloorItems"; import addAssetModel from "../geomentries/assets/addAssetModel"; import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi"; import useModuleStore from "../../../store/useModuleStore"; -// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils"; import { useEventsStore } from "../../../store/simulation/useEventsStore"; const assetManagerWorker = new Worker( @@ -198,9 +195,7 @@ const FloorItemsGroup = ({ }; const startInterval = () => { - if (!intervalId) { - intervalId = setInterval(handleChange, 50); - } + intervalId ??= setInterval(handleChange, 50); }; const stopInterval = () => { diff --git a/app/src/modules/builder/groups/wallsAndWallItems.tsx b/app/src/modules/builder/groups/wallsAndWallItems.tsx index 6b6c97d..455896e 100644 --- a/app/src/modules/builder/groups/wallsAndWallItems.tsx +++ b/app/src/modules/builder/groups/wallsAndWallItems.tsx @@ -1,56 +1,92 @@ import { Geometry } from "@react-three/csg"; -import { useDeleteTool, useSelectedWallItem, useToggleView, useTransformMode, useWallItems, useWalls } from "../../../store/store"; +import { + useDeleteTool, + useSelectedWallItem, + useToggleView, + useTransformMode, + useWallItems, + useWalls, +} from "../../../store/store"; import handleMeshDown from "../eventFunctions/handleMeshDown"; import handleMeshMissed from "../eventFunctions/handleMeshMissed"; import WallsMesh from "./wallsMesh"; import WallItemsGroup from "./wallItemsGroup"; import { useEffect } from "react"; +const WallsAndWallItems = ({ + CSGGroup, + AssetConfigurations, + setSelectedItemsIndex, + selectedItemsIndex, + currentWallItem, + csg, + lines, + hoveredDeletableWallItem, +}: any) => { + const { walls } = useWalls(); + const { wallItems } = useWallItems(); + const { toggleView } = useToggleView(); + const { deleteTool } = useDeleteTool(); + const { transformMode } = useTransformMode(); + const { setSelectedWallItem } = useSelectedWallItem(); -const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsIndex, selectedItemsIndex, currentWallItem, csg, lines, hoveredDeletableWallItem }: any) => { - const { walls, setWalls } = useWalls(); - const { wallItems, setWallItems } = useWallItems(); - const { toggleView, setToggleView } = useToggleView(); - const { deleteTool, setDeleteTool } = useDeleteTool(); - const { transformMode, setTransformMode } = useTransformMode(); - const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); - - useEffect(() => { - if (transformMode === null) { - if (!deleteTool) { - handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex); - setSelectedWallItem(null); - setSelectedItemsIndex(null); - } + useEffect(() => { + if (transformMode === null) { + if (!deleteTool) { + handleMeshMissed( + currentWallItem, + setSelectedWallItem, + setSelectedItemsIndex + ); + setSelectedWallItem(null); + setSelectedItemsIndex(null); + } + } + }, [transformMode]); + return ( + { + if (!deleteTool && transformMode !== null) { + handleMeshDown( + event, + currentWallItem, + setSelectedWallItem, + setSelectedItemsIndex, + wallItems, + toggleView + ); } - }, [transformMode]) + }} + onPointerMissed={() => { + if (!deleteTool) { + handleMeshMissed( + currentWallItem, + setSelectedWallItem, + setSelectedItemsIndex + ); + setSelectedWallItem(null); + setSelectedItemsIndex(null); + } + }} + > + + + + + + ); +}; - return ( - { - if (!deleteTool && transformMode !== null) { - handleMeshDown(event, currentWallItem, setSelectedWallItem, setSelectedItemsIndex, wallItems, toggleView); - } - }} - onPointerMissed={() => { - if (!deleteTool) { - handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex); - setSelectedWallItem(null); - setSelectedItemsIndex(null); - } - }} - > - - - - - - ) -} - -export default WallsAndWallItems; \ No newline at end of file +export default WallsAndWallItems; diff --git a/app/src/modules/builder/groups/wallsMesh.tsx b/app/src/modules/builder/groups/wallsMesh.tsx index 92a0ee3..4f71680 100644 --- a/app/src/modules/builder/groups/wallsMesh.tsx +++ b/app/src/modules/builder/groups/wallsMesh.tsx @@ -1,65 +1,78 @@ -import * as THREE from 'three'; -import * as Types from '../../../types/world/worldTypes'; -import * as CONSTANTS from '../../../types/world/worldConstants'; -import { Base } from '@react-three/csg'; -import { MeshDiscardMaterial } from '@react-three/drei'; -import { useUpdateScene, useWalls } from '../../../store/store'; -import { useEffect } from 'react'; -import { getLines } from '../../../services/factoryBuilder/lines/getLinesApi'; -import objectLinesToArray from '../geomentries/lines/lineConvertions/objectLinesToArray'; -import loadWalls from '../geomentries/walls/loadWalls'; +import * as THREE from "three"; +import * as Types from "../../../types/world/worldTypes"; +import * as CONSTANTS from "../../../types/world/worldConstants"; +import { Base } from "@react-three/csg"; +import { MeshDiscardMaterial } from "@react-three/drei"; +import { useUpdateScene, useWalls } from "../../../store/store"; +import React, { useEffect } from "react"; +import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi"; +import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray"; +import loadWalls from "../geomentries/walls/loadWalls"; +// texture +import texturePath from "../../../assets/textures/floor/wall-tex.png"; -const WallsMesh = ({ lines }: any) => { - const { walls, setWalls } = useWalls(); - const { updateScene, setUpdateScene } = useUpdateScene(); +// Cache for materials +const materialCache = new Map(); - useEffect(() => { - if (updateScene) { +const WallsMeshComponent = ({ lines }: any) => { + const { walls, setWalls } = useWalls(); + const { updateScene, setUpdateScene } = useUpdateScene(); - const email = localStorage.getItem('email') - const organization = (email!.split("@")[1]).split(".")[0]; + useEffect(() => { + if (updateScene) { + const email = localStorage.getItem("email"); + const organization = email!.split("@")[1].split(".")[0]; - getLines(organization).then((data) => { - const Lines: Types.Lines = objectLinesToArray(data); - localStorage.setItem("Lines", JSON.stringify(Lines)); + getLines(organization).then((data) => { + const Lines: Types.Lines = objectLinesToArray(data); + localStorage.setItem("Lines", JSON.stringify(Lines)); - if (Lines) { - loadWalls(lines, setWalls); - } - }) - setUpdateScene(false); + if (Lines) { + loadWalls(lines, setWalls); } - }, [updateScene]) + }); + setUpdateScene(false); + } + }, [updateScene]); - return ( - <> - {walls.map((wall: Types.Wall, index: number) => ( - - - - - - - - - ))} - - ) -} + const textureLoader = new THREE.TextureLoader(); + const wallTexture = textureLoader.load(texturePath); -export default WallsMesh; \ No newline at end of file + wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping; + wallTexture.repeat.set(0.1, 0.1); + wallTexture.colorSpace = THREE.SRGBColorSpace; + + return ( + <> + {walls.map((wall: Types.Wall, index: number) => ( + + + + + + + + + ))} + + ); +}; + +const WallsMesh = React.memo(WallsMeshComponent); +export default WallsMesh; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 4d321d4..0b7743f 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1002,8 +1002,7 @@ height: 100%; width: 1px; position: absolute; - color: var(--text-color); - opacity: 0.4; + color: var(--accent-color); font-size: var(--font-size-regular); outline-offset: -1px; top: 0; diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts index 0374c8a..aaa8466 100644 --- a/app/src/types/world/worldConstants.ts +++ b/app/src/types/world/worldConstants.ts @@ -326,7 +326,7 @@ export const lineConfig: LineConfig = { }; export const wallConfig: WallConfig = { - defaultColor: "white", // Default color of the walls + defaultColor: "#f2f2f2", // Default color of the walls height: 7, // Height of the walls width: 0.05, // Width of the walls }; @@ -334,7 +334,7 @@ export const wallConfig: WallConfig = { export const floorConfig: FloorConfig = { defaultColor: "grey", // Default color of the floors height: 0.1, // Height of the floors - textureScale: 0.1, // Scale of the floor texture + textureScale: 1, // Scale of the floor texture }; export const roofConfig: RoofConfig = { @@ -345,7 +345,7 @@ export const roofConfig: RoofConfig = { export const aisleConfig: AisleConfig = { width: 0.1, // Width of the aisles height: 0.01, // Height of the aisles - defaultColor: 0xffff00, // Default color of the aisles + defaultColor: 0xE2AC09, // Default color of the aisles }; export const zoneConfig: ZoneConfig = { diff --git a/app/src/utils/theme.ts b/app/src/utils/theme.ts index 9395129..541f4ba 100644 --- a/app/src/utils/theme.ts +++ b/app/src/utils/theme.ts @@ -4,7 +4,7 @@ export { }; function setTheme() { const savedTheme: string | null = localStorage.getItem('theme'); const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches; - const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light'); + const defaultTheme: string = savedTheme ?? (systemPrefersDark ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', defaultTheme); localStorage.setItem('theme', defaultTheme); }