Add scene context and animation handling to AssetProperties and Model components

- Enhanced animation handling in Model component with animation state management.
- Updated useAssetStore to support multiple animations for assets.

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -31,6 +31,7 @@ import AisleProperties from "./properties/AisleProperties";
 import WallProperties from "./properties/WallProperties";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 import SelectedWallProperties from "./properties/SelectedWallProperties";
+import { useSceneContext } from "../../../modules/scene/sceneContext";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
@@ -38,12 +39,15 @@ const SideBarRight: React.FC = () => {
   const { toolMode } = useToolMode();
   const { subModule, setSubModule } = useSubModuleStore();
   const { selectedFloorItem } = useSelectedFloorItem();
+
   const { selectedWall } = useBuilderStore();
   const { selectedEventData } = useSelectedEventData();
   const { selectedEventSphere } = useSelectedEventSphere();
   const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
   const { isVersionSaved } = useSaveVersion();
 
+
+
   // Reset activeList whenever activeModule changes
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
@@ -142,6 +146,8 @@ const SideBarRight: React.FC = () => {
             </div>
           )}
 
+
+
           {/* process builder */}
           {!viewVersionHistory &&
             subModule === "properties" &&
@@ -170,6 +176,7 @@ const SideBarRight: React.FC = () => {
               <div className="sidebar-right-container">
                 <div className="sidebar-right-content-container">
                   <AssetProperties />
+
                 </div>
               </div>
             )}
@@ -224,6 +231,7 @@ const SideBarRight: React.FC = () => {
                 )}
               </>
             )}
+
           {/* realtime visualization */}
           {activeModule === "visualization" && <Visualization />}
         </>

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

@@ -5,6 +5,7 @@ import { RemoveIcon } from "../../../icons/ExportCommonIcons";
 import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
 import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";
 
 interface UserData {
   id: number; // Unique identifier for the user data
@@ -18,6 +19,9 @@ const AssetProperties: React.FC = () => {
   const { selectedFloorItem } = useSelectedFloorItem();
   const { objectPosition } = useObjectPosition();
   const { objectRotation } = useObjectRotation();
+  const { assetStore } = useSceneContext();
+  const { assets, setCurrentAnimation } = assetStore()
+
   // Function to handle adding new user data
   const handleAddUserData = () => {
     const newUserData: UserData = {
@@ -45,6 +49,12 @@ const AssetProperties: React.FC = () => {
     );
   };
 
+  const handleAnimationClick = (animation: string) => {
+    if (selectedFloorItem) {
+      const isPlaying = selectedFloorItem.animationState?.playing || false;
+      setCurrentAnimation(selectedFloorItem.uuid, animation, !isPlaying);
+    }
+  }
   return (
     <div className="asset-properties-container">
       {/* Name */}
@@ -96,6 +106,22 @@ const AssetProperties: React.FC = () => {
           + Add
         </div>
       </section>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {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} className="animation-item" style={{ gap: "5px" }} onClick={() => { handleAnimationClick(animation) }}>
+                  {animation}
+                </div>
+              ))
+            }
+
+          </div>
+        ))}
+      </div>
     </div>
   );
 };