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

Merge remote-tracking branch 'origin/simulation' into simulation-agv

This commit is contained in:
Poovizhi99 2025-03-29 14:33:12 +05:30
parent 3831fd6bf1 d4d4b145c7
commit 661fec1908
17 changed files with 284 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/layout/sidebarLeft/Header.tsx
View File

@ -22,8 +22,10 @@ const Header: React.FC = () => {
<div
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
onClick={() => {
if (activeModule !== "market") setToggleUI(!toggleUI);
localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
if (activeModule !== "market") {
setToggleUI(!toggleUI);
localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
}
}}
>
<ToggleSidebarIcon />

2
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@ -109,7 +109,7 @@ const SideBarRight: React.FC = () => {
{subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Vehicle" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
{/* <VehicleMechanics /> */}
<VehicleMechanics />
</div>
</div>
)}

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

@ -8,9 +8,7 @@ import {
import RenameInput from "../../../ui/inputs/RenameInput";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
import { handleResize } from "../../../../functions/handleResizePannel";
import EyeDropInput from "../../../ui/inputs/EyeDropInput";
import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
import * as THREE from 'three';
import * as Types from '../../../../types/world/worldTypes';
@ -218,7 +216,7 @@ const ConveyorMechanics: React.FC = () => {
setSimulationPaths(updatedPaths);
};
const handleSpeedChange = (speed: number) => {
const handleSpeedChange = (speed: number | string) => {
if (!selectedPath) return;
const updatedPaths = simulationPaths.map((path) =>
@ -243,6 +241,7 @@ const ConveyorMechanics: React.FC = () => {
uuid: THREE.MathUtils.generateUUID(),
name: `Trigger ${triggerIndex + 1}`,
type: '',
bufferTime: 0,
isUsed: false
};
@ -298,8 +297,19 @@ const ConveyorMechanics: React.FC = () => {
);
setSimulationPaths(updatedPaths);
// Ensure the selectedItem is updated immediately
const updatedTrigger = updatedPaths
.flatMap((path) => (path.type === "Conveyor" ? path.points : []))
.flatMap((point) => point.triggers)
.find((trigger) => trigger.uuid === uuid);
if (updatedTrigger) {
setSelectedItem({ type: "trigger", item: updatedTrigger });
}
};
// Update the toggle handlers to immediately update the selected item
const handleActionToggle = (uuid: string) => {
if (!selectedActionSphere) return;
@ -373,17 +383,61 @@ const ConveyorMechanics: React.FC = () => {
}
};
const handleTriggerBufferTimeChange = (uuid: string, bufferTime: number) => {
if (!selectedActionSphere) return;
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
);
setSimulationPaths(updatedPaths);
// Immediately update selectedItem if it's the currently selected trigger
if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
setSelectedItem({
...selectedItem,
item: {
...selectedItem.item,
bufferTime
}
});
}
};
const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
useEffect(() => {
setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
setSelectedItem(null);
}, [selectedActionSphere]);
return (
<div className="machine-mechanics-container">
<div className="machine-mechanics-header">
{selectedActionSphere?.path?.modelName || "point name not found"}
</div>
{!selectedPath &&
<div className="machine-mechanics-header">
{selectedActionSphere?.path?.modelName || "point name not found"}
</div>
}
{selectedPath &&
<div className="machine-mechanics-header">
{selectedPath.path.modelName || "path name not found"}
</div>
}
<div className="machine-mechanics-content-container">
{!selectedPath &&
@ -559,25 +613,45 @@ const ConveyorMechanics: React.FC = () => {
options={["On-Hit", "Buffer"]}
onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
/>
{selectedItem.item.type === "Buffer" && (
<InputWithDropDown
label="Buffer Time"
value={selectedItem.item.bufferTime.toString()}
onChange={(value) => {
handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value));
}}
/>
)}
</>
)}
</>
)}
{selectedPath && !selectedItem && (
<div className="speed-control">
<div key={selectedPath?.path.modeluuid || "none"} className="speed-control">
<InputWithDropDown
label="Conveyor Speed"
value={selectedPath.path.speed.toString()}
onChange={(value) => handleSpeedChange(parseFloat(value))}
min={0}
value={selectedPath.path.speed === "Inherit" ? "" : selectedPath.path.speed.toString()}
onChange={(value) => handleSpeedChange((value === "") ? "Inherit" : parseInt(value))}
/>
</div>
)}
</div>
<div className="footer">
<InfoIcon />
By selecting points, you can create events and triggers.
</div>
{!selectedPath && (
<div className="footer">
<InfoIcon />
Configure the point's action and trigger properties.
</div>
)}
{selectedPath && (
<div className="footer">
<InfoIcon />
Configure the path properties.
</div>
)}
</div>
</div>
);

