Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor styles for improved theme management, enhance input components, and add scene styles

This commit is contained in:
Vishnu 2025-03-31 18:06:44 +05:30
parent 8fc4453cee
commit b125989ae7
18 changed files with 556 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/public/index.html
View File

@ -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>

11
app/src/components/layout/sidebarRight/Header.tsx
View File

@ -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>

213
app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
View File

@ -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] };
@ -71,7 +77,12 @@ const ConveyorMechanics: React.FC = () => {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
? {
...point,
actions: point.actions.filter(
(action) => action.uuid !== uuid
),
}
: point
),
}
@ -97,9 +108,16 @@ const ConveyorMechanics: React.FC = () => {
? {
...action,
type: actionType,
material: actionType === 'Spawn' || actionType === 'Swap' ? 'Inherit' : action.material,
delay: actionType === 'Delay' ? 'Inherit' : action.delay,
spawnInterval: actionType === 'Spawn' ? 'Inherit' : action.spawnInterval
material:
actionType === "Spawn" || actionType === "Swap"
? "Inherit"
: action.material,
delay:
actionType === "Delay" ? "Inherit" : action.delay,
spawnInterval:
actionType === "Spawn"
? "Inherit"
: action.spawnInterval,
}
: action
),
@ -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,
});
}
}
@ -143,7 +163,7 @@ const ConveyorMechanics: React.FC = () => {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid &&
(action.type === 'Spawn' || action.type === 'Swap')
(action.type === "Spawn" || action.type === "Swap")
? { ...action, material }
: action
),
@ -162,8 +182,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
material
}
material,
},
});
}
};
@ -192,7 +212,10 @@ const ConveyorMechanics: React.FC = () => {
setSimulationPaths(updatedPaths);
};
const handleSpawnIntervalChange = (uuid: string, spawnInterval: number | string) => {
const handleSpawnIntervalChange = (
uuid: string,
spawnInterval: number | string
) => {
if (!selectedActionSphere) return;
const updatedPaths = simulationPaths.map((path) =>
@ -204,7 +227,9 @@ const ConveyorMechanics: React.FC = () => {
? {
...point,
actions: point.actions.map((action) =>
action.uuid === uuid ? { ...action, spawnInterval } : action
action.uuid === uuid
? { ...action, spawnInterval }
: action
),
}
: point
@ -240,9 +265,9 @@ const ConveyorMechanics: React.FC = () => {
const newTrigger = {
uuid: THREE.MathUtils.generateUUID(),
name: `Trigger ${triggerIndex + 1}`,
type: '',
type: "",
bufferTime: 0,
isUsed: false
isUsed: false,
};
return { ...point, triggers: [...point.triggers, newTrigger] };
@ -265,7 +290,12 @@ const ConveyorMechanics: React.FC = () => {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? { ...point, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
? {
...point,
triggers: point.triggers.filter(
(trigger) => trigger.uuid !== uuid
),
}
: point
),
}
@ -287,7 +317,9 @@ const ConveyorMechanics: React.FC = () => {
? {
...point,
triggers: point.triggers.map((trigger) =>
trigger.uuid === uuid ? { ...trigger, type: triggerType } : trigger
trigger.uuid === uuid
? { ...trigger, type: triggerType }
: trigger
),
}
: point
@ -309,7 +341,6 @@ const ConveyorMechanics: React.FC = () => {
}
};
// Update the toggle handlers to immediately update the selected item
const handleActionToggle = (uuid: string) => {
if (!selectedActionSphere) return;
@ -340,8 +371,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
isUsed: !selectedItem.item.isUsed
}
isUsed: !selectedItem.item.isUsed,
},
});
}
};
@ -377,8 +408,8 @@ const ConveyorMechanics: React.FC = () => {
...selectedItem,
item: {
...selectedItem.item,
isUsed: !selectedItem.item.isUsed
}
isUsed: !selectedItem.item.isUsed,
},
});
}
};
@ -395,7 +426,9 @@ const ConveyorMechanics: React.FC = () => {
? {
...point,
triggers: point.triggers.map((trigger) =>
trigger.uuid === uuid ? { ...trigger, bufferTime } : trigger
trigger.uuid === uuid
? { ...trigger, bufferTime }
: trigger
),
}
: point
@ -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,7 +493,8 @@ 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"
: ""
@ -466,8 +502,11 @@ const ConveyorMechanics: React.FC = () => {
>
<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,7 +543,8 @@ 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"
: ""
@ -512,8 +552,11 @@ const ConveyorMechanics: React.FC = () => {
>
<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'
value={
selectedItem.item.delay === "Inherit"
? undefined
: selectedItem.item.delay}
: 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>
)}

24
app/src/components/ui/menu/menu.tsx
View File

@ -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"

99
app/src/modules/builder/geomentries/lines/distanceText.tsx
View File

@ -1,32 +1,55 @@
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 [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')
const email = localStorage.getItem("email");
if (!email) return;
const organization = (email.split("@")[1]).split(".")[0];
const organization = email.split("@")[1].split(".")[0];
getLines(organization).then((data) => {
data = objectLinesToArray(data);
const lines = data.filter((line: Types.Line) => line[0][2] === 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 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);
const midpoint = new THREE.Vector3()
.addVectors(point1, point2)
.divideScalar(2);
return {
distance: distance.toFixed(1),
position: midpoint,
@ -34,18 +57,28 @@ const DistanceText = () => {
layer: activeLayer,
};
});
setLines(lines)
})
}, [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 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);
const midpoint = new THREE.Vector3()
.addVectors(point1, point2)
.divideScalar(2);
return {
distance: distance.toFixed(1),
@ -59,12 +92,16 @@ const DistanceText = () => {
}
}, [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])
(line) =>
!deletedLines.some(
(deletedLine: any) =>
deletedLine[0][1] === line.userData[0][1] &&
deletedLine[1][1] === line.userData[1][1]
)
)
);
setDeletedLines([]);
@ -74,17 +111,33 @@ const DistanceText = () => {
return (
<>
{toggleView && (
<group name='Distance_Text'>
<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
// 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>
)}
</>
)
}
);
};
export default DistanceText;

4
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -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);

4
app/src/modules/scene/environment/ground.tsx
View File

@ -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 (

20
app/src/modules/scene/scene.tsx
View File

@ -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(() => [
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 />

3
app/src/styles/abstracts/variables.scss
View File

@ -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(

2
app/src/styles/base/base.scss
View File

@ -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

35
app/src/styles/components/input.scss
View File

@ -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);

13
app/src/styles/components/menu/menu.scss
View File

@ -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);
}
}
}
}

8
app/src/styles/layout/sidebar.scss
View File

@ -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;

5
app/src/styles/main.scss
View File

@ -32,7 +32,10 @@
@use 'layout/toast';
// pages
@use 'pages/dashboard.scss';
@use 'pages/dashboard';
@use 'pages/home';
@use 'pages/realTimeViz';
@use 'pages/userAuth';
//
@use './scene/scene'

3
app/src/styles/pages/realTimeViz.scss
View File

@ -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 {

23
app/src/styles/scene/scene.scss Normal file
View File

@ -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);
}
}

26
app/src/types/world/worldConstants.ts
View File

@ -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 = {

33
app/src/utils/theme.ts
View File

@ -1,34 +1,31 @@
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!");
}