From 1ce24a64f174a58e1f42e1fbd22a22aaa1e50d25 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Sat, 29 Mar 2025 10:24:47 +0530 Subject: [PATCH] refactor: standardize activeTool casing and enhance trigger mechanics with bufferTime --- .../mechanics/ConveyorMechanics.tsx | 60 +++++++- .../mechanics/VehicleMechanics.tsx | 1 + app/src/components/ui/Tools.tsx | 143 ++++++++++++++---- .../builder/groups/floorItemsGroup.tsx | 4 +- .../simulation/behaviour/behaviour.tsx | 2 +- .../modules/simulation/path/pathCreation.tsx | 21 +-- app/src/modules/simulation/simulation.tsx | 2 +- app/src/store/store.ts | 2 +- app/src/types/world/worldTypes.d.ts | 2 +- 9 files changed, 179 insertions(+), 58 deletions(-) diff --git a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx index a1f8bf3..2788c12 100644 --- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx @@ -243,6 +243,7 @@ const ConveyorMechanics: React.FC = () => { uuid: THREE.MathUtils.generateUUID(), name: `Trigger ${triggerIndex + 1}`, type: '', + bufferTime: 0, isUsed: false }; @@ -298,8 +299,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,10 +385,45 @@ 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 ( @@ -559,8 +606,19 @@ const ConveyorMechanics: React.FC = () => { options={["On-Hit", "Buffer"]} onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)} /> + + {selectedItem.item.type === "Buffer" && ( + { + handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value)); + }} + /> + )} )} + )} diff --git a/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx index 7d3ffb0..de6eb8c 100644 --- a/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx @@ -243,6 +243,7 @@ const VehicleMechanics: React.FC = () => { uuid: THREE.MathUtils.generateUUID(), name: `Trigger ${triggerIndex + 1}`, type: '', + bufferTime: 0, isUsed: false }; diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index abe7ba8..1f5438d 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -18,15 +18,19 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore"; import useTemplateStore from "../../store/useTemplateStore"; import { useSelectedZoneStore } from "../../store/useZoneStore"; import { + useActiveTool, useAddAction, useDeleteModels, + useDeletePointOrLine, + useMovePoint, useSelectedWallItem, useToggleView, + useToolMode, + useTransformMode, } from "../../store/store"; const Tools: React.FC = () => { const { templates } = useTemplateStore(); - const [activeTool, setActiveTool] = useState("cursor"); const [activeSubTool, setActiveSubTool] = useState("cursor"); const [toggleThreeD, setToggleThreeD] = useState(true); @@ -39,11 +43,17 @@ const Tools: React.FC = () => { const { selectedZone } = useSelectedZoneStore(); // wall options - const { setToggleView } = useToggleView(); + const { toggleView, setToggleView } = useToggleView(); const { setDeleteModels } = useDeleteModels(); const { setAddAction } = useAddAction(); const { setSelectedWallItem } = useSelectedWallItem(); + const { transformMode, setTransformMode } = useTransformMode(); + const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); + const { movePoint, setMovePoint } = useMovePoint(); + const { toolMode, setToolMode } = useToolMode(); + const { activeTool, setActiveTool } = useActiveTool(); + // Reset activeTool whenever activeModule changes useEffect(() => { setActiveTool(activeSubTool); @@ -60,6 +70,7 @@ const Tools: React.FC = () => { setToggleView(false); } setToggleThreeD(!toggleThreeD); + setActiveTool("cursor"); }; useEffect(() => { @@ -85,6 +96,84 @@ const Tools: React.FC = () => { }; }, []); + useEffect(() => { + setToolMode(null); + setDeleteModels(false); + setAddAction(null); + setTransformMode(null); + setMovePoint(false); + setDeletePointOrLine(false); + + switch (activeTool) { + case "Move": + if (toggleView) { + setMovePoint(true); + } else { + setTransformMode("translate"); + } + break; + + case "Rotate": + if (!toggleView) { + setTransformMode("rotate"); + } + break; + + case "Scale": + if (!toggleView) { + setTransformMode("scale"); + } + break; + + case "draw-wall": + if (toggleView) { + setToolMode("Wall"); + } + break; + + case "Draw Aisle": + if (toggleView) { + setToolMode("Aisle"); + } + break; + + case "Mark zone": + if (toggleView) { + setToolMode("Zone"); + } + break; + + case "Draw Floor": + if (toggleView) { + setToolMode("Floor"); + } + break; + + case "Measurement Tool": + setToolMode("MeasurementScale"); + break; + + case "Add pillar": + if (!toggleView) { + setAddAction("pillar"); + } + break; + + case "Delete": + if (toggleView) { + setDeletePointOrLine(true); + } else { + setDeleteModels(true); + } + break; + + default: + break; + } + + setActiveTool(activeTool); + }, [activeTool]); + return ( <> {!isPlaying ? ( @@ -94,9 +183,8 @@ const Tools: React.FC = () => {
{activeSubTool == "cursor" && (
{ setActiveTool("cursor"); }} @@ -106,9 +194,8 @@ const Tools: React.FC = () => { )} {activeSubTool == "free-hand" && (
{ setActiveTool("free-hand"); }} @@ -167,9 +254,8 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-wall"); }} @@ -177,9 +263,8 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-zone"); }} @@ -187,9 +272,8 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-aisle"); }} @@ -197,9 +281,8 @@ const Tools: React.FC = () => {
{ setActiveTool("draw-floor"); }} @@ -214,9 +297,8 @@ const Tools: React.FC = () => {
{ setActiveTool("pen"); }} @@ -248,9 +330,8 @@ const Tools: React.FC = () => {
{ setActiveTool("comment"); }} @@ -258,9 +339,8 @@ const Tools: React.FC = () => {
{ setIsPlaying(!isPlaying); }} @@ -270,9 +350,8 @@ const Tools: React.FC = () => {
diff --git a/app/src/modules/builder/groups/floorItemsGroup.tsx b/app/src/modules/builder/groups/floorItemsGroup.tsx index 8ddcdc9..cf9d6b8 100644 --- a/app/src/modules/builder/groups/floorItemsGroup.tsx +++ b/app/src/modules/builder/groups/floorItemsGroup.tsx @@ -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) { diff --git a/app/src/modules/simulation/behaviour/behaviour.tsx b/app/src/modules/simulation/behaviour/behaviour.tsx index 2854172..868900a 100644 --- a/app/src/modules/simulation/behaviour/behaviour.tsx +++ b/app/src/modules/simulation/behaviour/behaviour.tsx @@ -67,7 +67,7 @@ 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 }], + actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: '', hitCount: 1, end: '', buffer: 0, isUsed: false }], triggers: [], connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] }, }, diff --git a/app/src/modules/simulation/path/pathCreation.tsx b/app/src/modules/simulation/path/pathCreation.tsx index 78a4491..33ca2f8 100644 --- a/app/src/modules/simulation/path/pathCreation.tsx +++ b/app/src/modules/simulation/path/pathCreation.tsx @@ -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 }) { const { renderDistance } = useRenderDistance(); @@ -89,7 +72,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject }; } return path; - }) as ConveyorEventsSchema[]; + }) as Types.ConveyorEventsSchema[]; setSimulationPaths(updatedPaths); }; diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx index 73ef27f..10934fb 100644 --- a/app/src/modules/simulation/simulation.tsx +++ b/app/src/modules/simulation/simulation.tsx @@ -14,7 +14,7 @@ function Simulation() { const [processes, setProcesses] = useState([]); useEffect(() => { - + console.log('simulationPaths: ', simulationPaths); }, [simulationPaths]); // useEffect(() => { diff --git a/app/src/store/store.ts b/app/src/store/store.ts index 8bbcba1..388f9d0 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -214,7 +214,7 @@ export const useAddAction = create((set: any) => ({ })); export const useActiveTool = create((set: any) => ({ - activeTool: "Cursor", + activeTool: "cursor", setActiveTool: (x: any) => set({ activeTool: x }), })); diff --git a/app/src/types/world/worldTypes.d.ts b/app/src/types/world/worldTypes.d.ts index 2fcbd4f..71c2528 100644 --- a/app/src/types/world/worldTypes.d.ts +++ b/app/src/types/world/worldTypes.d.ts @@ -295,7 +295,7 @@ 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];