602
app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
View File

@ -1,561 +1,143 @@
import React, { useRef, useState, useMemo, useEffect } from "react";
import {
AddIcon,
InfoIcon,
RemoveIcon,
ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import React, { useRef, useMemo } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import RegularDropDown from "../../../ui/inputs/RegularDropDown";
import { handleResize } from "../../../../functions/handleResizePannel";
import EyeDropInput from "../../../ui/inputs/EyeDropInput";
import { useSelectedActionSphere, useSelectedPath, useSimulationPaths } from "../../../../store/store";
import * as THREE from 'three';
import { useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes';
import InputToggle from "../../../ui/inputs/InputToggle";
const VehicleMechanics: React.FC = () => {
const { selectedActionSphere } = useSelectedActionSphere();
const { selectedPath, setSelectedPath } = useSelectedPath();
const { simulationPaths, setSimulationPaths } = useSimulationPaths();
const actionsContainerRef = useRef<HTMLDivElement>(null);
const triggersContainerRef = useRef<HTMLDivElement>(null);
const propertiesContainerRef = useRef<HTMLDivElement>(null);
const selectedPoint = useMemo(() => {
if (!selectedActionSphere) return null;
return simulationPaths
.filter((path): path is Types.ConveyorEventsSchema => path.type === "Conveyor")
.flatMap((path) => path.points)
.find((point) => point.uuid === selectedActionSphere.point.uuid);
}, [selectedActionSphere, simulationPaths]);
if (!selectedActionSphere?.point?.uuid) return null;
const handleAddAction = () => {
if (!selectedActionSphere) return;
const vehiclePaths = simulationPaths.filter(
(path): path is Types.VehicleEventsSchema => path.type === "Vehicle"
);
return vehiclePaths.find(
(path) => path.point.uuid === selectedActionSphere.point.uuid
)?.point;
}, [selectedActionSphere, simulationPaths, selectedActionSphere?.point?.uuid]);
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['point']['actions']>) => {
if (!selectedActionSphere?.point?.uuid) return;
const updatedPaths = simulationPaths.map((path) => {
if (path.type === "Conveyor") {
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
return {
...path,
points: path.points.map((point) => {
if (point.uuid === selectedActionSphere.point.uuid) {
const actionIndex = point.actions.length;
const newAction = {
uuid: THREE.MathUtils.generateUUID(),
name: `Action ${actionIndex + 1}`,
type: 'Inherit',
material: 'Inherit',
delay: 'Inherit',
spawnInterval: 'Inherit',
isUsed: false
};
return { ...point, actions: [...point.actions, newAction] };
point: {
...path.point,
actions: {
...path.point.actions,
...updatedAction
}
return point;
}),
}
};
}
return path;
});
setSimulationPaths(updatedPaths);
};
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
const handleDeleteAction = (uuid: string) => {
if (!selectedActionSphere) return;
const handleStartPointChange = React.useCallback((position: string) => {
handleActionUpdate({ start: position });
}, [handleActionUpdate]);
const updatedPaths = simulationPaths.map((path) =>
path.type === "Conveyor"
? {
const handleEndPointChange = React.useCallback((position: string) => {
handleActionUpdate({ end: position });
}, [handleActionUpdate]);
const handleHitCountChange = React.useCallback((hitCount: number) => {
handleActionUpdate({ hitCount });
}, [handleActionUpdate]);
const handleBufferChange = React.useCallback((buffer: number) => {
handleActionUpdate({ buffer });
}, [handleActionUpdate]);
const handleSpeedChange = React.useCallback((speed: number) => {
if (!selectedActionSphere?.point?.uuid) return;
const updatedPaths = simulationPaths.map((path) => {
if (path.type === "Vehicle" && path.point.uuid === selectedActionSphere.point.uuid) {
return {
...path,
points: path.points.map((point) =>
point.uuid === selectedActionSphere.point.uuid
? { ...point, actions: point.actions.filter(action => action.uuid !== uuid) }
: point
),
}
: path
);
setSimulationPaths(updatedPaths);
};
const handleActionSelect = (uuid: string, actionType: 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,
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
);
setSimulationPaths(updatedPaths);
// 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);
if (updatedAction) {
setSelectedItem({
type: "action",
item: updatedAction
});
point: {
...path.point,
speed: speed
}
};
}
}
};
// Modified handleMaterialSelect to ensure it only applies to relevant action types
const handleMaterialSelect = (uuid: string, material: 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.type === 'Spawn' || action.type === 'Swap')
? { ...action, material }
: action
),
}
: point
),
}
: path
);
return path;
});
setSimulationPaths(updatedPaths);
// Update selected item if it's the current action
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
setSelectedItem({
...selectedItem,
item: {
...selectedItem.item,
material
}
});
}
};
const handleDelayChange = (uuid: string, delay: 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, delay } : action
),
}
: point
),
}
: path
);
setSimulationPaths(updatedPaths);
};
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
);
setSimulationPaths(updatedPaths);
};
const handleSpeedChange = (speed: number) => {
if (!selectedPath) return;
const updatedPaths = simulationPaths.map((path) =>
path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
);
setSimulationPaths(updatedPaths);
setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
};
const handleAddTrigger = () => {
if (!selectedActionSphere) return;
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: '',
isUsed: false
};
return { ...point, triggers: [...point.triggers, newTrigger] };
}
return point;
}),
}
: path
);
setSimulationPaths(updatedPaths);
};
const handleDeleteTrigger = (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, triggers: point.triggers.filter(trigger => trigger.uuid !== uuid) }
: point
),
}
: path
);
setSimulationPaths(updatedPaths);
};
const handleTriggerSelect = (uuid: string, triggerType: string) => {
if (!selectedActionSphere) return;
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
);
setSimulationPaths(updatedPaths);
};
// 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
);
setSimulationPaths(updatedPaths);
// Immediately update the selected item if it's the one being toggled
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
setSelectedItem({
...selectedItem,
item: {
...selectedItem.item,
isUsed: !selectedItem.item.isUsed
}
});
}
};
// Do the same for trigger toggle
const handleTriggerToggle = (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,
triggers: point.triggers.map((trigger) => ({
...trigger,
isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
})),
}
: point
),
}
: path
);
setSimulationPaths(updatedPaths);
// Immediately update the selected item if it's the one being toggled
if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
setSelectedItem({
...selectedItem,
item: {
...selectedItem.item,
isUsed: !selectedItem.item.isUsed
}
});
}
};
const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
useEffect(() => {
setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
}, [selectedActionSphere]);
}, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
return (
<div className="machine-mechanics-container">
<div className="machine-mechanics-container" key={selectedPoint?.uuid}>
<div className="machine-mechanics-header">
{selectedActionSphere?.path?.modelName || "point name not found"}
{selectedActionSphere?.path?.modelName || "Vehicle point not found"}
</div>
<div className="machine-mechanics-content-container">
<div className="actions">
<div className="header">
<div className="header-value">Actions</div>
<div className="add-button" onClick={handleAddAction}>
<AddIcon /> Add
</div>
</div>
<div
className="lists-main-container"
ref={actionsContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
<>
{console.log(selectedPoint)}
</>
</div>
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, actionsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div>
<div className="triggers">
<div className="header">
<div className="header-value">Triggers</div>
<div className="add-button" onClick={handleAddTrigger}>
<AddIcon /> Add
</div>
</div>
<div
className="lists-main-container"
ref={triggersContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
{selectedPoint?.triggers.map((trigger) => (
<div
key={trigger.uuid}
className={`list-item ${selectedItem?.type === "trigger" &&
selectedItem.item?.uuid === trigger.uuid
? "active"
: ""
}`}
>
<div
className="value"
onClick={() => setSelectedItem({ type: "trigger", item: trigger })}
>
<RenameInput value={trigger.name} />
</div>
<div
className="remove-button"
onClick={() => handleDeleteTrigger(trigger.uuid)}
>
<RemoveIcon />
</div>
</div>
))}
</div>
<div
className="resize-icon"
id="trigger-resize"
onMouseDown={(e) => handleResize(e, triggersContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div>
<div className="selected-properties-container">
{selectedItem && (
<div className="selected-properties-container" ref={propertiesContainerRef}>
<div className="properties-header">Vehicle Properties</div>
{selectedPoint && (
<>
<div className="properties-header">{selectedItem.item.name}</div>
<EyeDropInput
key={`start-${selectedPoint.uuid}`}
label="Start Point"
value={selectedPoint.actions.start}
onChange={handleStartPointChange}
/>
{selectedItem.type === "action" && (
<>
<InputToggle
inputKey="enableTrigger"
label="Enable Trigger"
value={selectedItem.item.isUsed}
onClick={() => handleActionToggle(selectedItem.item.uuid)}
/>
<LabledDropdown
defaultOption={selectedItem.item.type}
options={["Inherit", "Spawn", "Swap", "Despawn", "Delay"]}
onSelect={(option) => handleActionSelect(selectedItem.item.uuid, option)}
/>
<EyeDropInput
key={`end-${selectedPoint.uuid}`}
label="End Point"
value={selectedPoint.actions.end}
onChange={handleEndPointChange}
/>
{/* Only show material dropdown for Spawn/Swap actions */}
{(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && (
<LabledDropdown
label={selectedItem.item.type === 'Spawn' ? 'Spawn Material' : 'Swap Material'}
defaultOption={selectedItem.item.material}
options={["Inherit", "Crate", "Box"]}
onSelect={(option) => handleMaterialSelect(selectedItem.item.uuid, option)}
/>
)}
<InputWithDropDown
key={`hitcount-${selectedPoint.uuid}`}
label="Hit Count"
value={selectedPoint.actions.hitCount.toString()}
onChange={(value) => handleHitCountChange(parseInt(value))}
/>
{/* Only show delay input for Delay actions */}
{selectedItem.item.type === 'Delay' && (
<InputWithDropDown
label="Delay Time"
value={selectedItem.item.delay === 'Inherit'
? undefined
: selectedItem.item.delay}
onChange={(value) => {
const numValue = parseInt(value);
handleDelayChange(
selectedItem.item.uuid,
!value ? 'Inherit' : numValue
);
}}
/>
)}
<InputWithDropDown
key={`buffer-${selectedPoint.uuid}`}
label="Buffer Time"
value={selectedPoint.actions.buffer.toString()}
onChange={(value) => handleBufferChange(parseInt(value))}
/>
{/* Only show spawn interval for Spawn actions */}
{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()}
onChange={(value) => {
handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
}}
/>
)}
</>
)}
{selectedItem.type === "trigger" && (
<>
<InputToggle
inputKey="enableTrigger"
label="Enable Trigger"
value={selectedItem.item.isUsed}
onClick={() => handleTriggerToggle(selectedItem.item.uuid)}
/>
<LabledDropdown
defaultOption={selectedItem.item.type || "Select Trigger Type"}
options={["On-Hit", "Buffer"]}
onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
/>
</>
)}
<InputWithDropDown
key={`speed-${selectedPoint.uuid}`}
label="Vehicle Speed"
value={selectedPoint.speed.toString()}
onChange={(value) => handleSpeedChange(parseFloat(value))}
/>
</>
)}
{selectedPath && !selectedItem && (
<div className="speed-control">
<InputWithDropDown
label="ConveyorEventsSchema Speed"
value={selectedPath.path.speed.toString()}
onChange={(value) => handleSpeedChange(parseFloat(value))}
/>
</div>
)}
</div>
<div className="footer">
<InfoIcon />
By selecting points, you can create events and triggers.
Configure vehicle's movement and interaction properties.
</div>
</div>
</div>
);
};
export default VehicleMechanics;
export default React.memo(VehicleMechanics);

11
app/src/components/ui/ModuleToggle.tsx
View File

@ -18,7 +18,7 @@ const ModuleToggle: React.FC = () => {
className={`module-list ${activeModule === "builder" && "active"}`}
onClick={() => {
setActiveModule("builder");
setToggleUI(true);
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
}}
>
<div className="icon">
@ -30,7 +30,7 @@ const ModuleToggle: React.FC = () => {
className={`module-list ${activeModule === "simulation" && "active"}`}
onClick={() => {
setActiveModule("simulation");
setToggleUI(true);
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
}}
>
<div className="icon">
@ -39,12 +39,11 @@ const ModuleToggle: React.FC = () => {
<div className="module">Simulation</div>
</div>
<div
className={`module-list ${
activeModule === "visualization" && "active"
}`}
className={`module-list ${activeModule === "visualization" && "active"
}`}
onClick={() => {
setActiveModule("visualization");
setToggleUI(true);
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
}}
>
<div className="icon">

78
app/src/components/ui/Tools.tsx
View File

@ -25,6 +25,7 @@ import {
useDeleteModels,
useDeletePointOrLine,
useMovePoint,
useRefTextUpdate,
useSelectedWallItem,
useToggleView,
useToolMode,
@ -57,12 +58,11 @@ const Tools: React.FC = () => {
const { movePoint, setMovePoint } = useMovePoint();
const { toolMode, setToolMode } = useToolMode();
const { activeTool, setActiveTool } = useActiveTool();
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
// Reset activeTool whenever activeModule changes
useEffect(() => {
const storedNavBar: any = localStorage.getItem("navBarUi");
if (storedNavBar) {
const parsedNavBar = JSON.parse(storedNavBar);
setToggleUI(parsedNavBar);
}
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
}, []);
useEffect(() => {
@ -76,13 +76,14 @@ const Tools: React.FC = () => {
setDeleteModels(false);
setAddAction(null);
setToggleView(true);
localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD));
// localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD));
} else {
setToggleView(false);
}
setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
setToggleThreeD(!toggleThreeD);
setActiveSubTool("cursor");
setActiveTool("cursor");
setToggleThreeD(!toggleThreeD);
};
useEffect(() => {
@ -112,6 +113,7 @@ const Tools: React.FC = () => {
setToggleUI(false);
}
}, [toggleThreeD]);
useEffect(() => {
setToolMode(null);
setDeleteModels(false);
@ -119,6 +121,7 @@ const Tools: React.FC = () => {
setTransformMode(null);
setMovePoint(false);
setDeletePointOrLine(false);
setRefTextUpdate((prevUpdate) => prevUpdate - 1);
switch (activeTool) {
case "Move":
@ -189,6 +192,7 @@ const Tools: React.FC = () => {
setActiveTool(activeTool);
}, [activeTool]);
return (
<>
{!isPlaying ? (
@ -198,9 +202,8 @@ const Tools: React.FC = () => {
<div className="activeDropicon">
{activeSubTool == "cursor" && (
<div
className={`tool-button ${
activeTool === "cursor" ? "active" : ""
}`}
className={`tool-button ${activeTool === "cursor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("cursor");
}}
@ -210,9 +213,8 @@ const Tools: React.FC = () => {
)}
{activeSubTool == "free-hand" && (
<div
className={`tool-button ${
activeTool === "free-hand" ? "active" : ""
}`}
className={`tool-button ${activeTool === "free-hand" ? "active" : ""
}`}
onClick={() => {
setActiveTool("free-hand");
}}
@ -222,9 +224,8 @@ const Tools: React.FC = () => {
)}
{activeSubTool == "delete" && (
<div
className={`tool-button ${
activeTool === "delete" ? "active" : ""
}`}
className={`tool-button ${activeTool === "delete" ? "active" : ""
}`}
onClick={() => {
setActiveTool("delete");
}}
@ -296,9 +297,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "draw-wall" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-wall");
}}
@ -307,9 +307,8 @@ const Tools: React.FC = () => {
<WallIcon isActive={activeTool === "draw-wall"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-zone" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-zone");
}}
@ -318,9 +317,8 @@ const Tools: React.FC = () => {
<ZoneIcon isActive={activeTool === "draw-zone"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-aisle" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-aisle");
}}
@ -329,9 +327,8 @@ const Tools: React.FC = () => {
<AsileIcon isActive={activeTool === "draw-aisle"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-floor" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-floor");
}}
@ -347,9 +344,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "measure" ? "active" : ""
}`}
className={`tool-button ${activeTool === "measure" ? "active" : ""
}`}
onClick={() => {
setActiveTool("measure");
}}
@ -365,9 +361,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "pen" ? "active" : ""
}`}
className={`tool-button ${activeTool === "pen" ? "active" : ""
}`}
onClick={() => {
setActiveTool("pen");
}}
@ -399,9 +394,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="general-options">
<div
className={`tool-button ${
activeTool === "comment" ? "active" : ""
}`}
className={`tool-button ${activeTool === "comment" ? "active" : ""
}`}
onClick={() => {
setActiveTool("comment");
}}
@ -410,9 +404,8 @@ const Tools: React.FC = () => {
</div>
{toggleThreeD && (
<div
className={`tool-button ${
activeTool === "play" ? "active" : ""
}`}
className={`tool-button ${activeTool === "play" ? "active" : ""
}`}
onClick={() => {
setIsPlaying(!isPlaying);
}}
@ -423,9 +416,8 @@ const Tools: React.FC = () => {
</div>
<div className="split"></div>
<div
className={`toggle-threed-button${
toggleThreeD ? " toggled" : ""
}`}
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
}`}
onClick={toggleSwitch}
>
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>

32
app/src/components/ui/inputs/EyeDropInput.tsx
View File

@ -1,18 +1,30 @@
import React from "react";
import RegularDropDown from "./RegularDropDown";
import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
const EyeDropInput: React.FC = () => {
interface EyeDropInputProps {
label: string;
value: string;
onChange: (value: string) => void;
options?: string[];
}
const EyeDropInput: React.FC<EyeDropInputProps> = ({
label = "Object",
onChange,
}) => {
const handleEyeDropClick = () => {
// Here you would typically implement the eye dropper functionality
// For now, we'll just simulate selecting a value
const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
onChange(simulatedValue);
};
return (
<div className="eye-dropper-input-container">
<div className="label">Object</div>
<div className="label">{label}</div>
<div className="input-container">
<RegularDropDown
header="select object"
options={[]}
onSelect={() => {}}
/>
<div className="eye-picker-button">
<input disabled type="text" />
<div className="eye-picker-button" onClick={handleEyeDropClick}>
<EyeDroperIcon isActive={false} />
</div>
</div>
@ -20,4 +32,4 @@ const EyeDropInput: React.FC = () => {
);
};
export default EyeDropInput;
export default EyeDropInput;

2
app/src/modules/builder/functions/draw.ts
View File

@ -17,7 +17,7 @@ async function Draw(
floorPlanGroup: Types.RefGroup,
ReferenceLineMesh: Types.RefMesh,
LineCreated: Types.RefBoolean,
setRefTextUpdate: Types.NumberIncrementState,
setRefTextUpdate: any,
Tube: Types.RefTubeGeometry,
anglesnappedPoint: Types.RefVector3,
isAngleSnapped: Types.RefBoolean,

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

@ -193,7 +193,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
}
const Mode = transformMode;
if (Mode !== null || activeTool === "Cursor") {
if (Mode !== null || activeTool === "cursor") {
if (!itemsGroup.current) return;
let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
@ -225,7 +225,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
const Mode = transformMode;
if (Mode !== null || activeTool === "Cursor") {
if (Mode !== null || activeTool === "cursor") {
if (!itemsGroup.current) return;
let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {

4
app/src/modules/scene/tools/measurementTool.tsx
View File

@ -36,7 +36,7 @@ const MeasurementTool = () => {
isLeftMouseDown = false;
if (evt.button === 0 && !drag) {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(scene.children, true).filter(intersect => !intersect.object.name.includes("Roof") && !intersect.object.name.includes("MeasurementReference") && !(intersect.object.type === "GridHelper"));
const intersects = raycaster.intersectObjects(scene.children, true).filter(intersect => !intersect.object.name.includes("Roof") && !intersect.object.name.includes("MeasurementReference") && !intersect.object.name.includes("agv-collider") && !(intersect.object.type === "GridHelper"));
if (intersects.length > 0) {
const intersectionPoint = intersects[0].point.clone();
@ -83,7 +83,7 @@ const MeasurementTool = () => {
useFrame(() => {
if (points.length === 1) {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(scene.children, true).filter(intersect => !intersect.object.name.includes("Roof") && !intersect.object.name.includes("MeasurementReference") && !(intersect.object.type === "GridHelper"));
const intersects = raycaster.intersectObjects(scene.children, true).filter(intersect => !intersect.object.name.includes("Roof") && !intersect.object.name.includes("MeasurementReference") && !intersect.object.name.includes("agv-collider") && !(intersect.object.type === "GridHelper"));
if (intersects.length > 0) {
updateMeasurement(points[0], intersects[0].point);

7
app/src/modules/scene/world/world.tsx
View File

@ -29,6 +29,7 @@ import {
useUpdateScene,
useWalls,
useToolMode,
useRefTextUpdate,
} from "../../../store/store";
////////// 3D Function Imports //////////
@ -118,7 +119,7 @@ export default function World() {
const { shadows, setShadows } = useShadows();
const { updateScene, setUpdateScene } = useUpdateScene();
const { walls, setWalls } = useWalls();
const [RefTextupdate, setRefTextUpdate] = useState(-1000);
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
// const loader = new GLTFLoader();
// const dracoLoader = new DRACOLoader();
@ -158,7 +159,7 @@ export default function World() {
////////// All Toggle's //////////
useEffect(() => {
setRefTextUpdate((prevUpdate) => prevUpdate - 1);
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
if (dragPointControls.current) {
dragPointControls.current.enabled = false;
}
@ -241,7 +242,7 @@ export default function World() {
<DistanceText key={toggleView} />
<ReferenceDistanceText
key={RefTextupdate}
key={refTextupdate}
line={ReferenceLineMesh.current}
/>

7
app/src/modules/simulation/behaviour/behaviour.tsx
View File

@ -52,7 +52,7 @@ function Behaviour() {
],
assetPosition: [...item.position],
assetRotation: [item.rotation.x, item.rotation.y, item.rotation.z],
speed: 1,
speed: 'Inherit',
};
newPaths.push(newPath);
@ -67,12 +67,11 @@ function Behaviour() {
point: {
uuid: pointUUID,
position: [pointPosition.x, pointPosition.y, pointPosition.z],
actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: THREE.MathUtils.generateUUID(), hitCount: 1, end: THREE.MathUtils.generateUUID(), buffer: 0, isUsed: false }],
triggers: [],
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: '', hitCount: 1, end: '', buffer: 0 },
connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
speed: 2,
},
assetPosition: [...item.position],
speed: 2,
};
newPaths.push(newVehiclePath);

21
app/src/modules/simulation/path/pathCreation.tsx
View File

@ -1,27 +1,10 @@
import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes';
import { useRef, useState, useEffect } from 'react';
import { Sphere, TransformControls } from '@react-three/drei';
import { useIsConnecting, useRenderDistance, useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../../store/store';
import { useFrame, useThree } from '@react-three/fiber';
import { useSubModuleStore } from '../../../store/useModuleStore';
import { point } from '@turf/helpers';
interface ConveyorEventsSchema {
modeluuid: string;
modelName: string;
type: 'Conveyor';
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
}[];
assetPosition: [number, number, number];
assetRotation: [number, number, number];
speed: number;
}
function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
const { renderDistance } = useRenderDistance();
@ -89,7 +72,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
};
}
return path;
}) as ConveyorEventsSchema[];
}) as Types.ConveyorEventsSchema[];
setSimulationPaths(updatedPaths);
};

2
app/src/modules/simulation/simulation.tsx
View File

@ -14,7 +14,7 @@ function Simulation() {
const [processes, setProcesses] = useState([]);
useEffect(() => {
console.log('simulationPaths: ', simulationPaths);
}, [simulationPaths]);
// useEffect(() => {

3
app/src/modules/simulation/simulationtemp/path/pathCreator.tsx
View File

@ -93,6 +93,7 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
intersects = intersects.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.userData.isPathObject &&
!(intersect.object.type === "GridHelper")
@ -146,6 +147,7 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
const intersects = raycaster.intersectObjects(scene.children, true).filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.userData.isPathObject &&
!(intersect.object.type === "GridHelper")
@ -262,6 +264,7 @@ const PathCreator = ({ simulationPaths, setSimulationPaths, connections, setConn
const intersects = raycaster.intersectObjects(scene.children, true).filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.userData.isPathObject &&
!(intersect.object.type === "GridHelper")

16
app/src/store/store.ts
View File

@ -203,6 +203,20 @@ export const useActiveLayer = create<any>((set: any) => ({
setActiveLayer: (x: any) => set({ activeLayer: x }),
}));
interface RefTextUpdateState {
refTextupdate: number;
setRefTextUpdate: (callback: (currentValue: number) => number | number) => void;
}
export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
refTextupdate: -1000,
setRefTextUpdate: (callback) =>
set((state) => ({
refTextupdate:
typeof callback === "function" ? callback(state.refTextupdate) : callback,
})),
}));
export const useResetCamera = create<any>((set: any) => ({
resetCamera: false,
setResetCamera: (x: any) => set({ resetCamera: x }),
@ -214,7 +228,7 @@ export const useAddAction = create<any>((set: any) => ({
}));
export const useActiveTool = create<any>((set: any) => ({
activeTool: "Cursor",
activeTool: "cursor",
setActiveTool: (x: any) => set({ activeTool: x }),
}));

9
app/src/types/world/worldTypes.d.ts vendored
View File

@ -295,12 +295,12 @@ interface ConveyorEventsSchema {
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number }[] | [];
connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
}[];
assetPosition: [number, number, number];
assetRotation: [number, number, number];
speed: number;
speed: number | string;
}
interface VehicleEventsSchema {
@ -310,10 +310,9 @@ interface VehicleEventsSchema {
point: {
uuid: string;
position: [number, number, number];
actions: { uuid: string; name: string; type: string; start: string, hitCount: number, end: string, buffer: number; isUsed: boolean }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
actions: { uuid: string; name: string; type: string; start: string, hitCount: number, end: string, buffer: number };
connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
speed: number;
};
assetPosition: [number, number, number];
speed: number;
}