Refactor styles for improved theme management, enhance input components, and add scene styles
This commit is contained in:
parent
8fc4453cee
commit
b125989ae7
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
export default ConveyorMechanics;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
export default DistanceText;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
export default Ground;
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 'pages/userAuth';
|
||||
|
||||
//
|
||||
@use './scene/scene'
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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!");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue