import React, { useRef, useState, useMemo, useEffect } from "react"; import { AddIcon, InfoIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icons/ExportCommonIcons"; 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'; import InputToggle from "../../../ui/inputs/InputToggle"; const VehicleMechanics: React.FC = () => { const { selectedActionSphere } = useSelectedActionSphere(); const { selectedPath, setSelectedPath } = useSelectedPath(); const { simulationPaths, setSimulationPaths } = useSimulationPaths(); const actionsContainerRef = useRef(null); const triggersContainerRef = useRef(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]); const handleAddAction = () => { if (!selectedActionSphere) return; const updatedPaths = simulationPaths.map((path) => { if (path.type === "Conveyor") { 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] }; } return point; }), }; } return path; }); setSimulationPaths(updatedPaths); }; const handleDeleteAction = (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.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 }); } } }; // 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 ); 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: '', bufferTime: 0, 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]); return (
{selectedActionSphere?.path?.modelName || "point name not found"}
Actions
Add
<> {console.log(selectedPoint)}
handleResize(e, actionsContainerRef)} >
Triggers
Add
{selectedPoint?.triggers.map((trigger) => (
setSelectedItem({ type: "trigger", item: trigger })} >
handleDeleteTrigger(trigger.uuid)} >
))}
handleResize(e, triggersContainerRef)} >
{selectedItem && ( <>
{selectedItem.item.name}
{selectedItem.type === "action" && ( <> handleActionToggle(selectedItem.item.uuid)} /> handleActionSelect(selectedItem.item.uuid, option)} /> {/* Only show material dropdown for Spawn/Swap actions */} {(selectedItem.item.type === 'Spawn' || selectedItem.item.type === 'Swap') && ( handleMaterialSelect(selectedItem.item.uuid, option)} /> )} {/* Only show delay input for Delay actions */} {selectedItem.item.type === 'Delay' && ( { const numValue = parseInt(value); handleDelayChange( selectedItem.item.uuid, !value ? 'Inherit' : numValue ); }} /> )} {/* Only show spawn interval for Spawn actions */} {selectedItem.item.type === 'Spawn' && ( { handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value)); }} /> )} )} {selectedItem.type === "trigger" && ( <> handleTriggerToggle(selectedItem.item.uuid)} /> handleTriggerSelect(selectedItem.item.uuid, option)} /> )} )} {selectedPath && !selectedItem && (
handleSpeedChange(parseFloat(value))} />
)}
By selecting points, you can create events and triggers.
); }; export default VehicleMechanics;