added multiple actions to storage unit

2025-08-20 18:11:01 +05:30
parent 11c0994833
commit e950b0f54a
11 changed files with 296 additions and 183 deletions
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
+import { MathUtils } from "three";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
@@ -6,79 +7,88 @@ import StorageAction from "../actions/StorageAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import * as THREE from 'three';
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
 import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function StorageMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
+    const [activeOption, setActiveOption] = useState<"store" | "spawn">("store");
    const [currentCapacity, setCurrentCapacity] = useState("1");
    const [spawnedCount, setSpawnedCount] = useState("0");
    const [spawnedMaterial, setSpawnedMaterial] = useState("Default material");
    const [selectedPointData, setSelectedPointData] = useState<StoragePointSchema | undefined>();
+    const [currentAction, setCurrentAction] = useState<StorageAction | undefined>();
    const { selectedEventData } = useSelectedEventData();
    const { productStore } = useSceneContext();
-    const { getPointByUuid, updateAction, updateEvent, getEventByModelUuid } = productStore();
+    const { getPointByUuid, updateAction, updateEvent, getEventByModelUuid, getActionByUuid, addAction, removeAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
-    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
+    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

-    const updateSelectedPointData = () => {
-        if (selectedEventData && selectedProduct) {
-            const point = getPointByUuid(
-                selectedProduct.productUuid,
-                selectedEventData?.data.modelUuid,
-                selectedEventData?.selectedPoint
-            ) as StoragePointSchema | undefined;
-            if (point && "action" in point) {
-                setSelectedPointData(point);
-                const uiOption = point.action.actionType === "retrieve" ? "spawn" : point.action.actionType;
-                setActiveOption(uiOption as "store" | "spawn");
-                setSelectedAction(point.action.actionUuid, point.action.actionName);
-            }
-        }
-    };
-
    useEffect(() => {
-        if (selectedEventData) {
+        if (selectedEventData && selectedEventData.data.type === "storageUnit") {
            const point = getPointByUuid(
                selectedProduct.productUuid,
-                selectedEventData?.data.modelUuid,
-                selectedEventData?.selectedPoint
+                selectedEventData.data.modelUuid,
+                selectedEventData.selectedPoint
            ) as StoragePointSchema | undefined;
-            if (point && "action" in point) {
+
+            if (point?.actions?.length) {
                setSelectedPointData(point);
-                const uiOption = point.action.actionType === "retrieve" ? "spawn" : point.action.actionType;
-                setActiveOption(uiOption as "store" | "spawn");
-                setCurrentCapacity(
-                    (getEventByModelUuid(
-                        selectedProduct.productUuid,
-                        selectedEventData.data.modelUuid
-                    ) as StorageEventSchema | undefined)?.storageCapacity?.toString() || "1"
-                );
-                setSpawnedCount(
-                    (getEventByModelUuid(
-                        selectedProduct.productUuid,
-                        selectedEventData.data.modelUuid
-                    ) as StorageEventSchema | undefined)?.storageCount?.toString() || "0"
-                )
-                setSpawnedMaterial(
-                    (getEventByModelUuid(
-                        selectedProduct.productUuid,
-                        selectedEventData.data.modelUuid
-                    ) as StorageEventSchema | undefined)?.materialType?.toString() || "Default material"
-                )
-                setSelectedAction(point.action.actionUuid, point.action.actionName);
+                const firstAction = point.actions[0];
+                setCurrentAction(firstAction);
+
+                const eventData = getEventByModelUuid(
+                    selectedProduct.productUuid,
+                    selectedEventData.data.modelUuid
+                ) as StorageEventSchema | undefined;
+
+                setCurrentCapacity(eventData?.storageCapacity?.toString() || "1");
+                setSpawnedCount(eventData?.storageCount?.toString() || "0");
+                setSpawnedMaterial(eventData?.materialType?.toString() || "Default material");
+
+                const actionUuid = selectedAction.actionId || firstAction.actionUuid;
+                const newCurrentAction = getActionByUuid(selectedProduct.productUuid, actionUuid);
+
+                if (newCurrentAction) {
+                    const uiOption = newCurrentAction.actionType === "retrieve" ? "spawn" : "store";
+                    setActiveOption(uiOption);
+                    setSelectedAction(newCurrentAction.actionUuid, newCurrentAction.actionName);
+                }
            }
        } else {
            clearSelectedAction();
+            setCurrentAction(undefined);
        }
-    }, [selectedProduct, selectedEventData]);
+    }, [selectedEventData, selectedProduct]);
+
+    useEffect(() => {
+        if (selectedEventData && selectedEventData.data.type === "storageUnit" && selectedAction.actionId) {
+            const point = getPointByUuid(
+                selectedProduct.productUuid,
+                selectedEventData.data.modelUuid,
+                selectedEventData.selectedPoint
+            ) as StoragePointSchema | undefined;
+
+            const newCurrentAction = getActionByUuid(selectedProduct.productUuid, selectedAction.actionId);
+
+            if (newCurrentAction && (newCurrentAction.actionType === 'store' || newCurrentAction.actionType === 'retrieve')) {
+                if (!selectedAction.actionId) {
+                    setSelectedAction(newCurrentAction.actionUuid, newCurrentAction.actionName);
+                }
+                setCurrentAction(newCurrentAction);
+                const uiOption = newCurrentAction.actionType === "retrieve" ? "spawn" : "store";
+                setActiveOption(uiOption);
+            } else {
+                clearSelectedAction();
+                setCurrentAction(undefined);
+            }
+        }
+    }, [selectedAction, selectedProduct, selectedEventData]);

    const updateBackend = (
        productName: string,
@@ -96,14 +106,26 @@ function StorageMechanics() {
    }

    const handleActionTypeChange = (option: string) => {
-        if (!selectedEventData || !selectedPointData) return;
-        const internalOption = actionTypeMap[option as keyof typeof actionTypeMap] as "store" | "retrieve";
+        if (!selectedAction.actionId || !currentAction || !selectedPointData) return;

-        setActiveOption(option as "store" | "spawn");
+        const internalOption = option === "spawn" ? "retrieve" : "store";

-        const event = updateAction(selectedProduct.productUuid, selectedPointData.action.actionUuid, {
-            actionType: internalOption,
-        });
+        const updatedAction = {
+            ...currentAction,
+            actionType: internalOption as "store" | "retrieve"
+        };
+
+        const updatedActions = selectedPointData.actions.map(action =>
+            action.actionUuid === updatedAction.actionUuid ? updatedAction : action
+        );
+
+        const updatedPoint = { ...selectedPointData, actions: updatedActions };
+
+        const event = updateAction(
+            selectedProduct.productUuid,
+            selectedAction.actionId,
+            updatedAction
+        );

        if (event) {
            updateBackend(
@@ -112,58 +134,67 @@ function StorageMechanics() {
                projectId || '',
                event
            );
-            updateSelectedPointData();
        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
+        setActiveOption(option as "store" | "spawn");
    };

    const handleCapacityChange = (value: string) => {
-        if (!selectedEventData || !selectedPointData) return;
+        if (!selectedEventData) return;

-        const newCapacity = parseInt(value);
-        let updatedEvent: EventsSchema | undefined;
+        const numericValue = parseInt(value);
+        if (isNaN(numericValue)) return;

-        updatedEvent = updateEvent(
-            selectedProduct.productUuid,
-            selectedEventData.data.modelUuid,
-            { storageCapacity: newCapacity }
-        );
+        const updatedEvent = {
+            ...selectedEventData.data,
+            storageCapacity: numericValue
+        } as StorageEventSchema;

        const currentCount = parseInt(spawnedCount);
-        if (currentCount > newCapacity) {
-            updatedEvent = updateEvent(
+        if (currentCount > numericValue) {
+            updatedEvent.storageCount = numericValue;
+            setSpawnedCount(numericValue.toString());
+        }
+
+        const event = updateEvent(
+            selectedProduct.productUuid,
+            selectedEventData.data.modelUuid,
+            updatedEvent
+        );
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
                selectedProduct.productUuid,
-                selectedEventData.data.modelUuid,
-                { storageCount: newCapacity }
+                projectId || '',
+                event
            );
-            setSpawnedCount(newCapacity.toString());
        }

        setCurrentCapacity(value);
-
-        if (updatedEvent) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productUuid,
-                projectId || '',
-                updatedEvent
-            );
-            updateSelectedPointData();
-        }
    };

    const handleSpawnCountChange = (value: string) => {
-        if (!selectedEventData || !selectedPointData) return;
+        if (!selectedEventData) return;
+
+        const numericValue = parseInt(value);
+        if (isNaN(numericValue)) return;

-        const newCount = parseInt(value);
        const maxCapacity = parseInt(currentCapacity);
+        if (numericValue > maxCapacity) return;

-        if (newCount > maxCapacity) return;
+        const updatedEvent = {
+            ...selectedEventData.data,
+            storageCount: numericValue
+        } as StorageEventSchema;

-        const event = updateEvent(selectedProduct.productUuid, selectedEventData.data.modelUuid, {
-            storageCount: newCount,
-        });
-
-        setSpawnedCount(value);
+        const event = updateEvent(
+            selectedProduct.productUuid,
+            selectedEventData.data.modelUuid,
+            updatedEvent
+        );

        if (event) {
            updateBackend(
@@ -172,16 +203,24 @@ function StorageMechanics() {
                projectId || '',
                event
            );
-            updateSelectedPointData();
        }
+
+        setSpawnedCount(value);
    };

    const handleMaterialTypeChange = (value: string) => {
-        if (!selectedEventData || !selectedPointData) return;
+        if (!selectedEventData) return;

-        const event = updateEvent(selectedProduct.productUuid, selectedEventData.data.modelUuid, {
-            materialType: value,
-        });
+        const updatedEvent = {
+            ...selectedEventData.data,
+            materialType: value
+        } as StorageEventSchema;
+
+        const event = updateEvent(
+            selectedProduct.productUuid,
+            selectedEventData.data.modelUuid,
+            updatedEvent
+        );

        if (event) {
            updateBackend(
@@ -190,28 +229,73 @@ function StorageMechanics() {
                projectId || '',
                event
            );
-            updateSelectedPointData();
        }
+
+        setSpawnedMaterial(value);
    };

-    const currentActionName = useMemo(() =>
-        selectedPointData ? selectedPointData.action.actionName : "Action Name",
-        [selectedPointData]
-    );
+    const handleAddAction = () => {
+        if (!selectedEventData || !selectedPointData) return;

-    const availableActions = {
-        defaultOption: "store",
-        options: ["store", "spawn"],
+        const newAction: StorageAction = {
+            actionUuid: MathUtils.generateUUID(),
+            actionName: `Action ${selectedPointData.actions.length + 1}`,
+            actionType: "store",
+            triggers: [],
+        };
+
+        const updatedActions = [...(selectedPointData.actions || []), newAction];
+        const updatedPoint = { ...selectedPointData, actions: updatedActions };
+
+        const event = addAction(
+            selectedProduct.productUuid,
+            selectedEventData.data.modelUuid,
+            selectedEventData.selectedPoint,
+            newAction
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        setSelectedPointData(updatedPoint);
+        setSelectedAction(newAction.actionUuid, newAction.actionName);
    };

-    const actionTypeMap = {
-        spawn: "retrieve",
-        store: "store"
+    const handleDeleteAction = (actionUuid: string) => {
+        if (!selectedPointData || !actionUuid) return;
+
+        const updatedActions = selectedPointData.actions.filter(action => action.actionUuid !== actionUuid);
+        const updatedPoint = { ...selectedPointData, actions: updatedActions };
+
+        const event = removeAction(
+            selectedProduct.productUuid,
+            actionUuid
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        setSelectedPointData(updatedPoint);
+
+        const index = selectedPointData.actions.findIndex((a) => a.actionUuid === selectedAction.actionId);
+        const nextAction = updatedPoint.actions[index] || updatedPoint.actions[index - 1];
+        if (nextAction) {
+            setSelectedAction(nextAction.actionUuid, nextAction.actionName);
+            const action = getActionByUuid(selectedProduct.productUuid, nextAction.actionUuid);
+            if (action) {
+                setCurrentAction(action as StorageAction);
+            }
+        } else {
+            clearSelectedAction();
+            setCurrentAction(undefined);
+        }
    };

    return (
        <>
-            {selectedEventData && (
+            {selectedEventData && selectedEventData.data.type === "storageUnit" && (
                <>
                    <section>
                        <StorageAction
@@ -229,25 +313,33 @@ function StorageMechanics() {
                    <section>
                        <ActionsList
                            selectedPointData={selectedPointData}
+                            multipleAction={true}
+                            handleAddAction={handleAddAction}
+                            handleDeleteAction={handleDeleteAction}
                        />
-                        <div className="selected-actions-details">
-                            <div className="selected-actions-header">
-                                <RenameInput
-                                    value={currentActionName}
-                                    canEdit={false}
-                                />
+
+                        {selectedAction.actionId && currentAction && (
+                            <div className="selected-actions-details">
+                                <div className="selected-actions-header">
+                                    <RenameInput
+                                        value={selectedAction.actionName || ""}
+                                        canEdit={false}
+                                    />
+                                </div>
+                                <div className="selected-actions-list">
+                                    <LabledDropdown
+                                        label="Action Type"
+                                        defaultOption={activeOption}
+                                        options={["store", "spawn"]}
+                                        onSelect={handleActionTypeChange}
+                                        disabled={false}
+                                    />
+                                </div>
+                                <div className="tirgger">
+                                    <Trigger selectedPointData={selectedPointData as any} type={'StorageUnit'} />
+                                </div>
                            </div>
-                            <div className="selected-actions-list">
-                                <LabledDropdown
-                                    defaultOption={activeOption}
-                                    options={availableActions.options}
-                                    onSelect={handleActionTypeChange}
-                                />
-                            </div>
-                        </div>
-                        <div className="tirgger">
-                            <Trigger selectedPointData={selectedPointData as any} type={'StorageUnit'} />
-                        </div>
+                        )}
                    </section>
                </>
            )}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -13,7 +13,7 @@ import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 type TriggerProps = {
    selectedPointData?: PointsScheme | undefined;
-    type?: "Conveyor" | "Vehicle" | "RoboticArm" | "Machine" | "StorageUnit" | "Human";
+    type?: "Conveyor" | "Vehicle" | "RoboticArm" | "Machine" | "StorageUnit" | "Human" | "Crane";
 };

 const Trigger = ({ selectedPointData, type }: TriggerProps) => {
@@ -36,9 +36,9 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {

        let actionUuid: string | undefined;

-        if (type === "Conveyor" || type === "Vehicle" || type === "Machine" || type === "StorageUnit") {
-            actionUuid = (selectedPointData as | ConveyorPointSchema | VehiclePointSchema | MachinePointSchema | StoragePointSchema).action?.actionUuid;
-        } else if ((type === "RoboticArm" || type === "Human") && selectedAction.actionId) {
+        if (type === "Conveyor" || type === "Vehicle" || type === "Machine") {
+            actionUuid = (selectedPointData as | ConveyorPointSchema | VehiclePointSchema | MachinePointSchema).action?.actionUuid;
+        } else if ((type === "RoboticArm" || type === "Human" || type === "StorageUnit" || type === 'Crane') && selectedAction.actionId) {
            actionUuid = selectedAction.actionId;
        }