refactor: optimized contextmenu, style update, ui bug fixes

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

@@ -4,130 +4,134 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { RemoveIcon } from "../../../icons/ExportCommonIcons";
 import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
-import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
+import {
+  useSelectedFloorItem,
+  useObjectPosition,
+  useObjectRotation,
+} from "../../../../store/builder/store";
 import { useSceneContext } from "../../../../modules/scene/sceneContext";
 import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 
 interface UserData {
-    id: number;
-    label: string;
-    value: string;
+  id: number;
+  label: string;
+  value: string;
 }
 
 const AssetProperties: React.FC = () => {
-    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 [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 = () => {
-    };
+  const handleAddUserData = () => {
+    setUserData([]);
+  };
 
-    const handleUserDataChange = (id: number, newValue: string) => {
-    };
+  const handleUserDataChange = (id: number, newValue: string) => {};
 
-    const handleRemoveUserData = (id: number) => {
-    };
+  const handleRemoveUserData = (id: number) => {};
 
-    const handleAnimationClick = (animation: string) => {
-        if (selectedFloorItem) {
-            setCurrentAnimation(selectedFloorItem.uuid, animation, true, loopAnimation, true);
-        }
+  const handleAnimationClick = (animation: string) => {
+    if (selectedFloorItem) {
+      setCurrentAnimation(
+        selectedFloorItem.uuid,
+        animation,
+        true,
+        loopAnimation,
+        true
+      );
     }
+  };
 
-    if (!selectedFloorItem) return null;
+  if (!selectedFloorItem) return null;
 
-    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>
+  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>
+      <div className="header">Render settings</div>
+      <section>
+        <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)}
-                        />
-                        <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>
-                                </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 className="header">Animations</div>
+      <section className="animations-lists">
+        {assets.map((asset) => (
+          <>
+            {asset.modelUuid === selectedFloorItem.uuid &&
+              asset.animations &&
+              asset.animations.length > 0 &&
+              asset.animations.map((animation, index) => (
+                <div key={index} className="animations-list-wrapper">
+                  <div
+                    onClick={() => handleAnimationClick(animation)}
+                    onMouseEnter={() => setHoveredIndex(index)}
+                    onMouseLeave={() => setHoveredIndex(null)}
+                    className="animations-list"
+                    style={{
+                      background:
+                        hoveredIndex === index
+                          ? "#7b4cd3"
+                          : "var(--background-color)",
+                    }}
+                  >
+                    {animation.charAt(0).toUpperCase() +
+                      animation.slice(1).toLowerCase()}
+                  </div>
+                </div>
+              ))}
+          </>
+        ))}
+      </section>
+    </div>
+  );
 };
 
 export default AssetProperties;