From b125989ae7384800bf9ed1fcaa563a8ca067d8bb Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Mon, 31 Mar 2025 18:06:44 +0530
Subject: [PATCH] Refactor styles for improved theme management, enhance input
components, and add scene styles
---
app/public/index.html | 9 +-
.../components/layout/sidebarRight/Header.tsx | 13 +-
.../mechanics/ConveyorMechanics.tsx | 485 ++++++++++--------
app/src/components/ui/menu/menu.tsx | 24 +
.../geomentries/lines/distanceText.tsx | 203 +++++---
app/src/modules/builder/groups/zoneGroup.tsx | 4 +-
app/src/modules/scene/environment/ground.tsx | 6 +-
app/src/modules/scene/scene.tsx | 28 +-
app/src/styles/abstracts/variables.scss | 3 +-
app/src/styles/base/base.scss | 2 +-
app/src/styles/components/input.scss | 35 +-
app/src/styles/components/menu/menu.scss | 13 +-
app/src/styles/layout/sidebar.scss | 8 +
app/src/styles/main.scss | 7 +-
app/src/styles/pages/realTimeViz.scss | 3 +-
app/src/styles/scene/scene.scss | 23 +
app/src/types/world/worldConstants.ts | 26 +-
app/src/utils/theme.ts | 35 +-
18 files changed, 556 insertions(+), 371 deletions(-)
create mode 100644 app/src/styles/scene/scene.scss
diff --git a/app/public/index.html b/app/public/index.html
index 785ee0f..d05ca9d 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -1,9 +1,12 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1, user-scalable=no"
+ />
<meta name="theme-color" content="#000000" />
<meta
name="description"
@@ -26,7 +29,7 @@
-->
<title>Dwinzo (beta)</title>
</head>
- <body data-theme="light">
+ <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root-over"></div>
diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index 1da29a2..e51bf9d 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -13,7 +13,7 @@ const Header: React.FC = () => {
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
);
-
+
const [userManagement, setUserManagement] = useState(false);
return (
@@ -31,9 +31,9 @@ const Header: React.FC = () => {
>
Share
</div>
- <div className="app-docker-button">
+ {/* <div className="app-docker-button">
<AppDockIcon />
- </div>
+ </div> */}
</div>
<div className="split"></div>
<div className="users-container">
@@ -52,12 +52,7 @@ const Header: React.FC = () => {
))}
</div>
<div className="user-profile-container">
- <div
- className="user-profile"
- style={{ background: "var(--accent-color)" }}
- >
- {userName[0]}
- </div>
+ <div className="user-profile">{userName[0]}</div>
<div className="user-organization">
<img src={orgImg} alt="" />
</div>
diff --git a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
index f80fca0..bd10613 100644
--- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
@@ -9,9 +9,13 @@ import RenameInput from "../../../ui/inputs/RenameInput";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import { handleResize } from "../../../../functions/handleResizePannel";
-import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
-import * as THREE from 'three';
-import * as Types from '../../../../types/world/worldTypes';
+import {
+ useSelectedActionSphere,
+ useSelectedPath,
+ useSimulationPaths,
+} from "../../../../store/store";
+import * as THREE from "three";
+import * as Types from "../../../../types/world/worldTypes";
import InputToggle from "../../../ui/inputs/InputToggle";
const ConveyorMechanics: React.FC = () => {
@@ -25,7 +29,9 @@ const ConveyorMechanics: React.FC = () => {
const selectedPoint = useMemo(() => {
if (!selectedActionSphere) return null;
return simulationPaths
- .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
+ .filter(
+ (path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
+ )
.flatMap((path) => path.points)
.find((point) => point.uuid === selectedActionSphere.point.uuid);
}, [selectedActionSphere, simulationPaths]);
@@ -43,11 +49,11 @@ const ConveyorMechanics: React.FC = () => {
const newAction = {
uuid: THREE.MathUtils.generateUUID(),
name: `Action ${actionIndex + 1}`,
- type: 'Inherit',
- material: 'Inherit',
- delay: 'Inherit',
- spawnInterval: 'Inherit',
- isUsed: false
+ type: "Inherit",
+ material: "Inherit",
+ delay: "Inherit",
+ spawnInterval: "Inherit",
+ isUsed: false,
};
return { ...point, actions: [...point.actions, newAction] };
@@ -68,13 +74,18 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.filter(
+ (action) => action.uuid !== uuid
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -87,26 +98,33 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid
- ? {
- ...action,
- type: actionType,
- material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
- delay: actionType === 'Delay' ? 'Inherit' : action.delay,
- spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
- }
- : action
- ),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid
+ ? {
+ ...action,
+ type: actionType,
+ material:
+ actionType === "Spawn" || actionType === "Swap"
+ ? "Inherit"
+ : action.material,
+ delay:
+ actionType === "Delay" ? "Inherit" : action.delay,
+ spawnInterval:
+ actionType === "Spawn"
+ ? "Inherit"
+ : action.spawnInterval,
+ }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -115,15 +133,17 @@ const ConveyorMechanics: React.FC = () => {
// Update the selected item to reflect changes
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
const updatedAction = updatedPaths
- .filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
- .flatMap(path => path.points)
- .find(p => p.uuid === selectedActionSphere.point.uuid)
- ?.actions.find(a => a.uuid === uuid);
+ .filter(
+ (path): path is Types.ConveyorEventsSchema => path.type === "Conveyor"
+ )
+ .flatMap((path) => path.points)
+ .find((p) => p.uuid === selectedActionSphere.point.uuid)
+ ?.actions.find((a) => a.uuid === uuid);
if (updatedAction) {
setSelectedItem({
type: "action",
- item: updatedAction
+ item: updatedAction,
});
}
}
@@ -136,21 +156,21 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid &&
- (action.type === 'Spawn' || action.type === 'Swap')
- ? { ...action, material }
- : action
- ),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid &&
+ (action.type === "Spawn" || action.type === "Swap")
+ ? { ...action, material }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -162,8 +182,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
- material
- }
+ material,
+ },
});
}
};
@@ -174,42 +194,47 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid ? { ...action, delay } : action
- ),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid ? { ...action, delay } : action
+ ),
+ }
+ : point
+ ),
+ }
: path
);
setSimulationPaths(updatedPaths);
};
- const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
+ const handleSpawnIntervalChange = (
+ uuid: string,
+ spawnInterval: number | string
+ ) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) =>
- action.uuid === uuid ? { ...action, spawnInterval } : action
- ),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) =>
+ action.uuid === uuid
+ ? { ...action, spawnInterval }
+ : action
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -233,23 +258,23 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) => {
- if (point.uuid === selectedActionSphere.point.uuid) {
- const triggerIndex = point.triggers.length;
- const newTrigger = {
- uuid: THREE.MathUtils.generateUUID(),
- name: `Trigger ${triggerIndex + 1}`,
- type: '',
- bufferTime: 0,
- isUsed: false
- };
+ ...path,
+ points: path.points.map((point) => {
+ if (point.uuid === selectedActionSphere.point.uuid) {
+ const triggerIndex = point.triggers.length;
+ const newTrigger = {
+ uuid: THREE.MathUtils.generateUUID(),
+ name: `Trigger ${triggerIndex + 1}`,
+ type: "",
+ bufferTime: 0,
+ isUsed: false,
+ };
- return { ...point, triggers: [...point.triggers, newTrigger] };
- }
- return point;
- }),
- }
+ return { ...point, triggers: [...point.triggers, newTrigger] };
+ }
+ return point;
+ }),
+ }
: path
);
@@ -262,13 +287,18 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.filter(
+ (trigger) => trigger.uuid !== uuid
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -281,18 +311,20 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- triggers: point.triggers.map((trigger) =>
- trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
- ),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) =>
+ trigger.uuid === uuid
+ ? { ...trigger, type: triggerType }
+ : trigger
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -309,26 +341,25 @@ const ConveyorMechanics: React.FC = () => {
}
};
-
// Update the toggle handlers to immediately update the selected item
const handleActionToggle = (uuid: string) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- actions: point.actions.map((action) => ({
- ...action,
- isUsed: action.uuid === uuid ? !action.isUsed : false,
- })),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ actions: point.actions.map((action) => ({
+ ...action,
+ isUsed: action.uuid === uuid ? !action.isUsed : false,
+ })),
+ }
+ : point
+ ),
+ }
: path
);
@@ -340,8 +371,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
- isUsed: !selectedItem.item.isUsed
- }
+ isUsed: !selectedItem.item.isUsed,
+ },
});
}
};
@@ -353,19 +384,19 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- triggers: point.triggers.map((trigger) => ({
- ...trigger,
- isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
- })),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) => ({
+ ...trigger,
+ isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
+ })),
+ }
+ : point
+ ),
+ }
: path
);
@@ -377,8 +408,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
- isUsed: !selectedItem.item.isUsed
- }
+ isUsed: !selectedItem.item.isUsed,
+ },
});
}
};
@@ -389,18 +420,20 @@ const ConveyorMechanics: React.FC = () => {
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
- ...path,
- points: path.points.map((point) =>
- point.uuid === selectedActionSphere.point.uuid
- ? {
- ...point,
- triggers: point.triggers.map((trigger) =>
- trigger.uuid === uuid ? { ...trigger, bufferTime } : trigger
- ),
- }
- : point
- ),
- }
+ ...path,
+ points: path.points.map((point) =>
+ point.uuid === selectedActionSphere.point.uuid
+ ? {
+ ...point,
+ triggers: point.triggers.map((trigger) =>
+ trigger.uuid === uuid
+ ? { ...trigger, bufferTime }
+ : trigger
+ ),
+ }
+ : point
+ ),
+ }
: path
);
@@ -412,13 +445,16 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
- bufferTime
- }
+ bufferTime,
+ },
});
}
};
- const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
+ const [selectedItem, setSelectedItem] = useState<{
+ type: "action" | "trigger";
+ item: any;
+ } | null>(null);
useEffect(() => {
setSelectedItem(null);
@@ -426,21 +462,20 @@ const ConveyorMechanics: React.FC = () => {
return (
<div className="machine-mechanics-container">
- {!selectedPath &&
+ {!selectedPath && (
<div className="machine-mechanics-header">
{selectedActionSphere?.path?.modelName || "point name not found"}
</div>
- }
-
- {selectedPath &&
+ )}
+ {selectedPath && (
<div className="machine-mechanics-header">
{selectedPath.path.modelName || "path name not found"}
</div>
- }
+ )}
<div className="machine-mechanics-content-container">
- {!selectedPath &&
+ {!selectedPath && (
<>
<div className="actions">
<div className="header">
@@ -458,16 +493,20 @@ const ConveyorMechanics: React.FC = () => {
{selectedPoint?.actions.map((action) => (
<div
key={action.uuid}
- className={`list-item ${selectedItem?.type === "action" &&
+ className={`list-item ${
+ selectedItem?.type === "action" &&
selectedItem.item?.uuid === action.uuid
- ? "active"
- : ""
- }`}
+ ? "active"
+ : ""
+ }`}
>
<div
className="value"
- onClick={() => setSelectedItem({ type: "action", item: action })}
+ onClick={() =>
+ setSelectedItem({ type: "action", item: action })
+ }
>
+ <input type="radio" name="action" id="action" defaultChecked={action.isUsed}/>
<RenameInput value={action.name} />
</div>
<div
@@ -504,16 +543,20 @@ const ConveyorMechanics: React.FC = () => {
{selectedPoint?.triggers.map((trigger) => (
<div
key={trigger.uuid}
- className={`list-item ${selectedItem?.type === "trigger" &&
+ className={`list-item ${
+ selectedItem?.type === "trigger" &&
selectedItem.item?.uuid === trigger.uuid
- ? "active"
- : ""
- }`}
+ ? "active"
+ : ""
+ }`}
>
<div
className="value"
- onClick={() => setSelectedItem({ type: "trigger", item: trigger })}
+ onClick={() =>
+ setSelectedItem({ type: "trigger", item: trigger })
+ }
>
+ <input type="radio" name="trigger" id="trigger" defaultChecked={trigger.isUsed} />
<RenameInput value={trigger.name} />
</div>
<div
@@ -535,7 +578,7 @@ const ConveyorMechanics: React.FC = () => {
</div>
</div>
</>
- }
+ )}
<div className="selected-properties-container">
{selectedItem && (
@@ -553,48 +596,69 @@ const ConveyorMechanics: React.FC = () => {
<LabledDropdown
defaultOption={selectedItem.item.type}
options={["Inherit", "Spawn", "Swap", "Despawn", "Delay"]}
- onSelect={(option) => handleActionSelect(selectedItem.item.uuid, option)}
+ onSelect={(option) =>
+ handleActionSelect(selectedItem.item.uuid, option)
+ }
/>
{/* Only show material dropdown for Spawn/Swap actions */}
- {(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
+ {(selectedItem.item.type === "Spawn" ||
+ selectedItem.item.type === "Swap") && (
<LabledDropdown
- label={selectedItem.item.type === 'Spawn' ? 'Spawn Material' : 'Swap Material'}
+ label={
+ selectedItem.item.type === "Spawn"
+ ? "Spawn Material"
+ : "Swap Material"
+ }
defaultOption={selectedItem.item.material}
options={["Inherit", "Crate", "Box"]}
- onSelect={(option) => handleMaterialSelect(selectedItem.item.uuid, option)}
+ onSelect={(option) =>
+ handleMaterialSelect(selectedItem.item.uuid, option)
+ }
/>
)}
{/* Only show delay input for Delay actions */}
- {selectedItem.item.type === 'Delay' && (
+ {selectedItem.item.type === "Delay" && (
<InputWithDropDown
label="Delay Time"
- value={selectedItem.item.delay === 'Inherit'
- ? undefined
- : selectedItem.item.delay}
+ value={
+ selectedItem.item.delay === "Inherit"
+ ? undefined
+ : selectedItem.item.delay
+ }
onChange={(value) => {
const numValue = parseInt(value);
handleDelayChange(
selectedItem.item.uuid,
- !value ? 'Inherit' : numValue
+ !value ? "Inherit" : numValue
);
}}
/>
)}
{/* Only show spawn interval for Spawn actions */}
- {selectedItem.item.type === 'Spawn' && (
+ {selectedItem.item.type === "Spawn" && (
<InputWithDropDown
label="Spawn Interval"
min={0}
- defaultValue={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
- value={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
+ defaultValue={
+ selectedItem.item.spawnInterval === "Inherit"
+ ? ""
+ : selectedItem.item.spawnInterval.toString()
+ }
+ value={
+ selectedItem.item.spawnInterval === "Inherit"
+ ? ""
+ : selectedItem.item.spawnInterval.toString()
+ }
onChange={(value) => {
- handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
+ handleSpawnIntervalChange(
+ selectedItem.item.uuid,
+ value === "" ? "Inherit" : parseInt(value)
+ );
}}
/>
-
)}
</>
)}
@@ -609,9 +673,13 @@ const ConveyorMechanics: React.FC = () => {
/>
<LabledDropdown
- defaultOption={selectedItem.item.type || "Select Trigger Type"}
+ defaultOption={
+ selectedItem.item.type || "Select Trigger Type"
+ }
options={["On-Hit", "Buffer"]}
- onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
+ onSelect={(option) =>
+ handleTriggerSelect(selectedItem.item.uuid, option)
+ }
/>
{selectedItem.item.type === "Buffer" && (
@@ -619,23 +687,34 @@ const ConveyorMechanics: React.FC = () => {
label="Buffer Time"
value={selectedItem.item.bufferTime.toString()}
onChange={(value) => {
- handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value));
+ handleTriggerBufferTimeChange(
+ selectedItem.item.uuid,
+ parseInt(value)
+ );
}}
/>
)}
</>
)}
-
</>
)}
{selectedPath && !selectedItem && (
- <div key={selectedPath?.path.modeluuid || "none"} className="speed-control">
+ <div
+ key={selectedPath?.path.modeluuid || "none"}
+ className="speed-control"
+ >
<InputWithDropDown
label="Conveyor Speed"
min={0}
- value={selectedPath.path.speed === "Inherit" ? "" : selectedPath.path.speed.toString()}
- onChange={(value) => handleSpeedChange((value === "") ? "Inherit" : parseInt(value))}
+ value={
+ selectedPath.path.speed === "Inherit"
+ ? ""
+ : selectedPath.path.speed.toString()
+ }
+ onChange={(value) =>
+ handleSpeedChange(value === "" ? "Inherit" : parseInt(value))
+ }
/>
</div>
)}
@@ -657,4 +736,4 @@ const ConveyorMechanics: React.FC = () => {
);
};
-export default ConveyorMechanics;
\ No newline at end of file
+export default ConveyorMechanics;
diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx
index b4ab78e..a416c2c 100644
--- a/app/src/components/ui/menu/menu.tsx
+++ b/app/src/components/ui/menu/menu.tsx
@@ -1,5 +1,6 @@
import React, { useState } from "react";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import { toggleTheme } from "../../../utils/theme";
interface MenuBarProps {
setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
@@ -22,6 +23,13 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
}));
};
+ function handleThemeChange(){
+ toggleTheme();
+ window.location.reload();
+ }
+
+ const savedTheme: string | null = localStorage.getItem("theme") || "light";
+
return (
<div
className="menu-bar"
@@ -381,6 +389,22 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
<div className="menu-button">Export as...</div>
</div>
+ <div
+ className="menu-button-container"
+ onMouseEnter={() => setActiveMenu("theme")}
+ onMouseLeave={() => {
+ setActiveMenu(null);
+ setActiveSubMenu(null);
+ }}
+ onClick={() => {
+ handleThemeChange();
+ }}
+ >
+ <div className="menu-button">
+ Theme <div className="value">{savedTheme}</div>
+ </div>
+ </div>
+
{/* Apps Menu */}
{/* <div
className="menu-button-container"
diff --git a/app/src/modules/builder/geomentries/lines/distanceText.tsx b/app/src/modules/builder/geomentries/lines/distanceText.tsx
index 0519c84..98e20a6 100644
--- a/app/src/modules/builder/geomentries/lines/distanceText.tsx
+++ b/app/src/modules/builder/geomentries/lines/distanceText.tsx
@@ -1,90 +1,143 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
import { getLines } from "../../../../services/factoryBuilder/lines/getLinesApi";
import * as THREE from "three";
-import { useActiveLayer, useDeletedLines, useNewLines, useToggleView } from "../../../../store/store";
+import {
+ useActiveLayer,
+ useDeletedLines,
+ useNewLines,
+ useToggleView,
+} from "../../../../store/store";
import objectLinesToArray from "./lineConvertions/objectLinesToArray";
import { Html } from "@react-three/drei";
import * as Types from "../../../../types/world/worldTypes";
const DistanceText = () => {
- const [lines, setLines] = useState<{ distance: string; position: THREE.Vector3; userData: Types.Line; layer: string }[]>([]);
- const { activeLayer } = useActiveLayer();
- const { toggleView } = useToggleView();
- const { newLines, setNewLines } = useNewLines();
- const { deletedLines, setDeletedLines } = useDeletedLines();
+ const [lines, setLines] = useState<
+ {
+ distance: string;
+ position: THREE.Vector3;
+ userData: Types.Line;
+ layer: string;
+ }[]
+ >([]);
+ const { activeLayer } = useActiveLayer();
+ const { toggleView } = useToggleView();
+ const { newLines, setNewLines } = useNewLines();
+ const { deletedLines, setDeletedLines } = useDeletedLines();
- useEffect(() => {
- const email = localStorage.getItem('email')
- if (!email) return;
- const organization = (email.split("@")[1]).split(".")[0];
+ useEffect(() => {
+ const email = localStorage.getItem("email");
+ if (!email) return;
+ const organization = email.split("@")[1].split(".")[0];
- getLines(organization).then((data) => {
- data = objectLinesToArray(data);
+ getLines(organization).then((data) => {
+ data = objectLinesToArray(data);
- const lines = data.filter((line: Types.Line) => line[0][2] === activeLayer)
- .map((line: Types.Line) => {
- const point1 = new THREE.Vector3(line[0][0].x, line[0][0].y, line[0][0].z);
- const point2 = new THREE.Vector3(line[1][0].x, line[1][0].y, line[1][0].z);
- const distance = point1.distanceTo(point2);
- const midpoint = new THREE.Vector3().addVectors(point1, point2).divideScalar(2);
- return {
- distance: distance.toFixed(1),
- position: midpoint,
- userData: line,
- layer: activeLayer,
- };
- });
- setLines(lines)
- })
- }, [activeLayer])
+ const lines = data
+ .filter((line: Types.Line) => line[0][2] === activeLayer)
+ .map((line: Types.Line) => {
+ const point1 = new THREE.Vector3(
+ line[0][0].x,
+ line[0][0].y,
+ line[0][0].z
+ );
+ const point2 = new THREE.Vector3(
+ line[1][0].x,
+ line[1][0].y,
+ line[1][0].z
+ );
+ const distance = point1.distanceTo(point2);
+ const midpoint = new THREE.Vector3()
+ .addVectors(point1, point2)
+ .divideScalar(2);
+ return {
+ distance: distance.toFixed(1),
+ position: midpoint,
+ userData: line,
+ layer: activeLayer,
+ };
+ });
+ setLines(lines);
+ });
+ }, [activeLayer]);
- useEffect(() => {
- if (newLines.length > 0) {
- if (newLines[0][0][2] !== activeLayer) return;
- const newLinesData = newLines.map((line: Types.Line) => {
- const point1 = new THREE.Vector3(line[0][0].x, line[0][0].y, line[0][0].z);
- const point2 = new THREE.Vector3(line[1][0].x, line[1][0].y, line[1][0].z);
- const distance = point1.distanceTo(point2);
- const midpoint = new THREE.Vector3().addVectors(point1, point2).divideScalar(2);
+ useEffect(() => {
+ if (newLines.length > 0) {
+ if (newLines[0][0][2] !== activeLayer) return;
+ const newLinesData = newLines.map((line: Types.Line) => {
+ const point1 = new THREE.Vector3(
+ line[0][0].x,
+ line[0][0].y,
+ line[0][0].z
+ );
+ const point2 = new THREE.Vector3(
+ line[1][0].x,
+ line[1][0].y,
+ line[1][0].z
+ );
+ const distance = point1.distanceTo(point2);
+ const midpoint = new THREE.Vector3()
+ .addVectors(point1, point2)
+ .divideScalar(2);
- return {
- distance: distance.toFixed(1),
- position: midpoint,
- userData: line,
- layer: activeLayer,
- };
- });
- setLines((prevLines) => [...prevLines, ...newLinesData]);
- setNewLines([]);
- }
- }, [newLines, activeLayer]);
+ return {
+ distance: distance.toFixed(1),
+ position: midpoint,
+ userData: line,
+ layer: activeLayer,
+ };
+ });
+ setLines((prevLines) => [...prevLines, ...newLinesData]);
+ setNewLines([]);
+ }
+ }, [newLines, activeLayer]);
+ useEffect(() => {
+ if ((deletedLines as Types.Lines).length > 0) {
+ setLines((prevLines) =>
+ prevLines.filter(
+ (line) =>
+ !deletedLines.some(
+ (deletedLine: any) =>
+ deletedLine[0][1] === line.userData[0][1] &&
+ deletedLine[1][1] === line.userData[1][1]
+ )
+ )
+ );
+ setDeletedLines([]);
+ }
+ }, [deletedLines]);
- useEffect(() => {
- if ((deletedLines as Types.Lines).length > 0) {
- setLines((prevLines) =>
- prevLines.filter(
- (line) => !deletedLines.some((deletedLine: any) => deletedLine[0][1] === line.userData[0][1] && deletedLine[1][1] === line.userData[1][1])
- )
- );
- setDeletedLines([]);
- }
- }, [deletedLines]);
+ return (
+ <>
+ {toggleView && (
+ <group name="Distance_Text">
+ {lines.map((text) => (
+ <Html
+ // data
+ key={`${text.userData[0][1]}_${text.userData[1][1]}`}
+ userData={text.userData}
+ position={[text.position.x, 1, text.position.z]}
+ // class
+ wrapperClass="distance-text-wrapper"
+ className="distance-text"
+ // other
+ zIndexRange={[100, 0]}
+ prepend
+ sprite
+ >
+ <div
+ key={`${text.userData[0][1]}_${text.userData[1][1]}`}
+ className={`distance line-${text.userData[0][1]}_${text.userData[1][1]}_${text.layer}`}
+ >
+ {text.distance} m
+ </div>
+ </Html>
+ ))}
+ </group>
+ )}
+ </>
+ );
+};
- return (
- <>
- {toggleView && (
- <group name='Distance_Text'>
- {lines.map((text) => (
- <Html key={`${text.userData[0][1]}_${text.userData[1][1]}`} transform sprite userData={text.userData} scale={5} position={[text.position.x, 1, text.position.z]} style={{ pointerEvents: 'none' }} >
- <div key={`${text.userData[0][1]}_${text.userData[1][1]}`} className={`Distance line-${text.userData[0][1]}_${text.userData[1][1]}_${text.layer}`} >{text.distance} m</div>
- </Html>
- ))}
- </group>
- )}
- </>
- )
-
-}
-
-export default DistanceText;
\ No newline at end of file
+export default DistanceText;
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index 3d47a7e..c5e54d3 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -434,9 +434,9 @@ const ZoneGroup: React.FC = () => {
const point2 = new THREE.Vector3(nextPoint[0], nextPoint[1], nextPoint[2]);
const planeWidth = point1.distanceTo(point2);
- const planeHeight = CONSTANTS.wallConfig.height;
+ const planeHeight = CONSTANTS.zoneConfig.height;
- const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.wallConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.wallConfig.height), (point1.z + point2.z) / 2);
+ const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.zoneConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.zoneConfig.height), (point1.z + point2.z) / 2);
const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x);
diff --git a/app/src/modules/scene/environment/ground.tsx b/app/src/modules/scene/environment/ground.tsx
index 6a54577..ebc017e 100644
--- a/app/src/modules/scene/environment/ground.tsx
+++ b/app/src/modules/scene/environment/ground.tsx
@@ -1,9 +1,9 @@
-import * as THREE from 'three';
import { useToggleView } from '../../../store/store';
import * as CONSTANTS from '../../../types/world/worldConstants';
const Ground = ({ grid, plane }: any) => {
- const { toggleView, setToggleView } = useToggleView();
+ const { toggleView } = useToggleView();
+ const savedTheme: string | null = localStorage.getItem('theme');
return (
@@ -19,4 +19,4 @@ const Ground = ({ grid, plane }: any) => {
)
}
-export default Ground;
\ No newline at end of file
+export default Ground;
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index 74693b4..0a01a99 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -1,11 +1,11 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { Environment, KeyboardControls } from "@react-three/drei";
import World from "./world/world";
import Controls from "./controls/controls";
import TransformControl from "./controls/transformControls";
-import PostProcessing from "./postProcessing/postProcessing"
+import PostProcessing from "./postProcessing/postProcessing";
import Sun from "./environment/sky";
import CamModelsGroup from "../collaboration/collabCams";
import Shadows from "./environment/shadow";
@@ -15,33 +15,31 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
import SelectionControls from "./controls/selection/selectionControls";
import MeasurementTool from "./tools/measurementTool";
import Simulation from "../simulation/simulation";
-import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets";
// import Simulation from "./simulationtemp/simulation";
import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
-import ProductionCapacity from "../../components/layout/3D-cards/cards/ProductionCapacity";
import Dropped3dWidgets from "../../components/ui/componets/Dropped3dWidget";
-import { useWidgetSubOption } from "../../store/store";
export default function Scene() {
-
- const map = useMemo(() => [
- { name: "forward", keys: ["ArrowUp", "w", "W"] },
- { name: "backward", keys: ["ArrowDown", "s", "S"] },
- { name: "left", keys: ["ArrowLeft", "a", "A"] },
- { name: "right", keys: ["ArrowRight", "d", "D"] },
- ], [])
+ const map = useMemo(
+ () => [
+ { name: "forward", keys: ["ArrowUp", "w", "W"] },
+ { name: "backward", keys: ["ArrowDown", "s", "S"] },
+ { name: "left", keys: ["ArrowLeft", "a", "A"] },
+ { name: "right", keys: ["ArrowRight", "d", "D"] },
+ ],
+ []
+ );
+ const savedTheme: string | null = localStorage.getItem("theme");
return (
<KeyboardControls map={map}>
<Canvas
- // style={{ width: "100vw", height: "100vh" }}
eventPrefix="client"
gl={{ powerPreference: "high-performance", antialias: true }}
onContextMenu={(e) => {
e.preventDefault();
}}
-
>
<Dropped3dWidgets />
<Controls />
@@ -52,7 +50,7 @@ export default function Scene() {
<ZoneCentreTarget />
<Simulation />
<PostProcessing />
- <Sun />
+ {savedTheme !== "dark" && <Sun />}
<Shadows />
<CamModelsGroup />
<MqttEvents />
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss
index 4d201ad..44e5627 100644
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -27,7 +27,7 @@ $input-text-color-dark: #b5b5c8; // Input field text color for dark mode
// Accent colors
$accent-color: #6f42c1; // Primary accent color
-$accent-color-dark: #b392f0; // Primary accent color for dark mode
+$accent-color-dark: #c4abf1; // Primary accent color for dark mode
$highlight-accent-color: #e0dfff; // Highlighted accent for light mode
$highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
@@ -45,6 +45,7 @@ $border-color-dark: #403e6a; // Border color for dark mode
// Shadow color
$shadow-color: #3c3c431a; // Shadow base color for light and dark mode
+$shadow-color-dark: #8f8f8f1a; // Shadow base color for light and dark mode
// Gradients
$acent-gradient-dark: linear-gradient(
diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss
index 86495f5..6adc1c5 100644
--- a/app/src/styles/base/base.scss
+++ b/app/src/styles/base/base.scss
@@ -58,7 +58,7 @@
--border-color: #{$border-color-dark}; // Border color for dark theme
// Shadow variables
- --shadow-main-dark: #{$shadow-color}; // Main shadow color
+ --shadow-main-dark: #{$shadow-color-dark}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss
index e5dd2b4..9f6ee48 100644
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@@ -1,6 +1,22 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
+// global input style
+
+input {
+ width: 100%;
+ padding: 2px 4px;
+ border-radius: #{$border-radius-small};
+ border: 1px solid var(--border-color);
+ outline: none;
+ background: transparent;
+
+ &:focus,
+ &:active {
+ border: 1px solid var(--accent-color);
+ }
+}
+
.input-value {
color: var(--input-text-color);
font-size: var(--font-size-regular);
@@ -169,7 +185,6 @@
display: flex;
justify-content: space-between;
cursor: pointer;
- border: 1px solid var(--primary-color);
border-radius: 6px;
background-color: var(--background-color);
}
@@ -214,8 +229,8 @@
position: relative;
.dropdown {
- top: 3px;
- right: 3px;
+ top: 2px;
+ right: 2px;
position: absolute;
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
@@ -228,19 +243,6 @@
}
}
-input {
- width: 100%;
- padding: 2px 4px;
- border-radius: #{$border-radius-small};
- border: 1px solid var(--border-color);
- outline: none;
-
- &:focus,
- &:active {
- border: 1px solid var(--accent-color);
- }
-}
-
.eye-dropper-input-container {
display: flex;
align-items: center;
@@ -607,6 +609,7 @@ input {
input {
border: none;
+ background: transparent;
&::placeholder {
color: var(--text-disabled);
diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss
index 8635b0d..55b16f9 100644
--- a/app/src/styles/components/menu/menu.scss
+++ b/app/src/styles/components/menu/menu.scss
@@ -96,7 +96,10 @@
}
&:hover {
background-color: var(--highlight-accent-color);
- color: var(--highlight-accent-color);
+ span,
+ .menu-item-right span {
+ color: var(--accent-color);
+ }
}
.menu-item-right {
@@ -138,7 +141,9 @@
color: var(--text-color);
&:hover {
background-color: var(--highlight-accent-color);
- color: var(--highlight-accent-color);
+ span {
+ color: var(--accent-color);
+ }
}
.shortcut {
color: var(--text-color);
@@ -150,7 +155,9 @@
&:hover {
background-color: var(--highlight-accent-color);
- color: var(--highlight-accent-color);
+ .menu-button {
+ color: var(--accent-color);
+ }
}
}
}
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 1e2de3c..e45dc20 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -253,6 +253,10 @@
.user-profile-container {
display: flex;
+ .user-profile{
+ background: var(--accent-color);
+ color: var(--primary-color);
+ }
.user-organization {
height: 26px;
@@ -665,6 +669,10 @@
font-weight: var(--font-weight-regular);
padding: 8px 0;
}
+ .input-toggle-container{
+ padding: 0;
+ margin-bottom: 6px;
+ }
.value-field-container {
margin-bottom: 6px;
diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
index 9d4bde4..7ceb752 100644
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -32,7 +32,10 @@
@use 'layout/toast';
// pages
-@use 'pages/dashboard.scss';
+@use 'pages/dashboard';
@use 'pages/home';
@use 'pages/realTimeViz';
-@use 'pages/userAuth';
\ No newline at end of file
+@use 'pages/userAuth';
+
+//
+@use './scene/scene'
\ No newline at end of file
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 69df460..aa9e1aa 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -22,7 +22,7 @@
min-height: 83px;
background: var(--background-color);
border: 1.23px solid var(--border-color);
- box-shadow: 0px 4.91px 4.91px 0px #0000001c;
+ box-shadow: var(--box-shadow-heavy);
border-radius: $border-radius-medium;
padding: 18px;
position: absolute;
@@ -31,6 +31,7 @@
.scene-container {
overflow: hidden;
+ background: #232323;
}
.icon {
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
new file mode 100644
index 0000000..9de35db
--- /dev/null
+++ b/app/src/styles/scene/scene.scss
@@ -0,0 +1,23 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.distance-text-wrapper {
+ pointer-events: none !important;
+}
+.distance-text {
+ pointer-events: none !important;
+ .distance {
+ position: absolute;
+ transform: translate(-50%, -50%) scale(.8);
+ pointer-events: none !important;
+ white-space: nowrap;
+ // style
+ font-size: var(--font-size-large);
+ padding: 2px 8px;
+ background: var(--primary-color);
+ color: var(--accent-color);
+ outline: 1px solid var(--accent-color);
+ border-radius: #{$border-radius-medium};
+ box-shadow: var(--box-shadow-light);
+ }
+}
diff --git a/app/src/types/world/worldConstants.ts b/app/src/types/world/worldConstants.ts
index b14e799..0a62e9d 100644
--- a/app/src/types/world/worldConstants.ts
+++ b/app/src/types/world/worldConstants.ts
@@ -1,3 +1,5 @@
+const savedTheme: string | null = localStorage.getItem("theme");
+
export type Controls = {
azimuthRotateSpeed: number;
polarRotateSpeed: number;
@@ -62,7 +64,6 @@ export type GridConfig = {
divisions: number;
primaryColor: string;
secondaryColor: string;
-
position2D: [x: number, y: number, z: number];
position3D: [x: number, y: number, z: number];
}
@@ -71,7 +72,6 @@ export type PlaneConfig = {
position2D: [x: number, y: number, z: number];
position3D: [x: number, y: number, z: number];
rotation: number;
-
width: number;
height: number;
color: string;
@@ -79,7 +79,6 @@ export type PlaneConfig = {
export type ShadowConfig = {
shadowOffset: number,
-
shadowmapSizewidth: number,
shadowmapSizeheight: number,
shadowcamerafar: number,
@@ -90,10 +89,8 @@ export type ShadowConfig = {
shadowcameraright: number,
shadowbias: number,
shadownormalBias: number,
-
shadowMaterialPosition: [x: number, y: number, z: number],
shadowMaterialRotation: [x: number, y: number, z: number],
-
shadowMaterialOpacity: number,
}
@@ -117,12 +114,10 @@ export type PointConfig = {
defaultOuterColor: string;
deleteColor: string;
boxScale: [number, number, number];
-
wallOuterColor: string;
floorOuterColor: string;
aisleOuterColor: string;
zoneOuterColor: string;
-
snappingThreshold: number;
}
@@ -130,17 +125,13 @@ export type LineConfig = {
tubularSegments: number;
radius: number;
radialSegments: number;
-
wallName: string;
floorName: string;
aisleName: string;
zoneName: string;
referenceName: string;
-
lineIntersectionPoints: number;
-
defaultColor: string;
-
wallColor: string;
floorColor: string;
aisleColor: string;
@@ -157,7 +148,6 @@ export type WallConfig = {
export type FloorConfig = {
defaultColor: string;
height: number;
-
textureScale: number;
}
@@ -169,13 +159,12 @@ export type RoofConfig = {
export type AisleConfig = {
width: number;
height: number;
-
defaultColor: number;
}
export type ZoneConfig = {
defaultColor: string;
-
+ height: number;
color: string;
}
@@ -256,8 +245,8 @@ export const camPositionUpdateInterval: number = 200; // Interval for updating t
export const gridConfig: GridConfig = {
size: 300, // Size of the grid
divisions: 75, // Number of divisions in the grid
- primaryColor: "#d5d5d5", // Primary color of the grid
- secondaryColor: "#e3e3e3", // Secondary color of the grid
+ primaryColor: savedTheme === "dark" ? "#131313" : "#d5d5d5", // Primary color of the grid
+ secondaryColor: savedTheme === "dark" ? "#434343" : "#e3e3e3", // Secondary color of the grid
position2D: [0, 0.1, 0], // Position of the grid in 2D view
position3D: [0, -0.5, 0], // Position of the grid in 3D view
@@ -270,7 +259,7 @@ export const planeConfig: PlaneConfig = {
width: 300, // Width of the plane
height: 300, // Height of the plane
- color: "#f3f3f3" // Color of the plane
+ color: savedTheme === "dark" ? "#323232" : "#f3f3f3" // Color of the plane
}
export const shadowConfig: ShadowConfig = {
@@ -371,7 +360,8 @@ export const aisleConfig: AisleConfig = {
export const zoneConfig: ZoneConfig = {
defaultColor: "black", // Default color of the zones
- color: "blue" // Color of the zones
+ height: 3,
+ color: "#8656DF" // Color of the zones
}
export const columnConfig: ColumnConfig = {
diff --git a/app/src/utils/theme.ts b/app/src/utils/theme.ts
index 28f2488..03d2454 100644
--- a/app/src/utils/theme.ts
+++ b/app/src/utils/theme.ts
@@ -1,34 +1,31 @@
-export {};
+export { };
+
// Function to set the theme based on user preference or system default
function setTheme() {
- // Check for saved theme in localStorage
const savedTheme: string | null = localStorage.getItem('theme');
-
- // If no saved theme, use system default preference
const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light');
-
- // Set the theme on page load
document.documentElement.setAttribute('data-theme', defaultTheme);
+ localStorage.setItem('theme', defaultTheme);
}
-// Call the function to set the theme
+// Function to toggle the theme
+export function toggleTheme() {
+ const currentTheme: string | null = document.documentElement.getAttribute('data-theme');
+ const newTheme: string = currentTheme === 'dark' ? 'light' : 'dark';
+
+ document.documentElement.setAttribute('data-theme', newTheme);
+ localStorage.setItem('theme', newTheme);
+}
+
+// Initialize theme on page load
setTheme();
-// Check if the toggle button exists
-const toggleSwitch: Element | null = document.querySelector('.theme-switch');
+// Example: Call toggleTheme() when a button is clicked
+const toggleSwitch: Element | null = document.querySelector('#theme-switch');
if (toggleSwitch) {
- toggleSwitch.addEventListener('click', () => {
- const currentTheme: string | null = document.documentElement.getAttribute('data-theme');
-
- // Toggle between dark and light themes
- const newTheme: string = currentTheme === 'dark' ? 'light' : 'dark';
- document.documentElement.setAttribute('data-theme', newTheme);
-
- // Save the new preference in localStorage
- localStorage.setItem('theme', newTheme);
- });
+ toggleSwitch.addEventListener('click', toggleTheme);
} else {
console.warn("Theme switch button not found!");
}