first commit

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

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import InputToggle from "../../../ui/inputs/InputToggle";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { RemoveIcon } from "../../../icons/ExportCommonIcons";
+import PositionInput from "../customInput/PositionInputs";
+import RotationInput from "../customInput/RotationInput";
+
+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
+}
+
+const AssetProperties: React.FC = () => {
+  const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
+  const [nextId, setNextId] = useState(1); // Unique ID for new entries
+
+  // Function to handle adding new user data
+  const handleAddUserData = () => {
+    const newUserData: UserData = {
+      id: nextId,
+      label: `Property ${nextId}`,
+      value: "",
+    };
+    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
+      )
+    );
+  };
+
+  // Remove user data
+  const handleRemoveUserData = (id: number) => {
+    setUserData((prevUserData) =>
+      prevUserData.filter((data) => data.id !== id)
+    );
+  };
+
+  return (
+    <div className="asset-properties-container">
+      <div className="header">Selected Object</div>
+
+      <div className="split"></div>
+
+      <PositionInput onChange={() => {}} />
+      <RotationInput onChange={() => {}} />
+
+      <div className="split"></div>
+
+      <InputToggle inputKey="visible" label="Visible" />
+      <InputToggle inputKey="frustumCull" label="Frustum cull" />
+
+      <div className="header">User Data</div>
+
+      {/* Map through userData and render InputWithDropDown for each entry */}
+      {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>
+      ))}
+
+      {/* Add new user data */}
+      <div className="optimize-button" onClick={handleAddUserData}>
+        + Add
+      </div>
+    </div>
+  );
+};
+
+export default AssetProperties;

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

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import InputRange from "../../../ui/inputs/InputRange";
+import InputToggle from "../../../ui/inputs/InputToggle";
+import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import LabeledButton from "../../../ui/inputs/LabledButton";
+
+const GlobalProperties: React.FC = () => {
+  const [limitDistance, setLimitDistance] = useState(false);
+  const [distance, setDistance] = useState<number>(5);
+
+  const [limitGridDistance, setLimitGridDistance] = useState(false);
+  const [gridDistance, setGridDistance] = useState<number>(5);
+
+  function optimizeScene() {
+    setLimitDistance(true);
+    setDistance(5);
+  }
+
+  function updateDistance(value: number) {
+    setDistance(value);
+  }
+
+  function updateGridDistance(value: number) {
+    setGridDistance(value);
+  }
+
+  return (
+    <div className="global-properties-container">
+      <div className="header">Environment</div>
+      <div className="optimize-button" onClick={optimizeScene}>
+        <AI_Icon />
+        Optimize
+      </div>
+
+      <div className="split"></div>
+
+      <InputToggle inputKey="1" label="Roof Visibility" />
+      <InputToggle inputKey="2" label="Wall Visibility" />
+      <InputToggle inputKey="3" label="Shadows Visibility" />
+      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
+
+      <div className="split"></div>
+
+      <InputToggle
+        inputKey="4"
+        label="Limit Render Distance"
+        value={limitDistance}
+        onClick={() => {
+          setLimitDistance(!limitDistance);
+        }}
+      />
+      <InputRange
+        label="Distance"
+        disabled={!limitDistance}
+        value={distance}
+        key={"5"}
+        onChange={(value: number) => updateDistance(value)}
+      />
+
+      <div className="split"></div>
+
+      <InputToggle
+        inputKey="6"
+        label="Display Grid"
+        value={limitGridDistance}
+        onClick={() => {
+          setLimitGridDistance(!limitGridDistance);
+        }}
+      />
+      <InputRange
+        label="Tile Distance"
+        disabled={!limitGridDistance}
+        value={gridDistance}
+        key={"7"}
+        onChange={(value: number) => updateGridDistance(value)}
+      />
+    </div>
+  );
+};
+
+export default GlobalProperties;