feat: Enhance asset and human event handling with animation and loop capabilities

app/src/components/layout/sidebarRight/properties/AssetProperties.tsx

@@ -6,145 +6,128 @@ import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
 import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
 import { useSceneContext } from "../../../../modules/scene/sceneContext";
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 
 interface UserData {
-  id: number; // Unique identifier for the user data
-  label: string; // Label of the user data field
-  value: string; // Value of the user data field
+    id: number;
+    label: string;
+    value: string;
 }
 
 const AssetProperties: React.FC = () => {
-  const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
-  const [nextId, setNextId] = useState(1); // Unique ID for new entries
-  const { selectedFloorItem } = useSelectedFloorItem();
-  const { objectPosition } = useObjectPosition();
-  const { objectRotation } = useObjectRotation();
-  const { assetStore } = useSceneContext();
-  const { assets, setCurrentAnimation } = assetStore()
-  const [hoveredIndex, setHoveredIndex] = useState<any>(null);
-  const [isPlaying, setIsplaying] = useState(false);
-  // Function to handle adding new user data
-  const handleAddUserData = () => {
-    const newUserData: UserData = {
-      id: nextId,
-      label: `Property ${nextId}`,
-      value: "",
+    const [userData, setUserData] = useState<UserData[]>([]);
+    const { selectedFloorItem } = useSelectedFloorItem();
+    const { objectPosition } = useObjectPosition();
+    const { objectRotation } = useObjectRotation();
+    const { assetStore } = useSceneContext();
+    const { assets, setCurrentAnimation } = assetStore();
+    const { loopAnimation } = useBuilderStore();
+    const [hoveredIndex, setHoveredIndex] = useState<any>(null);
+
+    const handleAddUserData = () => {
     };
-    setUserData([...userData, newUserData]);
-    setNextId(nextId + 1); // Increment the ID for the next entry
-  };
 
-  // Function to update the value of a user data entry
-  const handleUserDataChange = (id: number, newValue: string) => {
-    setUserData((prevUserData) =>
-      prevUserData.map((data) =>
-        data.id === id ? { ...data, value: newValue } : data
-      )
-    );
-  };
+    const handleUserDataChange = (id: number, newValue: string) => {
+    };
 
-  // Remove user data
-  const handleRemoveUserData = (id: number) => {
-    setUserData((prevUserData) =>
-      prevUserData.filter((data) => data.id !== id)
-    );
-  };
+    const handleRemoveUserData = (id: number) => {
+    };
 
-  const handleAnimationClick = (animation: string) => {
-    if (selectedFloorItem) {
-      setCurrentAnimation(selectedFloorItem.uuid, animation, true);
+    const handleAnimationClick = (animation: string) => {
+        if (selectedFloorItem) {
+            setCurrentAnimation(selectedFloorItem.uuid, animation, true, loopAnimation);
+        }
     }
-  }
 
-  if (!selectedFloorItem) return null;
+    if (!selectedFloorItem) return null;
 
-  return (
-    <div className="asset-properties-container">
-      {/* Name */}
-      <div className="header">{selectedFloorItem.userData.modelName}</div>
-      <section>
-        {objectPosition.x && objectPosition.z &&
-          <PositionInput
-            onChange={() => { }}
-            value1={parseFloat(objectPosition.x.toFixed(5))}
-            value2={parseFloat(objectPosition.z.toFixed(5))}
-          />
-        }
-        {objectRotation.y &&
-          <RotationInput
-            onChange={() => { }}
-            value={parseFloat(objectRotation.y.toFixed(5))}
-          />
-        }
-      </section>
+    return (
+        <div className="asset-properties-container">
+            {/* Name */}
+            <div className="header">{selectedFloorItem.userData.modelName}</div>
+            <section>
+                {objectPosition &&
+                    <PositionInput
+                        onChange={() => { }}
+                        value1={parseFloat(objectPosition.x.toFixed(5))}
+                        value2={parseFloat(objectPosition.z.toFixed(5))}
+                    />
+                }
+                {objectRotation &&
+                    <RotationInput
+                        onChange={() => { }}
+                        value={parseFloat(objectRotation.y.toFixed(5))}
+                    />
+                }
+            </section>
 
-      <section>
-        <div className="header">Render settings</div>
-        <InputToggle inputKey="visible" label="Visible" />
-        <InputToggle inputKey="frustumCull" label="Frustum cull" />
-      </section>
+            <section>
+                <div className="header">Render settings</div>
+                <InputToggle inputKey="visible" label="Visible" />
+                <InputToggle inputKey="frustumCull" label="Frustum cull" />
+            </section>
 
-      <section>
-        <div className="header">User Data</div>
-        {userData.map((data) => (
-          <div className="input-container">
-            <InputWithDropDown
-              key={data.id}
-              label={data.label}
-              value={data.value}
-              editableLabel
-              onChange={(newValue) => handleUserDataChange(data.id, newValue)} // Pass the change handler
-            />
-            <div
-              className="remove-button"
-              onClick={() => handleRemoveUserData(data.id)}
-            >
-              <RemoveIcon />
-            </div>
-          </div>
-        ))}
+            <section>
+                <div className="header">User Data</div>
+                {userData.map((data) => (
+                    <div className="input-container">
+                        <InputWithDropDown
+                            key={data.id}
+                            label={data.label}
+                            value={data.value}
+                            editableLabel
+                            onChange={(newValue) => handleUserDataChange(data.id, newValue)}
+                        />
+                        <div
+                            className="remove-button"
+                            onClick={() => handleRemoveUserData(data.id)}
+                        >
+                            <RemoveIcon />
+                        </div>
+                    </div>
+                ))}
 
-        {/* Add new user data */}
-        <div className="optimize-button" onClick={handleAddUserData}>
-          + Add
-        </div>
-      </section>
-      <div style={{ display: "flex", flexDirection: "column", outline: "1px solid var(--border-color)" }}>
-        {selectedFloorItem.uuid && <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>Animations</div>}
-        {assets.map((asset) => (
-          <div key={asset.modelUuid} className="asset-item">
-            {asset.modelUuid === selectedFloorItem.uuid &&
-              asset.animations &&
-              asset.animations.length > 0 &&
-              asset.animations.map((animation, index) => (
-                <div
-                  key={index}
-                  style={{ gap: "15px", cursor: "pointer", padding: "5px" }}
-                >
-                  <div
-                    onClick={() => handleAnimationClick(animation)}
-                    onMouseEnter={() => setHoveredIndex(index)}
-                    onMouseLeave={() => setHoveredIndex(null)}
-                    style={{
-                      height: "20px",
-                      width: "100%",
-                      borderRadius: "5px",
-                      background:
-                        hoveredIndex === index
-                          ? "#7b4cd3"
-                          : "transparent",
-                    }}
-                  >
-                    {animation.charAt(0).toUpperCase() +
-                      animation.slice(1).toLowerCase()}
-                  </div>
+                {/* Add new user data */}
+                <div className="optimize-button" onClick={handleAddUserData}>
+                    + Add
                 </div>
-              ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+            </section>
+            <div style={{ display: "flex", flexDirection: "column", outline: "1px solid var(--border-color)" }}>
+                {selectedFloorItem.uuid && <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>Animations</div>}
+                {assets.map((asset) => (
+                    <div key={asset.modelUuid} className="asset-item">
+                        {asset.modelUuid === selectedFloorItem.uuid &&
+                            asset.animations &&
+                            asset.animations.length > 0 &&
+                            asset.animations.map((animation, index) => (
+                                <div
+                                    key={index}
+                                    style={{ gap: "15px", cursor: "pointer", padding: "5px" }}
+                                >
+                                    <div
+                                        onClick={() => handleAnimationClick(animation)}
+                                        onMouseEnter={() => setHoveredIndex(index)}
+                                        onMouseLeave={() => setHoveredIndex(null)}
+                                        style={{
+                                            height: "20px",
+                                            width: "100%",
+                                            borderRadius: "5px",
+                                            background:
+                                                hoveredIndex === index
+                                                    ? "#7b4cd3"
+                                                    : "transparent",
+                                        }}
+                                    >
+                                        {animation.charAt(0).toUpperCase() +
+                                            animation.slice(1).toLowerCase()}
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
 };
 
 export default AssetProperties;