99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import React, { useEffect, 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";
|
|
import { useselectedFloorItem } from "../../../../store/store";
|
|
import * as THREE from "three";
|
|
|
|
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
|
|
const { selectedFloorItem } = useselectedFloorItem();
|
|
// 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">
|
|
{/* Name */}
|
|
<div className="header">{selectedFloorItem.userData.name}</div>
|
|
|
|
<PositionInput
|
|
onChange={() => {}}
|
|
value1={selectedFloorItem.position.x.toFixed(5)}
|
|
value2={selectedFloorItem.position.z.toFixed(5)}
|
|
/>
|
|
<RotationInput
|
|
onChange={() => {}}
|
|
value={parseFloat(
|
|
THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
|
|
)}
|
|
/>
|
|
|
|
<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;
|