Refactor StorageAction and StorageMechanics: add currentMaterialType prop, enhance material type handling, and improve capacity change logic

app/src/components/layout/sidebarRight/properties/eventProperties/actions/StorageAction.tsx

@@ -8,11 +8,12 @@ interface StorageActionProps {
     min: number;
     max: number;
     defaultValue: string;
+    currentMaterialType: string;
     handleCapacityChange: (value: string) => void;
     handleMaterialTypeChange: (value: string) => void;
 }
 
-const StorageAction: React.FC<StorageActionProps> = ({ type, value, min, max, defaultValue, handleCapacityChange, handleMaterialTypeChange }) => {
+const StorageAction: React.FC<StorageActionProps> = ({ type, value, min, max, defaultValue, currentMaterialType, handleCapacityChange, handleMaterialTypeChange }) => {
     return (
         <>
             {type === 'store' &&
@@ -42,7 +43,8 @@ const StorageAction: React.FC<StorageActionProps> = ({ type, value, min, max, de
                         onChange={handleCapacityChange}
                     />
                     <LabledDropdown
-                        defaultOption={""}
+                        label={"Material Type"}
+                        defaultOption={currentMaterialType}
                         options={["Default material", "Material 1", "Material 2", "Material 3"]}
                         onSelect={handleMaterialTypeChange}
                     />

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx

@@ -17,7 +17,11 @@ function StorageMechanics() {
     const { getPointByUuid, updateAction } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
     const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-    const { setCurrentMaterials, clearCurrentMaterials, updateStorageUnitLoad, } = useStorageUnitStore();
+    const {
+        setCurrentMaterials,
+        clearCurrentMaterials,
+        updateStorageUnitLoad,
+    } = useStorageUnitStore();
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
@@ -72,7 +76,12 @@ function StorageMechanics() {
         }
 
         if (validOption === "spawn") {
+            clearCurrentMaterials(selectedEventData.data.modelUuid);
+            updateStorageUnitLoad(selectedEventData.data.modelUuid, selectedPointData.action.storageCapacity);
         } else {
+            const materialType = selectedPointData.action.materialType || "default";
+
+            updateStorageUnitLoad(selectedEventData.data.modelUuid, selectedPointData.action.storageCapacity);
         }
     };
 
@@ -91,7 +100,7 @@ function StorageMechanics() {
     };
 
     const handleCapacityChange = (value: string) => {
-        if (!selectedPointData) return;
+        if (!selectedEventData || !selectedPointData) return;
         const newCapacity = parseInt(value);
 
         const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
@@ -106,17 +115,58 @@ function StorageMechanics() {
                 event
             );
 
-            if (activeOption === "spawn") {
+            if (activeOption === "store") {
+                const materialType = selectedPointData.action.materialType || "default";
+
+                updateStorageUnitLoad(selectedEventData.data.modelUuid, newCapacity);
             }
         }
     };
 
+    const createNewMaterial = (materialType: string): MaterialSchema | null => {
+        if (!selectedEventData || !selectedPointData) return null;
+        const materialId = THREE.MathUtils.generateUUID();
+        return {
+            materialId,
+            materialName: `${materialType}-${Date.now()}`,
+            materialType,
+            isActive: false,
+            isVisible: true,
+            isPaused: false,
+            isRendered: true,
+            startTime: performance.now(),
+            current: {
+                modelUuid: selectedEventData.data.modelUuid || '',
+                pointUuid: selectedPointData?.uuid || '',
+                actionUuid: selectedPointData?.action.actionUuid || ''
+            },
+            endTime: undefined,
+            previous: undefined,
+            next: null
+        };
+    };
+
     const handleMaterialTypeChange = (value: string) => {
-        if (!selectedPointData) return;
+        if (!selectedEventData || !selectedPointData) return;
 
+        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+            materialType: value,
+        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+
+            if (activeOption === "store") {
+                const capacity = selectedPointData.action.storageCapacity || 0;
+            }
+        }
     };
 
-    // Get current values from store
     const currentActionName = selectedPointData
         ? selectedPointData.action.actionName
         : "Action Name";
@@ -125,6 +175,8 @@ function StorageMechanics() {
         ? selectedPointData.action.storageCapacity.toString()
         : "0";
 
+    const currentMaterialType = selectedPointData?.action.materialType || "default";
+
     const availableActions = {
         defaultOption: "store",
         options: ["store", "spawn"],
@@ -156,6 +208,7 @@ function StorageMechanics() {
                                 defaultValue="0"
                                 min={0}
                                 max={20}
+                                currentMaterialType={currentMaterialType}
                                 handleCapacityChange={handleCapacityChange}
                                 handleMaterialTypeChange={handleMaterialTypeChange}
                             />