import React, { useEffect, useState } from "react"; import InputRange from "../../../ui/inputs/InputRange"; import InputToggle from "../../../ui/inputs/InputToggle"; import { AIIcon } from "../../../icons/ExportCommonIcons"; import LabeledButton from "../../../ui/inputs/LabledButton"; import { useAzimuth, useElevation, useLimitDistance, useRenderDistance, useResetCamera, useRoofVisibility, useSelectedWallItem, useShadows, useSocketStore, useTileDistance, useToggleView, useWallVisibility, } from "../../../../store/builder/store"; import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment"; import * as CONSTANTS from "../../../../types/world/worldConstants"; import { useParams } from "react-router-dom"; const GlobalProperties: React.FC = () => { const { toggleView, setToggleView } = useToggleView(); const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem(); const { roofVisibility, setRoofVisibility } = useRoofVisibility(); const { wallVisibility, setWallVisibility } = useWallVisibility(); const { shadows, setShadows } = useShadows(); const { resetCamera, setResetCamera } = useResetCamera(); const { elevation, setElevation } = useElevation(); const { azimuth, setAzimuth } = useAzimuth(); const { renderDistance, setRenderDistance } = useRenderDistance(); const { setPlaneValue, setGridValue, planeValue, gridValue } = useTileDistance(); const { socket } = useSocketStore(); const { limitDistance, setLimitDistance } = useLimitDistance(); const [distance, setDistance] = useState(40); const [limitGridDistance, setLimitGridDistance] = useState(false); const [gridDistance, setGridDistance] = useState(3); const { projectId } = useParams(); const optimizeScene = async (value: any) => { const email = localStorage.getItem("email"); const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; const data = await setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, roofVisibility, shadows, 30, true, projectId ); setRenderDistance(30); setLimitDistance(true); }; const limitRenderDistance = async () => { const email = localStorage.getItem("email"); const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; if (limitDistance) { let data = await setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, roofVisibility, shadows, 75, !limitDistance, projectId ); setRenderDistance(75); } else { let data = await setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, roofVisibility, shadows, renderDistance, !limitDistance, projectId ); } setLimitDistance(!limitDistance); }; function updateDistance(value: number) { setDistance(value); setRenderDistance(value); } function updateGridDistance(value: number) { setGridDistance(value); // setGridValue({ size: value * 100, divisions: (value * 100) / 4 }); // setPlaneValue({ height: value * 100, width: value * 100 }); } function updatedGrid(value: number) { // console.log(" (value * 100) / 4 : ", (value * 100) / 4); setGridValue({ size: value * 100, divisions: (value * 100) / 4 }); setPlaneValue({ height: value * 100, width: value * 100 }); } const updatedDist = async (value: number) => { const email = localStorage.getItem("email"); const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; setRenderDistance(value); // setDistance(value); const data = await setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, roofVisibility, shadows, value, limitDistance, projectId ); }; // Function to toggle roof visibility const changeRoofVisibility = async () => { const email = localStorage.getItem("email"); const organization = email!.split("@")[1].split(".")[0]; //using REST const data = await setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, !roofVisibility, shadows, renderDistance, limitDistance, projectId ); // //using Socket // const visData = { // organization: organization, // userId: localStorage.getItem('userId')!, // wallVisibility: wallVisibility, // roofVisibility: !roofVisibility, // shadowVisibility: shadows, // socketId: socket.id // }; // socket.emit('v1:Environment:set', visData) setRoofVisibility(!roofVisibility); // Toggle roof visibility }; // Function to toggle wall visibility const changeWallVisibility = async () => { const email = localStorage.getItem("email"); const organization = email!.split("@")[1].split(".")[0]; //using REST const data = await setEnvironment( organization, localStorage.getItem("userId")!, !wallVisibility, roofVisibility, shadows, renderDistance, limitDistance,projectId ); // //using Socket // const visData = { // organization: organization, // userId: localStorage.getItem('userId')!, // wallVisibility: !wallVisibility, // roofVisibility: roofVisibility, // shadowVisibility: shadows, // socketId: socket.id // }; // socket.emit('v1:Environment:set', visData) setWallVisibility(!wallVisibility); // Toggle wall visibility }; const shadowVisibility = async () => { const email = localStorage.getItem("email"); const organization = email!.split("@")[1].split(".")[0]; //using REST const data = await setEnvironment( organization, localStorage.getItem("userId")!, wallVisibility, roofVisibility, !shadows, renderDistance, limitDistance, projectId ); // //using Socket // const visData = { // organization: organization, // userId: localStorage.getItem('userId')!, // wallVisibility: wallVisibility, // roofVisibility: roofVisibility, // shadowVisibility: !shadows, // socketId: socket.id // }; // socket.emit('v1:Environment:set', visData) setShadows(!shadows); }; const toggleResetCamera = () => { if (!toggleView) { setResetCamera(true); // Trigger reset camera action } }; // function changeRenderDistance(e: any) { // if (parseInt(e.target.value) < 20) { // setRenderDistance(20); // } else if (parseInt(e.target.value) > 75) { // setRenderDistance(75); // } else { // setRenderDistance(parseInt(e.target.value)); // } // } return (
Environment
Optimize
{/* */}
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */} { // setLimitDistance(!limitDistance); // // setDistance(75); // // setRenderDistance(75); // }} onClick={async () => { await limitRenderDistance(); // Call the function here }} /> updateDistance(value)} onPointerUp={updatedDist} key={"6"} /> {/*
{ setLimitGridDistance(!limitGridDistance); }} /> updateGridDistance(value)} onPointerUp={updatedGrid} /> */}
); }; export default GlobalProperties;