diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index f5668bf..5c37dec 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -123,7 +123,7 @@ const SideBarRight: React.FC = () => { )} - {subModule === "mechanics" && selectedEventData && selectedEventSphere && ( + {subModule === "mechanics" && (
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx index 6c44947..887aaaa 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx @@ -22,6 +22,9 @@ import Trigger from "./trigger/Trigger"; import { useSelectedEventData, useSelectedProduct } from "../../../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../../../store/simulation/useProductStore"; +import ConveyorMechanics from "./mechanics/conveyorMechanics"; +import VehicleMechanics from "./mechanics/vehicleMechanics"; +import RoboticArmMechanics from "./mechanics/roboticArmMechanics"; const EventProperties: React.FC = () => { const actionsContainerRef = useRef(null); @@ -32,21 +35,43 @@ const EventProperties: React.FC = () => { const { getEventByModelUuid } = useProductStore(); const { selectedProduct } = useSelectedProduct(); + // State for derived values + const [currentEventData, setCurrentEventData] = useState(null); + const [assetType, setAssetType] = useState(null); + const [availableActions, setAvailableActions] = useState({ + defaultOption: "default", + options: ["default"] + }); + const [actions, setActions] = useState<{ uuid: string; name: string }[]>([]); + const [speed, setSpeed] = useState("0.5"); + useEffect(() => { - const actions = getActions(); - if (actions.length > 0 && !selectedItem.item) { - setSelectedItem({ item: actions[0] }); + const event = getCurrentEventData(); + setCurrentEventData(event); + + const type = determineAssetType(event); + setAssetType(type); + + const actionsConfig = determineAvailableActions(type); + setAvailableActions(actionsConfig); + + const actionList = getActionList(event, type); + setActions(actionList); + + if (actionList.length > 0 && !selectedItem.item) { + setSelectedItem({ item: actionList[0] }); } - }, [selectedEventData]); + + const currentSpeed = getCurrentSpeed(); + setSpeed(currentSpeed); + }, [selectedEventData, selectedProduct]); const getCurrentEventData = () => { if (!selectedEventData?.data || !selectedProduct) return null; - const event = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid); - return event || null; + return getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid) || null; }; - const getAssetType = () => { - const event = getCurrentEventData(); + const determineAssetType = (event: EventsSchema | null) => { if (!event) return null; switch (event.type) { @@ -59,8 +84,8 @@ const EventProperties: React.FC = () => { } }; - const getAvailableActions = () => { - switch (getAssetType()) { + const determineAvailableActions = (type: string | null) => { + switch (type) { case "conveyor": return { defaultOption: "default", @@ -94,12 +119,10 @@ const EventProperties: React.FC = () => { } }; - // Get actions based on asset type - const getActions = () => { + const getActionList = (event: EventsSchema | null, type: string | null) => { if (!selectedEventData?.data) return []; - const event = selectedEventData.data; - switch (getAssetType()) { + switch (type) { case "conveyor": return (event as ConveyorEventSchema).points .find((point) => point.uuid === selectedEventData?.selectedPoint) @@ -141,8 +164,13 @@ const EventProperties: React.FC = () => { } }; + const getCurrentSpeed = () => { + if (!selectedEventData) return "0.5"; + if ("speed" in selectedEventData.data) return selectedEventData.data.speed.toString(); + return "0.5"; + }; + const handleActionToggle = (actionUuid: string) => { - const actions = getActions(); const selected = actions.find(action => action.uuid === actionUuid); if (selected) { setSelectedItem({ item: selected }); @@ -150,130 +178,128 @@ const EventProperties: React.FC = () => { }; const handleDeleteAction = (actionUuid: string) => { - - }; - - const actions = getActions(); - - const getSpeed = () => { - if (!selectedEventData) return "0.5"; - if ("speed" in selectedEventData.data) return selectedEventData.data.speed.toString(); - return "0.5"; + // Implementation for delete action }; return ( <> - {getCurrentEventData() && -
-
-
{selectedEventData?.data.modelName}
-
-
-
-
- { }} - onChange={(value) => console.log(value)} - /> -
+
+ {currentEventData && + <> +
+
{selectedEventData?.data.modelName}
+
+
+
+
+ { }} + onChange={(value) => console.log(value)} + /> +
-
- { }} - onChange={(value) => console.log(value)} - /> +
+ { }} + onChange={(value) => console.log(value)} + /> +
-
- {getAssetType() === 'roboticArm' && -
-
-
-
Actions
-
{ }}> - Add -
-
-
-
- {actions.map((action) => ( -
-
handleActionToggle(action.uuid)} - > - -
- {actions.length > 1 && ( -
handleDeleteAction(action.uuid)} - > - -
- )} -
- ))} + {assetType === 'roboticArm' && +
+
+
+
Actions
+
{ }}> + Add +
handleResize(e, actionsContainerRef)} + className="lists-main-container" + ref={actionsContainerRef} + style={{ height: "120px" }} > - +
+ {actions.map((action) => ( +
+
handleActionToggle(action.uuid)} + > + +
+ {actions.length > 1 && ( +
handleDeleteAction(action.uuid)} + > + +
+ )} +
+ ))} +
+
handleResize(e, actionsContainerRef)} + > + +
+ } +
+
+ +
+
+ setActiveOption(option)} + /> + {activeOption === "default" && } + {activeOption === "spawn" && } + {activeOption === "swap" && } + {activeOption === "despawn" && } + {activeOption === "travel" && } + {activeOption === "pickAndPlace" && } + {activeOption === "process" && } + {activeOption === "store" && } +
- } -
-
- +
+
-
- setActiveOption(option)} - /> - {activeOption === "default" && } - {activeOption === "spawn" && } - {activeOption === "swap" && } - {activeOption === "despawn" && } - {activeOption === "travel" && } - {activeOption === "pickAndPlace" && } - {activeOption === "process" && } - {activeOption === "store" && } -
-
-
- -
-
- } + + {/* {assetType === 'conveyor' && } + {assetType === 'vehicle' && } + {assetType === 'roboticArm' && } */} + + } +
); }; -export default EventProperties; +export default EventProperties; \ No newline at end of file diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx new file mode 100644 index 0000000..e4bceb9 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; + +const DelayAction: React.FC = () => { + return ( + <> + { }} + onChange={(value) => console.log(value)} + /> + + ); +}; + +export default DelayAction; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx index a0f081f..0d54476 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx @@ -4,17 +4,6 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown"; const DespawnAction: React.FC = () => { return ( <> - {}} - onChange={(value) => console.log(value)} - /> ); }; diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx index 000a9d7..4f3122b 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx @@ -1,8 +1,84 @@ -import React from 'react' +import { useEffect, useState } from 'react' +import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown' +import DelayAction from '../actions/DelayAction' +import RenameInput from '../../../../../ui/inputs/RenameInput' +import LabledDropdown from '../../../../../ui/inputs/LabledDropdown' +import DespawnAction from '../actions/DespawnAction' +import SwapAction from '../actions/SwapAction' +import SpawnAction from '../actions/SpawnAction' +import DefaultAction from '../actions/DefaultAction' +import Trigger from '../trigger/Trigger' +import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore"; +import { useProductStore } from "../../../../../../store/simulation/useProductStore"; function ConveyorMechanics() { + const [activeOption, setActiveOption] = useState("default"); + const [selectedPointData, setSelectedPointData] = useState(); + const { selectedEventData } = useSelectedEventData(); + const { getPointByUuid } = useProductStore(); + const { selectedProduct } = useSelectedProduct(); + + useEffect(() => { + if (selectedEventData) { + const point = getPointByUuid(selectedProduct.productId, selectedEventData?.data.modelUuid, selectedEventData?.selectedPoint); + if (point && 'action' in point) { + setSelectedPointData(point as PointsScheme & { action: { actionType: string } }); + setActiveOption((point as PointsScheme & { action: { actionType: string } }).action.actionType); + } + } + }, [selectedProduct, selectedEventData]) + + const availableActions = { + defaultOption: "default", + options: ["default", "spawn", "swap", "delay", "despawn"], + }; + return ( <> + {selectedEventData && + <> +
+
+
+ { }} + onChange={(value) => console.log(value)} + /> +
+
+
+ +
+
+ +
+
+ setActiveOption(option)} + /> + {activeOption === "default" && } + {activeOption === "spawn" && } + {activeOption === "swap" && } + {activeOption === "despawn" && } + {activeOption === "delay" && } +
+
+
+ +
+ + } ) } diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx index 56e4c27..9a044ac 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx @@ -1,8 +1,170 @@ -import React from 'react' +import { useEffect, useRef, useState } from 'react' +import * as THREE from 'three'; +import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown' +import RenameInput from '../../../../../ui/inputs/RenameInput' +import LabledDropdown from '../../../../../ui/inputs/LabledDropdown' +import Trigger from '../trigger/Trigger' +import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore"; +import { useProductStore } from "../../../../../../store/simulation/useProductStore"; +import { AddIcon, RemoveIcon, ResizeHeightIcon } from '../../../../../icons/ExportCommonIcons' +import { handleResize } from '../../../../../../functions/handleResizePannel' +import PickAndPlaceAction from '../actions/PickAndPlaceAction' function RoboticArmMechanics() { + const actionsContainerRef = useRef(null); + + const [activeOption, setActiveOption] = useState("pickAndPlace"); + const [selectedItem, setSelectedItem] = useState<{ item: { uuid: string; name: string } | null; }>({ item: null }); + const { selectedEventData } = useSelectedEventData(); + const { getEventByModelUuid, addAction } = useProductStore(); + const { selectedProduct } = useSelectedProduct(); + + const availableActions = { + defaultOption: "pickAndPlace", + options: ["pickAndPlace"] + }; + const [actions, setActions] = useState<{ uuid: string; name: string }[]>([]); + + useEffect(() => { + const event = getCurrentEventData(); + const actionList = getActionList(event as RoboticArmEventSchema); + setActions(actionList); + + if (actionList.length > 0 && !selectedItem.item) { + setSelectedItem({ item: actionList[0] }); + } + }, [selectedEventData, selectedProduct]); + + const getCurrentEventData = () => { + if (!selectedEventData?.data || !selectedProduct) return null; + return getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid) || null; + }; + + const getActionList = (event: RoboticArmEventSchema) => { + if (!event || !('point' in event)) return []; + + return event.point.actions.flatMap( + (action) => + action.triggers.map((trigger) => ({ + uuid: trigger.triggerUuid, + name: trigger.triggerName, + })) + ) || []; + }; + + const handleActionToggle = (actionUuid: string) => { + const action = actions.find(a => a.uuid === actionUuid); + if (action) { + setSelectedItem({ item: action }); + } + }; + + const handleAddAction = () => { + if (selectedEventData) { + const newEvent = { + actionUuid: THREE.MathUtils.generateUUID(), + actionName: `Action ${actions.length + 1}`, + actionType: "pickAndPlace" as const, + process: { + startPoint: null as [number, number, number] | null, + endPoint: null as [number, number, number] | null + }, + triggers: [] as TriggerSchema[] + } + addAction( + selectedProduct.productId, + selectedEventData?.data.modelUuid, + selectedEventData?.selectedPoint, + newEvent + ) + } + }; + + const handleDeleteAction = (actionUuid: string) => { + + }; + return ( <> +
+
+
+ { }} + onChange={(value) => console.log(value)} + /> +
+
+
+
+
+
+
Actions
+
handleAddAction()}> + Add +
+
+
+
+ {actions.map((action) => ( +
+
handleActionToggle(action.uuid)} + > + +
+ {actions.length > 1 && ( +
handleDeleteAction(action.uuid)} + > + +
+ )} +
+ ))} +
+
handleResize(e, actionsContainerRef)} + > + +
+
+
+
+
+
+ +
+
+ setActiveOption(option)} + /> + {activeOption === "pickAndPlace" && } +
+
+
+ +
) } diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx index cdb32c4..b689734 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx @@ -1,8 +1,76 @@ -import React from 'react' +import { useEffect, useState } from 'react' +import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown' +import RenameInput from '../../../../../ui/inputs/RenameInput' +import LabledDropdown from '../../../../../ui/inputs/LabledDropdown' +import Trigger from '../trigger/Trigger' +import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore"; +import { useProductStore } from "../../../../../../store/simulation/useProductStore"; +import TravelAction from '../actions/TravelAction' function VehicleMechanics() { + const [activeOption, setActiveOption] = useState("default"); + const [selectedPointData, setSelectedPointData] = useState(); + const { selectedEventData } = useSelectedEventData(); + const { getPointByUuid } = useProductStore(); + const { selectedProduct } = useSelectedProduct(); + + useEffect(() => { + if (selectedEventData) { + const point = getPointByUuid(selectedProduct.productId, selectedEventData?.data.modelUuid, selectedEventData?.selectedPoint); + if (point && 'action' in point) { + setSelectedPointData(point as PointsScheme & { action: { actionType: string } }); + setActiveOption((point as PointsScheme & { action: { actionType: string } }).action.actionType); + } + } + }, [selectedProduct, selectedEventData]) + + const availableActions = { + defaultOption: "travel", + options: ["travel"], + }; + return ( <> + {selectedEventData && + <> +
+
+
+ { }} + onChange={(value) => console.log(value)} + /> +
+
+
+ +
+
+ +
+
+ setActiveOption(option)} + /> + {activeOption === "travel" && } +
+
+
+ +
+ + } ) } diff --git a/app/src/modules/simulation/roboticArm/instances/ikInstances.tsx b/app/src/modules/simulation/roboticArm/instances/ikInstances.tsx deleted file mode 100644 index d44ddd2..0000000 --- a/app/src/modules/simulation/roboticArm/instances/ikInstances.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import IKInstance from './ikInstance/ikInstance'; - -function IkInstances() { - return ( - <> - - - - - ) -} - -export default IkInstances; \ No newline at end of file